@yuno-payments/dashboard-design-system 2.9.4 → 3.0.0

package/dist/components/molecules/select/select.js

@@ -1,96 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as G from "react";
-import { cn as m } from "../../../lib/utils.js";
-import { Select as L, SelectTrigger as O, SelectValue as R, SelectContent as T, SelectGroup as V, SelectLabel as E, SelectItem as f } from "../../../vendor/shadcn/select.js";
-import { Label as F } from "../../atoms/label/label.js";
-import { Typography as n } from "../../atoms/typography/typography.js";
-const $ = G.forwardRef(
-  ({
-    label: r,
-    description: i,
-    error: a,
-    info: x,
-    requiredIndicator: c,
-    required: u = !1,
-    optional: v = !1,
-    placeholder: o = "Select an option",
-    value: p,
-    defaultValue: S,
-    onChange: N,
-    disabled: t = !1,
-    options: h = [],
-    groups: j = [],
-    className: b,
-    id: d
-  }, g) => {
-    const y = j.length > 0, w = h.length > 0;
-    return /* @__PURE__ */ e.jsxs("div", { className: m("w-full", b), children: [
-      (r || x || c) && /* @__PURE__ */ e.jsxs("div", { className: "mb-2", children: [
-        /* @__PURE__ */ e.jsx(
-          F,
-          {
-            htmlFor: d,
-            info: x,
-            requiredIndicator: c,
-            required: u,
-            disabled: t,
-            children: r
-          }
-        ),
-        v && !c && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
-      ] }),
-      i && !a && /* @__PURE__ */ e.jsx(
-        n,
-        {
-          variant: "sm",
-          className: m(
-            "text-muted-foreground mb-2",
-            t && "opacity-50"
-          ),
-          children: i
-        }
-      ),
-      /* @__PURE__ */ e.jsxs(
-        L,
-        {
-          value: p,
-          defaultValue: S,
-          onValueChange: N,
-          disabled: t,
-          children: [
-            /* @__PURE__ */ e.jsx(
-              O,
-              {
-                ref: g,
-                id: d,
-                className: m(a && "border-destructive"),
-                children: /* @__PURE__ */ e.jsx(R, { placeholder: o })
-              }
-            ),
-            /* @__PURE__ */ e.jsx(T, { children: y ? (
-              // Render grouped options
-              j.map((l, C) => /* @__PURE__ */ e.jsxs(V, { children: [
-                l.label && /* @__PURE__ */ e.jsx(E, { children: l.label }),
-                l.options.map((s) => /* @__PURE__ */ e.jsxs(f, { value: s.value, children: [
-                  s.icon && /* @__PURE__ */ e.jsx("span", { className: "me-2 inline-flex items-center", children: s.icon }),
-                  s.label
-                ] }, s.value))
-              ] }, C))
-            ) : w ? (
-              // Render flat options
-              h.map((l) => /* @__PURE__ */ e.jsx(f, { value: l.value, children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                l.icon && /* @__PURE__ */ e.jsx("span", { className: "me-2 inline-flex items-center", children: l.icon }),
-                l.label
-              ] }) }, l.value))
-            ) : null })
-          ]
-        }
-      ),
-      a && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-destructive mt-2", children: a })
-    ] });
-  }
-);
-$.displayName = "Select";
-export {
-  $ as Select
-};

package/dist/components/molecules/stepper/index.d.ts

@@ -1 +0,0 @@
-export { Stepper, type StepperProps, type StepperStep } from './stepper';

package/dist/components/molecules/stepper/stepper.d.ts

@@ -1,50 +0,0 @@
-import { HTMLAttributes } from 'react';
-export interface StepperStep {
-    /** Unique identifier for the step */
-    key: string | number;
-    /** Display label for the step */
-    label: string;
-    /** Optional subtitle shown below the label */
-    description?: string;
-    /** Marks step with error styling */
-    status?: "error";
-}
-export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Zero-based index of the currently active step.
-     * Steps before this index are marked as completed,
-     * steps after are marked as inactive.
-     */
-    activeStep: number;
-    /**
-     * Array of steps to display in the stepper.
-     * Each step must have a unique `key` and a `label`.
-     */
-    steps: StepperStep[];
-    /** Layout orientation. Defaults to "horizontal". */
-    orientation?: "horizontal" | "vertical";
-    /** When provided, completed and inactive steps become clickable. */
-    onStepClick?: (index: number) => void;
-}
-/**
- * A stepper component that displays progress through a sequence of steps.
- * Each step shows a numbered circle (or checkmark when completed) and a label.
- * Steps are connected by lines that reflect the current progress.
- *
- * Supports horizontal (default) and vertical orientations, optional step descriptions,
- * error states, and clickable steps via `onStepClick`.
- *
- * @example
- * ```tsx
- * <Stepper
- *   activeStep={1}
- *   steps={[
- *     { key: "details", label: "Details" },
- *     { key: "review", label: "Review" },
- *     { key: "confirm", label: "Confirm" },
- *   ]}
- * />
- * ```
- */
-declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Stepper };

package/dist/components/molecules/stepper/stepper.js

@@ -1,74 +0,0 @@
-import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as b, Fragment as h } from "react";
-import { cn as i } from "../../../lib/utils.js";
-import { Icon as d } from "../../atoms/icon/icon.js";
-function j(t, e, o) {
-  return t.status === "error" ? "error" : e < o ? "completed" : e === o ? "active" : "inactive";
-}
-const N = ({ index: t, state: e }) => {
-  const o = i(
-    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold",
-    (e === "completed" || e === "active") && "bg-primary text-primary-foreground",
-    e === "inactive" && "bg-border text-muted-foreground",
-    e === "error" && "bg-destructive text-destructive-foreground"
-  );
-  return /* @__PURE__ */ r.jsx("div", { className: o, children: e === "completed" ? /* @__PURE__ */ r.jsx(d, { name: "Check", size: "xs", className: "text-primary-foreground", weight: "bold" }) : e === "error" ? /* @__PURE__ */ r.jsx(d, { name: "X", size: "xs", className: "text-destructive-foreground", weight: "bold" }) : /* @__PURE__ */ r.jsx("span", { children: t + 1 }) });
-}, y = ({
-  state: t,
-  orientation: e
-}) => {
-  const o = t === "completed" || t === "active";
-  return e === "vertical" ? /* @__PURE__ */ r.jsx("div", { className: i("w-0.5 h-6 ml-3 my-1", o ? "bg-primary" : "bg-border") }) : /* @__PURE__ */ r.jsx("div", { className: i("mx-2 h-0.5 flex-1 rounded-sm", o ? "bg-primary" : "bg-border") });
-}, w = b(
-  ({ activeStep: t, steps: e, orientation: o = "horizontal", onStepClick: l, className: u, ...x }, f) => {
-    const a = o === "vertical";
-    return /* @__PURE__ */ r.jsx(
-      "div",
-      {
-        ref: f,
-        className: i(
-          a ? "flex flex-col w-full" : "flex w-full items-center",
-          u
-        ),
-        ...x,
-        children: e.map((c, s) => {
-          const n = j(c, s, t), p = c.status === "error" ? "inactive" : s < t ? "completed" : s === t ? "active" : "inactive", v = i(
-            "text-xs",
-            n === "completed" || n === "active" ? "font-bold text-foreground" : n === "error" ? "font-bold text-destructive" : "font-normal text-muted-foreground"
-          ), m = l != null && n !== "active";
-          return /* @__PURE__ */ r.jsxs(h, { children: [
-            /* @__PURE__ */ r.jsxs(
-              "div",
-              {
-                className: i(
-                  "flex flex-row gap-2",
-                  a ? "items-start" : "items-center",
-                  m && "cursor-pointer hover:opacity-80"
-                ),
-                "aria-current": n === "active" ? "step" : void 0,
-                ...m ? {
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: () => l(s),
-                  onKeyDown: (g) => g.key === "Enter" && l(s)
-                } : {},
-                children: [
-                  /* @__PURE__ */ r.jsx(N, { index: s, state: n }),
-                  /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ r.jsx("span", { className: v, children: c.label }),
-                    c.description && /* @__PURE__ */ r.jsx("span", { className: "text-xs text-muted-foreground font-normal", children: c.description })
-                  ] })
-                ]
-              }
-            ),
-            s < e.length - 1 && /* @__PURE__ */ r.jsx(y, { state: p, orientation: o })
-          ] }, c.key);
-        })
-      }
-    );
-  }
-);
-w.displayName = "Stepper";
-export {
-  w as Stepper
-};

package/dist/components/molecules/switch/index.d.ts

@@ -1 +0,0 @@
-export { Switch, type SwitchProps } from './switch';

package/dist/components/molecules/switch/switch.d.ts

@@ -1,64 +0,0 @@
-import { Switch as ShadcnSwitch } from '../../../vendor/shadcn/switch';
-import { ComponentProps, ChangeEvent } from 'react';
-/**
- * Props for the Switch component
- */
-export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "children" | "onCheckedChange" | "className" | "onChange"> {
-    /**
-     * Label text displayed next to the switch
-     */
-    label: string;
-    /**
-     * Optional description text displayed below the label
-     */
-    description?: string;
-    /**
-     * Position of the switch relative to the label
-     * @default "left"
-     */
-    side?: "left" | "right";
-    /**
-     * Visual variant of the switch container
-     * - "default": minimal layout without background
-     * - "box": contained layout with background, border, and padding
-     * @default "default"
-     */
-    variant?: "default" | "box";
-    /**
-     * Callback fired when the switch state changes
-     * Provides a synthetic ChangeEvent compatible with react-hook-form
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Additional CSS classes to apply to the wrapper container
-     */
-    className?: string;
-    /**
-     * Additional CSS classes to apply to the switch element itself
-     */
-    switchClassName?: string;
-    /**
-     * Additional CSS classes to apply to the label element
-     */
-    labelClassName?: string;
-    /**
-     * Optional info icon with tooltip
-     */
-    info?: string;
-}
-/**
- * Toggle switch component with label and optional description.
- * Supports left/right positioning and box variant for emphasized display.
- *
- * @example
- * ```tsx
- * <Switch
- *   label="Enable notifications"
- *   description="Receive email notifications for updates"
- *   checked={isEnabled}
- *   onChange={(e) => setIsEnabled(e.target.checked)}
- * />
- * ```
- */
-declare const Switch: import('react').ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-export { Switch };

package/dist/components/molecules/switch/switch.js

@@ -1,79 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { Switch as b } from "../../../vendor/shadcn/switch.js";
-import { forwardRef as N, useId as y } from "react";
-import { cn as o } from "../../../lib/utils.js";
-import { Label as S } from "../../atoms/label/label.js";
-const C = N(
-  ({
-    label: i,
-    description: a,
-    side: c = "left",
-    variant: l = "default",
-    id: m,
-    name: t,
-    onChange: n,
-    className: x,
-    switchClassName: d,
-    info: f,
-    labelClassName: p,
-    ...h
-  }, u) => {
-    const g = y(), r = m || t || g, w = (s) => {
-      if (!n) return;
-      n({
-        target: {
-          name: t || r,
-          checked: s,
-          type: "checkbox",
-          value: s ? "on" : "off"
-        },
-        currentTarget: {
-          name: t || r,
-          checked: s,
-          type: "checkbox",
-          value: s ? "on" : "off"
-        },
-        preventDefault: () => {
-        },
-        stopPropagation: () => {
-        }
-      });
-    }, j = /* @__PURE__ */ e.jsx(
-      b,
-      {
-        ref: u,
-        id: r,
-        name: t,
-        className: o("cursor-pointer", d),
-        onCheckedChange: w,
-        ...h
-      }
-    ), v = o(
-      "flex gap-2 items-start",
-      {
-        "flex-row-reverse": c === "right",
-        "bg-input box-border justify-start p-4 rounded-lg border shadow-xs": l === "box"
-      },
-      x
-    );
-    return /* @__PURE__ */ e.jsxs("div", { className: v, children: [
-      j,
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-        /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx(
-          S,
-          {
-            htmlFor: r,
-            info: f,
-            className: o("text-sm leading-[18.39px] cursor-pointer", p),
-            children: i
-          }
-        ) }),
-        a && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: a })
-      ] })
-    ] });
-  }
-);
-C.displayName = "Switch";
-export {
-  C as Switch
-};

package/dist/components/molecules/textarea/index.d.ts

@@ -1 +0,0 @@
-export { Textarea, type TextareaProps } from './textarea';

package/dist/components/molecules/textarea/textarea.d.ts

@@ -1,46 +0,0 @@
-import { TextareaHTMLAttributes } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const textareaWrapperVariants: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for the Textarea component
- */
-export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className">, VariantProps<typeof textareaWrapperVariants> {
-    /**
-     * Label text displayed above or next to the textarea
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the textarea
-     */
-    description?: string;
-    /**
-     * Error message displayed below the textarea (overrides description)
-     */
-    error?: string;
-    /**
-     * Additional CSS classes for the container
-     */
-    className?: string;
-    /**
-     * Additional props to pass to the textarea element
-     */
-    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
-}
-/**
- * Multiline text input component with label, description, and error handling.
- * Supports vertical and horizontal layouts.
- *
- * @example
- * ```tsx
- * <Textarea
- *   label="Comments"
- *   placeholder="Enter your comments..."
- *   description="Max 500 characters"
- *   rows={4}
- * />
- * ```
- */
-declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };

package/dist/components/molecules/textarea/textarea.js

@@ -1,77 +0,0 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p, useId as h } from "react";
-import { cva as d } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { Textarea as j } from "../../../vendor/shadcn/textarea.js";
-import { cn as s } from "../../../lib/utils.js";
-import { Label as N } from "../../atoms/label/label.js";
-const b = d("flex gap-2 w-full", {
-  variants: {
-    layout: {
-      vertical: "flex-col",
-      horizontal: "flex-row items-start gap-4"
-    }
-  },
-  defaultVariants: {
-    layout: "vertical"
-  }
-}), g = d("text-sm", {
-  variants: {
-    layout: {
-      vertical: "",
-      horizontal: "mt-2"
-    }
-  },
-  defaultVariants: {
-    layout: "vertical"
-  }
-}), y = p(
-  ({
-    className: m,
-    layout: l,
-    label: o,
-    description: r,
-    error: a,
-    id: n,
-    disabled: x,
-    textareaProps: i,
-    ...f
-  }, u) => {
-    const v = h(), e = n || i?.id || v, c = !!a;
-    return /* @__PURE__ */ t.jsxs("div", { className: s(b({ layout: l }), m), children: [
-      o && /* @__PURE__ */ t.jsx(N, { htmlFor: e, className: s(g({ layout: l })), children: o }),
-      /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-        /* @__PURE__ */ t.jsx(
-          j,
-          {
-            ref: u,
-            disabled: x,
-            className: s(
-              c && "border-destructive focus-visible:border-destructive",
-              i?.className
-            ),
-            "aria-invalid": c,
-            "aria-describedby": r || a ? `${e}-description` : void 0,
-            ...f,
-            ...i,
-            id: e
-          }
-        ),
-        (r || a) && /* @__PURE__ */ t.jsx(
-          "p",
-          {
-            id: `${e}-description`,
-            className: s(
-              "text-sm",
-              a ? "text-destructive" : "text-muted-foreground"
-            ),
-            children: a || r
-          }
-        )
-      ] })
-    ] });
-  }
-);
-y.displayName = "Textarea";
-export {
-  y as Textarea
-};

package/dist/components/molecules/time-picker/index.d.ts

@@ -1 +0,0 @@
-export { TimePicker, type TimePickerProps } from './time-picker';

package/dist/components/molecules/time-picker/time-picker.d.ts

@@ -1,75 +0,0 @@
-import { TimePickerProps as TimePickerPrimitiveProps } from '../../../vendor/shadcn/time-picker';
-import * as React from "react";
-/**
- * Props for the TimePicker component
- */
-export interface TimePickerProps extends Omit<TimePickerPrimitiveProps, "onChange"> {
-    /**
-     * Label text displayed above the input
-     */
-    label?: string;
-    /**
-     * Error message displayed below the input
-     */
-    error?: string;
-    /**
-     * Helper text displayed below the input
-     */
-    description?: string;
-    /**
-     * Layout orientation
-     * @default "vertical"
-     */
-    orientation?: "vertical" | "horizontal" | "responsive";
-    /**
-     * Callback fired when the time value changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Picker mode
-     * - "native": HTML5 native input (default)
-     * - "dropdown": Custom dropdown with columns
-     * @default "native"
-     */
-    mode?: "native" | "dropdown";
-    /**
-     * Minute intervals (only for mode="dropdown")
-     * 0 = all minutes, 15 = every 15 minutes, etc.
-     * @default 0
-     */
-    divisorMinutes?: number;
-    /**
-     * Width of the picker (only for mode="dropdown")
-     * @default 140
-     */
-    width?: number | string;
-    /**
-     * Use 24-hour format (military time) instead of 12-hour with AM/PM
-     * @default false
-     */
-    use24Hour?: boolean;
-}
-/**
- * Time input picker with label, description, and error handling.
- * Supports two modes: native HTML5 input or custom dropdown.
- *
- * @example
- * ```tsx
- * // Native mode (default)
- * <TimePicker
- *   label="Select time"
- *   value={time}
- *   onChange={(value) => setTime(value)}
- * />
- *
- * // Dropdown mode with 15-minute intervals
- * <TimePicker
- *   mode="dropdown"
- *   divisorMinutes={15}
- *   value={time}
- *   onChange={(value) => setTime(value)}
- * />
- * ```
- */
-declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
-export { TimePicker };