@vkzstudio/muza-ui 1.0.0 → 1.0.1

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,156 @@
+import { jsx as e, jsxs as U } from "react/jsx-runtime";
+import { forwardRef as W, useState as S, useEffect as X } from "react";
+import { useIsDesktop as Z } from "../../hooks/use-is-desktop.js";
+import { useIsMobile as _ } from "../../hooks/use-is-mobile.js";
+import { Popover as $, PopoverTrigger as g, PopoverContent as w } from "../Popover/Popover.js";
+import { getDateRange as T } from "./utils/getDateRange.js";
+import { typographyVariants as a } from "../Typography/Typography.js";
+import { Input as V } from "../Input/Input.js";
+import { formatDate as s } from "../Calendar/utils/formatDate.js";
+import { formatDateRange as O } from "../Calendar/utils/formatDateRange.js";
+import { Calendar as R } from "../Calendar/Calendar.js";
+import { cn as u } from "../../utils/cn.js";
+import { CalendarBold as h } from "@solar-icons/react-perf";
+const C = W(
+  ({
+    alignCalendar: j,
+    mode: v,
+    allowedPresets: x,
+    dateFormatter: z,
+    value: f,
+    defaultValue: p,
+    open: d,
+    onOpenChange: r,
+    onChange: m,
+    classNames: t,
+    error: B,
+    disabled: l,
+    hint: A,
+    label: E,
+    placeholder: P,
+    avoidCollisions: Y = !0,
+    side: q = "bottom",
+    renderCustomTrigger: I,
+    shouldResetToDefaultValue: c,
+    ...M
+  }, G) => {
+    const F = Z(), H = _(), [J, y] = S(!1), K = typeof d == "boolean" ? d : J, [b, D] = S(
+      f ?? p
+    ), [o, n] = S(f ?? p);
+    X(() => {
+      f !== void 0 && (D(f), n(f));
+    }, [f]);
+    const L = x == null ? void 0 : x.map((i) => /* @__PURE__ */ e(
+      "button",
+      {
+        className: u(
+          a({
+            variant: "cta",
+            weight: "medium",
+            size: "sm",
+            fixY: !0
+          }),
+          "px-2xl py-md text-left",
+          "hover:bg-surface-brand-brand-tertiary hover:text-comp-button-tertiary-text-def",
+          "outline-none focus-visible:bg-surface-brand-brand-tertiary focus-visible:text-comp-button-tertiary-text-def",
+          "cursor-pointer",
+          t == null ? void 0 : t.leftPanelButton
+        ),
+        onClick: () => {
+          const Q = T(i.type);
+          n(Q);
+        },
+        children: i.name
+      },
+      i.type
+    )), k = z ?? (v === "single" ? s : O);
+    return /* @__PURE__ */ U(
+      $,
+      {
+        open: K,
+        onOpenChange: (i) => {
+          d === void 0 && y(i), r == null || r(i);
+        },
+        children: [
+          /* @__PURE__ */ e(
+            g,
+            {
+              className: u(
+                "group cursor-pointer rounded-full text-left focus-visible-default",
+                t == null ? void 0 : t.popoverTrigger
+              ),
+              disabled: l,
+              children: I ? I() : /* @__PURE__ */ e(
+                V,
+                {
+                  ref: G,
+                  value: b ? k(b) : "",
+                  placeholder: P,
+                  error: B,
+                  disabled: l,
+                  label: E,
+                  hint: A,
+                  tabIndex: -1,
+                  className: u(
+                    "pointer-events-none",
+                    t == null ? void 0 : t.input,
+                    "group-hover:border-comp-input-stroke-hover"
+                  ),
+                  suffix: /* @__PURE__ */ e(h, { className: "size-icon-medium text-icon-dark-secondary-def" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            w,
+            {
+              className: u("flex w-auto p-0", t == null ? void 0 : t.popoverContent),
+              align: j,
+              side: q,
+              avoidCollisions: Y,
+              onOpenAutoFocus: (i) => i.preventDefault(),
+              children: v === "single" ? /* @__PURE__ */ e(
+                R,
+                {
+                  ...M,
+                  mode: "single",
+                  selected: o,
+                  onReset: () => n(
+                    c ? p : b
+                  ),
+                  onSelect: n,
+                  onConfirm: () => {
+                    (o !== void 0 || c) && (D(o), m == null || m(o)), d === void 0 && y(!1), r == null || r(!1);
+                  },
+                  numberOfMonths: F ? 2 : 1,
+                  dateFormatter: k
+                }
+              ) : /* @__PURE__ */ e(
+                R,
+                {
+                  ...M,
+                  mode: "range",
+                  selected: o,
+                  onReset: () => n(
+                    c ? p : b
+                  ),
+                  onSelect: n,
+                  onConfirm: () => {
+                    (o !== void 0 || c) && (D(o), m == null || m(o)), d === void 0 && y(!1), r == null || r(!1);
+                  },
+                  numberOfMonths: F ? 2 : 1,
+                  leftPanelChildren: v === "range" && !H && L,
+                  dateRangeFormatter: k
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+C.displayName = "DatePicker";
+export {
+  C as DatePicker
+};

package/dist/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const DatePickerDefault: Story;
+export declare const DatePickerSingle: Story;
+export declare const DatePickerWithDefaultValue: Story;
+export declare const CustomFormatter: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const DatePickerWithLabelAndHint: Story;
+export declare const DatePickerWithDisabledDates: Story;
+export declare const ControlledDatePickerWithCustomTrigger: Story;
+export declare const ResetButtonResetsToUndefined: Story;
+export declare const ResetButtonResetsToStoryDate: Story;
+//# sourceMappingURL=DatePicker.stories.d.ts.map

package/dist/components/DatePicker/DatePicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkBjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAqBxC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAuBxC,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAkCzC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KA6CnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './DatePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/components/DatePicker/utils/getDateRange.d.ts

@@ -0,0 +1,4 @@
+import { DateRange } from 'react-day-picker';
+export declare const Presets: readonly ["Today", "Yesterday", "This week", "Last week", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days", "This year", "Last year", undefined];
+export declare const getDateRange: (preset: (typeof Presets)[number]) => DateRange;
+//# sourceMappingURL=getDateRange.d.ts.map

package/dist/components/DatePicker/utils/getDateRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDateRange.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/utils/getDateRange.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,eAAO,MAAM,OAAO,+JAYV,CAAA;AAEV,eAAO,MAAM,YAAY,GAAI,QAAQ,CAAC,OAAO,OAAO,EAAE,MAAM,CAAC,KAAG,SAoC/D,CAAA"}

package/dist/components/DatePicker/utils/getDateRange.js

@@ -0,0 +1,40 @@
+import { subYears as m, endOfYear as s, startOfYear as a, subDays as r, startOfWeek as o, subWeeks as n, endOfWeek as c } from "date-fns";
+const y = (f) => {
+  const e = /* @__PURE__ */ new Date();
+  switch (f) {
+    case "Today":
+      return { from: e, to: e };
+    case "Yesterday": {
+      const t = r(e, 1);
+      return { from: t, to: t };
+    }
+    case "This week":
+      return {
+        from: o(e, { weekStartsOn: 0 }),
+        to: c(e, { weekStartsOn: 0 })
+      };
+    case "Last week": {
+      const t = o(n(e, 1), { weekStartsOn: 0 }), u = c(n(e, 1), { weekStartsOn: 0 });
+      return { from: t, to: u };
+    }
+    case "Last 7 days":
+      return { from: r(e, 6), to: e };
+    case "Last 14 days":
+      return { from: r(e, 13), to: e };
+    case "Last 30 days":
+      return { from: r(e, 29), to: e };
+    case "Last 90 days":
+      return { from: r(e, 89), to: e };
+    case "This year":
+      return { from: a(e), to: s(e) };
+    case "Last year": {
+      const t = m(e, 1);
+      return { from: a(t), to: s(t) };
+    }
+    default:
+      return { from: e, to: e };
+  }
+};
+export {
+  y as getDateRange
+};

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,14 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
+declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
+declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "small" | "medium" | "large";
+    closeAriaLabel?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogTitle, DialogDescription, };
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,QAAA,MAAM,MAAM,iDAAuB,CAAA;AACnC,QAAA,MAAM,WAAW,iIAAwB,CAAA;AACzC,QAAA,MAAM,iBAAiB,yIAA8B,CAAA;AACrD,QAAA,MAAM,aAAa,kIAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,uDAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,gIAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,4LAYjB,CAAA;AAGF,QAAA,MAAM,aAAa;WAGR,OAAO,GAAG,QAAQ,GAAG,OAAO;qBAClB,MAAM;kDAwC1B,CAAA;AAGD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,66 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import * as a from "@radix-ui/react-dialog";
+import { XClose as p } from "../Icons/CustomIcons.js";
+import { cn as r } from "../../utils/cn.js";
+const v = a.Root, w = a.Title, N = a.Description, C = a.Trigger, g = a.Portal, b = a.Close, d = n(({ className: t, ...s }, o) => /* @__PURE__ */ e(
+  a.Overlay,
+  {
+    ref: o,
+    className: r(
+      "px- fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-surface-base-overlay px-layout-p-standard py-comp-dialog-p-hor-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      t
+    ),
+    ...s
+  }
+));
+d.displayName = a.Overlay.displayName;
+const f = n(
+  ({
+    className: t,
+    children: s,
+    size: o = "medium",
+    closeAriaLabel: l = "Close",
+    ...m
+  }, c) => /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ i(
+    a.Content,
+    {
+      ref: c,
+      className: r(
+        "relative w-full rounded-2xl bg-surface-base-secondary p-comp-dialog-p pt-5xl duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        {
+          "max-w-comp-dialog-w-sm": o === "small",
+          "max-w-comp-dialog-w-md": o === "medium",
+          "max-w-comp-dialog-w-lg": o === "large"
+        },
+        t
+      ),
+      ...m,
+      children: [
+        s,
+        /* @__PURE__ */ i(
+          a.Close,
+          {
+            className: "absolute top-4 right-4 cursor-pointer transition-opacity focus-visible:focus-default disabled:pointer-events-none",
+            "aria-label": l,
+            children: [
+              /* @__PURE__ */ e(p, { className: "size-icon-small" }),
+              /* @__PURE__ */ e("span", { className: "sr-only", children: l })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) })
+);
+f.displayName = a.Content.displayName;
+export {
+  v as Dialog,
+  b as DialogClose,
+  f as DialogContent,
+  N as DialogDescription,
+  d as DialogOverlay,
+  g as DialogPortal,
+  w as DialogTitle,
+  C as DialogTrigger
+};

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Dialog } from './Dialog';
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<PlaygroundProps>;
+type PlaygroundProps = {
+    size: 'small' | 'medium' | 'large';
+    text?: string;
+    textButton?: string;
+    closeAriaLabel?: string;
+};
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const OverflowContent: Story;
+//# sourceMappingURL=Dialog.stories.d.ts.map

package/dist/components/Dialog/Dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,MAAM,EAAgC,MAAM,UAAU,CAAA;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiB7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkCnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps } from '../Button';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const DropdownMenu: ({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuPortal: ({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuTrigger: ({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuContent: ({ className, sideOffset, align, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
+interface IDropdownItem {
+    variant?: 'base' | 'destructive';
+    icon?: React.ReactNode;
+    isActive?: boolean;
+}
+declare const DropdownMenuItem: ({ className, variant, children, icon, disabled, isActive, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & IDropdownItem) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuButtonItem: ({ children, buttonProps, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    buttonProps: ButtonProps;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuCheckboxItem: ({ className, children, checked, variant, icon, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & IDropdownItem) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuRadioGroup: ({ value, onValueChange, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement> & IDropdownItem, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: ({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuButtonItem, };
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAGtE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAcpD,QAAA,MAAM,YAAY,GAAI,cAEnB,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,4CAEzD,CAAA;AAED,QAAA,MAAM,kBAAkB,GAAI,cAEzB,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,MAAM,CAAC,4CAI3D,CAAA;AAED,QAAA,MAAM,mBAAmB,GAAI,cAE1B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,4CAO5D,CAAA;AAED,QAAA,MAAM,mBAAmB,GAAI,4CAK1B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,4CAmD5D,CAAA;AA8BD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB,GAAI,sEAQvB,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG,aAAa,4CA2CzE,CAAA;AAED,QAAA,MAAM,sBAAsB,GAAI,qCAI7B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IAC3D,WAAW,EAAE,WAAW,CAAA;CACzB,4CAkBA,CAAA;AAED,QAAA,MAAM,wBAAwB,GAAI,2DAO/B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,YAAY,CAAC,GAChE,aAAa,4CA+Cd,CAAA;AAED,QAAA,MAAM,sBAAsB,GAAI,oCAI7B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,4CAW/D,CAAA;AAED,QAAA,MAAM,qBAAqB,4LAyDzB,CAAA;AAIF,QAAA,MAAM,qBAAqB,GAAI,yBAG5B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,4CAQ9D,CAAA;AAED,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,GACvB,CAAA"}

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,285 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as l from "react";
+import * as d from "@radix-ui/react-dropdown-menu";
+import { cva as k } from "class-variance-authority";
+import { Typography as b } from "../Typography/Typography.js";
+import { Button as y } from "../Button/Button.js";
+import { cn as i } from "../../utils/cn.js";
+import { UnreadOutline as x } from "@solar-icons/react-perf";
+const h = l.createContext(null), N = () => l.useContext(h), T = ({
+  ...o
+}) => /* @__PURE__ */ e(d.Root, { "data-slot": "dropdown-menu", ...o }), P = ({
+  ...o
+}) => /* @__PURE__ */ e(d.Portal, { "data-slot": "dropdown-menu-portal", ...o }), G = ({
+  ...o
+}) => /* @__PURE__ */ e(
+  d.Trigger,
+  {
+    "data-slot": "dropdown-menu-trigger",
+    ...o
+  }
+), j = ({
+  className: o,
+  sideOffset: t = 4,
+  align: r = "start",
+  ...n
+}) => {
+  const [s, c] = l.useState(!1), a = l.useRef(null);
+  return l.useEffect(() => {
+    const m = () => {
+      if (a.current) {
+        const { scrollHeight: g, clientHeight: v } = a.current;
+        c(g > v);
+      }
+    }, u = setTimeout(m, 10), w = new ResizeObserver(m);
+    return a.current && w.observe(a.current), () => {
+      clearTimeout(u), w.disconnect();
+    };
+  }, [n.children]), /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(
+    d.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset: t,
+      align: r,
+      className: i(
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "flex flex-col rounded-xl bg-comp-select-fill-def dropdown-shadow-default",
+        o
+      ),
+      ...n,
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          ref: a,
+          className: i(
+            "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-stroke-base-secondary hover:scrollbar-thumb-stroke-base-primary scrollbar-thumb-rounded-full my-sm max-h-full overflow-y-auto px-sm py-0 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
+            s && "w-[calc(100%_-_var(--spacing-sm))]"
+          ),
+          children: n.children
+        }
+      )
+    }
+  ) });
+}, f = k(
+  [
+    "text-comp-dropdown-menu-text-primary flex cursor-pointer items-center gap-sm rounded-md pt-md pr-lg pb-md pl-lg outline-0 transition-colors",
+    "hover:bg-comp-dropdown-menu-fill-base-hover hover:text-comp-dropdown-menu-text-base-hover",
+    "focus-within:bg-comp-dropdown-menu-fill-base-focused"
+  ],
+  {
+    variants: {
+      checked: {
+        true: "text-comp-select-text-brand",
+        false: "text-comp-select-text-primary"
+      },
+      variant: {
+        base: "",
+        destructive: "text-comp-dropdown-menu-text-error-def focus-within:bg-comp-dropdown-menu-fill-error-focused focus-within:text-comp-dropdown-menu-text-error-focused hover:bg-comp-dropdown-menu-fill-error-hover hover:text-comp-dropdown-menu-text-error-hover"
+      },
+      disabled: {
+        true: "pointer-events-none text-comp-dropdown-menu-text-base-disabled",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "base"
+    }
+  }
+), B = ({
+  className: o,
+  variant: t,
+  children: r,
+  icon: n,
+  disabled: s,
+  isActive: c,
+  ...a
+}) => /* @__PURE__ */ p(
+  d.Item,
+  {
+    "data-slot": "dropdown-menu-item",
+    disabled: s,
+    className: i(
+      "group",
+      f({
+        variant: t,
+        disabled: s,
+        checked: c
+      }),
+      o
+    ),
+    ...a,
+    children: [
+      n && /* @__PURE__ */ e(
+        "span",
+        {
+          className: i("block [&>svg]:block [&>svg]:size-icon-small", {
+            "text-comp-dropdown-menu-text-error": t === "destructive",
+            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": t !== "destructive",
+            "text-comp-dropdown-menu-icon-base-active": c
+          }),
+          children: n
+        }
+      ),
+      typeof r != "function" ? /* @__PURE__ */ e(
+        b,
+        {
+          component: "span",
+          size: "sm",
+          weight: "medium",
+          className: "flex-1",
+          fixY: !0,
+          children: r
+        }
+      ) : r
+    ]
+  }
+), H = ({
+  children: o,
+  buttonProps: t,
+  ...r
+}) => /* @__PURE__ */ e(
+  d.Item,
+  {
+    "data-slot": "dropdown-menu-item",
+    asChild: !0,
+    ...r,
+    children: /* @__PURE__ */ e(
+      y,
+      {
+        ...t,
+        className: i(
+          "outline-0 hover:ring-transparent",
+          t.className
+        ),
+        children: o
+      }
+    )
+  }
+), O = ({
+  className: o,
+  children: t,
+  checked: r,
+  variant: n,
+  icon: s,
+  ...c
+}) => /* @__PURE__ */ p(
+  d.CheckboxItem,
+  {
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: i(
+      f({
+        variant: n,
+        checked: !!r
+      }),
+      o
+    ),
+    checked: r,
+    onSelect: (a) => {
+      a.preventDefault();
+    },
+    ...c,
+    children: [
+      s && /* @__PURE__ */ e(
+        "span",
+        {
+          className: i({
+            "text-comp-dropdown-menu-text-error": n === "destructive",
+            "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive"
+          }),
+          children: s
+        }
+      ),
+      typeof t != "function" ? /* @__PURE__ */ e(
+        b,
+        {
+          component: "span",
+          size: "sm",
+          weight: "medium",
+          className: "flex-1 fix-y-text",
+          children: t
+        }
+      ) : t,
+      /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+    ]
+  }
+), Y = ({
+  value: o,
+  onValueChange: t,
+  ...r
+}) => /* @__PURE__ */ e(h.Provider, { value: { value: o, onValueChange: t }, children: /* @__PURE__ */ e(
+  d.RadioGroup,
+  {
+    "data-slot": "dropdown-menu-radio-group",
+    value: o,
+    onValueChange: t,
+    ...r
+  }
+) }), I = l.forwardRef(({ className: o, children: t, variant: r, icon: n, value: s, ...c }, a) => {
+  const m = N(), u = (m == null ? void 0 : m.value) === s;
+  return /* @__PURE__ */ p(
+    d.RadioItem,
+    {
+      ref: a,
+      "data-slot": "dropdown-menu-radio-item",
+      className: i(
+        f({
+          variant: r,
+          checked: u
+        }),
+        o,
+        c.disabled && "cursor-not-allowed text-comp-dropdown-menu-text-base-disabled hover:bg-transparent hover:text-comp-dropdown-menu-text-base-disabled"
+      ),
+      value: s,
+      ...c,
+      children: [
+        n && /* @__PURE__ */ e(
+          "span",
+          {
+            className: i({
+              "text-comp-dropdown-menu-text-error": r === "destructive",
+              "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive",
+              "text-comp-dropdown-menu-text-base-disabled": c.disabled
+            }),
+            children: n
+          }
+        ),
+        typeof t != "function" ? /* @__PURE__ */ e(
+          b,
+          {
+            component: "span",
+            size: "sm",
+            weight: "medium",
+            className: "flex-1",
+            fixY: !0,
+            children: t
+          }
+        ) : t,
+        /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
+      ]
+    }
+  );
+});
+I.displayName = "DropdownMenuRadioItem";
+const _ = ({
+  className: o,
+  ...t
+}) => /* @__PURE__ */ e(
+  d.Separator,
+  {
+    "data-slot": "dropdown-menu-separator",
+    className: i("my-sm h-0 border-b border-stroke-base-primary", o),
+    ...t
+  }
+);
+export {
+  T as DropdownMenu,
+  H as DropdownMenuButtonItem,
+  O as DropdownMenuCheckboxItem,
+  j as DropdownMenuContent,
+  B as DropdownMenuItem,
+  P as DropdownMenuPortal,
+  Y as DropdownMenuRadioGroup,
+  I as DropdownMenuRadioItem,
+  _ as DropdownMenuSeparator,
+  G as DropdownMenuTrigger
+};