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

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,76 +1,122 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { R as A, A as D, P as v, O as j, C as k, T, D as w, a as P, b as R } from "../../index-Bn4c-gww.js";
-import { Button as l } from "../Button/Button.js";
-import { cn as t } from "../../utils/index.js";
-import { useAlertDialog as z } from "./hooks/useAlertDialog.js";
-const G = ({
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { R as K, A as P, P as z, O as B, C as E, T as S, D as q, a as F, b as G } from "../../index-Dd_ZmIqU.js";
+import { useRef as H, useState as I, useEffect as J } from "react";
+import { Button as i } from "../Button/Button.js";
+import { cn as n } from "../../utils/index.js";
+import { useAlertDialog as L } from "./hooks/useAlertDialog.js";
+const M = ({
   buttonCancel: {
-    className: s,
-    text: i = "Cancel",
-    ...r
+    className: o,
+    text: c = "Cancel",
+    ...d
   } = {},
   buttonConfirm: {
-    className: o,
-    text: c = "OK",
-    ...m
+    className: m,
+    text: f = "OK",
+    ...p
   } = {},
-  buttonTriggerClassName: d,
-  buttonTriggerText: p,
-  description: f,
-  showCancelButton: h = !0,
-  theme: n,
-  title: x,
-  wrapperClassName: u,
-  onConfirm: C,
-  ...b
+  buttonTriggerClassName: u,
+  buttonTriggerText: h,
+  buttonTriggerVariant: x,
+  description: b,
+  isDescriptionChild: C,
+  isTitleChild: g,
+  showCancelButton: N = !0,
+  theme: a,
+  title: y,
+  wrapperClassName: k,
+  onClick: A,
+  onConfirm: D,
+  ...l
 }) => {
-  const { isOpen: N, handleCancel: g, handleConfirm: y, handleOpen: O } = z({
-    onConfirm: C
+  const r = H(null), [O, v] = I(null), { isOpen: R, handleCancel: j, handleConfirm: T, handleOpen: w } = L({
+    onConfirm: D
   });
-  return /* @__PURE__ */ a(A, { open: N, ...b, children: [
+  return J(() => {
+    if (!r.current || a)
+      return;
+    const s = r.current.closest("[data-theme]");
+    s && v(s);
+  }, []), /* @__PURE__ */ t(K, { open: R, ...l, children: [
     /* @__PURE__ */ e(
-      D,
+      P,
       {
-        className: d,
-        text: p,
-        "data-theme": n,
-        onOpen: O
+        ref: r,
+        className: u,
+        variant: x,
+        text: h,
+        "data-theme": a,
+        onOpen: w,
+        onClick: A,
+        ...l
       }
     ),
-    /* @__PURE__ */ a(v, { children: [
-      /* @__PURE__ */ e(j, { className: "bg-black opacity-70 inset-0 fixed animate-in fade-in-0" }),
-      /* @__PURE__ */ a(
-        k,
+    /* @__PURE__ */ t(z, { container: O, children: [
+      /* @__PURE__ */ e(B, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
+      /* @__PURE__ */ t(
+        E,
         {
-          "data-theme": n,
-          className: t(
-            "bg-white rounded-md fixed top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 flex flex-col gap-8 p-8 animate-in fade-in-0 zoom-in-85",
-            u
+          "data-theme": a,
+          className: n(
+            "bg-white",
+            "rounded-md",
+            "fixed",
+            "top-1/2",
+            "left-1/2",
+            "-translate-y-2/4",
+            "-translate-x-2/4",
+            "flex",
+            "flex-col",
+            "gap-6",
+            "p-8",
+            "animate-in",
+            "fade-in-0",
+            "zoom-in-85",
+            "border",
+            "border-transparent",
+            "dark:bg-metal-800",
+            "dark:border-metal-700",
+            "dark:border-slate-700",
+            k
           ),
           children: [
-            /* @__PURE__ */ e(T, { className: "text-base text-slate-700 font-semibold", children: x }),
-            /* @__PURE__ */ e(w, { className: "text-sm text-slate-800", children: f }),
-            /* @__PURE__ */ a("div", { className: "flex flex-row gap-5 justify-end", children: [
-              h && /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(
-                l,
+            /* @__PURE__ */ e(
+              S,
+              {
+                asChild: g,
+                className: "text-base text-slate-700 font-semibold",
+                children: y
+              }
+            ),
+            /* @__PURE__ */ e(
+              q,
+              {
+                asChild: C,
+                className: "text-sm text-slate-800",
+                children: b
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 justify-end", children: [
+              N && /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(
+                i,
                 {
                   type: "button",
                   variant: "secondary",
-                  className: t(s),
-                  onClick: g,
-                  ...r,
-                  children: i
+                  className: n(o),
+                  onClick: j,
+                  ...d,
+                  children: c
                 }
               ) }),
-              /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
-                l,
+              /* @__PURE__ */ e(G, { asChild: !0, children: /* @__PURE__ */ e(
+                i,
                 {
                   type: "button",
                   variant: "primary",
-                  className: t(o),
-                  onClick: y,
-                  ...m,
-                  children: c
+                  className: n(m),
+                  onClick: T,
+                  ...p,
+                  children: f
                 }
               ) })
             ] })
@@ -80,6 +126,7 @@ const G = ({
     ] })
   ] });
 };
+M.displayName = "KonstructAlertDialog";
 export {
-  G as AlertDialog
+  M as AlertDialog
 };

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

@@ -0,0 +1,58 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AlertDialogProps as AlertDialogPrimitiveProps } from '@radix-ui/react-alert-dialog';
+import { Theme } from '../../domain/theme';
+import { ButtonProps } from '../Button/Button.types';
+type ButtonBaseProps = Partial<ButtonProps> & {
+    className?: string;
+    text?: string;
+};
+type ButtonCancelProps = ButtonBaseProps;
+type ButtonConfirmProps = ButtonBaseProps;
+/**
+ * Props for the AlertDialog component.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   buttonTriggerText="Delete"
+ *   buttonTriggerVariant="danger"
+ *   title="Confirm Deletion"
+ *   description="Are you sure you want to delete this item?"
+ *   onConfirm={() => handleDelete()}
+ * />
+ * ```
+ */
+export interface AlertDialogProps extends PropsWithChildren, AlertDialogPrimitiveProps {
+    /** Cancel button props (className, text, etc.) */
+    buttonCancel?: ButtonCancelProps;
+    /** Confirm button props (className, text, etc.) */
+    buttonConfirm?: ButtonConfirmProps;
+    /** Text for the trigger button */
+    buttonTriggerText?: string;
+    /** CSS classes for the trigger button */
+    buttonTriggerClassName?: string;
+    /** Variant for the trigger button */
+    buttonTriggerVariant?: ButtonProps['variant'];
+    /** Additional CSS classes */
+    className?: string;
+    /** Description text shown in the dialog */
+    description?: string | ReactNode;
+    isDescriptionChild?: boolean;
+    /** Whether to show the cancel button (default: true) */
+    showCancelButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Title text shown in the dialog */
+    title?: string | ReactNode;
+    isTitleChild?: boolean;
+    /** CSS classes for the dialog wrapper */
+    wrapperClassName?: string;
+    /** Callback when confirm button is clicked */
+    onConfirm?: VoidFunction;
+    /** Callback when the button is clicked */
+    onClick?: VoidFunction;
+}
+export type UseAlertiDialogProps = {
+    onConfirm: AlertDialogProps['onConfirm'];
+};
+export {};

package/dist/components/AlertDialog/components/AlertDialogTrigger.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialogTriggerProps } from './AlertDialogTrigger.types';
+export declare const AlertDialogTrigger: import('react').ForwardRefExoticComponent<AlertDialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,7 +1,8 @@
 import "react/jsx-runtime";
-import { A as p } from "../../../index-Bn4c-gww.js";
+import { A as e } from "../../../index-Dd_ZmIqU.js";
+import "react";
 import "../../Button/Button.js";
 import "../../../utils/index.js";
 export {
-  p as AlertDialogTrigger
+  e as AlertDialogTrigger
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.types.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps } from '../../Button/Button.types';
+import { Theme } from '../../../domain/theme';
+export interface AlertDialogTriggerProps {
+    'data-theme'?: Theme;
+    variant?: ButtonProps['variant'];
+    className?: string;
+    text?: string;
+    onOpen: VoidFunction;
+    onClick?: VoidFunction;
+}

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

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

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-Bn4c-gww.js";
+import { A as g } from "../../../index-Dd_ZmIqU.js";
 export {
   g as AlertDialogTrigger
 };

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

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

package/dist/components/AlertDialog/hooks/useAlertDialog.d.ts

@@ -0,0 +1,7 @@
+import { UseAlertiDialogProps } from '../AlertDialog.types';
+export declare const useAlertDialog: ({ onConfirm }: UseAlertiDialogProps) => {
+    isOpen: boolean;
+    handleCancel: () => void;
+    handleConfirm: () => void;
+    handleOpen: () => void;
+};

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,31 @@
+import { AutocompleteProps } from './Autocomplete.types';
+/**
+ * An autocomplete/typeahead input component that suggests options as you type.
+ *
+ * @example
+ * ```tsx
+ * // Basic autocomplete
+ * <Autocomplete
+ *   label="Programming Language"
+ *   options={[
+ *     { value: 'JavaScript' },
+ *     { value: 'TypeScript' },
+ *     { value: 'Python' },
+ *   ]}
+ *   placeholder="Type to search..."
+ *   onChange={(value) => setLanguage(value)}
+ * />
+ *
+ * // With custom empty state
+ * <Autocomplete
+ *   options={users}
+ *   placeholder="Search users..."
+ *   placeHolderEmptyValues="No users found"
+ *   onChange={handleUserSelect}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-autocomplete--docs Storybook}
+ */
+declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Autocomplete };

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,75 +1,76 @@
-import { jsxs as N, jsx as l } from "react/jsx-runtime";
-import { forwardRef as b, useRef as i, useId as C, useImperativeHandle as R } from "react";
-import { cn as m } from "../../utils/index.js";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { forwardRef as C, useRef as d, useId as R, useImperativeHandle as g } from "react";
+import { cn as s } from "../../utils/index.js";
 import { labelVariants as A, autocompleteVariants as O } from "./Autocomplete.variants.js";
 import { useAutocomplete as V } from "./hooks/useAutocomplete.js";
-import { List as g } from "./components/List/List.js";
-const j = b(
+import { List as j } from "./components/List/List.js";
+const y = C(
   ({
-    autoComplete: d = "off",
-    className: s,
+    autoComplete: m = "off",
+    className: n,
     label: t,
-    labelClassName: p,
+    labelClassName: c,
+    labelWrapperClassName: p,
     name: r,
-    options: c,
-    placeholder: u,
-    placeHolderEmptyValues: f = "No values...",
-    placeHolderEmptyValuesClassName: h,
-    theme: v,
-    onChange: w
-  }, x) => {
-    const a = i(null), o = i(null), n = C();
-    R(x, () => o.current, [o]);
+    options: u,
+    placeholder: f,
+    placeHolderEmptyValues: h = "No values...",
+    placeHolderEmptyValuesClassName: v,
+    theme: w,
+    onChange: x
+  }, N) => {
+    const a = d(null), o = d(null), i = R();
+    g(N, () => o.current, [o]);
     const e = V({
-      options: c,
+      options: u,
       inputRef: o,
       wrapperRef: a,
-      onChange: w
+      onChange: x
     });
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ b(
       "div",
       {
         ref: a,
-        className: "relative flex flex-col",
-        "data-theme": v,
+        className: "relative flex flex-col gap-2",
+        "data-theme": w,
         children: [
-          t ? /* @__PURE__ */ l(
+          t ? /* @__PURE__ */ l("div", { className: s(p), children: /* @__PURE__ */ l(
             "label",
             {
-              htmlFor: r ?? n,
-              className: m(
+              htmlFor: r ?? i,
+              className: s(
                 A({
-                  className: p
+                  className: c
                 })
               ),
               children: t
             }
-          ) : null,
+          ) }) : null,
           /* @__PURE__ */ l(
             "input",
             {
               ref: o,
-              id: t ? r ?? n : void 0,
+              id: t ? r ?? i : void 0,
               type: "text",
               name: r,
               role: "combobox",
-              autoComplete: d,
-              className: m(O({ className: s })),
+              autoComplete: m,
+              className: s(O({ className: n })),
               onChange: e.handleChange,
               value: e.value,
-              placeholder: u,
+              placeholder: f,
               "aria-expanded": e.showOptions ? "true" : "false"
             }
           ),
           e.showOptions && /* @__PURE__ */ l("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm border-zinc-200 overflow-hidden", children: /* @__PURE__ */ l(
-            g,
+            j,
             {
-              className: s,
+              className: n,
               inputRef: o,
               wrapperRef: a,
               options: e.newOptions,
-              placeholder: f,
-              placeholderClassName: h,
+              placeholder: h,
+              placeholderClassName: v,
               onClick: e.handleSelectValue
             }
           ) })
@@ -78,7 +79,7 @@ const j = b(
     );
   }
 );
-j.displayName = "Autocomplete";
+y.displayName = "Autocomplete";
 export {
-  j as Autocomplete
+  y as Autocomplete
 };

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

@@ -0,0 +1,50 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { autocompleteVariants } from './Autocomplete.variants';
+/**
+ * Option type for Autocomplete suggestions.
+ */
+export type Option = {
+    /** The value to display and select */
+    value: string;
+};
+/**
+ * Props for the Autocomplete component.
+ *
+ * @example
+ * ```tsx
+ * <Autocomplete
+ *   label="Search"
+ *   options={[{ value: 'React' }, { value: 'Vue' }, { value: 'Angular' }]}
+ *   placeholder="Search frameworks..."
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export interface AutocompleteProps extends VariantProps<typeof autocompleteVariants> {
+    /** Disable browser autocomplete (default: 'off') */
+    autoComplete?: 'off';
+    /** Additional CSS classes */
+    className?: string;
+    /** Label displayed above the input */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Array of options to suggest */
+    options: Option[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Text shown when no options match */
+    placeHolderEmptyValues?: string | ReactNode;
+    /** CSS classes for empty state text */
+    placeHolderEmptyValuesClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when a value is selected */
+    onChange(value: string): void;
+}

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

@@ -0,0 +1,2 @@
+export declare const autocompleteVariants: (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/Autocomplete/Autocomplete.variants.js

@@ -19,12 +19,7 @@ const e = r([
   "px-2",
   "focus:ring-aurora-500",
   "kubefirst:focus:ring-kubefirst-primary"
-]), i = r([
-  "pl-1",
-  "mb-2",
-  "text-base",
-  "cursor-pointer"
-]);
+]), i = r(["pl-1", "text-base", "cursor-pointer"]);
 export {
   e as autocompleteVariants,
   i as labelVariants

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

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

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentRef, ReactNode, RefObject } from 'react';
+import { Option } from '../../Autocomplete.types';
+import { autocompleteVariants } from '../../Autocomplete.variants';
+export interface Props extends VariantProps<typeof autocompleteVariants> {
+    className?: string;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+    placeholder: string | ReactNode;
+    placeholderClassName?: string;
+    onClick(value: string): void;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './useAutocomplete';
+export * from './useNavigationList';

package/dist/components/Autocomplete/hooks/useAutocomplete.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent, ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseAutocompleteProps = {
+    options: Option[];
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    onChange(value: string): void;
+};
+export declare const useAutocomplete: ({ options, inputRef, wrapperRef, onChange, }: UseAutocompleteProps) => {
+    inputRef: RefObject<HTMLInputElement | null>;
+    newOptions: Option[];
+    showOptions: boolean;
+    value: string;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleSelectValue: (value: string) => void;
+};
+export {};

package/dist/components/Autocomplete/hooks/useNavigationList.d.ts

@@ -0,0 +1,10 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseNavigationListProps = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+};
+export declare const useNavigationUlList: ({ ulRef, inputRef, wrapperRef, options, }: UseNavigationListProps) => void;
+export {};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { BadgeProps } from './Badge.types';
+/**
+ * A badge/tag component for status indicators and labels.
+ * Supports multiple variants, icons, loading state, and dismissible mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge label="Active" variant="success" />
+ *
+ * // Badge with icon
+ * <Badge label="Settings" leftIcon={<SettingsIcon />} />
+ *
+ * // Dismissible badge
+ * <Badge
+ *   label="Tag"
+ *   dismissible
+ *   onDismiss={() => removeTag()}
+ * />
+ *
+ * // Clickable badge
+ * <Badge
+ *   label="Filter"
+ *   onClick={() => applyFilter()}
+ * />
+ *
+ * // Loading badge
+ * <Badge label="Processing" loading />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-badge--docs Storybook}
+ */
+export declare const Badge: FC<BadgeProps>;