@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Props } from './Loading.types';
+/**
+ * A spinning loading indicator.
+ *
+ * @example
+ * ```tsx
+ * // Default loading spinner
+ * <Loading />
+ *
+ * // Custom size
+ * <Loading className="w-8 h-8" />
+ *
+ * // In a button
+ * <Button disabled>
+ *   <Loading className="w-4 h-4 mr-2" />
+ *   Loading...
+ * </Button>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-loading--docs Storybook}
+ */
+declare const Loading: FC<Props>;
+export { Loading };

package/dist/components/Loading/Loading.js

@@ -1,26 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as c } from "../../utils/index.js";
-import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const d = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], m = t("loader-circle", d), n = ({ className: o, theme: a, ...r }) => /* @__PURE__ */ e(
-  m,
-  {
-    "data-theme": a,
-    className: c(
-      i({
-        className: o
-      })
-    ),
-    ...r
-  }
-);
-n.displayName = "Loading";
+import { t as r } from "../../Loading-DKqxR-oV.js";
 export {
-  n as Loading
+  r as Loading
 };

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

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { Theme } from '../../domain/theme';
+import { loadingVariants } from './Loading.variants';
+/**
+ * Props for the Loading component.
+ *
+ * @example
+ * ```tsx
+ * <Loading />
+ * <Loading className="w-8 h-8" />
+ * ```
+ */
+export type Props = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
+    /** Theme override for this component */
+    theme?: Theme;
+};
+/** @deprecated Use Props instead */
+export type LoadingProps = Props;

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

@@ -0,0 +1 @@
+export declare const loadingVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Loading/Loading.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t([
+import { t } from "../../dist-DtEbXv47.js";
+var a = t([
   "h-8",
   "w-8",
   "animate-spin",

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ChildProps, Props } from './Modal.types';
+/**
+ * A modal dialog component with Header, Body, and Footer sub-components.
+ * Supports keyboard navigation (Escape to close) and portals to document.body.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ *
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Modal.Header>Confirm Action</Modal.Header>
+ *   <Modal.Body>
+ *     Are you sure you want to proceed?
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-modal--docs Storybook}
+ */
+declare const Modal: FC<Props> & {
+    Header: FC<ChildProps>;
+    Body: FC<ChildProps>;
+    Footer: FC<ChildProps>;
+};
+export { Modal };

package/dist/components/Modal/Modal.js

@@ -1,10 +1,5 @@
-import "react/jsx-runtime";
-import "react";
-import "react-dom";
-import { M as d } from "../../Modal-B8jrP02v.js";
-import "./components/Header/Header.js";
-import "./components/Body/Body.js";
-import "./components/Footer/Footer.js";
+"use client";
+import { t } from "../../Modal-DbTe8PVX.js";
 export {
-  d as Modal
+  t as Modal
 };

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

@@ -0,0 +1,50 @@
+import { VariantProps } from 'class-variance-authority';
+import { Transition } from 'motion/react';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { modalVariants } from './components/Wrapper/Wrapper.variants';
+/**
+ * Props for the Modal component.
+ *
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Modal.Header>Title</Modal.Header>
+ *   <Modal.Body>Content</Modal.Body>
+ *   <Modal.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ */
+export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
+    /** CSS classes for the close button */
+    buttonCloseClassName?: string;
+    /** Additional CSS classes for the modal */
+    className?: string;
+    /** CSS classes for the outer container (the overlay grid wrapper) */
+    containerClassName?: string;
+    /** DOM element to portal the modal into (defaults to document.body) */
+    container?: Element | DocumentFragment;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Show the X close button in the corner */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Motion transition config for the modal animation */
+    transition?: Transition;
+    /** Callback when modal is closed (Escape key or close button) */
+    onClose?: () => void;
+};
+/**
+ * Props for Modal sub-components (Header, Body, Footer).
+ */
+export type ChildProps = {
+    /** Content of the modal section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Merge props onto child element */
+    asChild?: boolean;
+};

package/dist/components/Modal/components/Body/Body.d.ts

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

package/dist/components/Modal/components/Body/Body.js

@@ -1,7 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
-import { cn as e } from "../../../../utils/index.js";
-const i = ({ children: o, asChild: t, className: m }) => /* @__PURE__ */ r(t ? n : "div", { className: e("flex-1", m), children: o });
+import { t as m } from "../../../../dist-DXJSck4j.js";
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { jsx as s } from "react/jsx-runtime";
+var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ s(o ? m : "div", {
+  className: a("flex-1", t),
+  children: r
+});
 export {
-  i as Body
+  p as Body
 };

package/dist/components/Modal/components/Body/Body.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};

package/dist/components/Modal/components/Footer/Footer.d.ts

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

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,7 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
-import { cn as e } from "../../../../utils/index.js";
-const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
+import { t as m } from "../../../../dist-DXJSck4j.js";
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { jsx as e } from "react/jsx-runtime";
+var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ e(o ? m : "div", {
+  className: a("border-zinc-200 dark:border-metal-700", t),
+  children: r
+});
 export {
-  a as Footer
+  p as Footer
 };

package/dist/components/Modal/components/Footer/Footer.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};

package/dist/components/Modal/components/Header/Header.d.ts

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

package/dist/components/Modal/components/Header/Header.js

@@ -1,7 +1,10 @@
+import { t as a } from "../../../../dist-DXJSck4j.js";
+import { t as e } from "../../../../utils-DHuiYnx1.js";
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
-import { cn as e } from "../../../../utils/index.js";
-const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
+var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ m(o ? a : "div", {
+  className: e("border-zinc-200 dark:border-metal-700", t),
+  children: r
+});
 export {
-  a as Header
+  p as Header
 };

package/dist/components/Modal/components/Header/Header.types.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    asChild?: boolean;
+    className?: string;
+};

package/dist/components/Modal/components/Wrapper/Wrapper.d.ts

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

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,11 +1,4 @@
-import "react/jsx-runtime";
-import "../../../../index-sp5ZfG6g.js";
-import "react";
-import "../../../../Combination-VYaRRJBZ.js";
-import { W as f } from "../../../../Modal-B8jrP02v.js";
-import "../../../../utils/index.js";
-import "./Wrapper.variants.js";
-import "../../../../x-4F_5p77m.js";
+import { n as p } from "../../../../Modal-DbTe8PVX.js";
 export {
-  f as Wrapper
+  p as Wrapper
 };

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

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { Transition } from 'motion/react';
+import { PropsWithChildren } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { modalVariants } from './Wrapper.variants';
+export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
+    buttonCloseClassName?: string;
+    className?: string;
+    containerClassName?: string;
+    showCloseButton?: boolean;
+    theme?: Theme;
+    transition?: Transition;
+    onClose?: () => void;
+};

package/dist/components/Modal/components/Wrapper/Wrapper.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const modalVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonCloseVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Modal/components/Wrapper/Wrapper.variants.js

@@ -1,30 +1,33 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const i = t([
-  "bg-metal-1000",
+import { t } from "../../../../dist-DtEbXv47.js";
+var a = t([
   "bg-white",
-  "border-none",
+  "border",
+  "border-transparent",
+  "dark:bg-metal-800",
+  "dark:border-slate-700",
   "flex",
   "flex-col",
   "justify-between",
-  "min-h-[450px]",
-  "min-w-[500px]",
+  "min-h-112.5",
+  "min-w-125",
   "relative",
   "rounded-md",
   "shadow-xs",
   "animate-in",
   "fade-in-0",
   "zoom-in-95",
-  "duration-150",
-  "shadow-kubefirst-primary"
-]), o = t([
+  "duration-150"
+]), r = t([
   "absolute",
   "right-1.5",
   "top-1.5",
-  "text-inherit",
   "cursor-pointer",
-  "text-kubefirst-primary"
+  "text-slate-500",
+  "dark:text-slate-300",
+  "hover:text-slate-700",
+  "dark:hover:text-slate-100"
 ]);
 export {
-  o as buttonCloseVariants,
-  i as modalVariants
+  r as buttonCloseVariants,
+  a as modalVariants
 };

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

@@ -0,0 +1,4 @@
+export * from './Body/Body';
+export * from './Footer/Footer';
+export * from './Header/Header';
+export * from './Wrapper/Wrapper';

package/dist/components/Modal/components/index.js

@@ -1,10 +1,10 @@
-import { Body as e } from "./Body/Body.js";
-import { Footer as t } from "./Footer/Footer.js";
-import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-B8jrP02v.js";
+import { Body as o } from "./Body/Body.js";
+import { Footer as p } from "./Footer/Footer.js";
+import { Header as e } from "./Header/Header.js";
+import { n as i } from "../../../Modal-DbTe8PVX.js";
 export {
-  e as Body,
-  t as Footer,
-  m as Header,
-  a as Wrapper
+  o as Body,
+  p as Footer,
+  e as Header,
+  i as Wrapper
 };

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

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

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

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const n = {
+var n = {
   content: void 0,
   isOpen: !1,
   shouldShowClose: !0,
@@ -10,9 +10,7 @@ const n = {
     throw new Error("onClose not implemented");
   },
   setContentAndOpen: () => {
-    throw new Error(
-      "ModalContext: setContentAndOpen function must be overridden"
-    );
+    throw new Error("ModalContext: setContentAndOpen function must be overridden");
   }
 }, t = e(n);
 export {

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

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const ModalProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as t, useCallback as n } from "react";
+import { useToggle as i } from "../../../hooks/useToggle.js";
 import { ModalContext as f } from "./Modal.context.js";
-import { useToggle as h } from "../../../hooks/useToggle.js";
-const x = ({ children: s }) => {
-  const [r, l] = t(!0), [a, o] = h(!1), [u, c] = t(), e = n(() => o(!0), [o]), d = n(() => o(!1), [o]), p = (m, C = !0) => {
-    c(m), e(), l(C);
+import { useCallback as t, useState as n } from "react";
+import { jsx as h } from "react/jsx-runtime";
+var x = ({ children: s }) => {
+  const [r, l] = n(!0), [a, o] = i(!1), [u, d] = n(), e = t(() => o(!0), [o]), p = t(() => o(!1), [o]), c = (m, C = !0) => {
+    d(m), e(), l(C);
   };
-  return /* @__PURE__ */ i(
-    f.Provider,
-    {
-      value: {
-        content: u,
-        isOpen: a,
-        shouldShowClose: r,
-        onClose: d,
-        onOpen: e,
-        setContentAndOpen: p
-      },
-      children: s
-    }
-  );
+  return /* @__PURE__ */ h(f.Provider, {
+    value: {
+      content: u,
+      isOpen: a,
+      shouldShowClose: r,
+      onClose: p,
+      onOpen: e,
+      setContentAndOpen: c
+    },
+    children: s
+  });
 };
 export {
   x as ModalProvider

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type State = {
+    isOpen: boolean;
+    content: string | ReactNode;
+    shouldShowClose: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    setContentAndOpen: (content: string | ReactNode, showCloseButton?: boolean) => void;
+};

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

@@ -0,0 +1 @@
+export * from './Modal.provider';

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

@@ -1,4 +1,4 @@
-import { ModalProvider as d } from "./Modal.provider.js";
+import { ModalProvider as r } from "./Modal.provider.js";
 export {
-  d as ModalProvider
+  r as ModalProvider
 };

package/dist/components/Modal/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useModal';

package/dist/components/Modal/hooks/useModal.d.ts

@@ -0,0 +1,9 @@
+export declare const useModal: () => {
+    closeBtnRef: import('react').RefObject<HTMLButtonElement | null>;
+    isOpen: boolean;
+    content: string | import('react').ReactNode;
+    shouldShowClose: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    setContentAndOpen: (content: string | import('react').ReactNode, showCloseButton?: boolean) => void;
+};

package/dist/components/Modal/hooks/useModal.js

@@ -1,9 +1,8 @@
-import { useContext as l, useRef as u, useEffect as r } from "react";
-import { ModalContext as d } from "../contexts/Modal.context.js";
-const f = () => {
-  const o = l(d), t = u(null);
-  if (!o)
-    throw new Error("useModal must be used within a ModalProvider");
+import { ModalContext as l } from "../contexts/Modal.context.js";
+import { useContext as u, useEffect as r, useRef as d } from "react";
+var f = () => {
+  const o = u(l), t = d(null);
+  if (!o) throw new Error("useModal must be used within a ModalProvider");
   const { onClose: n } = o;
   return r(() => {
     const e = document.activeElement;
@@ -14,12 +13,13 @@ const f = () => {
     const e = new AbortController(), s = (c) => {
       c.code === "Escape" && n();
     };
-    return window.addEventListener("keydown", s, {
-      signal: e.signal
-    }), () => {
+    return window.addEventListener("keydown", s, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [n]), { ...o, closeBtnRef: t };
+  }, [n]), {
+    ...o,
+    closeBtnRef: t
+  };
 };
 export {
   f as useModal

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './MultiSelectDropdown.types';
+/**
+ * A dropdown component for selecting one or multiple options with search functionality.
+ * Displays selected items as badges and supports loading states.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<MultiSelectDropdownOption[]>([]);
+ *
+ * <MultiSelectDropdown
+ *   label="Assign team members"
+ *   placeholder="Search members..."
+ *   options={teamMembers}
+ *   value={selected}
+ *   onChange={(e) => setSelected(e.target.value)}
+ *   multiselect
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-multiselectdropdown--docs Storybook}
+ */
+export declare const MultiSelectDropdown: FC<Props>;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,4 @@
+import { t } from "../../components-DNFycJGm.js";
+export {
+  t as MultiSelectDropdown
+};

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

@@ -0,0 +1,78 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { multiSelectDropdownVariants } from './MultiSelectDropdown.variants';
+/**
+ * Configuration for a multi-select dropdown option.
+ */
+export type MultiSelectDropdownOption = {
+    /** Unique identifier for the option */
+    id: string | number;
+    /** Display label for the option */
+    label: string;
+    /** Optional badge text displayed next to the label */
+    badge?: string;
+    /** Optional value (defaults to label if not provided) */
+    value?: string;
+};
+type OnChangeFn = (params: {
+    target: {
+        value: MultiSelectDropdownOption[];
+        name: string;
+    };
+}) => void;
+type OnBlurFn = (event: {
+    target: HTMLInputElement | null;
+    type?: string;
+}) => void;
+/**
+ * Props for the MultiSelectDropdown component.
+ * A dropdown that allows selecting one or multiple options with search.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectDropdown
+ *   label="Select users"
+ *   placeholder="Search users..."
+ *   options={[
+ *     { id: 1, label: 'John Doe', badge: 'Admin' },
+ *     { id: 2, label: 'Jane Smith', badge: 'User' },
+ *   ]}
+ *   value={selectedUsers}
+ *   onChange={(e) => setSelectedUsers(e.target.value)}
+ *   multiselect
+ * />
+ * ```
+ */
+export interface Props extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    /** Whether the dropdown is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the dropdown */
+    label?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Whether multiple options can be selected */
+    multiselect?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Text shown when no options match the search */
+    noOptionsText?: string;
+    /** Available options to select from */
+    options: MultiSelectDropdownOption[];
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Currently selected options */
+    value?: MultiSelectDropdownOption[];
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback fired when selection changes */
+    onChange?: OnChangeFn;
+    /** Callback fired when the input loses focus */
+    onBlur?: OnBlurFn;
+}
+/** @deprecated Use Props instead */
+export type MultiSelectDropdownProps = Props;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const multiSelectDropdownVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;