@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -0,0 +1,126 @@
+import "../Item/Item.js";
+import { List as O } from "../List/List.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useId as D, useImperativeHandle as S } from "react";
+import { Badge as I } from "../../../Badge/Badge.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as L } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as M, multiSelectDropdownVariants as R, wrapperVariants as V } from "../../MultiSelectDropdown.variants.js";
+import { X as j } from "../../../../x-B9bYxG31.js";
+import { LoaderIcon as W } from "../../../../assets/icons/components/Loader.js";
+import { C as $ } from "../../../../chevron-up-DEfvgPCw.js";
+import { useMultiSelectDropdown as z } from "../../contexts/MultiSelectDropdown.hook.js";
+const B = C(
+  ({
+    isRequired: c,
+    label: n,
+    labelClassName: d,
+    labelWrapperClassName: f,
+    name: s,
+    placeholder: u = "",
+    theme: h,
+    wrapperClassName: x
+  }, N) => {
+    const v = D(), i = s ? `${v}-name` : "id", {
+      inputRef: t,
+      isLoading: w,
+      isOpen: o,
+      selectedOptions: m,
+      onOpen: g,
+      onRemoveOption: b
+    } = z(), { wrapperRef: y, handleOpen: k } = L();
+    return S(N, () => t.current, [t]), /* @__PURE__ */ l(
+      "div",
+      {
+        ref: y,
+        className: a(
+          V({
+            className: x
+          })
+        ),
+        "data-theme": h,
+        children: [
+          n ? /* @__PURE__ */ e("div", { className: a(f), children: /* @__PURE__ */ l(
+            p,
+            {
+              component: "label",
+              variant: "labelLarge",
+              htmlFor: i,
+              className: a(
+                M({
+                  className: d
+                })
+              ),
+              onClick: () => g(!0),
+              children: [
+                n,
+                " ",
+                c && /* @__PURE__ */ e(
+                  p,
+                  {
+                    component: "span",
+                    className: "text-red-500 dark:text-red-500 text-sm font-normal",
+                    children: "*"
+                  }
+                )
+              ]
+            }
+          ) }) : null,
+          /* @__PURE__ */ l(
+            "div",
+            {
+              id: i,
+              className: a(R()),
+              role: "combobox",
+              onClick: k,
+              "aria-expanded": o,
+              children: [
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: u }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
+                  I,
+                  {
+                    "data-value": r.label,
+                    label: r.value ?? r.label ?? "",
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(j, { onClick: () => b(r) })
+                  },
+                  r.id
+                )) }),
+                w ? /* @__PURE__ */ e(
+                  W,
+                  {
+                    size: 16,
+                    className: "animate-spin shrink-0 text-gray-400"
+                  }
+                ) : /* @__PURE__ */ e(
+                  $,
+                  {
+                    className: a(
+                      "w-4 h-4 transition-all duration-50 shrink-0 text-gray-400",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: t,
+              type: "text",
+              name: s,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          o ? /* @__PURE__ */ e(O, {}) : null
+        ]
+      }
+    );
+  }
+);
+B.displayName = "MultiSelectDropdownWrapper";
+export {
+  B as Wrapper
+};

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

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { MultiSelectDropdownProps } from '../../MultiSelectDropdown.types';
+export type WrapperProps = Omit<MultiSelectDropdownProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

package/dist/components/MultiSelectDropdown/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Item } from './Item/Item';
+export { List } from './List/List';
+export { Wrapper } from './Wrapper/Wrapper';

package/dist/components/MultiSelectDropdown/components/index.js

@@ -0,0 +1,8 @@
+import { Item as e } from "./Item/Item.js";
+import { List as t } from "./List/List.js";
+import { Wrapper as f } from "./Wrapper/Wrapper.js";
+export {
+  e as Item,
+  t as List,
+  f as Wrapper
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './MultiSelectDropdown.types';
+export declare const MultiSelectDropdownContext: import('react').Context<State>;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -0,0 +1,21 @@
+import { createContext as n } from "react";
+const t = {
+  options: [],
+  selectedOptions: [],
+  isOpen: !1,
+  inputRef: null,
+  onSelectOption() {
+    throw new Error("Function not implemented.");
+  },
+  onRemoveOption() {
+    throw new Error("Function not implemented.");
+  },
+  onOpen() {
+    throw new Error("Function not implemented.");
+  },
+  isLoading: !1,
+  noOptionsText: void 0
+}, e = n(t);
+export {
+  e as MultiSelectDropdownContext
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.d.ts

@@ -0,0 +1 @@
+export declare const useMultiSelectDropdown: () => import('./MultiSelectDropdown.types').State;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.js

@@ -0,0 +1,13 @@
+import { useContext as o } from "react";
+import { MultiSelectDropdownContext as e } from "./MultiSelectDropdown.context.js";
+const i = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "useMultiSelectDropdown must be used within a MultiSelectDropdownProvider"
+    );
+  return t;
+};
+export {
+  i as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MultiSelectDropdownProviderProps } from './MultiSelectDropdown.types';
+export declare const MultiSelectDropdownProvider: FC<MultiSelectDropdownProviderProps>;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js

@@ -0,0 +1,138 @@
+import { jsx as V } from "react/jsx-runtime";
+import { useRef as k, useState as R, useEffect as g, useCallback as S } from "react";
+import { MultiSelectDropdownContext as C } from "./MultiSelectDropdown.context.js";
+import { useToggle as E } from "../../../hooks/useToggle.js";
+const q = ({
+  children: x,
+  defaultOptions: r = [],
+  multiselect: i = !0,
+  value: f,
+  onChange: m,
+  onBlur: u,
+  name: h,
+  isLoading: b,
+  noOptionsText: j
+}) => {
+  const d = k(null), [w, I] = E(!1), [y, p] = R(r), [c, v] = R([]), o = f !== void 0;
+  g(() => {
+    if (!o) {
+      const n = new Set(
+        c.map((e) => e.id)
+      );
+      p(
+        i ? r.filter((e) => !n.has(e.id)) : r.map((e) => ({
+          ...e,
+          isSelected: n.has(e.id)
+        }))
+      );
+    }
+  }, [r, i, o, c]), g(() => {
+    if (o) {
+      const n = f || [];
+      v(n);
+      const e = new Set(n.map((s) => s.id));
+      p(
+        i ? r.filter((s) => !e.has(s.id)) : r.map((s) => ({
+          ...s,
+          isSelected: e.has(s.id)
+        }))
+      );
+    }
+  }, [f, o, r, i]);
+  const l = S(
+    (n) => {
+      const e = n.map(({ id: t, value: O, label: P }) => ({
+        id: t,
+        value: O ?? P
+      })), s = JSON.stringify(e);
+      d.current && (d.current.value = s), m && m({
+        target: {
+          value: n,
+          name: h ?? ""
+        }
+      });
+    },
+    [m, h]
+  ), a = S(
+    (n) => {
+      const e = w;
+      I(n), e && n === !1 && u && d.current && u({
+        target: d.current,
+        type: "blur"
+      });
+    },
+    [w, I, u, d]
+  ), D = S(
+    (n) => {
+      if (o) {
+        const t = [
+          ...i ? c : [],
+          n
+        ];
+        l(t), a(!1);
+        return;
+      }
+      const e = [
+        ...i ? c : [],
+        n
+      ];
+      v(e);
+      const s = e.map((t) => t.id);
+      p(() => i ? r.filter(
+        (t) => !s.includes(t.id)
+      ) : r.map((t) => ({
+        ...t,
+        isSelected: s.includes(t.id)
+      }))), l(e), a(!1);
+    },
+    [
+      r,
+      l,
+      i,
+      c,
+      a,
+      o
+    ]
+  ), M = S(
+    (n) => {
+      if (o) {
+        const t = c.filter(
+          (O) => O.id !== n.id
+        );
+        l(t);
+        return;
+      }
+      const e = c.filter(
+        (t) => t.id !== n.id
+      );
+      v(e);
+      const s = e.map((t) => t.id);
+      p(
+        () => r.filter(
+          (t) => !s.includes(t.id)
+        )
+      ), l(e);
+    },
+    [r, l, c, o]
+  );
+  return /* @__PURE__ */ V(
+    C.Provider,
+    {
+      value: {
+        options: y,
+        selectedOptions: c,
+        isOpen: w,
+        inputRef: d,
+        onSelectOption: D,
+        onRemoveOption: M,
+        onOpen: a,
+        isLoading: b,
+        noOptionsText: j
+      },
+      children: x
+    }
+  );
+};
+export {
+  q as MultiSelectDropdownProvider
+};

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

@@ -0,0 +1,31 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { MultiSelectDropdownOption } from '../MultiSelectDropdown.types';
+export type State = {
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    isLoading?: boolean;
+    isOpen: boolean;
+    noOptionsText?: string;
+    options: MultiSelectDropdownOption[];
+    selectedOptions: MultiSelectDropdownOption[];
+    onSelectOption: (option: MultiSelectDropdownOption) => void;
+    onRemoveOption: (option: MultiSelectDropdownOption) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type MultiSelectDropdownProviderProps = PropsWithChildren & {
+    defaultOptions?: MultiSelectDropdownOption[];
+    isLoading?: boolean;
+    multiselect?: boolean;
+    name?: string;
+    noOptionsText?: string;
+    value?: MultiSelectDropdownOption[];
+    onChange?: (params: {
+        target: {
+            value: MultiSelectDropdownOption[];
+            name: string;
+        };
+    }) => void;
+    onBlur?: (event: {
+        target: HTMLInputElement | null;
+        type?: string;
+    }) => void;
+};

package/dist/components/MultiSelectDropdown/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiSelectDropdown.hook';
+export * from './MultiSelectDropdown.provider';

package/dist/components/MultiSelectDropdown/contexts/index.js

@@ -0,0 +1,6 @@
+import { useMultiSelectDropdown as r } from "./MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as l } from "./MultiSelectDropdown.provider.js";
+export {
+  l as MultiSelectDropdownProvider,
+  r as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.d.ts

@@ -0,0 +1,4 @@
+export declare const useMultiSelectDropdown: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -0,0 +1,32 @@
+import { useRef as l, useEffect as c, useCallback as u } from "react";
+import { useMultiSelectDropdown as i } from "../contexts/MultiSelectDropdown.hook.js";
+const f = () => {
+  const n = l(null), { onOpen: e } = i();
+  c(() => {
+    const t = new AbortController(), a = (o) => {
+      o.key === "Escape" && e(!1);
+    }, r = (o) => {
+      n.current?.contains(o.target) || e(!1);
+    };
+    return document.addEventListener("keydown", a, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", r, {
+      signal: t.signal
+    }), () => {
+      t.abort();
+    };
+  }, [e, n]);
+  const s = u(
+    (t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    },
+    [e]
+  );
+  return {
+    wrapperRef: n,
+    handleOpen: s
+  };
+};
+export {
+  f as useMultiSelectDropdown
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './PhoneNumberInput.types';
+/**
+ * A phone number input with country code selector and automatic formatting.
+ * Uses google-libphonenumber for validation and formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Contact Number"
+ *   name="contactPhone"
+ *   defaultCountryCode="US"
+ *   showFlagOnSearch
+ *   showInputFilter
+ *   isRequired
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-phonenumberinput--docs Storybook}
+ */
+export declare const PhoneNumberInput: FC<Props>;

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { PhoneNumberProvider as t } from "./contexts/phone-number.provider.js";
+import { Wrapper as f } from "./components/Wrapper.js";
+const u = p(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(t, { defaultCountryCode: o, children: /* @__PURE__ */ r(f, { ref: e, ...m }) }));
+export {
+  u as PhoneNumberInput
+};

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

@@ -0,0 +1,51 @@
+import { RegionCode } from 'google-libphonenumber';
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the PhoneNumberInput component.
+ * An input with country code selector and phone number formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Phone Number"
+ *   name="phone"
+ *   defaultCountryCode="US"
+ *   placeholder="Enter phone number"
+ *   showFlagOnSearch
+ * />
+ * ```
+ */
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
+    /** Default country code for the selector (e.g., 'US', 'GB') */
+    defaultCountryCode?: RegionCode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the input */
+    label?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether to show country flags in the search dropdown */
+    showFlagOnSearch?: boolean;
+    /** Whether to show the country filter input */
+    showInputFilter?: boolean;
+    /** Whether to show country names in the search dropdown */
+    showNameOnSearch?: boolean;
+    /** Whether to show the placeholder text */
+    showPlaceHolder?: boolean;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+};

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

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

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -0,0 +1,46 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r(
+  [
+    "text-sm",
+    "relative",
+    "border",
+    "border-gray-300",
+    "rounded",
+    "data-[state=open]:border-aurora-500",
+    "focus-within:border-aurora-500",
+    "transition-colors",
+    "duration-150",
+    "dark:border-metal-700",
+    "dark:bg-metal-800",
+    "dark:data-[state=open]:border-metal-700",
+    "dark:focus-within:border-metal-700"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [],
+        error: [
+          "border-red-600",
+          "dark:border-red-500",
+          "data-[state=open]:border-red-500",
+          "focus-within:border-red-500",
+          "pr-8",
+          "focus-visible:ring-transparent"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), e = r([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]);
+export {
+  e as labelVariants,
+  t as phoneNumberInputVariants
+};

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.d.ts

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

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -0,0 +1,36 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../../../utils/index.js";
+import { C as l } from "../../../../chevron-up-IlDPxR7j.js";
+import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
+const u = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = c(), { flag: n } = o;
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-2 cursor-pointer",
+      onClick: () => a(!t),
+      children: [
+        /* @__PURE__ */ e(n, {}),
+        /* @__PURE__ */ e(
+          l,
+          {
+            className: s(
+              "transition-all",
+              "duration-100",
+              "data-[state=open]:rotate-0",
+              "data-[state=closed]:rotate-180",
+              "w-5",
+              "h-5",
+              "text-slate-400"
+            ),
+            "data-state": t ? "open" : "closed"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  u as FlagContent
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.d.ts

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