@vkzstudio/muza-ui 1.0.44 → 1.0.46

package/dist/components/Select/Select.js

@@ -1,111 +1,140 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import u, { forwardRef as _, useId as B, useMemo as G, useRef as S, useEffect as T } from "react";
-import { triggerWrapperVariants as L } from "./utils.js";
-import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
-import { FormField as H } from "../FormField/FormField.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { DropdownMenu as J, DropdownMenuTrigger as K, DropdownMenuContent as Q, DropdownMenuRadioGroup as X, DropdownMenuRadioItem as Y } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as Z } from "@solar-icons/react-perf";
-import { cn as ee } from "../../utils/cn.js";
-const te = _(
-  (z, m) => {
-    const f = U(), {
-      label: h,
-      hint: g,
-      error: x,
-      options: l,
-      onChange: i,
-      value: r,
-      disabled: a,
-      prefix: b,
-      size: I,
-      placeholder: O,
-      emptyMessage: D,
-      shouldScrollToSelectedOption: w,
-      collisionPadding: W,
-      required: y,
-      disableRequiredAsterisk: A,
-      labelExtra: C,
-      infoTooltip: V
-    } = z, v = O ?? f.select.placeholder, q = D ?? f.select.noOptions, R = B(), E = h ? `${R}-label` : void 0, F = g ? `${R}-hint` : void 0, P = G(() => {
-      const e = r && l.find((o) => o.value === r);
-      return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
-        p,
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import f, { forwardRef as G, useId as L, useMemo as U, useRef as S, useEffect as T } from "react";
+import { triggerWrapperVariants as H } from "./utils.js";
+import { useMuzaTranslations as J } from "../../translations/TranslationContext.js";
+import { FormField as K } from "../FormField/FormField.js";
+import { Typography as o } from "../Typography/Typography.js";
+import { Flex as Q } from "../Flex/Flex.js";
+import { DropdownMenu as X, DropdownMenuTrigger as Y, DropdownMenuContent as Z, DropdownMenuRadioGroup as ee, DropdownMenuRadioItem as te } from "../DropdownMenu/DropdownMenu.js";
+import { cn as D } from "../../utils/cn.js";
+import { AltArrowUpOutline as re } from "@solar-icons/react-perf";
+const ne = G(
+  (I, h) => {
+    const g = J(), {
+      label: x,
+      hint: b,
+      error: w,
+      options: a,
+      onChange: d,
+      value: n,
+      disabled: s,
+      prefix: y,
+      size: O,
+      placeholder: W,
+      emptyMessage: A,
+      shouldScrollToSelectedOption: v,
+      collisionPadding: C,
+      required: N,
+      disableRequiredAsterisk: F,
+      labelExtra: V,
+      infoTooltip: q
+    } = I, R = W ?? g.select.placeholder, E = A ?? g.select.noOptions, M = L(), P = x ? `${M}-label` : void 0, $ = b ? `${M}-hint` : void 0, r = n ? a.find((e) => e.value === n) : void 0, j = U(() => r ? r.description ? /* @__PURE__ */ u(Q, { flex: 1, direction: "column", className: "min-w-0 text-left", children: [
+      /* @__PURE__ */ t(
+        o,
         {
-          size: "input",
-          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+          size: "sm",
+          variant: "title",
           weight: "medium",
           component: "span",
-          children: e.label
+          className: "truncate text-comp-select-text-primary",
+          children: r.label
         }
-      ) : e.label : /* @__PURE__ */ t(
-        p,
+      ),
+      /* @__PURE__ */ t(
+        o,
         {
-          size: "input",
-          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
+          size: "sm",
+          variant: "body",
           weight: "regular",
           component: "span",
-          children: v
+          className: "truncate text-comp-select-text-primary",
+          children: r.description
         }
-      );
-    }, [l, r, v]), [s, $] = u.useState(!1), [N, j] = u.useState(0), c = u.useRef(!1), k = S(null), d = S({}), n = (typeof m == "function" ? null : m) ?? k;
+      )
+    ] }) : typeof r.label != "function" ? /* @__PURE__ */ t(
+      o,
+      {
+        size: "input",
+        className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+        weight: "medium",
+        component: "span",
+        children: r.label
+      }
+    ) : r.label : /* @__PURE__ */ t(
+      o,
+      {
+        size: "input",
+        className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
+        weight: "regular",
+        component: "span",
+        children: R
+      }
+    ), [r, R]), [l, k] = f.useState(!1), [z, _] = f.useState(0), p = f.useRef(!1), B = S(null), m = S({}), i = (typeof h == "function" ? null : h) ?? B;
     return T(() => {
       const e = () => {
-        n.current && j(n.current.offsetWidth);
+        i.current && _(i.current.offsetWidth);
       };
       e();
-      const o = new ResizeObserver(e);
-      return n.current && o.observe(n.current), () => {
-        o.disconnect();
+      const c = new ResizeObserver(e);
+      return i.current && c.observe(i.current), () => {
+        c.disconnect();
       };
-    }, [n]), T(() => {
+    }, [i]), T(() => {
       var e;
-      s && r && d.current[r] && w && ((e = d.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
-    }, [s, w, r]), /* @__PURE__ */ t(
-      H,
+      l && n && m.current[n] && v && ((e = m.current[n]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [l, v, n]), /* @__PURE__ */ t(
+      K,
       {
-        label: h,
-        hint: g,
-        error: x,
-        required: y,
-        disableRequiredAsterisk: A,
-        labelId: E,
-        hintId: F,
-        labelExtra: C,
-        infoTooltip: V,
+        label: x,
+        hint: b,
+        error: w,
+        required: N,
+        disableRequiredAsterisk: F,
+        labelId: P,
+        hintId: $,
+        labelExtra: V,
+        infoTooltip: q,
         className: "flex-1",
-        children: /* @__PURE__ */ M(
-          J,
+        children: /* @__PURE__ */ u(
+          X,
           {
             onOpenChange: (e) => {
-              $(e);
+              k(e);
             },
             children: [
-              /* @__PURE__ */ t(K, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+              /* @__PURE__ */ t(Y, { disabled: s, asChild: !0, children: /* @__PURE__ */ t(
                 "button",
                 {
-                  ref: n,
+                  ref: i,
                   type: "button",
                   role: "input",
                   tabIndex: 0,
-                  disabled: a,
-                  "aria-required": y,
-                  className: L({ size: I, error: x, expanded: s }),
-                  children: /* @__PURE__ */ M("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
-                    b && /* @__PURE__ */ t(
+                  disabled: s,
+                  "aria-required": N,
+                  className: D(
+                    H({
+                      size: O,
+                      error: w,
+                      expanded: l,
+                      hasDescription: !!(r != null && r.description)
+                    })
+                  ),
+                  children: /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+                    y && /* @__PURE__ */ t(
                       "span",
                       {
-                        className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
-                        children: b
+                        className: s ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                        children: y
                       }
                     ),
-                    P,
+                    j,
                     /* @__PURE__ */ t(
-                      Z,
+                      re,
                       {
-                        className: ee(
+                        className: D(
                           "transition-transform duration-200",
-                          s ? "rotate-0" : "rotate-180"
+                          l ? "rotate-0" : "rotate-180",
+                          s ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def"
                         )
                       }
                     )
@@ -113,40 +142,42 @@ const te = _(
                 }
               ) }),
               /* @__PURE__ */ t(
-                Q,
+                Z,
                 {
                   className: "mt-1",
                   style: {
-                    width: N > 0 ? `${N}px` : void 0
+                    width: z > 0 ? `${z}px` : void 0
                   },
+                  align: "center",
                   onCloseAutoFocus: (e) => {
-                    c.current || e.preventDefault(), c.current = !1;
+                    p.current || e.preventDefault(), p.current = !1;
                   },
-                  collisionPadding: W,
-                  children: l.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
-                    p,
+                  collisionPadding: C,
+                  children: a.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
+                    o,
                     {
                       component: "span",
                       size: "input",
                       weight: "regular",
                       className: "text-comp-select-text-secondary",
-                      children: q
+                      children: E
                     }
                   ) }) : /* @__PURE__ */ t(
-                    X,
+                    ee,
                     {
-                      value: r,
+                      value: n,
                       onValueChange: (e) => {
-                        c.current = !0, i == null || i(e);
+                        p.current = !0, d == null || d(e);
                       },
-                      children: l.map((e) => /* @__PURE__ */ t(
-                        Y,
+                      children: a.map((e) => /* @__PURE__ */ t(
+                        te,
                         {
                           value: e.value.toString(),
                           disabled: e.disabled,
                           icon: e.icon,
-                          ref: (o) => {
-                            d.current[e.value] = o;
+                          description: e.description,
+                          ref: (c) => {
+                            m.current[e.value] = c;
                           },
                           children: e.label
                         },
@@ -163,7 +194,7 @@ const te = _(
     );
   }
 );
-te.displayName = "Select";
+ne.displayName = "Select";
 export {
-  te as Select
+  ne as Select
 };

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

@@ -15,5 +15,6 @@ export declare const Interactive: Story;
 export declare const WithPrefix: Story;
 export declare const WithIconsInOptions: Story;
 export declare const WithDisabledOptions: Story;
+export declare const TwoLine: Story;
 export declare const NoOptions: Story;
 //# sourceMappingURL=Select.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAS3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsH7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA6BpC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAqDhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAS3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA6BpC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAqDhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAoDrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA"}

package/dist/components/Select/utils.d.ts

@@ -3,5 +3,6 @@ export declare const triggerWrapperVariants: (props?: ({
     error?: boolean | null | undefined;
     expanded?: boolean | null | undefined;
     hasIcon?: boolean | null | undefined;
+    hasDescription?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/Select/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;8EA+BlC,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;8EAkClC,CAAA"}

package/dist/components/Select/utils.js

@@ -1,5 +1,5 @@
 import { cva as e } from "class-variance-authority";
-const o = e(
+const r = e(
   [
     "flex w-full cursor-pointer items-center gap-sm rounded-full border border-comp-select-stroke-def",
     "overflow-hidden bg-comp-select-fill-def whitespace-nowrap focus-visible-default transition-colors",
@@ -23,6 +23,9 @@ const o = e(
       },
       hasIcon: {
         false: "pl-comp-select-p-large"
+      },
+      hasDescription: {
+        true: "py-sm"
       }
     },
     defaultVariants: {
@@ -32,5 +35,5 @@ const o = e(
   }
 );
 export {
-  o as triggerWrapperVariants
+  r as triggerWrapperVariants
 };

package/dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,89 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+/**
+ * Props for the Sheet root component. Controls open state and modality.
+ * Extends Radix Dialog Root props.
+ */
+export interface SheetProps extends React.ComponentProps<typeof SheetPrimitive.Root> {
+    /** Controlled open state of the sheet. Pair with `onOpenChange` for controlled usage. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. @default false */
+    defaultOpen?: boolean;
+    /** Fires when the open state changes. Receives the new open state. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls whether the sheet blocks interaction with page content behind it.
+     * When `true`, renders a backdrop overlay and traps focus inside the sheet.
+     * @default true
+     */
+    modal?: boolean;
+}
+declare const Sheet: React.FC<SheetProps>;
+declare const SheetTrigger: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: import('react').FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetClose: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const SheetTitle: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
+declare const SheetOverlay: import('react').ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const sheetContentVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the SheetContent component. Renders the slide-out panel with
+ * backdrop and side-aware slide-in/out animations.
+ */
+export interface SheetContentProps extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, Omit<VariantProps<typeof sheetContentVariants>, 'side' | 'size'> {
+    /**
+     * Edge of the viewport the sheet slides in from. Determines the slide
+     * direction and which corners are rounded.
+     * @default 'right'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Controls panel size — width for `left`/`right` sides, height for
+     * `top`/`bottom` sides.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+}
+declare const SheetContent: import('react').ForwardRefExoticComponent<SheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SheetHeader component. Renders a styled header with an
+ * optional icon, an accessible title (rendered via Radix `Dialog.Title`), and
+ * a close button. Extends `<div>` attributes (without `title`, which is
+ * repurposed for the sheet title content).
+ */
+export interface SheetHeaderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** Optional icon element displayed before the title. */
+    icon?: ReactNode;
+    /**
+     * Sheet title content. Falls back to `children` when not provided so the
+     * common case of `<SheetHeader>Title</SheetHeader>` keeps working.
+     */
+    title?: ReactNode;
+    /** Hides the close button in the header. @default false */
+    hideCloseButton?: boolean;
+    /**
+     * Accessible label for the close button. Falls back to the
+     * `sheet.closeAriaLabel` translation (English default: `'Close'`).
+     */
+    closeAriaLabel?: string;
+}
+declare const SheetHeader: import('react').ForwardRefExoticComponent<SheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SheetBody component. Scrollable main content area rendered
+ * between `SheetHeader` and `SheetFooter`. Extends standard `<div>` attributes.
+ */
+export type SheetBodyProps = ComponentPropsWithoutRef<'div'>;
+declare const SheetBody: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SheetFooter component. Renders a fixed footer area for action
+ * buttons with a top border separating it from `SheetBody`. Extends standard
+ * `<div>` attributes.
+ */
+export type SheetFooterProps = ComponentPropsWithoutRef<'div'>;
+declare const SheetFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetClose, SheetTrigger, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, };
+//# sourceMappingURL=Sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAOjE;;;GAGG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;IACxD,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAuB,CAAA;AACvD,QAAA,MAAM,YAAY,iIAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,sDAAwB,CAAA;AACzC,QAAA,MAAM,UAAU,+HAAuB,CAAA;AACvC,QAAA,MAAM,UAAU,gIAAuB,CAAA;AACvC,QAAA,MAAM,gBAAgB,wIAA6B,CAAA;AAEnD,QAAA,MAAM,YAAY,2LAYhB,CAAA;AAGF,eAAO,MAAM,oBAAoB;;;8EAuDhC,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EAC7D,IAAI,CAAC,YAAY,CAAC,OAAO,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClE;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,QAAA,MAAM,YAAY,8GAchB,CAAA;AAGF;;;;;GAKG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,WAAW,6GAyDhB,CAAA;AAGD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE5D,QAAA,MAAM,SAAS,2MAed,CAAA;AAGD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE9D,QAAA,MAAM,WAAW,2MAgBhB,CAAA;AAGD,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,189 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import * as e from "@radix-ui/react-dialog";
+import { cva as g } from "class-variance-authority";
+import { typographyVariants as y } from "../Typography/Typography.js";
+import { useMuzaTranslations as x } from "../../translations/TranslationContext.js";
+import { cn as i } from "../../utils/cn.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { XClose as N } from "../Icons/CustomIcons.js";
+const P = e.Root, B = e.Trigger, v = e.Portal, H = e.Close, R = e.Title, M = e.Description, c = l(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+  e.Overlay,
+  {
+    ref: s,
+    className: i(
+      "fixed inset-0 z-50 bg-surface-base-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      a
+    ),
+    ...t
+  }
+));
+c.displayName = e.Overlay.displayName;
+const w = g(
+  "fixed z-50 flex flex-col bg-comp-sheet-bg-def text-comp-sheet-text-def shadow-lg transition ease-in-out outline-none data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 rounded-b-comp-sheet-radius border-b border-stroke-base-primary data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 rounded-t-comp-sheet-radius border-t border-stroke-base-primary data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full rounded-r-comp-sheet-radius border-r border-stroke-base-primary data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        right: "inset-y-0 right-0 h-full rounded-l-comp-sheet-radius border-l border-stroke-base-primary data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
+      },
+      size: {
+        small: "",
+        medium: "",
+        large: ""
+      }
+    },
+    compoundVariants: [
+      {
+        side: ["left", "right"],
+        size: "small",
+        className: "w-full max-w-comp-sheet-w-sm"
+      },
+      {
+        side: ["left", "right"],
+        size: "medium",
+        className: "w-full max-w-comp-sheet-w-md"
+      },
+      {
+        side: ["left", "right"],
+        size: "large",
+        className: "w-full max-w-comp-sheet-w-lg"
+      },
+      {
+        side: ["top", "bottom"],
+        size: "small",
+        className: "h-comp-sheet-h-sm"
+      },
+      {
+        side: ["top", "bottom"],
+        size: "medium",
+        className: "h-comp-sheet-h-md"
+      },
+      {
+        side: ["top", "bottom"],
+        size: "large",
+        className: "h-comp-sheet-h-lg"
+      }
+    ],
+    defaultVariants: {
+      side: "right",
+      size: "medium"
+    }
+  }
+), z = l(({ className: a, children: t, side: s = "right", size: r = "medium", ...m }, d) => /* @__PURE__ */ p(v, { children: [
+  /* @__PURE__ */ o(c, {}),
+  /* @__PURE__ */ o(
+    e.Content,
+    {
+      ref: d,
+      className: i(w({ side: s, size: r }), a),
+      ...m,
+      children: t
+    }
+  )
+] }));
+z.displayName = e.Content.displayName;
+const S = l(
+  ({
+    className: a,
+    icon: t,
+    children: s,
+    title: r,
+    hideCloseButton: m = !1,
+    closeAriaLabel: d,
+    ...h
+  }, f) => {
+    const u = x(), b = d ?? u.sheet.closeAriaLabel;
+    return /* @__PURE__ */ p(
+      n,
+      {
+        ref: f,
+        align: "center",
+        gap: "lg",
+        className: i(
+          "border-b border-stroke-base-primary px-comp-sheet-p py-comp-sheet-p-ver-def",
+          a
+        ),
+        ...h,
+        children: [
+          t && /* @__PURE__ */ o("span", { className: "text-surface-brand-primary [&>svg]:size-icon-medium", children: t }),
+          /* @__PURE__ */ o(
+            e.Title,
+            {
+              className: i(
+                "text-text-primary min-w-0 flex-1",
+                y({
+                  variant: "title",
+                  size: "md",
+                  weight: "medium",
+                  fixY: !0
+                })
+              ),
+              children: r ?? s
+            }
+          ),
+          !m && /* @__PURE__ */ o(
+            e.Close,
+            {
+              className: "shrink-0 cursor-pointer transition-opacity focus-visible:focus-default disabled:pointer-events-none",
+              "aria-label": b,
+              children: /* @__PURE__ */ o(N, { className: "size-icon-medium" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+S.displayName = "SheetHeader";
+const C = l(
+  ({ className: a, children: t, ...s }, r) => /* @__PURE__ */ o(
+    n,
+    {
+      ref: r,
+      direction: "column",
+      flex: 1,
+      className: i(
+        "min-h-0 gap-comp-sheet-gap overflow-y-auto p-comp-sheet-p",
+        a
+      ),
+      ...s,
+      children: t
+    }
+  )
+);
+C.displayName = "SheetBody";
+const k = l(
+  ({ className: a, children: t, ...s }, r) => /* @__PURE__ */ o(
+    n,
+    {
+      ref: r,
+      align: "center",
+      justify: "end",
+      gap: "sm",
+      className: i(
+        "border-t border-stroke-base-primary px-comp-sheet-p py-comp-sheet-p-ver-sm",
+        a
+      ),
+      ...s,
+      children: t
+    }
+  )
+);
+k.displayName = "SheetFooter";
+export {
+  P as Sheet,
+  C as SheetBody,
+  H as SheetClose,
+  z as SheetContent,
+  M as SheetDescription,
+  k as SheetFooter,
+  S as SheetHeader,
+  c as SheetOverlay,
+  v as SheetPortal,
+  R as SheetTitle,
+  B as SheetTrigger,
+  w as sheetContentVariants
+};

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

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Sheet } from './Sheet';
+declare const meta: Meta<typeof Sheet>;
+export default meta;
+type Story = StoryObj<PlaygroundProps>;
+type PlaygroundProps = {
+    side: 'top' | 'right' | 'bottom' | 'left';
+    size: 'small' | 'medium' | 'large';
+    textButton?: string;
+    closeAriaLabel?: string;
+};
+export declare const Default: Story;
+export declare const SideLeft: Story;
+export declare const SideTop: Story;
+export declare const SideBottom: Story;
+export declare const SizeSmall: Story;
+export declare const SizeLarge: Story;
+export declare const Scrollable: Story;
+export declare const MinimalNoHeaderFooter: Story;
+//# sourceMappingURL=Sheet.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EACL,KAAK,EASN,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoD5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAmErB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAgCnC,CAAA"}

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

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

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

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