laif-ds 0.2.20 → 0.2.21

package/dist/_virtual/index6.js

@@ -1,5 +1,5 @@
 "use client";
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

package/dist/_virtual/index7.js

@@ -1,5 +1,5 @@
 "use client";
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

package/dist/components/ui/app-stepper.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { Stepper as g, StepperNav as z, StepperItem as V, StepperTrigger as S, StepperIndicator as b, StepperTitle as N, StepperSeparator as w, StepperPanel as C, StepperContent as I } from "./stepper.js";
+import { cva as e } from "../../node_modules/class-variance-authority/dist/index.js";
+const T = e("", {
+  variants: {
+    align: {
+      horizontal: "flex w-full flex-col",
+      vertical: "flex items-start gap-8"
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+}), j = e(
+  "rounded-lg p-6 shadow w-full max-w-6xl",
+  {
+    variants: {
+      align: {
+        horizontal: "mt-6",
+        vertical: "mt-1"
+      }
+    },
+    defaultVariants: {
+      align: "horizontal"
+    }
+  }
+), k = e("", {
+  variants: {
+    align: {
+      horizontal: "flex flex-col gap-3",
+      vertical: "flex flex-row gap-3 items-center"
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+}), y = e("relative", {
+  variants: {
+    align: {
+      horizontal: "flex-1 items-start",
+      vertical: "flex items-start"
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+}), A = e("", {
+  variants: {
+    align: {
+      horizontal: "w-full",
+      vertical: "relative flex flex-col py-2"
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+}), W = e("", {
+  variants: {
+    size: {
+      sm: "w-6 h-6 text-sm font-medium",
+      md: "w-8 h-8 text-base font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+}), q = e("", {
+  variants: {
+    size: {
+      sm: "text-sm font-medium",
+      md: "text-base font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+}), B = e(
+  "group-data-[state=completed]/step:bg-d-primary",
+  {
+    variants: {
+      align: {
+        horizontal: "absolute left-1/2 h-0.5",
+        vertical: "!w-0.5"
+      },
+      size: {
+        sm: "top-2.5 ml-2 w-[calc(100%-1rem)]",
+        md: "top-3.5 ml-4 w-[calc(100%-2rem)]"
+      }
+    },
+    compoundVariants: [
+      {
+        align: "vertical",
+        size: "sm",
+        class: "ml-2.5"
+      },
+      {
+        align: "vertical",
+        size: "md",
+        class: "ml-3.5"
+      }
+    ],
+    defaultVariants: {
+      align: "horizontal",
+      size: "sm"
+    }
+  }
+), D = e("flex flex-1", {
+  variants: {
+    align: {
+      horizontal: "justify-center",
+      vertical: "flex-grow"
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+}), E = e("flex flex-1 flex-col", {
+  variants: {
+    align: {
+      horizontal: "items-center",
+      vertical: ""
+    }
+  },
+  defaultVariants: {
+    align: "horizontal"
+  }
+});
+function J({
+  steps: r,
+  align: t = "horizontal",
+  size: n = "sm",
+  showSeparators: f = !0,
+  defaultStep: u,
+  allowStepNavigation: c = !0,
+  allowClickOnlyCompleted: p = !1,
+  onStepClick: d,
+  indicators: h,
+  ...o
+}) {
+  const v = (a, i) => {
+    if (d) {
+      d(a, i);
+      return;
+    }
+    c && !a.disabled && (!p || a.completed) && o.onValueChange?.(a.id);
+  }, x = o.value ?? u ?? r[0]?.id;
+  return /* @__PURE__ */ l(
+    g,
+    {
+      ...o,
+      value: x,
+      orientation: t,
+      indicators: h,
+      children: /* @__PURE__ */ s("div", { className: T({ align: t }), children: [
+        /* @__PURE__ */ l(z, { className: A({ align: t }), children: r.map((a, i) => {
+          const m = c && !a.disabled && (!p || a.completed);
+          return /* @__PURE__ */ s(
+            V,
+            {
+              step: a.id,
+              completed: a.completed,
+              disabled: a.disabled,
+              loading: a.loading,
+              className: y({ align: t }),
+              children: [
+                /* @__PURE__ */ s(
+                  S,
+                  {
+                    className: k({ align: t }),
+                    onClick: () => v(a, i),
+                    style: { cursor: m ? "pointer" : "default" },
+                    children: [
+                      /* @__PURE__ */ l(
+                        b,
+                        {
+                          className: W({ size: n }),
+                          children: a.id
+                        }
+                      ),
+                      /* @__PURE__ */ l(N, { className: q({ size: n }), children: a.label })
+                    ]
+                  }
+                ),
+                f && i < r.length - 1 && /* @__PURE__ */ l(
+                  w,
+                  {
+                    className: B({ align: t, size: n })
+                  }
+                )
+              ]
+            },
+            a.id
+          );
+        }) }),
+        /* @__PURE__ */ l(C, { className: D({ align: t }), children: r.map((a) => /* @__PURE__ */ l(
+          I,
+          {
+            value: a.id,
+            className: E({ align: t }),
+            children: /* @__PURE__ */ l("div", { className: j({ align: t }), children: a.component })
+          },
+          a.id
+        )) })
+      ] })
+    }
+  );
+}
+export {
+  J as AppStepper,
+  J as default
+};

package/dist/components/ui/stepper.js

@@ -0,0 +1,387 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { cn as d } from "../../lib/utils.js";
+import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
+import * as p from "react";
+import { createContext as T, useContext as P } from "react";
+const E = T(
+  void 0
+), L = T(
+  void 0
+), R = g("w-full max-w-6xl", {
+  variants: {
+    orientation: {
+      horizontal: "flex flex-row items-center",
+      vertical: "flex flex-col items-start"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), O = g("group/step relative", {
+  variants: {
+    orientation: {
+      horizontal: "flex flex-row items-center justify-center not-last:flex-1",
+      vertical: "flex flex-col items-start justify-start"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), F = g(
+  "focus-visible:ring-ring/50 focus-visible:border-d-ring inline-flex cursor-pointer items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-60",
+  {
+    variants: {
+      size: {
+        sm: "gap-2",
+        default: "gap-3",
+        lg: "gap-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), K = g(
+  "border-secondary bg-secondary text-bodyPrimary data-[state=active]:bg-d-primary data-[state=completed]:bg-d-primary data-[state=active]:text-bodyPrimary data-[state=completed]:text-onAccent relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-5 text-xs",
+        default: "size-6 text-xs",
+        lg: "size-8 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), $ = g("bg-secondary m-0.5 rounded-full", {
+  variants: {
+    orientation: {
+      horizontal: "h-0.5 flex-1",
+      vertical: "h-12 w-0.5"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), H = g("text-sm leading-none font-medium", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), U = g("inline-flex", {
+  variants: {
+    orientation: {
+      horizontal: "w-full flex-row",
+      vertical: "flex-col"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+function x() {
+  const t = P(E);
+  if (!t) throw new Error("useStepper must be used within a Stepper");
+  return t;
+}
+function I() {
+  const t = P(L);
+  if (!t) throw new Error("useStepItem must be used within a StepperItem");
+  return t;
+}
+function M({
+  defaultValue: t = 1,
+  value: a,
+  onValueChange: n,
+  orientation: e = "horizontal",
+  className: i,
+  children: r,
+  indicators: S = {},
+  ...y
+}) {
+  const [f, b] = p.useState(t), [o, h] = p.useState(
+    []
+  ), z = p.useCallback(
+    (s) => {
+      h((l) => s && !l.includes(s) ? [...l, s] : !s && l.includes(s) ? l.filter((w) => w !== s) : l);
+    },
+    []
+  ), N = p.useCallback(
+    (s) => {
+      a === void 0 && b(s), n?.(s);
+    },
+    [a, n]
+  ), V = a ?? f, m = (s) => {
+    o[s] && o[s].focus();
+  }, A = (s) => m((s + 1) % o.length), v = (s) => m((s - 1 + o.length) % o.length), C = () => m(0), k = () => m(o.length - 1), D = p.useMemo(
+    () => ({
+      activeStep: V,
+      setActiveStep: N,
+      stepsCount: p.Children.toArray(r).filter(
+        (s) => p.isValidElement(s) && s.type.displayName === "StepperItem"
+      ).length,
+      orientation: e,
+      registerTrigger: z,
+      focusNext: A,
+      focusPrev: v,
+      focusFirst: C,
+      focusLast: k,
+      triggerNodes: o,
+      indicators: S
+    }),
+    [
+      V,
+      N,
+      r,
+      e,
+      z,
+      o
+    ]
+  );
+  return /* @__PURE__ */ c(E.Provider, { value: D, children: /* @__PURE__ */ c(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": e,
+      "data-slot": "stepper",
+      className: d(R({ orientation: e }), i),
+      "data-orientation": e,
+      ...y,
+      children: r
+    }
+  ) });
+}
+function Q({
+  step: t,
+  completed: a = !1,
+  disabled: n = !1,
+  loading: e = !1,
+  orientation: i,
+  className: r,
+  children: S,
+  ...y
+}) {
+  const { activeStep: f, orientation: b } = x(), o = a || t < f ? "completed" : f === t ? "active" : "inactive", h = e && t === f;
+  return /* @__PURE__ */ c(
+    L.Provider,
+    {
+      value: { step: t, state: o, isDisabled: n, isLoading: h },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          "data-slot": "stepper-item",
+          className: d(
+            O({
+              orientation: i || b
+            }),
+            r
+          ),
+          "data-state": o,
+          ...h ? { "data-loading": !0 } : {},
+          ...y,
+          children: S
+        }
+      )
+    }
+  );
+}
+function W({
+  asChild: t = !1,
+  size: a,
+  className: n,
+  children: e,
+  tabIndex: i,
+  ...r
+}) {
+  const { state: S, isLoading: y } = I(), f = x(), {
+    setActiveStep: b,
+    activeStep: o,
+    registerTrigger: h,
+    triggerNodes: z,
+    focusNext: N,
+    focusPrev: V,
+    focusFirst: m,
+    focusLast: A
+  } = f, { step: v, isDisabled: C } = I(), k = o === v, D = `stepper-tab-${v}`, s = `stepper-panel-${v}`, l = p.useRef(null);
+  p.useEffect(() => {
+    l.current && h(l.current);
+  }, [l.current]);
+  const w = p.useMemo(
+    () => z.findIndex((u) => u === l.current),
+    [z, l.current]
+  ), j = (u) => {
+    switch (u.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        u.preventDefault(), w !== -1 && N && N(w);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        u.preventDefault(), w !== -1 && V && V(w);
+        break;
+      case "Home":
+        u.preventDefault(), m && m();
+        break;
+      case "End":
+        u.preventDefault(), A && A();
+        break;
+      case "Enter":
+      case " ":
+        u.preventDefault(), b(v);
+        break;
+    }
+  };
+  return t ? /* @__PURE__ */ c(
+    "span",
+    {
+      "data-slot": "stepper-trigger",
+      "data-state": S,
+      className: n,
+      children: e
+    }
+  ) : /* @__PURE__ */ c(
+    "button",
+    {
+      ref: l,
+      role: "tab",
+      id: D,
+      "aria-selected": k,
+      "aria-controls": s,
+      tabIndex: typeof i == "number" ? i : k ? 0 : -1,
+      "data-slot": "stepper-trigger",
+      "data-state": S,
+      "data-loading": y,
+      className: d(F({ size: a }), n),
+      onClick: () => b(v),
+      onKeyDown: j,
+      disabled: C,
+      ...r,
+      children: e
+    }
+  );
+}
+function X({
+  children: t,
+  size: a,
+  className: n
+}) {
+  const { state: e, isLoading: i } = I(), { indicators: r } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-indicator",
+      "data-state": e,
+      className: d(K({ size: a }), n),
+      children: /* @__PURE__ */ c("div", { className: "absolute", children: r && (i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive) ? i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive : t })
+    }
+  );
+}
+function Y({
+  orientation: t,
+  className: a
+}) {
+  const { state: n } = I(), { orientation: e } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-separator",
+      "data-state": n,
+      className: d(
+        $({
+          orientation: t || e
+        }),
+        a
+      )
+    }
+  );
+}
+function Z({
+  children: t,
+  size: a,
+  className: n
+}) {
+  const { state: e } = I();
+  return /* @__PURE__ */ c(
+    "h3",
+    {
+      "data-slot": "stepper-title",
+      "data-state": e,
+      className: d(H({ size: a }), n),
+      children: t
+    }
+  );
+}
+function _({
+  children: t,
+  orientation: a,
+  className: n
+}) {
+  const { activeStep: e, orientation: i } = x();
+  return /* @__PURE__ */ c(
+    "nav",
+    {
+      "data-slot": "stepper-nav",
+      "data-state": e,
+      "data-orientation": a || i,
+      className: d(
+        U({
+          orientation: a || i
+        }),
+        n
+      ),
+      children: t
+    }
+  );
+}
+function tt({ children: t, className: a }) {
+  const { activeStep: n } = x();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-panel",
+      "data-state": n,
+      className: d("w-full", a),
+      children: t
+    }
+  );
+}
+function et({
+  value: t,
+  forceMount: a,
+  children: n,
+  className: e
+}) {
+  const { activeStep: i } = x(), r = t === i;
+  return !a && !r ? null : /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "stepper-content",
+      "data-state": i,
+      className: d("w-full", e, !r && a && "hidden"),
+      hidden: !r && a,
+      children: n
+    }
+  );
+}
+export {
+  M as Stepper,
+  et as StepperContent,
+  X as StepperIndicator,
+  Q as StepperItem,
+  _ as StepperNav,
+  tt as StepperPanel,
+  Y as StepperSeparator,
+  Z as StepperTitle,
+  W as StepperTrigger,
+  I as useStepItem,
+  x as useStepper
+};

package/dist/index.d.ts

@@ -180,6 +180,29 @@ declare interface AppSidebarProps extends React_2.ComponentProps<typeof Sidebar>
     linkProps?: Record<string, any>;
 }
 
+declare interface AppStep {
+    id: number;
+    label: React_2.ReactNode;
+    component: React_2.ReactNode;
+    completed?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+export declare function AppStepper({ steps, align, size, showSeparators, defaultStep, allowStepNavigation, allowClickOnlyCompleted, onStepClick, indicators, ...stepperProps }: AppStepperProps): JSX.Element;
+
+declare interface AppStepperProps extends Omit<StepperProps, "children"> {
+    steps: AppStep[];
+    align?: "horizontal" | "vertical";
+    size?: "sm" | "md";
+    showSeparators?: boolean;
+    defaultStep?: number;
+    allowStepNavigation?: boolean;
+    allowClickOnlyCompleted?: boolean;
+    onStepClick?: (step: AppStep, index: number) => void;
+    indicators?: StepIndicators_2;
+}
+
 export declare function AspectRatio({ ...props }: AspectRatioProps): JSX.Element;
 
 declare type AspectRatioProps = React.ComponentProps<typeof AspectRatioPrimitive.Root>;
@@ -1715,6 +1738,34 @@ declare interface SourcePart {
     type: "source";
 }
 
+declare type StepIndicators = {
+    active?: React_2.ReactNode;
+    completed?: React_2.ReactNode;
+    inactive?: React_2.ReactNode;
+    loading?: React_2.ReactNode;
+};
+
+declare type StepIndicators_2 = {
+    active?: React_2.ReactNode;
+    completed?: React_2.ReactNode;
+    inactive?: React_2.ReactNode;
+    loading?: React_2.ReactNode;
+};
+
+declare type StepperOrientation = "horizontal" | "vertical";
+
+declare interface StepperProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperVariants> {
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: StepperOrientation;
+    indicators?: StepIndicators;
+}
+
+declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const stringToHexColor: (str: string) => string;
 
 export declare function Switch({ className, ...props }: React_2.ComponentProps<typeof SwitchPrimitive.Root>): JSX.Element;