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

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/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;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.105",
+  "version": "0.1.2-alpha.106",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,7 +92,7 @@
     "@radix-ui/react-visually-hidden": "^1.2.11",
     "@react-input/mask": "^2.0.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.9",
+    "@tanstack/react-virtual": "^3.14.10",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -103,8 +103,8 @@
     "google-libphonenumber": "^3.2.46",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.28.0",
-    "motion": "^13.0.0",
+    "lucide-react": "^1.34.0",
+    "motion": "^13.1.1",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.1",
     "react-feather": "^2.0.10",
@@ -145,50 +145,50 @@
     }
   },
   "devDependencies": {
-    "@faker-js/faker": "^10.5.0",
+    "@faker-js/faker": "^10.6.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.5.6",
-    "@storybook/addon-links": "^10.5.6",
-    "@storybook/react-vite": "^10.5.6",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-links": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-query": "^5.101.4",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@tanstack/react-query": "^5.102.2",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
+    "@testing-library/user-event": "^14.6.6",
     "@types/google-libphonenumber": "^7.4.31",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.25",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@typescript-eslint/eslint-plugin": "^8.66.0",
-    "@typescript-eslint/parser": "^8.66.0",
+    "@types/react-dom": "^19.2.5",
+    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/parser": "^8.67.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.5.4",
     "eslint": "^9.39.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "eslint-plugin-storybook": "^10.5.6",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "eslint-plugin-storybook": "^10.5.10",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
     "jsdom": "^30.0.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.25",
+    "postcss": "^8.5.26",
     "prettier": "^3.9.6",
     "rimraf": "^6.1.3",
-    "storybook": "^10.5.6",
+    "storybook": "^10.5.10",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "storybook": "$storybook",