@konstructio/ui 0.1.2-alpha.105 → 0.1.2-alpha.107

package/dist/hooks/useMediaQuery.js

@@ -1,4 +1,4 @@
-import { r as n } from "../utils-Cx-WzRZF.js";
+import { i as n } from "../utils-B-6R7kNE.js";
 import { useEffect as c, useState as h } from "react";
 var m = (e) => n ? window.matchMedia(e).matches : !1, u = (e) => {
   const [s, a] = h(() => m(e));

package/dist/index.js

@@ -1,9 +1,9 @@
-import { t as o } from "./Checkbox-B_ngk9Dj.js";
-import { t as m } from "./DropdownButton-DfNojmCW.js";
-import { t as e } from "./Breadcrumb-Cp3abB2w.js";
-import { t as a } from "./Input-Cf44DzfE.js";
-import { t as n } from "./Counter-BV680M5r.js";
-import { i as l, t as d } from "./utils-Cx-WzRZF.js";
+import { t as o } from "./Checkbox-8KnRLpQG.js";
+import { t as m } from "./DropdownButton-D4QlKGg7.js";
+import { t as e } from "./Breadcrumb-MrF1Z6w2.js";
+import { t as a } from "./Input-is8n7emP.js";
+import { t as n } from "./Counter-CDXdP1Af.js";
+import { a as l, t as d } from "./utils-B-6R7kNE.js";
 import { Alert as g } from "./components/Alert/Alert.js";
 import { Button as c } from "./components/Button/Button.js";
 import { AlertDialog as D } from "./components/AlertDialog/AlertDialog.js";
@@ -11,7 +11,7 @@ import { useClickOutside as R } from "./hooks/useClickOutside.js";
 import { useMediaQuery as b } from "./hooks/useMediaQuery.js";
 import { useToggle as w } from "./hooks/useToggle.js";
 import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
-import { t as E } from "./Loading-DUh9PMJN.js";
+import { t as E } from "./Loading-DO8JOWBV.js";
 import { Badge as P } from "./components/Badge/Badge.js";
 import { Typography as I } from "./components/Typography/Typography.js";
 import { ButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
@@ -29,10 +29,10 @@ import { DateRangeFilterDropdown as tr } from "./components/Filter/components/Da
 import { TextMultiSelect as ir } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
 import { TimeFilterDropdown as pr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
 import { Filter as fr } from "./components/Filter/Filter.js";
-import { t as sr } from "./ImageUpload-DiwymQcU.js";
+import { t as sr } from "./ImageUpload-D7HKSXK8.js";
 import { LineChart as dr } from "./components/LineChart/LineChart.js";
-import { t as gr } from "./Modal-Dyn088X7.js";
-import { t as cr } from "./components-Cf345jTv.js";
+import { t as gr } from "./Modal-Dq9BHD_9.js";
+import { t as cr } from "./components-CaEW5ge4.js";
 import { PhoneNumberInput as Dr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as Rr } from "./components/PieChart/PieChart.js";
 import { ProgressBar as br } from "./components/ProgressBar/ProgressBar.js";
@@ -50,10 +50,10 @@ import { NavigationSeparator as jr } from "./components/Sidebar/components/Navig
 import { Navigation as Hr } from "./components/Sidebar/components/Navigation/Navigation.js";
 import { Sidebar as Kr } from "./components/Sidebar/Sidebar.js";
 import { Slider as Yr } from "./components/Slider/Slider.js";
-import { t as _r } from "./Spinner-CUwE2bLm.js";
+import { t as _r } from "./Spinner-BJE79VTl.js";
 import { horizontalConnectorWrapperVariants as ro, stepConnectorVariants as oo, stepContentVariants as to, stepDescriptionVariants as mo, stepIndicatorVariants as io, stepItemVariants as eo, stepLabelVariants as po, stepListVariants as ao, stepVariants as fo, stepperVariants as no } from "./components/Stepper/Stepper.variants.js";
 import { Stepper as lo } from "./components/Stepper/Stepper.js";
-import { t as go } from "./Switch-aPhL5rNG.js";
+import { t as go } from "./Switch-C7286Bcu.js";
 import { Table as co } from "./components/Table/Table.js";
 import { Content as Do } from "./components/Tabs/components/Content.js";
 import { List as Ro } from "./components/Tabs/components/List.js";
@@ -62,7 +62,7 @@ import { Tabs as wo } from "./components/Tabs/Tabs.js";
 import { Tag as xo } from "./components/Tag/Tag.js";
 import { TagSelect as Eo } from "./components/TagSelect/TagSelect.js";
 import { TextArea as Po } from "./components/TextArea/TextArea.js";
-import { t as Io } from "./Toast-3NEz7LLa.js";
+import { t as Io } from "./Toast-jSx3Lao8.js";
 import { Tooltip as ko } from "./components/Tooltip/Tooltip.js";
 import { t as Ao } from "./events.types-BG1Uh8i6.js";
 import { sendResetFiltersEvent as yo } from "./components/VirtualizedTable/events/filters/filters.js";
@@ -72,7 +72,7 @@ import { TruncateText as Ho } from "./components/VirtualizedTable/components/Tru
 import { VirtualizedTable as Ko } from "./components/VirtualizedTable/VirtualizedTable.js";
 import { ThemeContext as Yo } from "./contexts/theme.context.js";
 import { useTheme as _o } from "./contexts/theme.hook.js";
-import { t as rt } from "./theme.provider-Dw4O3ocC.js";
+import { t as rt } from "./theme.provider-CSL1WCYG.js";
 import "./contexts/index.js";
 export {
   g as Alert,

package/dist/{isObject-BeFFiVJK.js → isObject-pLoSfdr0.js}

@@ -1,4 +1,4 @@
-import { t as i } from "./rolldown-runtime-Ck3dxwZt.js";
+import { t as i } from "./rolldown-runtime-Dw9YIBcH.js";
 var j = /* @__PURE__ */ i(((n, t) => {
   var r = typeof global == "object" && global && global.Object === Object && global;
   t.exports = r;

package/dist/lib/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export type Props = {
     className?: string;
-    htmlFor: string;
+    id: string;
     isRequired?: boolean;
     label: ReactNode | string;
     requiredClassName?: string;

package/dist/lib/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.types.d.ts

@@ -1,6 +1,8 @@
 export type Props = {
     error?: string;
     errorClassName?: string;
+    errorId?: string;
     helperText?: string;
     helperTextClassName?: string;
+    helperTextId?: string;
 };

package/dist/lib/components/Card/Card.types.d.ts

@@ -15,6 +15,7 @@ import { cardVariants } from './Card.variants';
 export interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
     /** Enable hover effect */
     canHover?: boolean;
+    component?: 'div' | 'article' | 'section' | 'aside' | 'li';
     /** Show active/selected state */
     isActive?: boolean;
     /** Theme override for this component */

package/dist/lib/components/Checkbox/Checkbox.d.ts

@@ -12,7 +12,7 @@ import { Props } from './Checkbox.types';
  * // Controlled checkbox
  * <Checkbox
  *   label="Subscribe to newsletter"
- *   defaultChecked={subscribed}
+ *   checked={subscribed}
  *   onChange={(checked) => setSubscribed(checked)}
  * />
  *

package/dist/lib/components/Checkbox/Checkbox.types.d.ts

@@ -12,9 +12,10 @@ import { checkboxVariants } from './Checkbox.variants';
  * <Checkbox label="Disabled option" disabled />
  * ```
  */
-export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
+export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange' | 'checked'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
     /** ID of element that labels the checkbox for accessibility */
     ariaLabelledBy?: string;
+    checked?: boolean;
     /** Additional CSS classes */
     className?: string;
     /** Initial checked state */

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.types.d.ts

@@ -9,6 +9,7 @@ export type Props = {
     labelDate?: string;
     labelTime?: string;
     ariaLabelDate?: string;
+    ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onDateFocus: () => void;
     onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.types.d.ts

@@ -9,6 +9,7 @@ export type Props = {
     labelDate?: string;
     labelTime?: string;
     ariaLabelDate?: string;
+    ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onDateFocus: () => void;
     onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;

package/dist/lib/components/Divider/Divider.d.ts

@@ -1,4 +1,5 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC } from 'react';
+import { Props } from './Divider.types';
 /**
  * A horizontal divider/separator line.
  *
@@ -13,5 +14,5 @@ import { FC, HTMLAttributes } from 'react';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
  */
-declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
+declare const Divider: FC<Props>;
 export { Divider };

package/dist/lib/components/Divider/Divider.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    component?: 'div' | 'hr' | 'li';
+};

package/dist/lib/components/Input/Input.types.d.ts

@@ -19,6 +19,10 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement>, VariantPro
     helperText?: string;
     /** Additional CSS classes for the helper text */
     helperTextClassName?: string;
+    /** Accessible label for the password toggle while the password is visible */
+    hidePasswordLabel?: string;
+    /** Accessible label for the password toggle while the password is hidden */
+    showPasswordLabel?: string;
     /** Show required indicator (*) next to label */
     isRequired?: boolean;
     /** Show search icon inside the input */

package/dist/lib/components/MultiSelectDropdown/MultiSelectDropdown.types.d.ts

@@ -60,6 +60,8 @@ export interface Props extends VariantProps<typeof multiSelectDropdownVariants>,
     name?: string;
     /** Text shown when no options match the search */
     noOptionsText?: string;
+    /** Text shown in the list while options are loading */
+    loadingText?: string;
     /** Available options to select from */
     options: MultiSelectDropdownOption[];
     /** Placeholder text when no selection */

package/dist/lib/components/MultiSelectDropdown/contexts/MultiSelectDropdown.types.d.ts

@@ -5,6 +5,7 @@ export type State = {
     isLoading?: boolean;
     isOpen: boolean;
     noOptionsText?: string;
+    loadingText?: string;
     options: MultiSelectDropdownOption[];
     selectedOptions: MultiSelectDropdownOption[];
     onSelectOption: (option: MultiSelectDropdownOption) => void;
@@ -17,6 +18,7 @@ export type MultiSelectDropdownProviderProps = PropsWithChildren & {
     multiselect?: boolean;
     name?: string;
     noOptionsText?: string;
+    loadingText?: string;
     value?: MultiSelectDropdownOption[];
     onChange?: (params: {
         target: {

package/dist/lib/components/Select/Select.types.d.ts

@@ -111,6 +111,8 @@ export type Props = VariantProps<typeof selectVariants> & Omit<InputHTMLAttribut
     listItemSecondRowClassName?: string;
     mainWrapperClassName?: string;
     noOptionsText?: string;
+    /** Text shown in the list while options are loading */
+    loadingText?: string;
     visibleItems?: number;
     options: Option[] | OptionGroup[];
     searchable?: boolean;

package/dist/lib/components/Select/components/List/List.types.d.ts

@@ -2,6 +2,8 @@ import { ComponentRef, RefObject } from 'react';
 import { Props as SelectProps } from '../../Select.types';
 export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
     className?: string;
+    id?: string;
+    labelledBy?: string;
     groupedOptions: SelectProps['options'];
     inputRef?: RefObject<ComponentRef<'input'> | null>;
     isLoading: boolean;
@@ -12,5 +14,6 @@ export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additi
     isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
     onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
     noOptionsText?: SelectProps['noOptionsText'];
+    loadingText?: SelectProps['loadingText'];
     visibleItems?: number;
 };

package/dist/lib/components/Select/components/Wrapper.d.ts

@@ -2,4 +2,6 @@ import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { SelectProps } from '../Select.types';
 export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & {
     groupedOptions: SelectProps['options'];
+    fieldId: string;
+    describedBy?: string;
 } & RefAttributes<ComponentRef<'input'>>>;

package/dist/lib/components/Sidebar/Sidebar.types.d.ts

@@ -69,6 +69,8 @@ export interface Props extends Omit<VariantProps<typeof wrapperSiderbarVariants>
     separatorClassName?: string;
     /** Additional CSS classes for the hamburger trigger button rendered in drawer mode */
     triggerClassName?: string;
+    /** Accessible label for the mobile navigation trigger */
+    openNavigationLabel?: string;
     /**
      * Per-slot class overrides for the underlying `Drawer` rendered in
      * `drawer` mode. Mirrors `Drawer`'s `classNames` shape: `root`, `overlay`,

package/dist/lib/components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.types.d.ts

@@ -1,5 +1,7 @@
 export interface Props {
     isOpen: boolean;
+    /** Accessible label for the navigation trigger */
+    openNavigationLabel?: string;
     onClick: VoidFunction;
     className?: string;
 }

package/dist/lib/components/Switch/Switch.variants.d.ts

@@ -1,2 +1,4 @@
-export declare const switchVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const switchVariants: (props?: ({
+    variant?: "default" | "black" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const thumbVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Tag/Tag.types.d.ts

@@ -26,6 +26,7 @@ export type Props = {
     leftIcon?: ReactNode;
     /** Additional CSS classes */
     className?: string;
+    component?: 'div' | 'li' | 'span';
     /** Data attribute for the tag value */
     'data-value'?: string;
     /** Whether the tag is in a selected state */

package/dist/lib/components/TextArea/TextArea.d.ts

@@ -17,6 +17,12 @@ import { Props } from './TextArea.types';
  *   value={comments}
  *   onChange={(e) => setComments(e.target.value)}
  * />
+ *
+ * // Required textarea with validation state
+ * <TextArea label="Bio" isRequired error="Bio is required" />
+ *
+ * // Textarea with helper text
+ * <TextArea label="Bio" helperText="Max 200 characters" />
  * ```
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-textarea--docs Storybook}

package/dist/lib/components/TextArea/TextArea.types.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ReactNode, TextareaHTMLAttributes } from 'react';
 import { Theme } from '../../domain/theme';
 import { textAreaVariants } from './TextArea.variants';
 /**
@@ -10,13 +10,24 @@ import { textAreaVariants } from './TextArea.variants';
  * <TextArea label="Description" placeholder="Enter description..." />
  * <TextArea label="Notes" rows={5} />
  * <TextArea name="bio" initialValue="Default text" />
+ * <TextArea label="Bio" isRequired error="Bio is required" />
  * ```
  */
-export interface Props extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
+export interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
     /** Number of visible text rows (default: 3) */
     rows?: number;
+    /** Error message to display below the textarea */
+    error?: string;
+    /** Helper text displayed below the textarea when no error */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Show required indicator (*) next to label */
+    isRequired?: boolean;
     /** Label displayed above the textarea */
     label?: string | ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
     /** Additional CSS classes for the label wrapper */
     labelWrapperClassName?: string;
     /** Form field name */

package/dist/lib/components/TextArea/TextArea.variants.d.ts

@@ -1 +1,4 @@
-export declare const textAreaVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const textAreaVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+    isExpandable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/TimePicker/TimePicker.types.d.ts

@@ -28,8 +28,12 @@ export type Props = VariantProps<typeof timePickerVariants> & {
     time?: Date;
     /** Form field name */
     name?: string;
+    /** Id of the rendered control, for consumer-owned labels */
+    id?: string;
     /** Label displayed above the picker */
     label?: string;
+    /** Accessible name, when the visible label is rendered by the consumer */
+    ariaLabel?: string;
     /** Whether the field is required */
     isRequired?: boolean;
     /** Additional CSS classes for the wrapper */

package/dist/lib/components/TimePicker/components/WrapperList/WrapperList.types.d.ts

@@ -1,5 +1,6 @@
 import { Props as TimePickerProps } from '../../TimePicker.types';
 export type WrapperListProps = {
+    id?: string;
     isOpen: boolean;
     scrollBehavior?: TimePickerProps['scrollBehavior'];
     listClassName?: TimePickerProps['listClassName'];

package/dist/lib/utils/index.d.ts

@@ -3,3 +3,4 @@ export declare const cn: (...inputs: ClassValue[]) => string;
 export declare const filterByValue: (elements: string[], valueToFind: string) => string[];
 export declare const isClient: boolean;
 export declare const resolveColor: (cssVar: string) => string;
+export declare const composeIds: (...ids: (string | false | null | undefined)[]) => string | undefined;