@konstructio/ui 0.1.2-alpha.74 → 0.1.2-alpha.76

package/dist/components/PhoneNumberInput/components/TruncateText/TruncateText.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { P as f, R as u, T as b, C as m } from "../../../../index-B7-5g1Sm.js";
+import { P as f, R as u, T as b, C as m } from "../../../../index-mPinF0Ho.js";
 import { d as h } from "../../../../debounce-DJveWHr_.js";
 import { useRef as p, useState as w, useCallback as g, useEffect as i } from "react";
 const C = ({ text: r, prefix: n }) => {

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { ProgressBarProps } from './ProgressBar.types';
-export declare const ProgressBar: FC<ProgressBarProps>;
+import { Props } from './ProgressBar.types';
+export declare const ProgressBar: FC<Props>;

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { Theme } from '../../domain/theme';
 import { progressBarFillVariants } from './ProgressBar.variants';
-export interface ProgressBarProps extends VariantProps<typeof progressBarFillVariants> {
+export interface Props extends VariantProps<typeof progressBarFillVariants> {
     /** Additional CSS classes for the outer wrapper */
     className?: string;
     /** Custom CSS class for the progress bar fill (e.g., "bg-purple-500") */
@@ -18,3 +18,5 @@ export interface ProgressBarProps extends VariantProps<typeof progressBarFillVar
     /** Custom CSS class for the track background (e.g., "bg-gray-200") */
     trackClassName?: string;
 }
+/** @deprecated Use Props instead */
+export type ProgressBarProps = Props;

package/dist/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { RadioProps } from './Radio.types';
+import { Props } from './Radio.types';
 /**
  * A radio button component with label and optional description.
  * Use RadioGroup to manage a group of radio buttons.
@@ -18,5 +18,5 @@ import { RadioProps } from './Radio.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radio--docs Storybook}
  */
-declare const Radio: FC<RadioProps>;
+declare const Radio: FC<Props>;
 export { Radio };

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

@@ -16,7 +16,7 @@ import { radioVariants } from './Radio.variants';
  * />
  * ```
  */
-export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
     /** Whether the radio is checked */
     checked?: boolean;
     /** Initial checked state (uncontrolled) */
@@ -42,3 +42,5 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Callback when selected */
     onChange?: (value: string) => void;
 }
+/** @deprecated Use Props instead */
+export type RadioProps = Props;

package/dist/components/RadioCard/RadioCard.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { RadioCardProps } from './RadioCard.types';
+import { Props } from './RadioCard.types';
 /**
  * A card-style radio button for visually prominent selection options.
  * Use RadioCardGroup to manage a group of radio cards.
@@ -18,5 +18,5 @@ import { RadioCardProps } from './RadioCard.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}
  */
-declare const RadioCard: FC<RadioCardProps>;
+declare const RadioCard: FC<Props>;
 export { RadioCard };

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

@@ -1,6 +1,6 @@
 import { Theme } from '../../domain/theme';
-import { CardProps } from '../Card/Card.types';
-import { RadioProps } from '../Radio/Radio.types';
+import { Props as CardProps } from '../Card/Card.types';
+import { Props as RadioProps } from '../Radio/Radio.types';
 /**
  * Props for the RadioCard component.
  * Combines Card styling with Radio functionality.
@@ -17,7 +17,9 @@ import { RadioProps } from '../Radio/Radio.types';
  * />
  * ```
  */
-export type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+export type Props = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
     labelWrapperClassName?: string;
     theme?: Theme;
 };
+/** @deprecated Use Props instead */
+export type RadioCardProps = Props;

package/dist/components/RadioCardGroup/RadioCardGroup.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { RadioCardGroupProps } from './RadioCardGroup.types';
+import { Props } from './RadioCardGroup.types';
 /**
  * A group of card-style radio buttons with shared state management.
  *
@@ -20,4 +20,4 @@ import { RadioCardGroupProps } from './RadioCardGroup.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocardgroup--docs Storybook}
  */
-export declare const RadioCardGroup: FC<RadioCardGroupProps>;
+export declare const RadioCardGroup: FC<Props>;

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

@@ -1,5 +1,5 @@
 import { Theme } from '../../domain/theme';
-import { RadioCardProps } from '../RadioCard/RadioCard.types';
+import { Props as RadioCardProps } from '../RadioCard/RadioCard.types';
 /**
  * Props for the RadioCardGroup component.
  *
@@ -17,7 +17,7 @@ import { RadioCardProps } from '../RadioCard/RadioCard.types';
  * />
  * ```
  */
-export type RadioCardGroupProps = {
+export type Props = {
     asChild?: boolean;
     className?: string;
     defaultChecked?: string;
@@ -28,3 +28,5 @@ export type RadioCardGroupProps = {
     wrapperClassName?: string;
     onValueChange?: (value: string) => void;
 };
+/** @deprecated Use Props instead */
+export type RadioCardGroupProps = Props;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { RadioGroupProps } from './RadioGroup.types';
+import { Props } from './RadioGroup.types';
 /**
  * A group of radio buttons with shared state management.
  *
@@ -31,4 +31,4 @@ import { RadioGroupProps } from './RadioGroup.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiogroup--docs Storybook}
  */
-export declare const RadioGroup: FC<RadioGroupProps>;
+export declare const RadioGroup: FC<Props>;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
-import { RadioProps } from '../Radio/Radio.types';
+import { Props as RadioProps } from '../Radio/Radio.types';
 /**
  * Props for the RadioGroup component.
  *
@@ -18,7 +18,7 @@ import { RadioProps } from '../Radio/Radio.types';
  * />
  * ```
  */
-export interface RadioGroupProps {
+export interface Props {
     /** Merge props onto child element */
     asChild?: boolean;
     /** CSS classes for each radio option */
@@ -42,3 +42,5 @@ export interface RadioGroupProps {
     /** Callback when selection changes */
     onValueChange?: (value: string) => void;
 }
+/** @deprecated Use Props instead */
+export type RadioGroupProps = Props;

package/dist/components/Range/Range.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { RangeProps } from './Range.types';
+import { Props } from './Range.types';
 /**
  * A dual-thumb slider component for selecting a value range.
  * Built on Radix UI Slider for accessibility.
@@ -18,4 +18,4 @@ import { RangeProps } from './Range.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-range--docs Storybook}
  */
-export declare const Range: FC<RangeProps>;
+export declare const Range: FC<Props>;

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

@@ -18,7 +18,7 @@ import { rangeVariants } from './Range.variants';
  * />
  * ```
  */
-export interface RangeProps extends VariantProps<typeof rangeVariants> {
+export interface Props extends VariantProps<typeof rangeVariants> {
     /** Additional CSS classes */
     className?: string;
     /** Initial range values [min, max] */
@@ -40,3 +40,5 @@ export interface RangeProps extends VariantProps<typeof rangeVariants> {
     /** Theme override for this component */
     theme?: Theme;
 }
+/** @deprecated Use Props instead */
+export type RangeProps = Props;

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { SelectProps } from './Select.types';
+import { Props } from './Select.types';
 export type { OptionGroup, AdditionalOptionGroup } from './Select.types';
 /**
  * A dropdown select component with search, icons, and infinite scroll support.
@@ -34,4 +34,4 @@ export type { OptionGroup, AdditionalOptionGroup } from './Select.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
  */
-export declare const Select: FC<SelectProps>;
+export declare const Select: FC<Props>;

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

@@ -89,7 +89,7 @@ type OnChangeFn = (params: {
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
  */
-export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+export type Props = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
     additionalOptions?: ReactNode[] | string[] | AdditionalOptionGroup[];
     className?: string;
     disabled?: boolean;
@@ -111,6 +111,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     listItemSecondRowClassName?: string;
     mainWrapperClassName?: string;
     noOptionsText?: string;
+    visibleItems?: number;
     options: Option[] | OptionGroup[];
     searchable?: boolean;
     showSearchIcon?: boolean;
@@ -134,4 +135,6 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     isInfiniteScrollEnabled?: false | undefined;
     onFetchMoreOptions?: never;
 });
+/** @deprecated Use Props instead */
+export type SelectProps = Props;
 export {};

package/dist/components/Select/Select.variants.js

@@ -15,7 +15,7 @@ const a = e(
     "transition-all",
     "w-full",
     "outline-none",
-    "h-9",
+    "h-10",
     "border-gray-200",
     "focus-visible:bg-zinc-50",
     "aria-expanded:border-aurora-500",

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

@@ -1,4 +1,4 @@
-import { SelectProps } from '../../Select.types';
+import { Props as SelectProps } from '../../Select.types';
 export type Props = {
     additionalOptions?: SelectProps['additionalOptions'];
 };

package/dist/components/Select/components/List/List.js

@@ -1,48 +1,50 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { d as K } from "../../../../debounce-DJveWHr_.js";
-import { forwardRef as Q, useRef as O, useState as W, useImperativeHandle as X, useMemo as j, useEffect as Y, Fragment as $ } from "react";
-import { Loading as R } from "../../../Loading/Loading.js";
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { d as Q } from "../../../../debounce-DJveWHr_.js";
+import { forwardRef as W, useRef as I, useState as Y, useImperativeHandle as $, useMemo as N, useEffect as R, Fragment as ee } from "react";
+import { Loading as te } from "../../../Loading/Loading.js";
 import { cn as s } from "../../../../utils/index.js";
-import { useNavigationUlList as ee } from "../../hooks/useNavigationList.js";
-import { A as te, i as re } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import { useNavigationUlList as re } from "../../hooks/useNavigationList.js";
+import { A as oe, i as ne } from "../../../../AdditionalOptions-C2FDVZhu.js";
 import { ListItem as g } from "../ListItem/ListItem.js";
-import { listGroupLabelVariants as oe, listVariants as ne } from "./List.variants.js";
-import { DEFAULT_LIST_SIZE as se } from "../../constants/pagination.js";
-import { useSelectContext as ae } from "../../contexts/select.hook.js";
-const Le = Q(
+import { listGroupLabelVariants as se, listVariants as ie } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as ae } from "../../constants/pagination.js";
+import { ITEM_HEIGHT_PX as le } from "../../constants/list.js";
+import { useSelectContext as ce } from "../../contexts/select.hook.js";
+const xe = W(
   ({
-    additionalOptions: A,
-    className: I,
+    additionalOptions: O,
+    className: P,
     groupedOptions: l,
     inputRef: c,
-    isLoading: P,
+    isLoading: _,
     itemClassName: u,
-    name: T,
+    name: j,
     searchable: f = !1,
     listItemSecondRowClassName: p,
-    wrapperInputRef: U,
+    wrapperInputRef: A,
     isInfiniteScrollEnabled: h,
     noOptionsText: F,
-    onFetchMoreOptions: b
-  }, V) => {
-    const m = O(null), L = O(null), [v, k] = W(!1), {
+    onFetchMoreOptions: L,
+    visibleItems: E
+  }, M) => {
+    const m = I(null), b = I(null), [v, k] = Y(!1), {
       canContinueFetching: d,
       canFilter: y,
-      isOpen: _,
-      isTyping: E,
-      options: G,
+      isOpen: S,
+      isTyping: G,
+      options: T,
       page: w,
       searchTerm: n,
-      setCanContinueFetching: q,
-      setOptions: z,
-      setPage: D
-    } = ae();
-    X(V, () => m.current, [m]);
-    const a = l.length > 0 && re(l[0]), x = f && y ? G.filter((e) => {
+      setCanContinueFetching: U,
+      setOptions: V,
+      setPage: q
+    } = ce(), z = E !== void 0 ? { maxHeight: E * le } : void 0;
+    $(M, () => m.current, [m]);
+    const i = l.length > 0 && ne(l[0]), x = f && y ? T.filter((e) => {
       const t = n.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : G, C = j(() => {
-      if (!a)
+    }) : T, C = N(() => {
+      if (!i)
         return [];
       const e = l;
       if (!f || !y || !n)
@@ -51,61 +53,62 @@ const Le = Q(
       return e.map((r) => ({
         ...r,
         options: r.options.filter(
-          (i) => i.label.toLowerCase().includes(t)
+          (a) => a.label.toLowerCase().includes(t)
         )
       })).filter((r) => r.options.length > 0);
-    }, [a, l, f, y, n]), H = a ? C.flatMap((e) => e.options) : x;
-    ee({
+    }, [i, l, f, y, n]), D = i ? C.flatMap((e) => e.options) : x;
+    re({
       ulRef: m,
-      wrapperInputRef: U,
+      wrapperInputRef: A,
       searchable: f,
-      filteredOptions: H
+      filteredOptions: D
     });
-    const M = x.filter(
-      (e, t, r) => t === r.findIndex((i) => i.value === e.value)
-    ), S = a ? C.length === 0 : x.length === 0, Z = j(
-      () => K(async (e) => {
+    const X = x.filter(
+      (e, t, r) => t === r.findIndex((a) => a.value === e.value)
+    ), Z = i ? C.length === 0 : x.length === 0, B = N(
+      () => Q(async (e) => {
         const [t] = e;
-        if (t.isIntersecting && !v && b && d)
+        if (t.isIntersecting && !v && L && d)
           try {
             k(!0);
-            const r = w + 1, { data: i, hasMore: B } = await b({
+            const r = w + 1, { data: a, hasMore: J } = await L({
               page: r,
-              pageSize: se,
+              pageSize: ae,
               termOfSearch: n
             });
-            D(r), q(B), z((J) => [...J, ...i]);
+            q(r), U(J), V((K) => [...K, ...a]);
           } catch {
             console.error("Error fetching more options");
           } finally {
             k(!1);
           }
       }, 100),
-      [v, b, n, w]
+      [v, L, n, w]
     );
-    return Y(() => {
-      if (h && d && L.current && !E) {
-        const e = new IntersectionObserver(Z, {
+    return R(() => {
+      if (h && d && b.current && !G) {
+        const e = new IntersectionObserver(B, {
           threshold: 0.1
         });
-        return e.observe(L.current), () => e.disconnect();
+        return e.observe(b.current), () => e.disconnect();
       }
     }, [
       h,
       d,
       v,
-      E,
+      G,
       w
-    ]), /* @__PURE__ */ N(
+    ]), /* @__PURE__ */ H(
       "ul",
       {
         ref: m,
-        title: T,
+        title: j,
         role: "listbox",
-        className: s(ne({ className: I })),
-        "data-state": _ ? "open" : "closed",
+        className: s(ie({ className: P })),
+        style: z,
+        "data-state": S ? "open" : "closed",
         children: [
-          P ? /* @__PURE__ */ o(
+          _ ? /* @__PURE__ */ o(
             g,
             {
               className: s("select-none", u),
@@ -115,7 +118,7 @@ const Le = Q(
               label: "Loading...",
               listItemSecondRowClassName: p
             }
-          ) : S ? /* @__PURE__ */ o(
+          ) : Z ? /* @__PURE__ */ o(
             g,
             {
               isEmpty: !0,
@@ -126,14 +129,14 @@ const Le = Q(
               label: F ?? "No options",
               listItemSecondRowClassName: p
             }
-          ) : a ? C.map((e) => /* @__PURE__ */ N($, { children: [
+          ) : i ? C.map((e) => /* @__PURE__ */ H(ee, { children: [
             /* @__PURE__ */ o(
               "li",
               {
                 role: "presentation",
                 "aria-hidden": "true",
                 "data-action": "true",
-                className: s(oe()),
+                className: s(se()),
                 children: e.groupLabel
               }
             ),
@@ -148,7 +151,7 @@ const Le = Q(
               },
               t.value
             ))
-          ] }, e.groupLabel)) : M.map((e) => /* @__PURE__ */ o(
+          ] }, e.groupLabel)) : X.map((e) => /* @__PURE__ */ o(
             g,
             {
               className: s("select-none", u),
@@ -162,20 +165,20 @@ const Le = Q(
           h && d && /* @__PURE__ */ o(
             "li",
             {
-              ref: L,
+              ref: b,
               role: "option",
               "data-action": "true",
               className: "flex items-center justify-center py-3",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ o(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+              children: /* @__PURE__ */ o(te, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          /* @__PURE__ */ o(te, { additionalOptions: A })
+          /* @__PURE__ */ o(oe, { additionalOptions: O })
         ]
       }
     );
   }
 );
 export {
-  Le as List
+  xe as List
 };

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

@@ -1,5 +1,5 @@
 import { ComponentRef, RefObject } from 'react';
-import { SelectProps } from '../../Select.types';
+import { Props as SelectProps } from '../../Select.types';
 export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
     className?: string;
     groupedOptions: SelectProps['options'];
@@ -12,4 +12,5 @@ export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additi
     isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
     onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
     noOptionsText?: SelectProps['noOptionsText'];
+    visibleItems?: number;
 };