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

package/dist/components/organisms/data-table/utils/data-table-styles.js

@@ -1,35 +0,0 @@
-import { cn as o } from "../../../../lib/utils.js";
-import { getPinnedStyles as f } from "./data-table-utils.js";
-import { PINNED_SHADOW_CLASS as p } from "./data-table-constants.js";
-function l(t, i, e) {
-  return t ? { width: "auto", minWidth: 0 } : i ? {
-    width: `${e}px`,
-    minWidth: `${e}px`,
-    maxWidth: `${e}px`
-  } : { width: `${e}px` };
-}
-function m(t, i, e) {
-  const s = t.getIsPinned(), d = t.getSize(), n = t.id === "_spacer", a = t.columnDef.enableResizing === !1 && !n;
-  return {
-    style: {
-      ...l(n, a, d),
-      ...f(
-        s,
-        (r) => t.getStart(r),
-        (r) => t.getAfter(r),
-        e
-      )
-    },
-    className: o(
-      i,
-      s && p,
-      // Add a class to identify fixed-size columns
-      a && "data-table-fixed-column",
-      // Hide spacer column visually
-      n && "data-table-spacer"
-    )
-  };
-}
-export {
-  m as getCellStyles
-};

package/dist/components/organisms/data-table/utils/data-table-utils.d.ts

@@ -1,5 +0,0 @@
-import { Column } from '@tanstack/react-table';
-import { DataTableColumnHeaderConfig } from '../data-table.types';
-export declare function isHeaderConfig(header: unknown): header is DataTableColumnHeaderConfig;
-export declare function getColumnDisplayName<TData>(column: Column<TData, unknown>): string;
-export declare function getPinnedStyles(isPinned: false | "left" | "right", getStart: (position: "left") => number, getAfter: (position: "right") => number, backgroundColor?: string): React.CSSProperties;

package/dist/components/organisms/data-table/utils/data-table-utils.js

@@ -1,23 +0,0 @@
-function r(e) {
-  return typeof e == "object" && e !== null && "title" in e && typeof e.title == "string";
-}
-function f(e) {
-  return typeof e.columnDef.header == "string" ? e.columnDef.header : e.columnDef.header && typeof e.columnDef.header == "object" && "title" in e.columnDef.header ? e.columnDef.header.title : e.id;
-}
-function o(e, t, i, n) {
-  return e ? {
-    position: "sticky",
-    // Use logical properties so pinned columns work in both LTR and RTL.
-    // "left"-pinned columns stick to the inline-start edge,
-    // "right"-pinned columns (e.g. actions) stick to the inline-end edge.
-    insetInlineStart: e === "left" ? `${t("left")}px` : void 0,
-    insetInlineEnd: e === "right" ? `${i("right")}px` : void 0,
-    zIndex: 10,
-    backgroundColor: n
-  } : {};
-}
-export {
-  f as getColumnDisplayName,
-  o as getPinnedStyles,
-  r as isHeaderConfig
-};

package/dist/components/organisms/dialog/dialog.d.ts

@@ -1,99 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { ButtonProps } from '../../atoms/button';
-import * as React from "react";
-declare const dialogVariants: (props?: ({
-    verticalAlign?: "center" | "end" | "start" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type VerticalAlign = "start" | "center" | "end";
-export type VariantButtonType = "primary" | "secondary" | "tertiary" | "text" | "outlined" | "contained";
-export type SizeButtonType = "small" | "large" | "medium";
-/**
- * Props for the Dialog component
- */
-export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof dialogVariants> {
-    /**
-     * Dialog title (text or custom element)
-     */
-    title?: React.ReactElement | string;
-    /**
-     * Whether the dialog is open
-     */
-    open: boolean;
-    /**
-     * Callback fired when the dialog should close
-     */
-    closeIcon: () => void;
-    /**
-     * Array of button configurations to display in the footer
-     */
-    buttons?: ButtonProps[];
-    /**
-     * Custom width for the dialog container
-     */
-    widthContainer?: number | string;
-    /**
-     * Custom height for the dialog container
-     */
-    heightContainer?: number | string;
-    /**
-     * Callback fired when the back button is clicked
-     */
-    backButtonAction?: () => void;
-    /**
-     * Whether to show the footer with action buttons
-     * @default true
-     */
-    showActions?: boolean;
-    /**
-     * Additional action elements to display in the header
-     */
-    otherActions?: React.ReactNode;
-    /**
-     * Whether to show the header
-     * @default true
-     */
-    withHeader?: boolean;
-    /**
-     * Content to display in the dialog body
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS classes for the header
-     */
-    headerClassName?: string;
-    /**
-     * Additional CSS classes for the content area
-     */
-    contentClassName?: string;
-    /**
-     * Additional CSS classes for the footer
-     */
-    footerClassName?: string;
-    /**
-     * Optional z-index override. When provided, replaces the default z-dialog value.
-     * Useful for rendering inside high z-index containers like inspector panels.
-     */
-    zIndex?: number;
-}
-/**
- * Modal dialog component with header, content, and footer sections.
- * Features backdrop click to close, ESC key support, and body scroll locking.
- * Responsive: fullscreen on mobile, centered modal on desktop.
- *
- * @example
- * ```tsx
- * <Dialog
- *   open={isOpen}
- *   closeIcon={() => setIsOpen(false)}
- *   title="Confirm Action"
- *   buttons={[
- *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
- *     { children: 'Confirm', onClick: handleConfirm }
- *   ]}
- * >
- *   <p>Are you sure you want to proceed?</p>
- * </Dialog>
- * ```
- */
-declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
-export { Dialog };

package/dist/components/organisms/dialog/dialog.js

@@ -1,141 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as i from "react";
-import { createPortal as F } from "react-dom";
-import { cva as p } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as d, normalizeDimension as w } from "../../../lib/utils.js";
-import { useBodyScrollLock as R } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as H } from "../../../hooks/use-escape-key.js";
-import { DialogHeader as I } from "../../molecules/dialog-header/dialog-header.js";
-import { DialogContent as K } from "../../molecules/dialog-content/dialog-content.js";
-import { DialogFooter as O } from "../../molecules/dialog-footer/dialog-footer.js";
-const P = p(
-  "fixed inset-0 flex items-center justify-center p-4",
-  {
-    variants: {
-      verticalAlign: {
-        start: "items-start pt-20",
-        center: "items-center",
-        end: "items-end pb-20"
-      }
-    },
-    defaultVariants: {
-      verticalAlign: "center"
-    }
-  }
-), W = p(
-  "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
-  {
-    variants: {
-      size: {
-        default: "w-full max-w-md",
-        sm: "w-full max-w-sm",
-        lg: "w-full max-w-lg",
-        xl: "w-full max-w-xl",
-        fullscreen: "w-full h-full max-w-none max-h-none rounded-none"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-), q = i.forwardRef(
-  ({
-    className: y,
-    verticalAlign: b,
-    title: h,
-    open: a,
-    closeIcon: o,
-    buttons: j = [],
-    widthContainer: l,
-    heightContainer: c,
-    backButtonAction: z,
-    showActions: N = !0,
-    otherActions: k,
-    withHeader: D = !0,
-    children: E,
-    headerClassName: S,
-    contentClassName: T,
-    footerClassName: V,
-    zIndex: r,
-    ...A
-  }, C) => {
-    const [s, L] = i.useState(!1), [n, u] = i.useState(a), [f, g] = i.useState(!1);
-    if (i.useEffect(() => {
-      const t = () => {
-        L(window.innerWidth <= 599);
-      };
-      return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, []), i.useEffect(() => {
-      let t, m;
-      return a ? (u(!0), t = setTimeout(() => g(!0), 10)) : n && (g(!1), m = setTimeout(() => {
-        u(!1);
-      }, 600)), () => {
-        t && clearTimeout(t), m && clearTimeout(m);
-      };
-    }, [a, n]), R(a), H(a, o), !n) return null;
-    const M = {
-      width: l && !s ? w(l) : void 0,
-      height: c && !s ? w(c) : void 0
-    }, x = r !== void 0 ? { zIndex: r } : void 0, v = r === void 0 ? "z-dialog" : void 0, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: d(
-            "fixed inset-0 bg-black/25 transition-opacity duration-600 ease-out",
-            v,
-            f ? "opacity-100" : "opacity-0"
-          ),
-          style: x,
-          onClick: o,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: d(P({ verticalAlign: b }), v),
-          style: x,
-          children: /* @__PURE__ */ e.jsxs(
-            "div",
-            {
-              ref: C,
-              className: d(
-                "yuno-dialog",
-                W({
-                  size: s ? "fullscreen" : "default"
-                }),
-                "transition-all duration-600 ease-out",
-                f ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-98 -translate-y-2",
-                l && !s && "max-w-none",
-                y
-              ),
-              style: M,
-              role: "dialog",
-              "aria-modal": "true",
-              ...A,
-              children: [
-                D && /* @__PURE__ */ e.jsx(
-                  I,
-                  {
-                    title: h,
-                    onClose: o,
-                    onBack: z,
-                    otherActions: k,
-                    className: S
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(K, { className: T, children: E }),
-                N && /* @__PURE__ */ e.jsx(O, { buttons: j, className: V })
-              ]
-            }
-          )
-        }
-      )
-    ] });
-    return F(B, document.body);
-  }
-);
-q.displayName = "Dialog";
-export {
-  q as Dialog
-};

package/dist/components/organisms/dialog/index.d.ts

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

package/dist/components/organisms/filter/filter-date-range.d.ts

@@ -1,70 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import { RadioGroup } from '../../../vendor/shadcn/radio-group';
-import { FilterLanguage, FilterTranslations } from './filter-translations';
-export declare const FilterDateRangeValue: {
-    readonly CUSTOM: "CUSTOM";
-    readonly TODAY: "TODAY";
-    readonly LAST_3_DAYS: "LAST_3_DAYS";
-    readonly LAST_7_DAYS: "LAST_7_DAYS";
-    readonly LAST_30_DAYS: "LAST_30_DAYS";
-    readonly THIS_MONTH: "THIS_MONTH";
-    readonly ALL_TIME: "ALL_TIME";
-};
-export type FilterDateRangeValueType = typeof FilterDateRangeValue[keyof typeof FilterDateRangeValue];
-interface FilterDateRangeOptionProps extends ComponentProps<"label"> {
-    label: string;
-    description?: string;
-    value: string;
-}
-declare const FilterDateRangeOption: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeOptionProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-/**
- * Labels for date range filter options - allows i18n/translation support
- * @deprecated Use `lang` prop or `translations` prop instead
- */
-interface FilterDateRangeLabels {
-    custom?: string;
-    today?: string;
-    last3Days?: string;
-    last7Days?: string;
-    last30Days?: string;
-    thisMonth?: string;
-    allTime?: string;
-    startDate?: string;
-    endDate?: string;
-}
-interface FilterDateRangeProps extends ComponentProps<typeof RadioGroup> {
-    showCustomFields?: boolean;
-    onCustomFieldsChange?: (show: boolean) => void;
-    startDate?: Date;
-    endDate?: Date;
-    startTime?: string;
-    endTime?: string;
-    onStartDateChange?: (value: Date | undefined) => void;
-    onEndDateChange?: (value: Date | undefined) => void;
-    onStartTimeChange?: (value: string) => void;
-    onEndTimeChange?: (value: string) => void;
-    mode?: 'range' | 'single';
-    singleDayLabel?: string;
-    showAllTime?: boolean;
-    className?: string;
-    /**
-     * Announcement text to display at the top of the filter (e.g., timezone info)
-     */
-    announcement?: ReactNode;
-    /**
-     * Labels for date preset options - enables i18n/translation support.
-     * @deprecated Use `lang` prop or `translations` prop instead
-     */
-    labels?: FilterDateRangeLabels;
-    /**
-     * Language code for translations
-     * @default "en"
-     */
-    lang?: FilterLanguage;
-    /**
-     * Custom translations (overrides lang-based translations)
-     */
-    translations?: FilterTranslations;
-}
-declare const FilterDateRange: import('react').ForwardRefExoticComponent<Omit<FilterDateRangeProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { FilterDateRange, FilterDateRangeOption, type FilterDateRangeProps, type FilterDateRangeOptionProps, type FilterDateRangeLabels, };

package/dist/components/organisms/filter/filter-date-range.js

@@ -1,245 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as L, useMemo as u } from "react";
-import { RadioGroup as U, RadioGroupItem as k } from "../../../vendor/shadcn/radio-group.js";
-import { cn as O, getDirection as E } from "../../../lib/utils.js";
-import { getFilterTranslations as G, getDayNames as V, getMonthAbbreviations as q } from "./filter-translations.js";
-import { Alert as z } from "../../atoms/alert/alert.js";
-import { DatePicker as v } from "../../atoms/date-picker/date-picker.js";
-import { TimePicker as w } from "../../molecules/time-picker/time-picker.js";
-const c = {
-  CUSTOM: "CUSTOM",
-  TODAY: "TODAY",
-  LAST_3_DAYS: "LAST_3_DAYS",
-  LAST_7_DAYS: "LAST_7_DAYS",
-  LAST_30_DAYS: "LAST_30_DAYS",
-  THIS_MONTH: "THIS_MONTH",
-  ALL_TIME: "ALL_TIME"
-}, D = (l, t) => {
-  const s = l.getDate();
-  return `${t[l.getMonth()]} ${s}`;
-}, B = (l, t) => {
-  const s = t[l.getMonth()], r = l.getFullYear();
-  return `${s} ${r}`;
-}, J = (l, t) => t[l.getDay()], K = (l, t) => {
-  const s = /* @__PURE__ */ new Date();
-  s.setHours(0, 0, 0, 0);
-  const r = `${J(s, l)}, ${D(s, t)}`, x = new Date(s);
-  x.setDate(x.getDate() - 2);
-  const p = `${D(x, t)} - ${D(s, t)}`, o = new Date(s);
-  o.setDate(o.getDate() - 6);
-  const f = `${D(o, t)} - ${D(s, t)}`, m = new Date(s);
-  m.setDate(m.getDate() - 29);
-  const y = `${D(m, t)} - ${D(s, t)}`, j = B(s, t);
-  return {
-    today: r,
-    last3Days: p,
-    last7Days: f,
-    last30Days: y,
-    thisMonth: j
-  };
-}, d = L(
-  ({ label: l, description: t, value: s, className: r, ...x }, p) => {
-    const o = `date-range-${s}`;
-    return /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full py-1", children: [
-      /* @__PURE__ */ e.jsxs(
-        "label",
-        {
-          ref: p,
-          className: O(
-            "flex-1 flex items-start gap-3 cursor-pointer",
-            r
-          ),
-          ...x,
-          children: [
-            /* @__PURE__ */ e.jsx(k, { id: o, value: s, className: "mt-px" }),
-            /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-1.5 items-start justify-center pb-0 pt-px px-0", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none text-foreground", children: l }) })
-          ]
-        }
-      ),
-      t && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-normal leading-none text-muted-foreground whitespace-nowrap", children: t }) })
-    ] });
-  }
-);
-d.displayName = "FilterDateRangeOption";
-const Q = L(
-  ({
-    showCustomFields: l = !1,
-    onCustomFieldsChange: t,
-    startDate: s,
-    endDate: r,
-    startTime: x = "",
-    endTime: p = "",
-    onStartDateChange: o,
-    onEndDateChange: f,
-    onStartTimeChange: m,
-    onEndTimeChange: y,
-    mode: j = "range",
-    singleDayLabel: Y,
-    showAllTime: $ = !1,
-    className: H,
-    value: R,
-    onValueChange: C,
-    announcement: h,
-    labels: n,
-    lang: T,
-    translations: A,
-    ...F
-  }, I) => {
-    const a = u(() => {
-      const i = G(T);
-      return A ? { ...i, ...A } : i;
-    }, [T, A]), S = u(() => V(a), [a]), _ = u(() => q(a), [a]), g = u(
-      () => K(S, _),
-      [S, _]
-    ), b = (i) => {
-      C?.(i), t?.(i === c.CUSTOM);
-    }, P = (i) => {
-      if (i) {
-        const N = new Date(i);
-        N.setHours(0, 0, 0, 0);
-        const M = new Date(i);
-        M.setHours(23, 59, 59, 999), o?.(N), f?.(M);
-      } else
-        o?.(void 0), f?.(void 0);
-    };
-    return /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ref: I,
-        dir: E(T),
-        className: O("flex flex-col gap-4 w-full", H),
-        children: [
-          h && (typeof h == "string" ? /* @__PURE__ */ e.jsx(z, { icon: "Info", description: h }) : h),
-          /* @__PURE__ */ e.jsxs(
-            U,
-            {
-              value: R,
-              onValueChange: b,
-              className: "gap-2",
-              ...F,
-              children: [
-                /* @__PURE__ */ e.jsx(
-                  d,
-                  {
-                    label: n?.custom ?? a.custom,
-                    value: c.CUSTOM
-                  }
-                ),
-                l && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 ps-7 mb-2", children: [
-                  j === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                    v,
-                    {
-                      date: s,
-                      onChange: P,
-                      placeholder: Y ?? a.selectDate,
-                      className: "h-9",
-                      iconPosition: "none"
-                    }
-                  ) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
-                    /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      v,
-                      {
-                        date: s,
-                        onChange: o,
-                        placeholder: n?.startDate ?? a.startDate,
-                        className: "h-9",
-                        iconPosition: "none"
-                      }
-                    ) }),
-                    /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      v,
-                      {
-                        date: r,
-                        onChange: f,
-                        placeholder: n?.endDate ?? a.endDate,
-                        className: "h-9",
-                        iconPosition: "none"
-                      }
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
-                    /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      w,
-                      {
-                        value: x,
-                        onChange: m,
-                        mode: "dropdown",
-                        use24Hour: !0,
-                        width: "100%"
-                      }
-                    ) }),
-                    /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
-                      w,
-                      {
-                        value: p,
-                        onChange: y,
-                        mode: "dropdown",
-                        use24Hour: !0,
-                        width: "100%"
-                      }
-                    ) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-                  /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.today ?? a.today,
-                      value: c.TODAY,
-                      description: g.today
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.last3Days ?? a.last3Days,
-                      value: c.LAST_3_DAYS,
-                      description: g.last3Days
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.last7Days ?? a.last7Days,
-                      value: c.LAST_7_DAYS,
-                      description: g.last7Days
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.last30Days ?? a.last30Days,
-                      value: c.LAST_30_DAYS,
-                      description: g.last30Days
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.thisMonth ?? a.thisMonth,
-                      value: c.THIS_MONTH,
-                      description: g.thisMonth
-                    }
-                  ),
-                  $ && /* @__PURE__ */ e.jsx(
-                    d,
-                    {
-                      label: n?.allTime ?? a.allTime,
-                      value: c.ALL_TIME
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Q.displayName = "FilterDateRange";
-export {
-  Q as FilterDateRange,
-  d as FilterDateRangeOption,
-  c as FilterDateRangeValue
-};