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

package/dist/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.js

@@ -0,0 +1,200 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { memo as H } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import { stepIndicatorVariants as v, stepLabelVariants as C, stepDescriptionVariants as k, stepContentVariants as g, stepVariants as I } from "../../Stepper.variants.js";
+import { getStepAriaLabel as x } from "../../utils/index.js";
+import { StepConnector as w } from "../StepConnector/StepConnector.js";
+import { StepIndicatorContent as S } from "../StepIndicatorContent/StepIndicatorContent.js";
+import { useStepItemLogic as y } from "../../hooks/useStepItemLogic.js";
+const K = ({
+  classNames: r,
+  clickable: D,
+  icons: m,
+  index: c,
+  isLast: p,
+  showConnector: b,
+  size: a,
+  step: i,
+  variant: t,
+  onClick: V
+}) => {
+  const {
+    isClickable: l,
+    isDisabled: h,
+    LabelComponent: s,
+    status: e,
+    handleClick: u,
+    handleKeyDown: f
+  } = y({ clickable: D, step: i, onClick: V });
+  return t === "horizontal" ? /* @__PURE__ */ d("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: o(
+          I({
+            orientation: "horizontal",
+            variant: t,
+            clickable: l
+          }),
+          r?.stepWrapper
+        ),
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: u,
+        onKeyDown: f,
+        "aria-current": e === "active" ? "step" : void 0,
+        ...h && { "aria-disabled": !0 },
+        "aria-label": x(c, i.label, e),
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: o(
+                v({ status: e, size: a }),
+                r?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(
+                S,
+                {
+                  status: e,
+                  index: c,
+                  size: a,
+                  icons: m,
+                  className: r?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: o(
+                g({ variant: t }),
+                r?.content
+              ),
+              children: [
+                i.label && /* @__PURE__ */ n(
+                  s,
+                  {
+                    className: o(
+                      C({ status: e, size: a, variant: t }),
+                      r?.label
+                    ),
+                    children: i.label
+                  }
+                ),
+                i.description && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: o(
+                      k({ status: e, size: a, variant: t }),
+                      r?.description
+                    ),
+                    children: i.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !p && b && /* @__PURE__ */ n(
+      "div",
+      {
+        className: o(
+          "h-0.5 w-7.5 mx-2 transition-colors duration-200",
+          e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400",
+          r?.connector
+        ),
+        role: "presentation",
+        "aria-hidden": "true"
+      }
+    )
+  ] }) : /* @__PURE__ */ d("div", { className: "flex flex-1 items-start", children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: o(
+          I({
+            orientation: "horizontal",
+            variant: t,
+            clickable: l
+          }),
+          r?.stepWrapper
+        ),
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: u,
+        onKeyDown: f,
+        "aria-current": e === "active" ? "step" : void 0,
+        ...h && { "aria-disabled": !0 },
+        "aria-label": x(c, i.label, e),
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: o(
+                v({ status: e, size: a }),
+                r?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(
+                S,
+                {
+                  status: e,
+                  index: c,
+                  size: a,
+                  icons: m,
+                  className: r?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: o(g({ variant: t }), r?.content),
+              children: [
+                i.label && /* @__PURE__ */ n(
+                  s,
+                  {
+                    className: o(
+                      C({ status: e, size: a, variant: t }),
+                      r?.label
+                    ),
+                    children: i.label
+                  }
+                ),
+                i.description && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: o(
+                      k({ status: e, size: a, variant: t }),
+                      r?.description
+                    ),
+                    children: i.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !p && b && /* @__PURE__ */ n(
+      w,
+      {
+        orientation: "horizontal",
+        status: e,
+        size: a,
+        variant: t,
+        className: o("mt-6.5", r?.connector)
+      }
+    )
+  ] });
+}, F = H(K);
+export {
+  F as HorizontalStepItem
+};

package/dist/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.types.d.ts

@@ -0,0 +1 @@
+export type { Props } from '../StepItem/StepItem.types';

package/dist/components/Stepper/components/StepConnector/StepConnector.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepConnector.types';
+export declare const StepConnector: import('react').NamedExoticComponent<Props>;

package/dist/components/Stepper/components/StepConnector/StepConnector.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { stepConnectorVariants as s } from "../../Stepper.variants.js";
+const a = ({
+  className: o,
+  orientation: r,
+  size: t,
+  status: e,
+  variant: n
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    className: p(
+      s({
+        orientation: r,
+        size: t,
+        status: e,
+        variant: n
+      }),
+      o
+    ),
+    role: "presentation",
+    "aria-hidden": "true"
+  }
+), l = i(a);
+export {
+  l as StepConnector
+};

package/dist/components/Stepper/components/StepConnector/StepConnector.types.d.ts

@@ -0,0 +1,13 @@
+import { StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class */
+    className?: string;
+    /** Orientation of the connector */
+    orientation: 'vertical' | 'horizontal';
+    /** Size of the connector */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+    /** Layout variant */
+    variant: StepVariant;
+};

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepIndicatorContent.types';
+export declare const StepIndicatorContent: import('react').NamedExoticComponent<Props>;

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as c } from "react";
+import { cn as d } from "../../../../utils/index.js";
+import { CHECK_ICON_SIZE_MAP as m, ICON_SIZE_MAP as p } from "../../constants/index.js";
+import { c as f } from "../../../../createLucideIcon-CP-mMPfa.js";
+import { ExclamationIcon as h } from "../../../../assets/icons/components/Exclamation.js";
+const a = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], I = f("check", a), u = ({
+  className: r,
+  icons: t,
+  index: i,
+  size: o,
+  status: n
+}) => n === "completed" ? t?.completed ? /* @__PURE__ */ e("span", { className: r, children: t.completed }) : /* @__PURE__ */ e(
+  I,
+  {
+    className: d(m[o], r),
+    strokeWidth: 2.5,
+    "aria-hidden": "true"
+  }
+) : n === "error" ? t?.error ? /* @__PURE__ */ e("span", { className: r, children: t.error }) : /* @__PURE__ */ e(h, { size: p[o], className: r }) : /* @__PURE__ */ e("span", { className: r, "aria-hidden": "true", children: i + 1 }), x = c(u);
+export {
+  x as StepIndicatorContent
+};

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.types.d.ts

@@ -0,0 +1,13 @@
+import { StepperIcons, StepSize, StepStatus } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class for the content */
+    className?: string;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Size of the indicator */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+};

package/dist/components/Stepper/components/StepItem/StepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './StepItem.types';
+export declare const StepItem: import('react').NamedExoticComponent<Props>;

package/dist/components/Stepper/components/StepItem/StepItem.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as r } from "react";
+import { HorizontalStepItem as e } from "../HorizontalStepItem/HorizontalStepItem.js";
+import { VerticalStepItem as m } from "../VerticalStepItem/VerticalStepItem.js";
+const i = (t) => t.orientation === "horizontal" || t.variant === "horizontal" ? /* @__PURE__ */ o(e, { ...t }) : /* @__PURE__ */ o(m, { ...t }), I = r(i);
+export {
+  I as StepItem
+};

package/dist/components/Stepper/components/StepItem/StepItem.types.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../../domain/theme';
+import { Step, StepperClassNames, StepperIcons, StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+import { stepIndicatorVariants } from '../../Stepper.variants';
+export type Props = VariantProps<typeof stepIndicatorVariants> & {
+    /** Custom class names */
+    classNames?: StepperClassNames;
+    /** Whether the step is clickable */
+    clickable: boolean;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Whether this is the last step */
+    isLast: boolean;
+    /** Status of the next step (for connector coloring) */
+    nextStepStatus?: StepStatus;
+    /** Orientation of the stepper */
+    orientation: 'vertical' | 'horizontal';
+    /** Show connector lines */
+    showConnector: boolean;
+    /** Size of the step indicator */
+    size: StepSize;
+    /** Step data */
+    step: Step;
+    /** Theme override */
+    theme?: Theme;
+    /** Layout variant */
+    variant: StepVariant;
+    /** Callback when step is clicked */
+    onClick?: () => void;
+};

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './VerticalStepItem.types';
+export declare const VerticalStepItem: import('react').NamedExoticComponent<Props>;

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.js

@@ -0,0 +1,114 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { memo as V } from "react";
+import { cn as a } from "../../../../utils/index.js";
+import { stepIndicatorVariants as I, stepLabelVariants as S, stepDescriptionVariants as k, stepContentVariants as v, stepVariants as w } from "../../Stepper.variants.js";
+import { getStepAriaLabel as D } from "../../utils/index.js";
+import { StepConnector as L } from "../StepConnector/StepConnector.js";
+import { StepIndicatorContent as g } from "../StepIndicatorContent/StepIndicatorContent.js";
+import { useStepItemLogic as j } from "../../hooks/useStepItemLogic.js";
+const y = ({
+  classNames: e,
+  clickable: d,
+  icons: s,
+  index: p,
+  isLast: m,
+  showConnector: b,
+  size: i,
+  step: r,
+  variant: o,
+  onClick: f
+}) => {
+  const {
+    isClickable: l,
+    isDisabled: C,
+    LabelComponent: h,
+    status: t,
+    handleClick: u,
+    handleKeyDown: x
+  } = j({ clickable: d, step: r, onClick: f });
+  return /* @__PURE__ */ c("div", { className: o === "stacked" ? "flex flex-col items-center" : "flex flex-col", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: a(
+          w({
+            orientation: "vertical",
+            variant: o,
+            clickable: l
+          }),
+          e?.stepWrapper
+        ),
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: u,
+        onKeyDown: x,
+        "aria-current": t === "active" ? "step" : void 0,
+        ...C && { "aria-disabled": !0 },
+        "aria-label": D(p, r.label, t),
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: a(
+                I({ status: t, size: i }),
+                e?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(
+                g,
+                {
+                  status: t,
+                  index: p,
+                  size: i,
+                  icons: s,
+                  className: e?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: a(v({ variant: o }), e?.content),
+              children: [
+                r.label && /* @__PURE__ */ n(
+                  h,
+                  {
+                    className: a(
+                      S({ status: t, size: i, variant: o }),
+                      e?.label
+                    ),
+                    children: r.label
+                  }
+                ),
+                r.description && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: a(
+                      k({ status: t, size: i, variant: o }),
+                      e?.description
+                    ),
+                    children: r.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !m && b && /* @__PURE__ */ n(
+      L,
+      {
+        orientation: "vertical",
+        status: t,
+        size: i,
+        variant: o,
+        className: e?.connector
+      }
+    )
+  ] });
+}, H = V(y);
+export {
+  H as VerticalStepItem
+};

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.types.d.ts

@@ -0,0 +1 @@
+export type { Props } from '../StepItem/StepItem.types';

package/dist/components/Stepper/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { StepSize } from '../Stepper.types';
+export declare const ICON_SIZE_MAP: Record<StepSize, number>;
+export declare const CHECK_ICON_SIZE_MAP: Record<StepSize, string>;

package/dist/components/Stepper/constants/index.js

@@ -0,0 +1,13 @@
+const _ = {
+  sm: 12,
+  md: 16,
+  lg: 24
+}, m = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-6 w-6"
+};
+export {
+  m as CHECK_ICON_SIZE_MAP,
+  _ as ICON_SIZE_MAP
+};

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

@@ -0,0 +1 @@
+export { useStepItemLogic } from './useStepItemLogic';

package/dist/components/Stepper/hooks/index.js

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

package/dist/components/Stepper/hooks/useStepItemLogic.d.ts

@@ -0,0 +1,2 @@
+import { UseStepItemLogicProps, UseStepItemLogicReturn } from './useStepItemLogic.types';
+export declare function useStepItemLogic({ clickable, onClick, step, }: UseStepItemLogicProps): UseStepItemLogicReturn;

package/dist/components/Stepper/hooks/useStepItemLogic.js

@@ -0,0 +1,27 @@
+import { S as b } from "../../../index-BvoZGpli.js";
+import { useCallback as s } from "react";
+function m({
+  clickable: c,
+  onClick: t,
+  step: n
+}) {
+  const i = n.status ?? "pending", l = n.disabled || i === "active", r = !!(n.onClick || t), o = c && !l && r, f = typeof n.label == "string" ? "span" : b, e = s(() => {
+    o && (n.onClick ? n.onClick() : t && t());
+  }, [o, n.onClick, t]), u = s(
+    (a) => {
+      o && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e());
+    },
+    [o, e]
+  );
+  return {
+    isClickable: o,
+    isDisabled: l,
+    LabelComponent: f,
+    status: i,
+    handleClick: e,
+    handleKeyDown: u
+  };
+}
+export {
+  m as useStepItemLogic
+};

package/dist/components/Stepper/hooks/useStepItemLogic.types.d.ts

@@ -0,0 +1,16 @@
+import { Slot } from '@radix-ui/react-slot';
+import { KeyboardEvent } from 'react';
+import { Step, StepStatus } from '../Stepper.types';
+export type UseStepItemLogicProps = {
+    clickable: boolean;
+    step: Step;
+    onClick?: () => void;
+};
+export type UseStepItemLogicReturn = {
+    isClickable: boolean;
+    isDisabled: boolean;
+    LabelComponent: typeof Slot | 'span';
+    status: StepStatus;
+    handleClick: () => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/components/Stepper/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { StepStatus } from '../Stepper.types';
+export declare function getStepAriaLabel(index: number, label: ReactNode, status: StepStatus): string;

package/dist/components/Stepper/utils/index.js

@@ -0,0 +1,13 @@
+const c = {
+  completed: ", completed",
+  active: ", current",
+  error: ", error",
+  pending: ""
+};
+function p(t, e, r) {
+  const n = `Step ${t + 1}`, o = typeof e == "string" ? `: ${e}` : "";
+  return `${n}${o}${c[r]}`;
+}
+export {
+  p as getStepAriaLabel
+};

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { SwitchProps } from './Switch.types';
+/**
+ * A toggle switch component built on Radix UI primitives.
+ * Supports horizontal and vertical layouts with label and helper text.
+ *
+ * @example
+ * ```tsx
+ * // Basic switch
+ * <Switch label="Enable feature" />
+ *
+ * // Controlled switch
+ * <Switch
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={(enabled) => setIsDarkMode(enabled)}
+ * />
+ *
+ * // Vertical layout with helper text
+ * <Switch
+ *   label="Notifications"
+ *   helperText="Receive email notifications"
+ *   alignment="vertical"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-switch--docs Storybook}
+ */
+export declare const Switch: FC<SwitchProps>;