@webority/ui-react 0.88.1 → 0.89.0

package/dist/types/components/AppSelect.d.ts

@@ -1,32 +1,84 @@
 import "@webority/ui-elements/elements/select";
 declare const AppSelect: import("react").ForwardRefExoticComponent<{
+    /**
+     * The choices. A label may be a node, such as CO2 with a subscript: it renders as static markup, and search and the option's accessible name use its text.
+     * @default []
+     */
     options?: Array<{
         value: string;
         label?: import('react').ReactNode;
         text?: string;
         icon?: string;
     }>;
+    /**
+     * Class names added to the control element.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class names added to the wrapper field element.
+     * @default ""
+     */
     fieldClassName?: string;
+    /** A bordered box before the select, such as +91 or Tag, in the same shell as an input's prefix. Not combined with floatingLabel. */
     prefix?: import('react').ReactNode;
+    /** A bordered box after the select, in the same shell as an input's suffix. */
     suffix?: import('react').ReactNode;
+    /** The selected option's value. Leaving it out clears the control. */
     value?: string;
     onChange?: (value: string) => void;
+    /**
+     * Text shown in the empty field.
+     * @default "Select..."
+     */
     placeholder?: string;
+    /**
+     * Text shown in the search box of the menu.
+     * @default "Search..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Show the search box in the menu.
+     * @default false
+     */
     searchable?: boolean;
+    /**
+     * Show a control that clears the chosen value.
+     * @default false
+     */
     clearable?: boolean;
+    /** Control size. Leave it out for the default size. xl is the 52px control, the same height as an input with size xl. */
     size?: "sm" | "lg" | "xl";
+    /** Icon name shown in the control. */
     icon?: string;
-    floatingLabel?: boolean;
+    /**
+     * Where the label rests. Off keeps it above the control. Border sits the label inside as a placeholder, then slides it onto the top border on focus or once a value is chosen. Needs label.
+     * @default "off"
+     */
+    floatingLabel?: "off" | "border";
+    /** Disables the control. */
     disabled?: boolean;
+    /** The visible field label. */
     label?: import('react').ReactNode;
+    /**
+     * Marks the field required.
+     * @default false
+     */
     required?: boolean;
+    /** Error message shown under the field. Marks the control invalid. */
     error?: string;
+    /** Help text shown under the field when there is no error. */
     hint?: string;
+    /** Help content shown in an info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * Accessible name for that info tip.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** DOM id for the control and the target of the label. */
     id?: string;
+    /** Form field name. */
     name?: string;
 } & import("react").RefAttributes<any>>;
 export default AppSelect;

package/dist/types/components/AppSelectMini.d.ts

@@ -3,34 +3,51 @@ import "@webority/ui-elements/elements/select";
  * A compact select for toolbars and filters, drawn by the shared `<wui-select>` element in compact mode.
  *
  * @param {object} props
- * @param {string} [props.value] The selected option's value. Unset, the control is cleared.
+ * @param {string} [props.value]
  * @param {(value: string) => void} [props.onChange] Called with the new value when the user picks an option.
- * @param {Array<{ value: string, label?: import('react').ReactNode, icon?: string }>} [props.options] The options. A node label renders as markup, and `icon` is a semantic icon name drawn before the label. Omitted, the select has no options.
- * @param {string} [props.placeholder="Select..."] Text shown while no value is selected.
- * @param {string} [props.name] Form field name of the select.
- * @param {string} [props.ariaLabel] Accessible name of the select.
- * @param {string} [props.id] Element id of the select.
- * @param {boolean} [props.disabled] Disables the select so its value cannot change.
- * @param {"sm"|"lg"} [props.size] Compact size around the default 32px picker.
- * @param {string} [props.icon] A leading library icon, e.g. `funnel` or `sort-down`.
- * @param {string} [props.prefix] Static text before the value, e.g. `Sort:`.
- * @param {string} [props.className] Extra classes on the select, so a caller can position or space it.
+ * @param {Array<{ value: string, label?: import('react').ReactNode, icon?: string }>} [props.options]
+ * @param {string} [props.placeholder]
+ * @param {string} [props.name]
+ * @param {string} [props.ariaLabel]
+ * @param {string} [props.id]
+ * @param {boolean} [props.disabled]
+ * @param {"sm"|"lg"} [props.size]
+ * @param {string} [props.icon]
+ * @param {string} [props.prefix]
+ * @param {string} [props.className]
  */
 export default function AppSelectMini(props: {
+    /** The selected option's value. Unset, the control is cleared. */
     value?: string;
     onChange?: (value: string) => void;
+    /**
+     * The options. Omitted, the select has no options.
+     * @default []
+     */
     options?: Array<{
         value: string;
         label?: import('react').ReactNode;
         icon?: string;
     }>;
+    /**
+     * Text shown while no value is selected.
+     * @default "Select..."
+     */
     placeholder?: string;
+    /** Form field name of the select. */
     name?: string;
+    /** Accessible name of the select. */
     ariaLabel?: string;
+    /** Element id of the select. */
     id?: string;
+    /** Disables the select so its value cannot change. */
     disabled?: boolean;
+    /** Compact size around the default 32px picker. */
     size?: "sm" | "lg";
+    /** A leading library icon, such as funnel or sort-down. */
     icon?: string;
+    /** Static text before the value, such as Sort:. */
     prefix?: string;
+    /** Extra classes on the select, so a caller can position or space it. */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppShell.d.ts

@@ -18,7 +18,7 @@ export type NavItemShape = {
     /**
      * With `children`, the label link goes here and the chevron alone opens the sub-list.
      */
-    href: string;
+    href?: string;
     /**
      * A count or short status at the row's end.
      */
@@ -96,7 +96,7 @@ export type UserMenuShape = {
         icon?: string;
         href?: string;
         onClick?: () => void;
-        divider?: true;
+        divider?: boolean;
     }[];
 };
 export type NotificationsShape = {
@@ -182,73 +182,119 @@ export type SearchShape = {
  * each item's `active` decides, as before.
  *
  * @param {object} props
- * @param {{ label?: string, items: NavItemShape[], after?: import('react').ReactNode }[]} props.groups Nav groups, in order.
- *   Groups after the first are separated by a rule. A group left with no items is not rendered,
- *   and neither is its `after`. `after` is a node rendered right after that group's links (an
- *   "add a space" row, a help note); it is hidden on the collapsed rail and shown in the drawer.
- * @param {import('react').ReactNode} [props.brand] The logo row at the top of the sidebar.
- * @param {import('react').ReactNode} [props.sidebarStart] Between the brand row and the nav —
- *   a workspace/tenant switcher, an environment badge. Hidden on the collapsed rail.
- * @param {import('react').ReactNode} [props.sidebarStartCompact] Same slot for the collapsed
- *   rail — typically a compact monogram control (e.g. `AppWorkspaceSwitcher compact`). Shown
- *   only on the desktop collapsed rail; the expanded `sidebarStart` stays hidden there. Omit
- *   to keep today's behaviour (nothing in that slot when collapsed).
- * @param {import('react').ReactNode} [props.sidebarFooter] Pinned below the scrolling nav.
- * @param {import('react').ReactNode} [props.topbarStart] Leading topbar slot — page title, crumbs.
- * @param {import('react').ReactNode} [props.topbarEnd] Trailing topbar slot — page actions; the bell and account menu follow it.
+ * @param {{ label?: string, items: NavItemShape[], after?: import('react').ReactNode }[]} [props.groups]
+ * @param {import('react').ReactNode} [props.brand]
+ * @param {import('react').ReactNode} [props.sidebarStart]
+ * @param {import('react').ReactNode} [props.sidebarStartCompact]
+ * @param {import('react').ReactNode} [props.sidebarFooter]
+ * @param {import('react').ReactNode} [props.topbarStart]
+ * @param {import('react').ReactNode} [props.topbarEnd]
  * @param {import('react').ReactNode} [props.footer]
- * @param {import('react').ReactNode} [props.launcher] A floating button pinned to the bottom end corner over the page, such as an assistant launcher; on a phone it sits above the tab bar.
+ * @param {import('react').ReactNode} [props.launcher]
  * @param {import('react').ReactNode} props.children The routed page.
- * @param {boolean} [props.collapsed] Controlled rail state. Omit to let the shell own it.
+ * @param {boolean} [props.collapsed]
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange]
- * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard. No tab bar either.
- * @param {'comfortable'|'compact'} [props.density='comfortable'] Compact sets the content's top padding to 12px.
- * @param {number} [props.itemHeight] The height of every sidebar row in px, in place of the density's row height.
- *   Unset, the rows keep the density's height. A value above zero applies on every pointer, touch included.
- * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of every
- *   sidebar icon, so one prop sets the look of the whole nav. An item's own `iconVariant` overrides it; `bulk` is the filled look.
- * @param {'default'|'primary'} [props.topbarTone='default'] The top bar's colour. primary paints the bar in the primary colour, with its text, menu button, bell and account menu in the ink that reads on it; the search field keeps its own surface.
- * @param {string} [props.navLabel='Main navigation']
- * @param {string} [props.currentPath] The current location; items without `active` are matched against it.
- * @param {boolean} [props.rememberCollapsed=false] Remember the uncontrolled rail state in a cookie.
- * @param {string} [props.collapsedCookie='wui-shell-collapsed'] The cookie `rememberCollapsed` uses.
- * @param {string} [props.tabBarLabel='Quick navigation'] Accessible name of the phone tab bar.
- * @param {string} [props.moreLabel='More'] Label of the tab bar button that opens the drawer.
- * @param {UserMenuShape} [props.userMenu] The account menu at the end of the topbar.
- * @param {NotificationsShape} [props.notifications] The notification bell.
- * @param {SearchShape} [props.search] The topbar search.
+ * @param {boolean} [props.noSidebar]
+ * @param {'comfortable'|'compact'} [props.density]
+ * @param {number} [props.itemHeight]
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {'default'|'primary'} [props.topbarTone]
+ * @param {string} [props.navLabel]
+ * @param {string} [props.currentPath]
+ * @param {boolean} [props.rememberCollapsed]
+ * @param {string} [props.collapsedCookie]
+ * @param {string} [props.tabBarLabel]
+ * @param {string} [props.moreLabel]
+ * @param {UserMenuShape} [props.userMenu]
+ * @param {NotificationsShape} [props.notifications]
+ * @param {SearchShape} [props.search]
  * @param {string} [props.className]
  */
 export default function AppShell(props: {
-    groups: {
+    /**
+     * Nav groups, in order. Groups after the first are separated by a rule. A group with no items is not rendered, and neither is its after.
+     * @default []
+     */
+    groups?: {
         label?: string;
         items: NavItemShape[];
         after?: import('react').ReactNode;
     }[];
+    /** The logo row at the top of the sidebar. */
     brand?: import('react').ReactNode;
+    /** Between the brand row and the nav, such as a workspace switcher or an environment badge. Hidden on the collapsed rail. */
     sidebarStart?: import('react').ReactNode;
+    /** The same slot for the collapsed rail, typically a compact monogram control. Shown only on the desktop collapsed rail. */
     sidebarStartCompact?: import('react').ReactNode;
+    /** Pinned below the scrolling nav. */
     sidebarFooter?: import('react').ReactNode;
+    /** Leading topbar slot, such as the page title or crumbs. */
     topbarStart?: import('react').ReactNode;
+    /** Trailing topbar slot for page actions. The bell and account menu follow it. */
     topbarEnd?: import('react').ReactNode;
+    /** Content shown below the page, in the content column. */
     footer?: import('react').ReactNode;
+    /** A floating button pinned to the bottom end corner over the page, such as an assistant launcher. On a phone it sits above the tab bar. */
     launcher?: import('react').ReactNode;
     children: import('react').ReactNode;
+    /** Controlled rail state. Omit it to let the shell own the state. */
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Full-width layout with no side nav, for a focused wizard. There is no tab bar either.
+     * @default false
+     */
     noSidebar?: boolean;
+    /**
+     * Compact sets the content's top padding to 12px.
+     * @default "comfortable"
+     */
     density?: 'comfortable' | 'compact';
+    /** The height of every sidebar row in px, in place of the density's row height. Unset, the rows keep the density's height. A value above zero applies on every pointer, touch included. */
     itemHeight?: number;
+    /** The iconsax style of every sidebar icon. A row's own iconVariant overrides it; bulk is the filled look. Unset, icons draw in the linear style. */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /**
+     * The top bar's colour. Primary paints the bar in the primary colour, with the ink that reads on it. The search field keeps its own surface.
+     * @default "default"
+     */
     topbarTone?: 'default' | 'primary';
+    /**
+     * Accessible name of the sidebar navigation.
+     * @default "Main navigation"
+     */
     navLabel?: string;
+    /** The current location. Rows without active are matched against it. */
     currentPath?: string;
+    /**
+     * Remembers the uncontrolled rail state in a cookie.
+     * @default false
+     */
     rememberCollapsed?: boolean;
+    /**
+     * The cookie rememberCollapsed uses.
+     * @default "wui-shell-collapsed"
+     */
     collapsedCookie?: string;
+    /**
+     * Accessible name of the phone tab bar.
+     * @default "Quick navigation"
+     */
     tabBarLabel?: string;
+    /**
+     * Label of the tab bar button that opens the drawer.
+     * @default "More"
+     */
     moreLabel?: string;
+    /** The account menu at the end of the topbar. */
     userMenu?: UserMenuShape;
+    /** The notification bell. */
     notifications?: NotificationsShape;
+    /** The topbar search. */
     search?: SearchShape;
+    /**
+     * Extra classes on the shell root.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppShortcutLegend.d.ts

@@ -16,19 +16,27 @@ import "@webority/ui-elements/elements/shortcuts";
  *
  * @param {object} props
  * @param {{ key: string, label: string, onPress?: (itemKey: string|null) => void }[]} [props.shortcuts]
- *   The rows, in order ("?" is always the last row). `key` is one character or Enter, Esc, `/`;
- *   `onPress` gets the `data-key` of the item marked `aria-current="true"` in the scope, or null.
- * @param {string} [props.items] CSS selector of the items J and K move between (inside the scope).
- * @param {string} [props.search] CSS selector of the field `/` focuses.
+ * @param {string} [props.items]
+ * @param {string} [props.search]
  * @param {string} [props.className]
  */
 export default function AppShortcutLegend(props: {
+    /**
+     * The rows of the sheet, in order; the ? row is always last.
+     * @default []
+     */
     shortcuts?: {
         key: string;
         label: string;
         onPress?: (itemKey: string | null) => void;
     }[];
+    /** CSS selector of the items that J and K move between, inside the scope. */
     items?: string;
+    /** CSS selector of the field that / focuses. */
     search?: string;
+    /**
+     * Extra classes on the legend root.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppShowMore.d.ts

@@ -11,19 +11,40 @@ import "@webority/ui-elements/elements/show-more";
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The text (or markup) to clamp.
- * @param {number} [props.lines=3] How many lines show while collapsed.
- * @param {string} [props.moreLabel="Show more"] The toggle's text while collapsed.
- * @param {string} [props.lessLabel="Show less"] The toggle's text while expanded.
- * @param {boolean} [props.defaultExpanded=false] Start with the whole text showing.
- * @param {string} [props.id] The root's id; the body's is `{id}-body`. Generated when omitted.
+ * @param {number} [props.lines]
+ * @param {string} [props.moreLabel]
+ * @param {string} [props.lessLabel]
+ * @param {boolean} [props.defaultExpanded]
+ * @param {string} [props.id]
  * @param {string} [props.className]
  */
 export default function AppShowMore(props: {
     children: import('react').ReactNode;
+    /**
+     * How many lines show while the text is collapsed.
+     * @default 3
+     */
     lines?: number;
+    /**
+     * The toggle's text while collapsed.
+     * @default "Show more"
+     */
     moreLabel?: string;
+    /**
+     * The toggle's text while expanded.
+     * @default "Show less"
+     */
     lessLabel?: string;
+    /**
+     * Start with the whole text showing; a change after mount is ignored.
+     * @default false
+     */
     defaultExpanded?: boolean;
+    /** The root's id; the text body's id is the root id plus -body. Generated when omitted. */
     id?: string;
+    /**
+     * Extra classes on the root.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppSidebarMenu.d.ts

@@ -6,44 +6,85 @@
  * via the app tokens so it renders correctly in dark mode.
  *
  * @param {object} props
- * @param {boolean} props.show Whether the panel is open. The caller owns this state.
+ * @param {boolean} props.show
  * @param {() => void} props.onHide Closes the panel: the header close button, the backdrop and Escape.
- * @param {"left"|"right"|"start"|"end"|"top"|"bottom"} [props.side="right"] The edge it opens from. `left` and `start` open from the start edge, `right` and `end` from the end edge.
+ * @param {"left"|"right"|"start"|"end"|"top"|"bottom"} [props.side]
  * @param {import('react').ReactNode} props.children The panel body.
- * @param {import('react').ReactNode} [props.title] Title of the default header bar. A text title also names the dialog, unless `ariaLabel` is set.
- * @param {string} [props.titleIcon] Library icon beside the title in the default header bar.
- * @param {import('react').ReactNode} [props.header] A custom header that replaces the default header bar entirely.
- * @param {import('react').ReactNode} [props.footer] A sticky footer for action buttons.
- * @param {string} [props.width] Panel width for a left or right panel, e.g. "480px". Unset, it is 420px. On a phone (below 576px) a left or right panel opens at the full screen width whatever this says; `maxWidth` still caps it there.
- * @param {string} [props.maxWidth] Caps the panel width, e.g. "600px". Unset, the theme caps it at 92vw, so a fixed `width` still fits on a small viewport.
- * @param {boolean|"static"} [props.backdrop=true] The dimming backdrop: `true` shows it and a click outside closes the panel; `false` removes it; `"static"` shows it and a click outside does not close.
- * @param {boolean} [props.scroll=false] Allows the page behind the panel to scroll.
- * @param {boolean} [props.keyboard=true] Escape closes the panel.
- * @param {boolean} [props.closeButton=true] Shows the header close button.
- * @param {string} [props.closeLabel="Close"] The close button's accessible name, for other languages.
- * @param {string} [props.responsive] Breakpoint, e.g. `lg`, below which the panel acts as an offcanvas and at or above which it renders inline.
- * @param {string} [props.className=""] Extra classes on the panel.
- * @param {string} [props.bodyClassName=""] Classes on the scrollable body region.
- * @param {string} [props.ariaLabel] Accessible name of the dialog. Unset, a text `title` names it.
+ * @param {import('react').ReactNode} [props.title]
+ * @param {string} [props.titleIcon]
+ * @param {import('react').ReactNode} [props.header]
+ * @param {import('react').ReactNode} [props.footer]
+ * @param {string} [props.width]
+ * @param {string} [props.maxWidth]
+ * @param {"on"|"static"|"off"} [props.backdrop]
+ * @param {boolean} [props.scroll]
+ * @param {boolean} [props.keyboard]
+ * @param {boolean} [props.closeButton]
+ * @param {string} [props.closeLabel]
+ * @param {string} [props.responsive]
+ * @param {string} [props.className]
+ * @param {string} [props.bodyClassName]
+ * @param {string} [props.ariaLabel]
  */
 export default function AppSidebarMenu(props: {
+    /** Whether the panel is open. The caller owns this state. */
     show: boolean;
     onHide: () => void;
+    /**
+     * The edge it opens from. left and start open from the start edge, right and end from the end edge.
+     * @default "right"
+     */
     side?: "left" | "right" | "start" | "end" | "top" | "bottom";
     children: import('react').ReactNode;
+    /** Title of the default header bar. A text title also names the dialog, unless ariaLabel is set. */
     title?: import('react').ReactNode;
+    /** Library icon beside the title in the default header bar. */
     titleIcon?: string;
+    /** A custom header that replaces the default header bar entirely. */
     header?: import('react').ReactNode;
+    /** A sticky footer for action buttons. */
     footer?: import('react').ReactNode;
+    /** Panel width for a left or right panel, such as 480px. Unset, it is 420px. On a phone a left or right panel opens at the full screen width, and maxWidth still caps it there. */
     width?: string;
+    /** Caps the panel width, such as 600px. Unset, the theme caps it at 92vw. */
     maxWidth?: string;
-    backdrop?: boolean | "static";
+    /**
+     * The dimming backdrop: on shows it and a click outside closes the panel; static shows it and a click outside does not; off shows none.
+     * @default "on"
+     */
+    backdrop?: "on" | "static" | "off";
+    /**
+     * Allows the page behind the panel to scroll.
+     * @default false
+     */
     scroll?: boolean;
+    /**
+     * Escape closes the panel.
+     * @default true
+     */
     keyboard?: boolean;
+    /**
+     * Shows the header close button.
+     * @default true
+     */
     closeButton?: boolean;
+    /**
+     * The close button's accessible name, for other languages.
+     * @default "Close"
+     */
     closeLabel?: string;
+    /** Breakpoint, such as lg, below which the panel acts as an offcanvas and at or above which it renders inline. */
     responsive?: string;
+    /**
+     * Extra classes on the panel.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Classes on the scrollable body region.
+     * @default ""
+     */
     bodyClassName?: string;
+    /** Accessible name of the dialog. Unset, a text title names it. */
     ariaLabel?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppSkeleton.d.ts

@@ -2,20 +2,49 @@
  * First-load shimmer placeholder.
  *
  * @param {object} props
- * @param {string|number} [props.width="100%"]
- * @param {string|number} [props.height=14]
- * @param {string|number} [props.radius=6]
+ * @param {string|number} [props.width]
+ * @param {string|number} [props.height]
+ * @param {string|number} [props.radius]
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  */
 export default function AppSkeleton(props: {
+    /**
+     * Width of the bar: a number is px, a string is any CSS length.
+     * @default "100%"
+     */
     width?: string | number;
+    /**
+     * Height of the bar: a number is px, a string is any CSS length.
+     * @default 14
+     */
     height?: string | number;
+    /**
+     * Corner radius of the bar: a number is px, a string is any CSS length.
+     * @default 6
+     */
     radius?: string | number;
+    /**
+     * Extra class names added to the bar.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;
+/**
+ * @param {object} props
+ * @param {number} [props.rows]
+ * @param {number} [props.cols]
+ */
 export declare function AppSkeletonRows({ rows, cols }: {
-    cols?: number;
+    /**
+     * Number of placeholder rows to draw.
+     * @default 4
+     */
     rows?: number;
+    /**
+     * Number of placeholder cells in each row.
+     * @default 5
+     */
+    cols?: number;
 }): import("react").JSX.Element[];

package/dist/types/components/AppSlider.d.ts

@@ -1,30 +1,73 @@
 import "@webority/ui-elements/elements/slider";
 declare const AppSlider: import("react").ForwardRefExoticComponent<{
+    /** Current value (single mode). */
     value?: number;
+    /** Range start (range mode). */
     start?: number;
+    /** Range end (range mode). */
     end?: number;
+    /**
+     * Enables dual-thumb range mode.
+     * @default false
+     */
     range?: boolean;
     onChange?: (value: number | {
         start: any;
         end: any;
     }) => void;
+    /**
+     * Lowest value the slider can take.
+     * @default 0
+     */
     min?: number;
+    /**
+     * Highest value the slider can take.
+     * @default 100
+     */
     max?: number;
+    /**
+     * Distance between two allowed values.
+     * @default 1
+     */
     step?: number;
+    /** Visible label above the control. */
     label?: string;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
     required?: boolean;
+    /** Helper text under the control. */
     hint?: string;
+    /** Error text under the control; sets aria-invalid. */
     error?: string;
+    /** Form field name (single mode). */
     name?: string;
+    /** Form field name for range start. */
     startName?: string;
+    /** Form field name for range end. */
     endName?: string;
+    /** Disables the control. */
     disabled?: boolean;
+    /** Control size tier. */
     size?: 'sm' | 'md' | 'lg';
+    /** Shows a label with the current value or values. */
     showValue?: boolean;
+    /** Suffix for the value label, for example %. */
     unit?: string;
+    /** Element id; a generated id is used when omitted. */
     id?: string;
+    /** Accessible name when no visible label is used. */
     ariaLabel?: string;
+    /**
+     * Class applied to the control element.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class applied to the wrapper field element.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppSlider;