@boostdev/design-system-components 1.0.3 → 1.1.0

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from '../Checkbox';
 import { CheckboxGroup } from './CheckboxGroup';
 
 const meta = {
-  title: 'Form/CheckboxGroup',
+  title: 'React/Form/CheckboxGroup',
   component: CheckboxGroup,
 } satisfies Meta<typeof CheckboxGroup>;
 

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx

@@ -2,15 +2,15 @@ import { ReactNode, useId } from 'react';
 import css from './CheckboxGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-export interface CheckboxGroupProps {
+export interface CheckboxGroupProps extends WithClassName {
   legend: string;
   children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
   disabled?: boolean;
-  className?: string;
 }
 
 export function CheckboxGroup({

package/src/components/interaction/form/Combobox/Combobox.mdx

@@ -29,6 +29,27 @@ Searchable select with type-ahead filtering. Combines a text input with a dropdo
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--combobox_color_bg`</td><td>`var(--bds-color_bg)`</td><td>Input background colour</td></tr>
+<tr><td>`--combobox_color`</td><td>`var(--bds-color_on-bg)`</td><td>Input text colour</td></tr>
+<tr><td>`--combobox_border`</td><td>`none`</td><td>Input border</td></tr>
+<tr><td>`--combobox_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Input corner radius</td></tr>
+<tr><td>`--combobox_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Input box shadow</td></tr>
+<tr><td>`--combobox_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Dropdown list text colour</td></tr>
+<tr><td>`--combobox_listbox-border`</td><td>`none`</td><td>Dropdown list border</td></tr>
+<tr><td>`--combobox_listbox-radius`</td><td>`var(--bdc-outline_radius)`</td><td>Dropdown list corner radius</td></tr>
+<tr><td>`--combobox_listbox-shadow`</td><td>`var(--bds-shadow_m)`</td><td>Dropdown list box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Input uses `role="combobox"` with `aria-autocomplete="list"` and `aria-controls`

package/src/components/interaction/form/Combobox/Combobox.module.css

@@ -98,7 +98,7 @@
 
   .option.--highlighted {
     background-color: var(--bds-color_bg--subtle);
-    color: var(--bds-color_interactive);
+    color: var(--bds-color_interactive_on-bg);
   }
 
   .option.--selected {

package/src/components/interaction/form/Combobox/Combobox.stories.tsx

@@ -12,7 +12,7 @@ const options = [
 ];
 
 const meta = {
-  title: 'Form/Combobox',
+  title: 'React/Form/Combobox',
   component: Combobox,
 } satisfies Meta<typeof Combobox>;
 

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -13,6 +13,7 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
 export interface ComboboxOption {
   value: string;
@@ -20,7 +21,7 @@ export interface ComboboxOption {
   disabled?: boolean;
 }
 
-interface ComboboxProps {
+interface ComboboxProps extends WithClassName {
   label: ReactNode;
   name: string;
   options: ComboboxOption[];
@@ -30,7 +31,6 @@ interface ComboboxProps {
   disabled?: boolean;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Combobox({

package/src/components/interaction/form/FileInput/FileInput.mdx

@@ -31,6 +31,20 @@ File upload input with styled trigger button, hint, and error support.
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--fileInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--fileInput_border-color`</td><td>`currentcolor`</td><td>Drop zone border colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Native `<input type="file">` — opens the OS file picker

package/src/components/interaction/form/FileInput/FileInput.module.css

@@ -59,7 +59,7 @@
   }
 
   .prompt strong {
-    color: var(--bds-color_interactive);
+    color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
 

package/src/components/interaction/form/FileInput/FileInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { FileInput } from './FileInput';
 
 const meta = {
-  title: 'Form/FileInput',
+  title: 'React/Form/FileInput',
   component: FileInput,
 } satisfies Meta<typeof FileInput>;
 

package/src/components/interaction/form/FileInput/FileInput.tsx

@@ -3,8 +3,9 @@ import css from './FileInput.module.css';
 import { Message } from '../atoms/Message';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface FileInputProps {
+interface FileInputProps extends WithClassName {
   label: string;
   name: string;
   accept?: string;
@@ -14,7 +15,6 @@ interface FileInputProps {
   error?: string;
   hint?: string;
   onChange?: (files: FileList | null) => void;
-  className?: string;
 }
 
 export function FileInput({

package/src/components/interaction/form/FormInput/FormInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { FormInput } from './FormInput';
 
 const meta = {
-  title: 'Form/FormInput',
+  title: 'React/Form/FormInput',
   component: FormInput,
 } satisfies Meta<typeof FormInput>;
 

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -4,15 +4,15 @@ import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
+import type { WithClassName } from '../../../../types';
 
-interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface FormInputProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
   type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
   ariaLabel?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function FormInput({

package/src/components/interaction/form/NumberInput/NumberInput.mdx

@@ -31,6 +31,22 @@ Numeric text input with increment/decrement stepper buttons. Enforces `min`, `ma
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--numberInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--numberInput_border`</td><td>`none`</td><td>Border</td></tr>
+<tr><td>`--numberInput_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Corner radius</td></tr>
+<tr><td>`--numberInput_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Renders `<input type="number">` — browser-native spinner support

package/src/components/interaction/form/NumberInput/NumberInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NumberInput } from './NumberInput';
 
 const meta = {
-  title: 'Form/NumberInput',
+  title: 'React/Form/NumberInput',
   component: NumberInput,
 } satisfies Meta<typeof NumberInput>;
 

package/src/components/interaction/form/NumberInput/NumberInput.tsx

@@ -4,8 +4,9 @@ import {Label} from '../atoms/Label';
 import {Message} from '../atoms/Message';
 import {InputContainer} from '../atoms/InputContainer';
 import {cn} from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface NumberInputProps {
+interface NumberInputProps extends WithClassName {
   label: string;
   name: string;
   value?: number;
@@ -17,7 +18,6 @@ interface NumberInputProps {
   error?: string;
   hint?: string;
   onChange?: (value: number) => void;
-  className?: string;
 }
 
 export function NumberInput({

package/src/components/interaction/form/Radio/Radio.mdx

@@ -46,9 +46,9 @@ Single-select option within a group. Renders a styled native `<input type="radio
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--radio_color-active`</td><td>`var(--bds-active)`</td><td>Selected fill and border colour</td></tr>
-<tr><td>`--radio_color-on-active`</td><td>`var(--bds-on-active)`</td><td>Inner dot colour</td></tr>
-<tr><td>`--radio_description-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Description text colour</td></tr>
+<tr><td>`--radio_color-active`</td><td>`var(--bdc-color_active)`</td><td>Selected fill and border colour</td></tr>
+<tr><td>`--radio_color-on-active`</td><td>`var(--bdc-color_on-active)`</td><td>Inner dot colour</td></tr>
+<tr><td>`--radio_description-color`</td><td>`var(--bds-color_on-bg--subtle)`</td><td>Description text colour</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/Radio/Radio.module.css

@@ -48,8 +48,8 @@
   }
 
   .radio:checked {
-    background-color: var(--radio_color-active, var(--bds-color_green));
-    --bdc_color: var(--radio_color-active, var(--bds-color_green));
+    background-color: var(--radio_color-active, var(--bdc-color_active));
+    --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
 
   .radio:checked::after {
@@ -61,7 +61,7 @@
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bds-color_on-green));
+    background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
   }
 
   .radio:focus {

package/src/components/interaction/form/Radio/Radio.native.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Radio } from './Radio.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Radio',
+  component: Radio,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = { args: { label: 'Option A', name: 'option', checked: false } };
+export const Checked: Story = { args: { label: 'Option A', name: 'option', checked: true } };
+export const Disabled: Story = { args: { label: 'Option A', name: 'option', disabled: true } };
+export const WithError: Story = {
+  args: { label: 'Option A', name: 'option', error: 'Please select an option.' },
+};
+export const WithHint: Story = {
+  args: { label: 'Option A', name: 'option', hint: 'This is the recommended option.' },
+};
+export const Group: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null);
+    const options = ['Option A', 'Option B', 'Option C'];
+    return (
+      <ThemeProvider>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {options.map(o => (
+            <Radio
+              key={o}
+              label={o}
+              name="group"
+              checked={selected === o}
+              onChange={() => setSelected(o)}
+            />
+          ))}
+        </div>
+      </ThemeProvider>
+    );
+  },
+};

package/src/components/interaction/form/Radio/Radio.native.tsx

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface RadioProps {
+  label: ReactNode;
+  name: string;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DOT = 22;
+const INNER = 10;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    minHeight: 44,
+  },
+  outer: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: INNER,
+    height: INNER,
+    borderRadius: INNER / 2,
+  },
+});
+
+export function Radio({
+  label,
+  name,
+  checked = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style,
+}: RadioProps) {
+  const { colors } = useTheme();
+  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorBgSubtle;
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        onPress={() => !disabled && onChange?.()}
+        accessibilityRole="radio"
+        accessibilityLabel={typeof label === 'string' ? label : name}
+        accessibilityState={{ checked, disabled }}
+        disabled={disabled}
+        style={({ pressed }) => [styles.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }]}
+      >
+        <View style={[styles.outer, { borderColor }]}>
+          {checked && <View style={[styles.inner, { backgroundColor: colors.colorInteractive }]} />}
+        </View>
+        <Label label={label} />
+      </Pressable>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Radio/Radio.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Radio } from './Radio';
 
 const meta = {
-  title: 'Form/Radio',
+  title: 'React/Form/Radio',
   component: Radio,
 } satisfies Meta<typeof Radio>;
 

package/src/components/interaction/form/Radio/Radio.tsx

@@ -4,14 +4,14 @@ import { Message } from '../atoms/Message';
 import { Label } from '../atoms/Label';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
   description?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Radio({ label, name, description, error, hint, className, ...props }: RadioProps) {

package/src/components/interaction/form/RadioGroup/RadioGroup.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './RadioGroup.stories';
+
+<Meta of={Stories} />
+
+# RadioGroup
+
+Groups multiple `Radio` inputs under a shared label. Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+
+## When to use
+- Mutually exclusive choices where exactly one option must be selected
+- Any time two or more radio buttons share a common question or label
+
+## When not to use
+- More than 6 options — use `Select` or `Combobox` to avoid overwhelming the user
+- Independent on/off choices — use `CheckboxGroup`
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Wraps radio buttons in a `<fieldset>` with a `<legend>` — screen readers announce the group label before each option
+- `disabled` on the group sets the HTML `disabled` attribute on the `<fieldset>`, which disables all child inputs
+- `aria-required` is set on the `<fieldset>` when `required` is true
+- Error and hint messages are linked via `aria-describedby`
+- Arrow keys move between options within the group; `Tab` moves focus out of the group

package/src/components/interaction/form/RadioGroup/RadioGroup.stories.tsx

@@ -3,7 +3,7 @@ import { Radio } from '../Radio';
 import { RadioGroup } from './RadioGroup';
 
 const meta = {
-  title: 'Form/RadioGroup',
+  title: 'React/Form/RadioGroup',
   component: RadioGroup,
 } satisfies Meta<typeof RadioGroup>;
 

package/src/components/interaction/form/RadioGroup/RadioGroup.tsx

@@ -2,15 +2,15 @@ import { ReactNode, useId } from 'react';
 import css from './RadioGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
-export interface RadioGroupProps {
+export interface RadioGroupProps extends WithClassName {
   legend: string;
   children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
   disabled?: boolean;
-  className?: string;
 }
 
 export function RadioGroup({

package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SegmentedControl } from './SegmentedControl';
 
 const meta = {
-  title: 'Form/SegmentedControl',
+  title: 'React/Form/SegmentedControl',
   component: SegmentedControl,
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },

package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes, ReactNode, useId, useState } from 'react';
 import css from './SegmentedControl.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../../types';
 
 export interface SegmentedControlOption {
   value: string;
@@ -9,7 +10,7 @@ export interface SegmentedControlOption {
 }
 
 export interface SegmentedControlProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+  extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
   name: string;
   options: SegmentedControlOption[];
   /** Controlled selected value */
@@ -19,7 +20,6 @@ export interface SegmentedControlProps
   onChange?: (value: string) => void;
   disabled?: boolean;
   size?: 'small' | 'medium' | 'large';
-  className?: string;
   'aria-label'?: string;
 }
 

package/src/components/interaction/form/Select/Select.stories.tsx

@@ -9,7 +9,7 @@ const options = [
 ];
 
 const meta = {
-  title: 'Form/Select',
+  title: 'React/Form/Select',
   component: Select,
 } satisfies Meta<typeof Select>;
 

package/src/components/interaction/form/Select/Select.tsx

@@ -4,6 +4,7 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
 export interface SelectOption {
   value: string;
@@ -11,14 +12,13 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+interface SelectProps extends WithClassName, Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
   label: ReactNode;
   name: string;
   options: SelectOption[];
   placeholder?: string;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Select({

package/src/components/interaction/form/Slider/Slider.mdx

@@ -46,7 +46,7 @@ Range input for selecting a numeric value within a bounded range.
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--slider_color-active`</td><td>`var(--bds-active)`</td><td>Filled track and thumb colour</td></tr>
+<tr><td>`--slider_color-active`</td><td>`var(--bdc-color_active)`</td><td>Filled track and thumb colour</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/Slider/Slider.module.css

@@ -29,8 +29,8 @@
     border-radius: 999px;
     background: linear-gradient(
       to right,
-      var(--slider_color-active, var(--bds-color_green)) 0%,
-      var(--slider_color-active, var(--bds-color_green)) var(--slider_fill),
+      var(--slider_color-active, var(--bdc-color_active)) 0%,
+      var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill),
       var(--bds-color_bg--subtle) var(--slider_fill),
       var(--bds-color_bg--subtle) 100%
     );
@@ -55,7 +55,7 @@
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
@@ -67,7 +67,7 @@
     height: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }

package/src/components/interaction/form/Slider/Slider.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Slider } from './Slider';
 
 const meta = {
-  title: 'Form/Slider',
+  title: 'React/Form/Slider',
   component: Slider,
 } satisfies Meta<typeof Slider>;
 

package/src/components/interaction/form/Slider/Slider.tsx

@@ -4,8 +4,9 @@ import { cn } from '@boostdev/design-system-foundation';
 import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import type { WithClassName } from '../../../../types';
 
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface SliderProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: string;
   name: string;
   min?: number;
@@ -13,7 +14,6 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
   showValue?: boolean;
   error?: string;
   hint?: string;
-  className?: string;
 }
 
 export function Slider({