ded939e643
Implemented 8 production-ready form components with full accessibility: Components Added: - Textarea: Multi-line text input with character counter - Checkbox: Custom styled with indeterminate state support - Radio & RadioGroup: Context-based radio button groups - Switch: Toggle with animated thumb and loading state - Select: Native select with custom styling and option groups - Slider: Range input with marks, value display, cross-browser support - FormField: Wrapper component with label, error, and helper text Features: - Full accessibility (ARIA attributes, semantic HTML) - Controlled/uncontrolled patterns via useControlled hook - Dark mode support with semantic tokens - Design tokens and shared variant system - Comprehensive test coverage (856 tests passing) - Form-specific design tokens (formTokens) - Shared form variant base classes (formVariants) Playground Updates: - Added comprehensive Forms section showcasing all components - Interactive examples with state management - Complete form composition example - All components fully functional and themed Test Coverage: - 10+ describe blocks per component - All edge cases covered - Accessibility testing - Cross-browser compatibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
107 lines
1.8 KiB
TypeScript
107 lines
1.8 KiB
TypeScript
import { createVariants } from '../system/variants';
|
|
import {
|
|
formErrorMessage,
|
|
formHelperBase,
|
|
formLabelBase,
|
|
formRequiredIndicator,
|
|
} from '../system/formVariants';
|
|
|
|
/**
|
|
* FormField container variants
|
|
*/
|
|
export const formFieldVariants = createVariants({
|
|
base: ['flex'].join(' '),
|
|
|
|
variants: {
|
|
orientation: {
|
|
vertical: 'flex-col',
|
|
horizontal: 'flex-row items-center gap-4',
|
|
},
|
|
|
|
disabled: {
|
|
true: 'opacity-60 cursor-not-allowed',
|
|
false: '',
|
|
},
|
|
},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {
|
|
orientation: 'vertical',
|
|
disabled: 'false',
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Label variants (reusing form label base)
|
|
*/
|
|
export const formFieldLabelVariants = createVariants({
|
|
base: [formLabelBase].join(' '),
|
|
|
|
variants: {
|
|
state: {
|
|
default: 'text-foreground',
|
|
error: 'text-error',
|
|
success: 'text-success',
|
|
},
|
|
|
|
disabled: {
|
|
true: 'cursor-not-allowed',
|
|
false: '',
|
|
},
|
|
},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {
|
|
state: 'default',
|
|
disabled: 'false',
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Required indicator variants
|
|
*/
|
|
export const formFieldRequiredVariants = createVariants({
|
|
base: [formRequiredIndicator].join(' '),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|
|
|
|
/**
|
|
* Helper text variants
|
|
*/
|
|
export const formFieldHelperVariants = createVariants({
|
|
base: [formHelperBase].join(' '),
|
|
|
|
variants: {
|
|
state: {
|
|
default: 'text-foreground-secondary',
|
|
error: 'text-foreground-secondary',
|
|
success: 'text-success',
|
|
},
|
|
},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {
|
|
state: 'default',
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Error message variants
|
|
*/
|
|
export const formFieldErrorVariants = createVariants({
|
|
base: [formErrorMessage].join(' '),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|