@weichenlin/swell-ui 0.3.0 → 0.4.0

package/README.md

@@ -1,8 +1,8 @@
 # swell-ui
 
-Hand-built React 19 components styled with Tailwind CSS v4: Badge, Button, Card, Checkbox,
+Hand-built React 19 components styled with Tailwind CSS v4: Accordion, Badge, Button, Card, Checkbox,
 CheckboxGroup, Dialog, Drawer, Input (plus Search, Password and Copy), Meter, Select, Sidebar,
-Switch, Table, Tabs, TabNav, ThemeSwitcher, Toast and Tooltip.
+Slider, RangeSlider, Switch, Table, Tabs, TabNav, ThemeSwitcher, Toast and Tooltip.
 
 The package ships ESM, type declarations and two CSS files. Your app compiles the CSS with its own
 Tailwind v4, so the design tokens become your utilities too (`bg-primary`, `text-fg`, ...).
@@ -38,6 +38,72 @@ export function App() {
 }
 ```
 
+### Accordion
+
+Compose `Accordion`, `AccordionItem`, `AccordionTrigger`, and `AccordionContent`. Item values must
+be unique and non-empty; triggers contain non-interactive content and include their own heading.
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@weichenlin/swell-ui'
+
+;<Accordion defaultValue="project" variant="line" headingLevel={3}>
+  <AccordionItem value="project">
+    <AccordionTrigger description="Name and identity">Project</AccordionTrigger>
+    <AccordionContent>Project settings</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+Single mode uses `string | null`; `type="multiple"` uses `readonly string[]`. Use `value` with
+`onValueChange` for controlled state, or `defaultValue` for uncontrolled state. Single mode allows
+all panels to close by default; `collapsible={false}` prevents closing the open item. Change mode
+with a new React key. `variant="outline"` adds individual borders and a surface background.
+
+Content stays mounted while closed. `keepMounted={false}` unmounts children after the closing
+animation; `region` opts in to a named landmark. Hidden mounted fields still participate in native
+validation and FormData: expand the first invalid section before focusing its field. Storybook's
+**UI / Accordion / Form Validation** demonstrates that flow. Arrow keys move header focus without
+expanding, Enter/Space toggles, and reduced motion disables transitions.
+
+### Slider
+
+`Slider` uses a number; `RangeSlider` uses a `readonly [number, number]` and requires a name for
+each thumb. Both use native range inputs for accessibility and form submission.
+
+```tsx
+import { Slider, RangeSlider } from '@weichenlin/swell-ui'
+
+;<Slider label="Volume" defaultValue={40} formatValue={(value) => `${value}%`} />
+
+;<RangeSlider
+  label="Price range"
+  thumbLabels={['Minimum price', 'Maximum price']}
+  defaultValue={[200, 800]}
+  min={0}
+  max={1000}
+  step={50}
+  minStepsBetweenThumbs={2}
+  name={['priceMin', 'priceMax']}
+/>
+```
+
+Use `value` and `onValueChange` for controlled state, or `defaultValue` for uncontrolled state.
+Controlled owners must accept preview changes immediately. `onValueCommit` runs once after a
+changed pointer or keyboard gesture ends; put expensive work there. Cancellation restores the
+starting value with `onValueChange` reason `cancel`, without committing. Thumbs never swap or push.
+
+Defaults are `min=0`, `max=100`, `step=1`, `showValue=true`, and `minStepsBetweenThumbs=0`. Without
+an initial value, single starts at `min` and range starts at `[min,max]`. Bounds must be finite,
+`min < max`, and `(max-min)` must be a whole number of positive steps. External values must be on
+that grid, ordered, and satisfy the gap. `marks` are visual only, not a restricted list of values.
+
+`formatValue` formats both the visible and spoken value; `getValueText` overrides only the spoken
+text. Use `aria-label` when omitting a visible `label`. `className` and `ref` target the outer div.
+`name` enables native FormData; range accepts two explicit names. `form` supports an external
+form. Native reset restores uncontrolled defaults; controlled reset remains the owner's choice.
+Keyboard, RTL, cancellation, forms, exact input composition and theme examples live in
+**UI / Slider** in Storybook. Touch screen reader interaction requires device acceptance.
+
 ### Table
 
 Pass the current rows, column definitions, and a stable row ID. Add `search`, `sorting`, `pagination`,

package/dist/index.d.ts

@@ -1,6 +1,53 @@
+import { ChangeEvent, ComponentProps, MouseEvent, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { ClassValue } from "clsx";
 import { VariantProps } from "class-variance-authority";
-import { ComponentProps, MouseEvent, MouseEventHandler, ReactElement, ReactNode } from "react";
+//#region src/components/accordion/accordion.d.ts
+type AccordionVariant = 'line' | 'outline';
+type Selection$1<T> = {
+  value: T;
+  defaultValue?: never;
+  onValueChange?: (value: T) => void;
+} | {
+  value?: undefined;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+};
+type AccordionProps = Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> & ((Selection$1<string | null> & {
+  type?: 'single';
+  collapsible?: boolean;
+}) | (Selection$1<readonly string[]> & {
+  type: 'multiple';
+  collapsible?: never;
+})) & {
+  variant?: AccordionVariant;
+  /** Native heading level around each trigger. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /** Disables triggers, without changing values or disabling content fields. */
+  disabled?: boolean;
+};
+/** Vertical disclosure group. Changing type requires a new React key. */
+export declare function Accordion({ type, value, defaultValue, onValueChange, collapsible, variant, headingLevel, disabled, className, children, ref, onKeyDown, ...props }: AccordionProps): import("react").JSX.Element;
+type AccordionItemProps = ComponentProps<'div'> & {
+  /** Unique, non-empty value in this group. */
+  value: string;
+  disabled?: boolean;
+};
+export declare function AccordionItem({ value, disabled, className, children, ref, ...props }: AccordionItemProps): import("react").JSX.Element;
+type AccordionTriggerProps = Omit<ComponentProps<'button'>, 'id' | 'type' | 'disabled' | 'aria-expanded' | 'aria-controls' | 'aria-disabled' | 'aria-labelledby'> & {
+  /** Supplementary text, announced as the description rather than the title. */
+  description?: ReactNode;
+};
+export declare function AccordionTrigger({ children, description, className, onClick, 'aria-describedby': describedBy, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+type AccordionContentProps = Omit<ComponentProps<'div'>, 'id' | 'hidden' | 'inert' | 'role' | 'aria-hidden' | 'aria-labelledby'> & {
+  /** Defaults to true. false unmounts children after closing, but keeps the ARIA target. */
+  keepMounted?: boolean;
+  /** Opt in to a named landmark for complex content; avoid excessive regions. */
+  region?: boolean;
+  /** Outer height wrapper classes. className styles the inner padded content. */
+  contentClassName?: string;
+};
+export declare function AccordionContent({ keepMounted, region, className, contentClassName, children, ref, ...props }: AccordionContentProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/alert/alert.d.ts
 type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 type AlertProps = Omit<ComponentProps<'div'>, 'title'> & {
@@ -34,7 +81,7 @@ type BadgeProps = Omit<ComponentProps<'span'>, 'onClick'> & {
 export declare function Badge({ tone, variant, size, icon, busy, context, className, children, ...props }: BadgeProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/tooltip.d.ts
-type Side = 'top' | 'bottom' | 'left' | 'right';
+type Side$1 = 'top' | 'bottom' | 'left' | 'right';
 type TriggerProps = {
   'aria-describedby'?: string;
 };
@@ -42,7 +89,7 @@ type TooltipProps = {
   /** Nothing renders (and no aria-describedby is added) when empty. */
   content?: ReactNode;
   /** Preferred side; flips to the opposite one when it doesn't fit the viewport. */
-  side?: Side;
+  side?: Side$1;
   /**
    * Link the tooltip to the trigger via aria-describedby. Turn off when the
    * tooltip only repeats the trigger's accessible name (e.g. icon button labels).
@@ -189,6 +236,123 @@ type CheckboxGroupProps = Omit<ComponentProps<'fieldset'>, 'children'> & {
 /** A `<fieldset>` + `<legend>` around related checkboxes; holds no value of its own. */
 export declare function CheckboxGroup({ legend, description, error, orientation, className, 'aria-describedby': describedByProp, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/input/field.d.ts
+type FieldSize = 'sm' | 'md' | 'lg';
+type NativeInputProps = Omit<ComponentProps<'input'>, 'size' | 'children'>;
+/** Props every input in the family shares. */
+type FieldProps = NativeInputProps & {
+  /** Visible label, rendered as a real `<label>` above the field. */
+  label: string;
+  /** Outlined floating label: rests inside the field and moves onto the top border. */
+  floating?: boolean;
+  helperText?: ReactNode;
+  /** Truthy puts the field in the error state; the text replaces helperText. */
+  error?: ReactNode;
+  size?: FieldSize;
+  /** Decorative leading icon (aria-hidden) or plain text prefix such as `https://`. */
+  start?: ReactNode;
+  /** Decorative trailing icon (aria-hidden) or plain text suffix. */
+  end?: ReactNode;
+  /** Monospace with spellcheck/autocorrect off, for tags, SHAs and hostnames. */
+  mono?: boolean;
+  /** Shows a spinner and announces validatingText; the field stays editable. */
+  validating?: boolean;
+  validatingText?: string;
+  /** Classes for the `<input>`; `className` goes to the outer wrapper. */
+  inputClassName?: string;
+};
+/**
+ * Either a visible label, or only an aria-label when the context already names the field
+ * (a table cell, a toolbar filter). Floating needs a visible label.
+ */
+type FieldLabelProps = {
+  label: string;
+  floating?: boolean;
+} | {
+  label?: never;
+  floating?: never;
+  'aria-label': string;
+};
+//#endregion
+//#region src/components/combobox/types.d.ts
+type ComboboxOption = {
+  /** Stable, unique, non-empty submitted ID. Labels need not be unique. */
+  value: string;
+  label: string;
+  description?: ReactNode;
+  /** Decorative; hidden from assistive technology. */
+  icon?: ReactNode;
+  keywords?: readonly string[];
+  disabled?: boolean;
+};
+type ComboboxGroup = {
+  label: string;
+  options: readonly ComboboxOption[];
+};
+type ComboboxValueChangeDetails = {
+  reason: 'select' | 'clear';
+  option: ComboboxOption | null;
+};
+type ComboboxInputChangeDetails = {
+  reason: 'input' | 'selection' | 'clear' | 'revert' | 'reset';
+};
+type ComboboxOpenChangeDetails = {
+  reason: 'input' | 'trigger' | 'keyboard' | 'select' | 'escape' | 'blur' | 'outside' | 'clear';
+};
+type NativeProps = Omit<ComponentProps<'input'>, 'size' | 'type' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'list' | 'role' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-activedescendant'>;
+type Selection = {
+  value: string | null;
+  defaultValue?: never;
+} | {
+  value?: undefined;
+  defaultValue?: string | null;
+};
+type Disclosure = {
+  open: boolean;
+  defaultOpen?: never;
+} | {
+  open?: undefined;
+  defaultOpen?: boolean;
+};
+type ComboboxProps = NativeProps & FieldLabelProps & Selection & Disclosure & {
+  options: readonly (ComboboxOption | ComboboxGroup)[];
+  onValueChange?: (value: string | null, details: ComboboxValueChangeDetails) => void;
+  inputValue?: string;
+  /** Only reason="input" should issue a search request. */
+  onInputValueChange?: (text: string, details: ComboboxInputChangeDetails) => void;
+  onOpenChange?: (open: boolean, details: ComboboxOpenChangeDetails) => void;
+  /** false for externally filtered results. Default: label + keywords, case/accent insensitive. */
+  filter?: false | ((option: ComboboxOption, query: string) => boolean);
+  /** Supplies a label when the selected ID is not in the current search results. */
+  selectedOption?: ComboboxOption | null;
+  loading?: boolean;
+  loadingText?: string;
+  searchError?: ReactNode;
+  onRetry?: () => void;
+  retryText?: string;
+  emptyText?: ReactNode;
+  clearable?: boolean;
+  openOnFocus?: boolean;
+  clearLabel?: string;
+  openLabel?: string;
+  closeLabel?: string;
+  /** Native constraint-validation message: selection is required, not just typed text. */
+  requiredText?: string;
+  unresolvedText?: string;
+  /** Localize the polite result-count announcement. */
+  getResultsText?: (count: number) => string;
+  helperText?: ReactNode;
+  error?: ReactNode;
+  size?: FieldSize;
+  start?: ReactNode;
+  mono?: boolean;
+  inputClassName?: string;
+  contentClassName?: string;
+};
+//#endregion
+//#region src/components/combobox/combobox.d.ts
+export declare function Combobox({ options, value, defaultValue, onValueChange, inputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, filter, selectedOption, loading, loadingText, searchError, onRetry, retryText, emptyText, clearable, openOnFocus, clearLabel, openLabel, closeLabel, requiredText, unresolvedText, getResultsText, label, floating, helperText, error, size, start, mono, inputClassName, contentClassName, className, name, form, disabled, readOnly, required, ref, id: idProp, onClick, onFocus, onBlur, onKeyDown, onCompositionStart, onCompositionEnd, onInvalid, ...props }: ComboboxProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/modal/modal-shell.d.ts
 /**
  * Why the modal asks to close. `programmatic` is never sent by the modal itself; it is there for
@@ -274,43 +438,38 @@ type DrawerCloseProps = Omit<ComponentProps<'button'>, 'children' | 'type' | 'ar
 /** A ghost icon button that closes the drawer, for custom headers. */
 export declare function DrawerClose({ size, icon, ...props }: DrawerCloseProps): import("react").JSX.Element;
 //#endregion
-//#region src/components/input/field.d.ts
-type FieldSize = 'sm' | 'md' | 'lg';
-type NativeInputProps = Omit<ComponentProps<'input'>, 'size' | 'children'>;
-/** Props every input in the family shares. */
-type FieldProps = NativeInputProps & {
-  /** Visible label, rendered as a real `<label>` above the field. */
-  label: string;
-  /** Outlined floating label: rests inside the field and moves onto the top border. */
-  floating?: boolean;
-  helperText?: ReactNode;
-  /** Truthy puts the field in the error state; the text replaces helperText. */
-  error?: ReactNode;
-  size?: FieldSize;
-  /** Decorative leading icon (aria-hidden) or plain text prefix such as `https://`. */
-  start?: ReactNode;
-  /** Decorative trailing icon (aria-hidden) or plain text suffix. */
-  end?: ReactNode;
-  /** Monospace with spellcheck/autocorrect off, for tags, SHAs and hostnames. */
-  mono?: boolean;
-  /** Shows a spinner and announces validatingText; the field stays editable. */
-  validating?: boolean;
-  validatingText?: string;
-  /** Classes for the `<input>`; `className` goes to the outer wrapper. */
-  inputClassName?: string;
+//#region src/components/dropdown-menu/dropdown-menu.d.ts
+type DropdownMenuChangeReason = 'trigger' | 'item-select' | 'escape' | 'outside' | 'tab';
+type DropdownMenuProps = {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, reason: DropdownMenuChangeReason) => void;
 };
-/**
- * Either a visible label, or only an aria-label when the context already names the field
- * (a table cell, a toolbar filter). Floating needs a visible label.
- */
-type FieldLabelProps = {
-  label: string;
-  floating?: boolean;
-} | {
-  label?: never;
-  floating?: never;
-  'aria-label': string;
+export declare function DropdownMenu({ children, open: controlled, defaultOpen, onOpenChange }: DropdownMenuProps): import("react").JSX.Element;
+type DropdownMenuTriggerProps = ComponentProps<'button'> & {
+  asChild?: boolean;
 };
+export declare function DropdownMenuTrigger({ asChild, ref, onClick, onClickCapture, onKeyDown, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type DropdownMenuContentProps = ComponentProps<'div'> & {
+  side?: Side;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+};
+export declare function DropdownMenuContent(props: DropdownMenuContentProps): import("react").JSX.Element | null;
+type DropdownMenuItemProps = Omit<ComponentProps<'button'>, 'onSelect'> & {
+  asChild?: boolean;
+  iconLeft?: ReactNode;
+  tone?: 'default' | 'danger';
+  textValue?: string;
+  /** Runs for pointer and keyboard activation. Call preventDefault() to keep the menu open. */
+  onSelect?: (event: Event) => void;
+};
+export declare function DropdownMenuItem({ asChild, iconLeft, tone, textValue, disabled, onSelect, onClick, onClickCapture, onAuxClickCapture, onKeyDown, onPointerMove, children, className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<'hr'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/input/copy-input.d.ts
 type CopyInputProps = Omit<FieldProps, 'type' | 'value' | 'defaultValue' | 'readOnly' | 'onChange'> & {
@@ -368,6 +527,39 @@ type MeterProps = Omit<ComponentProps<'div'>, 'children'> & {
  */
 export declare function Meter({ label, summary, segments, className, ...props }: MeterProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/radio-group/radio-group.d.ts
+type SelectionProps = {
+  value: string | null;
+  defaultValue?: never;
+} | {
+  value?: undefined;
+  defaultValue?: string;
+};
+type RadioGroupProps = Omit<ComponentProps<'fieldset'>, 'name' | 'onChange' | 'defaultValue' | 'children'> & SelectionProps & {
+  /** Native group and submitted field name. Independent groups need different names. */
+  name: string;
+  legend: ReactNode;
+  description?: ReactNode;
+  /** Shows one group message; marks the group invalid. `true` omits the message. */
+  error?: ReactNode;
+  required?: boolean;
+  onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+  variant?: 'default' | 'card';
+  /** Layout only; both orientations keep native radio keyboard behavior. */
+  orientation?: 'vertical' | 'horizontal';
+  itemsClassName?: string;
+  children: ReactNode;
+};
+export declare function RadioGroup({ name, legend, description, error, value, defaultValue, onValueChange, variant, orientation, itemsClassName, children, className, disabled, required, form, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': describedByProp, ...props }: RadioGroupProps): import("react").JSX.Element;
+type RadioProps = Omit<ComponentProps<'input'>, 'type' | 'size' | 'children' | 'value' | 'readOnly' | 'name' | 'checked' | 'defaultChecked' | 'required' | 'form' | 'aria-label' | 'aria-invalid'> & ChoiceLabelProps & {
+  /** A unique, non-empty value within the parent RadioGroup. */
+  value: string;
+  description?: ReactNode;
+  /** Classes for the native input; className belongs to the row or card. */
+  inputClassName?: string;
+};
+export declare function Radio({ value, label, description, disabled, className, inputClassName, ref, onChange, 'aria-describedby': describedBy, ...props }: RadioProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/select/select.d.ts
 /** `value` must be non-empty: `''` is reserved for "nothing chosen". */
 type SelectOption = {
@@ -469,6 +661,66 @@ export declare function SidebarIcon({ className, ...props }: ComponentProps<'spa
 /** Count at the end of a SidebarItem, as a small neutral Badge; part of the name ("Projects 8"). */
 export declare function SidebarBadge({ className, ...props }: BadgeProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/slider/types.d.ts
+type RangeSliderValue = readonly [number, number];
+type SliderChangeDetails = {
+  thumbIndex: 0 | 1;
+  reason: 'pointer' | 'keyboard' | 'input' | 'cancel';
+};
+type SliderCommitDetails = Omit<SliderChangeDetails, 'reason'> & {
+  reason: 'pointer' | 'keyboard' | 'input';
+};
+type SliderMark = {
+  value: number;
+  label?: ReactNode;
+};
+type ValueProps<T> = ({
+  value: T;
+  defaultValue?: never;
+} | {
+  value?: undefined;
+  defaultValue?: T;
+}) & {
+  onValueChange?: (value: T, details: SliderChangeDetails) => void;
+  onValueCommit?: (value: T, details: SliderCommitDetails) => void;
+};
+type LabelProps = {
+  label: ReactNode;
+  'aria-label'?: string;
+} | {
+  label?: never;
+  'aria-label': string;
+};
+type SliderCommonProps = Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'children' | 'aria-label' | 'role'> & LabelProps & {
+  min?: number;
+  max?: number;
+  /** Positive step; (max - min) must be a whole number of steps. */
+  step?: number;
+  disabled?: boolean;
+  helperText?: ReactNode;
+  error?: ReactNode;
+  showValue?: boolean;
+  /** Formats both visible output and spoken value by default. */
+  formatValue?: (value: number) => string;
+  getValueText?: (value: number, thumbIndex: 0 | 1) => string;
+  /** Visual markers only; all step-aligned values remain selectable. */
+  marks?: readonly SliderMark[];
+  form?: string;
+};
+type SliderProps = SliderCommonProps & ValueProps<number> & {
+  name?: string;
+};
+type RangeSliderProps = SliderCommonProps & ValueProps<RangeSliderValue> & {
+  thumbLabels: readonly [string, string];
+  name?: readonly [string, string];
+  /** Thumbs stop at this distance; they never swap or push each other. */
+  minStepsBetweenThumbs?: number;
+};
+//#endregion
+//#region src/components/slider/slider.d.ts
+export declare function Slider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }: SliderProps): import("react").JSX.Element;
+export declare function RangeSlider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }: RangeSliderProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/switch/switch.d.ts
 type SwitchSize = 'sm' | 'md';
 type NativeSwitchProps = Omit<ComponentProps<'input'>, 'type' | 'size' | 'children' | 'role' | 'aria-checked' | 'aria-label'>;
@@ -649,6 +901,33 @@ type TabPanelProps = Omit<ComponentProps<'div'>, 'role' | 'hidden'> & {
 };
 export declare function TabPanel({ value, keepMounted, className, ...props }: TabPanelProps): import("react").JSX.Element | null;
 //#endregion
+//#region src/components/textarea/textarea.d.ts
+type HeightProps = {
+  autoResize?: false;
+  rows?: number;
+  resize?: 'vertical' | 'none';
+  minRows?: never;
+  maxRows?: never;
+} | {
+  autoResize: true;
+  minRows?: number;
+  maxRows?: number;
+  rows?: never;
+  resize?: never;
+};
+type TextareaProps = Omit<ComponentProps<'textarea'>, 'children' | 'rows'> & FieldLabelProps & HeightProps & {
+  helperText?: ReactNode;
+  /** Replaces helperText and marks the field invalid. `true` shows only the error outline. */
+  error?: ReactNode;
+  size?: FieldSize;
+  /** UTF-16 length, matching native maxLength. Never truncates controlled values. */
+  showCount?: boolean;
+  mono?: boolean;
+  /** Classes for the textarea; className belongs to the outer field. */
+  textareaClassName?: string;
+};
+export declare function Textarea({ label, floating, helperText, error, size, autoResize, rows, minRows, maxRows, resize, showCount, mono, className, textareaClassName, ref, id, required, disabled, readOnly, placeholder, value, defaultValue, maxLength, onChange, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/theme-switcher/use-theme.d.ts
 type Theme = 'system' | 'light' | 'dark';
 type UseThemeOptions = {
@@ -756,4 +1035,4 @@ export declare function Toaster(props: ToasterProps): import("react").ReactPorta
 //#region src/lib/cn.d.ts
 export declare function cn(...inputs: ClassValue[]): string;
 //#endregion
-export type { AlertProps, AlertTone, BadgeProps, BadgeTone, ButtonProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, CopyInputProps, DialogCloseReason, DialogHeaderProps, DialogProps, DialogSize, DrawerCloseProps, DrawerCloseReason, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, InputProps, MeterProps, MeterSegment, MeterTone, PasswordInputProps, SearchInputProps, SelectGroup, SelectOption, SelectProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarTriggerProps, SwitchProps, SwitchSize, TabListProps, TabNavLinkProps, TabNavProps, TabPanelProps, TabProps, TableColumn, TableProps, TableSort, TabsActivationMode, TabsProps, TabsSize, TabsVariant, Theme, ThemeSwitcherProps, ToastActionButton, ToastOptions, ToastPatch, ToastPosition, ToastPromiseOptions, ToastType, ToasterProps, TooltipProps, UseThemeOptions };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AccordionVariant, AlertProps, AlertTone, BadgeProps, BadgeTone, ButtonProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxGroup, ComboboxInputChangeDetails, ComboboxOpenChangeDetails, ComboboxOption, ComboboxProps, ComboboxValueChangeDetails, CopyInputProps, DialogCloseReason, DialogHeaderProps, DialogProps, DialogSize, DrawerCloseProps, DrawerCloseReason, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, DropdownMenuChangeReason, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuProps, DropdownMenuTriggerProps, InputProps, MeterProps, MeterSegment, MeterTone, PasswordInputProps, RadioGroupProps, RadioProps, RangeSliderProps, RangeSliderValue, SearchInputProps, SelectGroup, SelectOption, SelectProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarTriggerProps, SliderChangeDetails, SliderCommitDetails, SliderCommonProps, SliderMark, SliderProps, SwitchProps, SwitchSize, TabListProps, TabNavLinkProps, TabNavProps, TabPanelProps, TabProps, TableColumn, TableProps, TableSort, TabsActivationMode, TabsProps, TabsSize, TabsVariant, TextareaProps, Theme, ThemeSwitcherProps, ToastActionButton, ToastOptions, ToastPatch, ToastPosition, ToastPromiseOptions, ToastType, ToasterProps, TooltipProps, UseThemeOptions };