@konstructio/ui 0.1.2-alpha.6 → 0.1.2-alpha.61

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise' },
+ *   ]}
+ *   defaultChecked="basic"
+ *   onValueChange={(value) => setPlan(value)}
+ * />
+ * ```
+ */
+export interface RadioGroupProps {
+    /** Merge props onto child element */
+    asChild?: boolean;
+    /** CSS classes for each radio option */
+    className?: RadioProps['className'];
+    /** Initially selected value (uncontrolled mode) */
+    defaultChecked?: string;
+    /** Layout direction (row or col) */
+    direction?: 'row' | 'col';
+    /** Label for the group */
+    label?: string | ReactNode;
+    /** Form field name (shared by all radios) */
+    name: string;
+    /** Array of radio options */
+    options: Omit<RadioProps, 'name' | 'checked' | 'defaultChecked'>[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+}

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

@@ -0,0 +1,3 @@
+export declare const radioGroupVariants: (props?: ({
+    direction?: "col" | "row" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { RangeProps } from './Range.types';
+/**
+ * A dual-thumb slider component for selecting a value range.
+ * Built on Radix UI Slider for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Budget"
+ *   min={0}
+ *   max={10000}
+ *   defaultValue={[2000, 8000]}
+ *   showValue
+ *   name="budget"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-range--docs Storybook}
+ */
+export declare const Range: FC<RangeProps>;

package/dist/components/Range/Range.js

@@ -1,37 +1,39 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as g, T as R, a as V, b as c } from "../../index-C84F4YyO.js";
-import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
+import { R, T as V, a as v, b as c } from "../../index-gSPwC-1I.js";
+import { forwardRef as b, useRef as j, useState as k, useImperativeHandle as w, useEffect as y, useCallback as C } from "react";
 import { cn as a } from "../../utils/index.js";
-import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";
-const q = v(
+import { rangeOutsideVariants as T, trackVariants as S, thumbVariants as i, rangeVariants as $ } from "./Range.variants.js";
+const A = b(
   ({
     label: n,
-    defaultValue: u = [0, 100],
-    name: m,
-    theme: o,
+    labelWrapperClassName: u,
+    defaultValue: m = [0, 100],
+    name: o,
+    theme: f,
     size: l,
-    showValue: f,
-    ...d
-  }, h) => {
-    const t = b(null), [s, p] = j(u);
-    k(h, () => t.current, [t]), w(() => {
+    showValue: d,
+    ...h
+  }, p) => {
+    const t = j(null), [s, x] = k(m);
+    w(p, () => t.current, [t]), y(() => {
       t.current && (t.current.value = `[${s.toString()}]`);
     }, [s]);
-    const x = y(
-      (N) => p(N),
+    const N = C(
+      (g) => x(g),
       []
     );
-    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": o, children: [
+    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": f, children: [
       /* @__PURE__ */ r(
         "div",
         {
           className: a(
             "flex items-center",
-            n ? "justify-between" : "justify-end"
+            n ? "justify-between" : "justify-end",
+            u
           ),
           children: [
             n ? /* @__PURE__ */ e("label", { children: n }) : null,
-            f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
+            d ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
               s[0],
               " - ",
               s[1]
@@ -39,16 +41,16 @@ const q = v(
           ]
         }
       ),
-      /* @__PURE__ */ e("input", { ref: t, name: m, className: "hidden", type: "text" }),
+      /* @__PURE__ */ e("input", { ref: t, name: o, className: "hidden", type: "text" }),
       /* @__PURE__ */ r(
-        g,
+        R,
         {
           value: s,
-          className: a(S()),
-          onValueChange: x,
-          ...d,
+          className: a($()),
+          onValueChange: N,
+          ...h,
           children: [
-            /* @__PURE__ */ e(R, { className: a(T({ size: l })), children: /* @__PURE__ */ e(V, { className: a(C()) }) }),
+            /* @__PURE__ */ e(V, { className: a(S({ size: l })), children: /* @__PURE__ */ e(v, { className: a(T()) }) }),
             /* @__PURE__ */ e(c, { className: a(i({ size: l })) }),
             /* @__PURE__ */ e(c, { className: a(i({ size: l })) })
           ]
@@ -58,5 +60,5 @@ const q = v(
   }
 );
 export {
-  q as Range
+  A as Range
 };

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

@@ -0,0 +1,42 @@
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { rangeVariants } from './Range.variants';
+/**
+ * Props for the Range component.
+ * A dual-thumb slider for selecting a value range.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Price Range"
+ *   min={0}
+ *   max={1000}
+ *   defaultValue={[100, 500]}
+ *   showValue
+ *   size="md"
+ * />
+ * ```
+ */
+export interface RangeProps extends VariantProps<typeof rangeVariants> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial range values [min, max] */
+    defaultValue?: SliderPropsBase['defaultValue'];
+    /** Label displayed above the range slider */
+    label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Maximum value for the range */
+    max?: SliderPropsBase['max'];
+    /** Minimum value for the range */
+    min?: SliderPropsBase['min'];
+    /** Form field name for the hidden input */
+    name?: string;
+    /** Whether to display the current range values */
+    showValue?: boolean;
+    /** Size of the slider track and thumbs */
+    size?: 'sm' | 'md' | 'lg';
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,8 @@
+export declare const rangeVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rangeOutsideVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { SelectProps } from './Select.types';
+/**
+ * A dropdown select component with search, icons, and infinite scroll support.
+ * Also exported as `Dropdown` for convenience.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={selected}
+ *   onChange={(e) => setSelected(e.target.value)}
+ * />
+ *
+ * // Searchable with custom icons
+ * <Select
+ *   label="Select region"
+ *   options={regions.map(r => ({
+ *     value: r.id,
+ *     label: r.name,
+ *     leftIcon: <RegionIcon />,
+ *     subLabel: r.description,
+ *   }))}
+ *   searchable
+ *   highlightSearch
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
+ */
+export declare const Select: FC<SelectProps>;

package/dist/components/Select/Select.js

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { cn as l } from "../../utils/index.js";
+import { SelectProvider as N } from "./contexts/select.provider.js";
+import { Wrapper as j } from "./components/Wrapper.js";
+const W = v(
+  ({
+    error: t,
+    errorClassName: r,
+    helperText: s,
+    helperTextClassName: a,
+    highlightSearch: c,
+    mainWrapperClassName: o,
+    name: m,
+    value: p,
+    options: d,
+    onChange: f,
+    onBlur: i,
+    ...n
+  }, x) => /* @__PURE__ */ e(
+    N,
+    {
+      highlightSearch: c,
+      name: m,
+      value: p,
+      options: d,
+      onBlur: i,
+      onChange: f,
+      children: /* @__PURE__ */ h("div", { className: l("relative w-full", o), children: [
+        /* @__PURE__ */ e(
+          j,
+          {
+            error: t,
+            name: m,
+            ref: x,
+            onBlur: i,
+            ...n
+          }
+        ),
+        t ? /* @__PURE__ */ e("span", { className: l("text-xs text-red-700", r), children: t }) : null,
+        !t && s ? /* @__PURE__ */ e("span", { className: l("text-xs text-metal-600", a), children: s }) : null
+      ] })
+    }
+  )
+);
+export {
+  W as Select
+};

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

@@ -0,0 +1,121 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { selectVariants } from './Select.variants';
+/**
+ * Option type for Select dropdown items.
+ *
+ * @example
+ * ```tsx
+ * const options: Option[] = [
+ *   { value: 'us', label: 'United States', leftIcon: <FlagUS /> },
+ *   { value: 'uk', label: 'United Kingdom', subLabel: 'Europe' },
+ * ];
+ * ```
+ */
+export type Option = {
+    /** Display text for the option */
+    label: string;
+    /** Secondary text displayed below the label */
+    subLabel?: string | ReactNode;
+    /** Icon displayed on the left side of the option */
+    leftIcon?: ReactNode | string;
+    /** CSS classes for the left icon */
+    leftIconClassName?: string;
+    /** Show right component when this option is selected */
+    showRightComponentOnselectedValue?: boolean;
+    /** Component displayed on the right side of the option */
+    rightComponent?: ReactNode | string;
+    /** CSS classes for the right component */
+    rightComponentClassName?: string;
+    /** CSS classes for wrapper when this option is selected */
+    wrapperClassNameOnSelectedValue?: string;
+    /** Unique value for the option */
+    value: string;
+};
+type OnChangeFn = (params: {
+    target: {
+        value: string;
+        name: string;
+    };
+}) => void;
+/**
+ * Props for the Select (Dropdown) component.
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={country}
+ *   onChange={(e) => setCountry(e.target.value)}
+ * />
+ *
+ * // Searchable select
+ * <Select
+ *   label="Search countries"
+ *   options={countries}
+ *   searchable
+ *   highlightSearch
+ * />
+ *
+ * // With infinite scroll
+ * <Select
+ *   options={options}
+ *   isInfiniteScrollEnabled
+ *   onFetchMoreOptions={async ({ page }) => fetchMore(page)}
+ * />
+ * ```
+ *
+ * @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'> & {
+    additionalOptions?: ReactNode[] | string[];
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    highlightSearch?: boolean;
+    iconClassName?: string;
+    inputClassName?: string;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    label?: string;
+    labelAction?: ReactNode;
+    labelClassName?: string;
+    labelWrapperClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    listItemSecondRowClassName?: string;
+    mainWrapperClassName?: string;
+    noOptionsText?: string;
+    options: Option[];
+    searchable?: boolean;
+    showSearchIcon?: boolean;
+    theme?: Theme;
+    value?: string;
+    wrapperClassName?: string;
+    onBlur?: VoidFunction;
+    onChange?: OnChangeFn;
+    onSearchChange?: (searchTerm: string) => void;
+} & ({
+    isInfiniteScrollEnabled: true;
+    onFetchMoreOptions: (params: {
+        page: number;
+        pageSize: number;
+        termOfSearch?: string;
+    }) => Promise<{
+        data: Option[];
+        hasMore: boolean;
+    }>;
+} | {
+    isInfiniteScrollEnabled?: false | undefined;
+    onFetchMoreOptions?: never;
+});
+export {};

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

@@ -0,0 +1,6 @@
+export declare const selectVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/{Dropdown/Dropdown.variants.js → Select/Select.variants.js}

@@ -22,8 +22,9 @@ const a = e(
     "aria-expanded:text-aurora-500",
     "kubefirst:aria-expanded:border-kubefirst-primary",
     "kubefirst:aria-expanded:text-kubefirst-secondary",
-    "dark:border-slate-600",
-    "dark:focus-visible:bg-slate-800"
+    "dark:border-metal-700",
+    "dark:focus-visible:bg-metal-800",
+    "dark:bg-metal-800"
   ],
   {
     variants: {
@@ -32,13 +33,19 @@ const a = e(
           "aria-expanded:border-red-600",
           "aria-expanded:text-red-600",
           "kubefirst:border-red-600",
-          "kubefirst:text-red-600"
+          "kubefirst:text-red-600",
+          "dark:border-red-500"
         ],
         false: ""
+      },
+      disabled: {
+        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
+        false: []
       }
     },
     defaultVariants: {
-      hasError: !1
+      hasError: !1,
+      disabled: !1
     }
   }
 ), t = e([
@@ -46,24 +53,23 @@ const a = e(
   "bg-transparent",
   "border-none",
   "outline-none",
-  "text-zinc-700",
+  "text-metal-700",
   "text-sm",
   "capitalize",
   "placeholder:text-sm",
   "placeholder:normal-case",
   "placeholder:select-none",
-  "dark:placeholder:text-slate-400",
-  "dark:text-slate-50"
-]), n = e([
-  "mb-1",
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
+]), d = e([
   "cursor-pointer",
   "text-sm",
-  "leading-[20px]",
+  "leading-5",
   "tracking-[0.1px]",
-  "dark:text-slate-50"
+  "dark:text-metal-50"
 ]);
 export {
-  a as dropdownVariants,
   t as inputVariants,
-  n as labelVariants
+  d as labelVariants,
+  a as selectVariants
 };

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EmptyList: FC;

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

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ListProps } from './List.types';
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<ComponentRef<'ul'>>>;

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

@@ -0,0 +1,172 @@
+import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import { S as Z } from "../../../../index-BvoZGpli.js";
+import { d as B } from "../../../../debounce-DJveWHr_.js";
+import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
+import { Loading as R } from "../../../Loading/Loading.js";
+import { cn as o } from "../../../../utils/index.js";
+import { useNavigationUlList as W } from "../../hooks/useNavigationList.js";
+import { ListItem as b } from "../ListItem/ListItem.js";
+import { listVariants as X } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as Y } from "../../constants/pagination.js";
+import { useSelectContext as $ } from "../../contexts/select.hook.js";
+const fe = G(
+  ({
+    additionalOptions: F,
+    className: N,
+    inputRef: l,
+    isLoading: E,
+    itemClassName: i,
+    name: I,
+    searchable: x = !1,
+    listItemSecondRowClassName: c,
+    wrapperInputRef: S,
+    isInfiniteScrollEnabled: u,
+    onFetchMoreOptions: f,
+    noOptionsText: y
+  }, j) => {
+    const n = C(null), m = C(null), [p, L] = J(!1), {
+      isOpen: O,
+      searchTerm: g,
+      canFilter: P,
+      canContinueFetching: a,
+      page: d,
+      options: w,
+      isTyping: k,
+      setOptions: T,
+      setPage: U,
+      setCanContinueFetching: _
+    } = $();
+    K(j, () => n.current, [n]);
+    const h = x && P ? w.filter((e) => {
+      const t = g.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+    }) : w;
+    W({
+      ulRef: n,
+      wrapperInputRef: S,
+      searchable: x,
+      filteredOptions: h
+    });
+    const q = h.filter(
+      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
+    ), z = h.length === 0, A = M(
+      () => B(async (e) => {
+        const [t] = e;
+        if (t.isIntersecting && !p && f && a)
+          try {
+            L(!0);
+            const s = d + 1, { data: v, hasMore: D } = await f({
+              page: s,
+              pageSize: Y,
+              termOfSearch: g
+            });
+            U(s), _(D), T((H) => [...H, ...v]);
+          } catch {
+            console.error("Error fetching more options");
+          } finally {
+            L(!1);
+          }
+      }, 100),
+      [p, f, g, d]
+    );
+    return Q(() => {
+      if (u && a && m.current && !k) {
+        const e = new IntersectionObserver(A, {
+          threshold: 0.1
+        });
+        return e.observe(m.current), () => e.disconnect();
+      }
+    }, [
+      u,
+      a,
+      p,
+      k,
+      d
+    ]), /* @__PURE__ */ V(
+      "ul",
+      {
+        ref: n,
+        title: I,
+        role: "listbox",
+        className: o(X({ className: N })),
+        "data-state": O ? "open" : "closed",
+        children: [
+          E ? /* @__PURE__ */ r(
+            b,
+            {
+              className: o("select-none", i),
+              isClickable: !1,
+              inputRef: l,
+              value: "Loading...",
+              label: "Loading...",
+              listItemSecondRowClassName: c
+            }
+          ) : z ? /* @__PURE__ */ r(
+            b,
+            {
+              isEmpty: !0,
+              className: o("select-none", i),
+              isClickable: !1,
+              inputRef: l,
+              value: y ?? "",
+              label: y ?? "No options",
+              listItemSecondRowClassName: c
+            }
+          ) : q.map((e) => /* @__PURE__ */ r(
+            b,
+            {
+              className: o("select-none", i),
+              isClickable: !0,
+              inputRef: l,
+              listItemSecondRowClassName: c,
+              ...e
+            },
+            e.value
+          )),
+          u && a && /* @__PURE__ */ r(
+            "li",
+            {
+              ref: m,
+              role: "option",
+              "data-action": "true",
+              className: "flex items-center justify-center py-3",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+            }
+          ),
+          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
+            Z,
+            {
+              className: o(
+                "flex",
+                "min-h-10",
+                "py-2",
+                "px-6",
+                "w-full",
+                "h-full",
+                "gap-1",
+                "items-center",
+                "text-sm",
+                "[&>svg]:-ml-1",
+                "[&>svg]:w-3.5",
+                "[&>svg]:h-3.5",
+                "[&>svg]:shrink-0",
+                "cursor-pointer",
+                "select-none",
+                "hover:bg-gray-50",
+                "hover:dark:bg-metal-700",
+                "focus:outline-0",
+                "text-blue-600",
+                "dark:text-aurora-500"
+              ),
+              children: e
+            }
+          ) }, t))
+        ]
+      }
+    );
+  }
+);
+export {
+  fe as List
+};