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

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,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
+import { S as n } from "../../../../index-BvoZGpli.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 });
 export {

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,13 @@
 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 { S as e } from "../../../../index-BvoZGpli.js";
+import { cn as n } from "../../../../utils/index.js";
+const i = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(
+  r ? e : "div",
+  {
+    className: n("border-zinc-200 dark:border-metal-700", t),
+    children: o
+  }
+);
 export {
-  a as Footer
+  i 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,13 @@
-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 { jsx as e } from "react/jsx-runtime";
+import { S as m } from "../../../../index-BvoZGpli.js";
+import { cn as n } from "../../../../utils/index.js";
+const d = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ e(
+  r ? m : "div",
+  {
+    className: n("border-zinc-200 dark:border-metal-700", t),
+    children: o
+  }
+);
 export {
-  a as Header
+  d 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,12 @@
 import "react/jsx-runtime";
-import "../../../../index-sp5ZfG6g.js";
+import "../../../../index-BKjcReYh.js";
 import "react";
-import "../../../../Combination-VYaRRJBZ.js";
-import { W as f } from "../../../../Modal-B8jrP02v.js";
+import "../../../../Combination-BtmnusWq.js";
+import { W as s } from "../../../../Modal-BGcucTHv.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../x-4F_5p77m.js";
+import "../../../../proxy-CngVm5qA.js";
+import "../../../../x-Eoa9FJjA.js";
 export {
-  f as Wrapper
+  s 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",
+const 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,7 +1,7 @@
 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 { W as a } from "../../../Modal-BGcucTHv.js";
 export {
   e as Body,
   t as Footer,

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.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.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/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/MultiSelectDropdown/MultiSelectDropdown.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { MultiSelectDropdownProps } 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<MultiSelectDropdownProps>;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { MultiSelectDropdownProvider as s } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as u } from "./components/Wrapper/Wrapper.js";
+const a = n(
+  ({
+    isLoading: t,
+    multiselect: e,
+    name: o,
+    noOptionsText: p,
+    options: i,
+    value: l,
+    onChange: d,
+    onBlur: m,
+    ...f
+  }, c) => /* @__PURE__ */ r(
+    s,
+    {
+      defaultOptions: i,
+      multiselect: e,
+      value: l,
+      onChange: d,
+      onBlur: m,
+      name: o,
+      isLoading: t,
+      noOptionsText: p,
+      children: /* @__PURE__ */ r(u, { ref: c, name: o, ...f })
+    }
+  )
+);
+a.displayName = "KonstructMultiSelectDropdown";
+export {
+  a as MultiSelectDropdown
+};

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

@@ -0,0 +1,76 @@
+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 MultiSelectDropdownProps 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;
+}
+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;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -0,0 +1,31 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full",
+  "relative",
+  "cursor-pointer"
+]), o = r(["cursor-pointer", "select-none"]), a = r([
+  "min-h-9",
+  "border",
+  "cursor-pointer",
+  "duration-250",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-1",
+  "rounded-md",
+  "transition-all",
+  "w-full",
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  o as labelVariants,
+  a as multiSelectDropdownVariants,
+  t as wrapperVariants
+};

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

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

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Badge as l } from "../../../Badge/Badge.js";
+import { Typography as n } from "../../../Typography/Typography.js";
+import { cn as c } from "../../../../utils/index.js";
+import { itemVariants as p } from "./Item.variants.js";
+import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
+const x = ({
+  option: r,
+  theme: o,
+  isSelected: t,
+  className: m
+}) => {
+  const { onSelectOption: a } = s();
+  return /* @__PURE__ */ i(
+    "li",
+    {
+      role: "option",
+      "data-theme": o,
+      className: c(p({ isSelected: t }), m),
+      onClick: () => a(r),
+      children: [
+        /* @__PURE__ */ e(n, { variant: "body2", children: r.label }),
+        r.badge && /* @__PURE__ */ e(l, { label: r.badge })
+      ]
+    }
+  );
+};
+export {
+  x as Item
+};

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

@@ -0,0 +1,8 @@
+import { Theme } from '../../../../domain/theme';
+import { MultiSelectDropdownOption } from '../../MultiSelectDropdown.types';
+export type ItemProps = {
+    option: MultiSelectDropdownOption;
+    theme?: Theme;
+    isSelected?: boolean;
+    className?: string;
+};

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

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

package/dist/components/MultiSelectDropdown/components/Item/Item.variants.js

@@ -0,0 +1,38 @@
+import { c as e } from "../../../../index-D29mdTf5.js";
+const t = e(
+  [
+    "cursor-pointer",
+    "py-1.5",
+    "px-2",
+    "last:pb-2",
+    "first:pt-2",
+    "h-full",
+    "flex",
+    "items-center",
+    "gap-2",
+    "hover:bg-gray-50",
+    "focus:bg-gray-50",
+    "dark:hover:bg-metal-700",
+    "dark:focus:bg-metal-700"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        isSelected: !0,
+        class: ["bg-slate-50", "dark:bg-metal-700"]
+      }
+    ],
+    defaultVariants: {
+      isSelected: !1
+    }
+  }
+);
+export {
+  t as itemVariants
+};

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

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

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { Item as t } from "../Item/Item.js";
+import { listVariants as c } from "./List.variants.js";
+import { Typography as d } from "../../../Typography/Typography.js";
+import { useMultiSelectDropdown as p } from "../../contexts/MultiSelectDropdown.hook.js";
+const y = ({ theme: s }) => {
+  const { options: i, selectedOptions: n, isLoading: l, noOptionsText: r } = p();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(c()), children: l ? /* @__PURE__ */ e(
+    t,
+    {
+      option: { id: "loading", label: "Loading..." },
+      className: "select-none pointer-events-none",
+      isSelected: !1
+    },
+    "loading"
+  ) : i.length > 0 ? i.map((o) => /* @__PURE__ */ e(
+    t,
+    {
+      option: o,
+      isSelected: n.some(
+        (a) => a.id === o.id
+      )
+    },
+    o.id
+  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(d, { variant: "body2", className: "italic px-2 py-2", children: r ?? "No options" }) }) });
+};
+export {
+  y as List
+};

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

@@ -0,0 +1,4 @@
+import { Theme } from '../../../../domain/theme';
+export type ListProps = {
+    theme?: Theme;
+};

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

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

package/dist/components/MultiSelectDropdown/components/List/List.variants.js

@@ -0,0 +1,25 @@
+import { c as a } from "../../../../index-D29mdTf5.js";
+const o = a([
+  "absolute",
+  "bg-white",
+  "border",
+  "duration-100",
+  "flex",
+  "flex-col",
+  "mt-0.5",
+  "rounded",
+  "shadow-xs",
+  "top-full",
+  "transition-all",
+  "w-full",
+  "z-10",
+  "animate-in",
+  "fade-in-50",
+  "overflow-hidden",
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  o as listVariants
+};

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

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