@vkzstudio/muza-ui 1.0.47 → 1.0.48

package/dist/components/DatePickerButton/DatePickerButton.js

@@ -0,0 +1,329 @@
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
+import { cva as w } from "class-variance-authority";
+import { format as v } from "date-fns";
+import { useMuzaTranslations as M } from "../../translations/TranslationContext.js";
+import { DatePicker as T } from "../DatePicker/DatePicker.js";
+import { PopoverTrigger as A, PopoverAnchor as R } from "../Popover/Popover.js";
+import { XClose as E } from "../Icons/CustomIcons.js";
+import { CalendarBold as U } from "@solar-icons/react-perf";
+import { cn as m } from "../../utils/cn.js";
+import { Typography as $ } from "../Typography/Typography.js";
+const L = w(
+  [
+    "group relative inline-flex cursor-pointer items-center text-left outline-0",
+    "border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
+    "rounded-full",
+    "hover:border-comp-input-stroke-hover hover:bg-comp-input-fill-hover",
+    "focus-visible:border-comp-input-icon-brand-focused",
+    "has-[[data-slot=date-picker-button-trigger]:focus-visible]:border-comp-input-icon-brand-focused",
+    "data-[state=open]:border-comp-input-icon-brand-focused",
+    "has-[[data-slot=date-picker-button-trigger][data-state=open]]:border-comp-input-icon-brand-focused"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "gap-comp-input-gap",
+        iconOnly: "justify-center"
+      },
+      size: {
+        xs: "",
+        sm: "",
+        base: "",
+        lg: ""
+      },
+      error: {
+        true: "border-comp-input-stroke-error-def hover:border-comp-input-stroke-error-def focus-visible:border-comp-input-stroke-error-def has-[[data-slot=date-picker-button-trigger][data-state=open]]:border-comp-input-stroke-error-def data-[state=open]:border-comp-input-stroke-error-def"
+      },
+      disabled: {
+        true: "cursor-not-allowed border-comp-input-stroke-disabled bg-comp-input-fill-disabled hover:border-comp-input-stroke-disabled hover:bg-comp-input-fill-disabled"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: "xs",
+        className: "h-comp-input-h-xsm px-comp-input-p-xsm"
+      },
+      {
+        variant: "default",
+        size: "sm",
+        className: "h-comp-input-h-small px-comp-input-p-hor"
+      },
+      {
+        variant: "default",
+        size: "base",
+        className: "h-comp-input-h-def px-comp-input-p-hor"
+      },
+      {
+        variant: "default",
+        size: "lg",
+        className: "h-comp-input-h-large px-comp-input-p-hor"
+      },
+      { variant: "iconOnly", size: "xs", className: "size-comp-input-h-xsm" },
+      { variant: "iconOnly", size: "sm", className: "size-comp-input-h-small" },
+      { variant: "iconOnly", size: "base", className: "size-comp-input-h-def" },
+      {
+        variant: "iconOnly",
+        size: "lg",
+        className: "size-comp-input-h-large"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "base",
+      error: !1,
+      disabled: !1
+    }
+  }
+), V = (e, r, n, s) => {
+  const [o, t] = j({
+    prop: e,
+    defaultProp: r,
+    onChange: n,
+    caller: s
+  });
+  return {
+    current: o,
+    handleChange: (i) => t(i),
+    hasValue: o !== void 0,
+    clear: () => t(void 0)
+  };
+}, I = (e) => e === "xs" || e === "sm" ? "size-icon-small" : "size-icon-medium", X = (e) => v(e, "dd/MM/yyyy"), Y = (e) => e.from ? e.to ? `${v(e.from, "dd/MM/yyyy")} - ${v(e.to, "dd/MM/yyyy")}` : v(e.from, "dd/MM/yyyy") : "", O = k(
+  ({
+    variant: e,
+    size: r,
+    error: n,
+    hideClearButton: s,
+    className: o,
+    disabled: t,
+    hasValue: i,
+    displayText: f,
+    onClear: b,
+    ariaLabel: c,
+    clearAriaLabel: h,
+    triggerProps: d
+  }, u) => {
+    const g = e === "default" && !i ? "iconOnly" : e, p = /* @__PURE__ */ a(
+      U,
+      {
+        "aria-hidden": !0,
+        className: m(
+          "shrink-0",
+          I(r),
+          t ? "text-icon-dark-tertiary" : "text-icon-brand-def"
+        )
+      }
+    );
+    return g === "iconOnly" ? /* @__PURE__ */ B(
+      A,
+      {
+        ref: u,
+        ...d,
+        type: "button",
+        disabled: t,
+        "aria-label": c,
+        "data-slot": "date-picker-button-trigger",
+        className: m(
+          L({
+            variant: "iconOnly",
+            size: r,
+            error: n,
+            disabled: t
+          }),
+          o
+        ),
+        children: [
+          p,
+          i && /* @__PURE__ */ a(G, { disabled: t })
+        ]
+      }
+    ) : /* @__PURE__ */ a(R, { asChild: !0, children: /* @__PURE__ */ B(
+      "div",
+      {
+        className: m(
+          L({
+            variant: "default",
+            size: r,
+            error: n,
+            disabled: t
+          }),
+          o
+        ),
+        children: [
+          /* @__PURE__ */ B(
+            A,
+            {
+              ref: u,
+              ...d,
+              type: "button",
+              disabled: t,
+              "aria-label": c,
+              "data-slot": "date-picker-button-trigger",
+              className: "group flex flex-1 cursor-pointer items-center gap-comp-input-gap text-left outline-0 disabled:cursor-not-allowed",
+              children: [
+                p,
+                /* @__PURE__ */ a(
+                  $,
+                  {
+                    variant: "body",
+                    size: r === "xs" || r === "sm" ? "sm" : "base",
+                    weight: "medium",
+                    component: "span",
+                    fixY: !0,
+                    className: m(
+                      "flex-1 truncate",
+                      t ? "text-comp-input-text-disabled" : "text-comp-input-text-primary"
+                    ),
+                    children: f
+                  }
+                )
+              ]
+            }
+          ),
+          !s && !t && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": h,
+              onClick: b,
+              className: m(
+                "flex shrink-0 cursor-pointer items-center justify-center text-icon-dark-secondary-def outline-0",
+                "hover:text-icon-dark-primary-def focus-visible:text-icon-brand-def"
+              ),
+              children: /* @__PURE__ */ a(E, { className: "size-icon-small" })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+O.displayName = "DatePickerButtonTrigger";
+const F = k((e, r) => {
+  const {
+    variant: n = "default",
+    size: s = "base",
+    error: o = !1,
+    hideClearButton: t = !1,
+    className: i,
+    "aria-label": f,
+    clearAriaLabel: b,
+    value: c,
+    defaultValue: h,
+    onChange: d,
+    dateFormatter: u,
+    popoverContentProps: g,
+    ...p
+  } = e, x = M(), C = b ?? x.datePicker.clearDateAriaLabel, { current: l, handleChange: P, hasValue: N, clear: z } = V(
+    c,
+    h,
+    d,
+    "DatePickerButton"
+  ), y = u ?? X, D = l ? y(l) : "";
+  return /* @__PURE__ */ a(
+    T,
+    {
+      ...p,
+      mode: "single",
+      value: l,
+      onChange: P,
+      dateFormatter: y,
+      disabled: e.disabled,
+      popoverContentProps: { sideOffset: 8, ...g },
+      renderCustomTrigger: () => /* @__PURE__ */ a(
+        O,
+        {
+          ref: r,
+          variant: n,
+          size: s,
+          error: o,
+          hideClearButton: t,
+          className: i,
+          disabled: e.disabled,
+          hasValue: N,
+          displayText: D,
+          onClear: z,
+          ariaLabel: f,
+          clearAriaLabel: C
+        }
+      )
+    }
+  );
+});
+F.displayName = "DatePickerButtonSingle";
+const S = k((e, r) => {
+  const {
+    variant: n = "default",
+    size: s = "base",
+    error: o = !1,
+    hideClearButton: t = !1,
+    className: i,
+    "aria-label": f,
+    clearAriaLabel: b,
+    value: c,
+    defaultValue: h,
+    onChange: d,
+    dateFormatter: u,
+    popoverContentProps: g,
+    ...p
+  } = e, x = M(), C = b ?? x.datePicker.clearDateAriaLabel, { current: l, handleChange: P, hasValue: N, clear: z } = V(
+    c,
+    h,
+    d,
+    "DatePickerButton"
+  ), y = u ?? Y, D = l ? y(l) : "";
+  return /* @__PURE__ */ a(
+    T,
+    {
+      ...p,
+      mode: "range",
+      value: l,
+      onChange: P,
+      dateFormatter: y,
+      disabled: e.disabled,
+      popoverContentProps: { sideOffset: 8, ...g },
+      renderCustomTrigger: () => /* @__PURE__ */ a(
+        O,
+        {
+          ref: r,
+          variant: n,
+          size: s,
+          error: o,
+          hideClearButton: t,
+          className: i,
+          disabled: e.disabled,
+          hasValue: N,
+          displayText: D,
+          onClear: z,
+          ariaLabel: f,
+          clearAriaLabel: C
+        }
+      )
+    }
+  );
+});
+S.displayName = "DatePickerButtonRange";
+const q = k((e, r) => e.mode === "single" ? /* @__PURE__ */ a(F, { ...e, ref: r }) : /* @__PURE__ */ a(S, { ...e, ref: r }));
+q.displayName = "DatePickerButton";
+const G = ({ disabled: e }) => /* @__PURE__ */ a(
+  "span",
+  {
+    "aria-hidden": !0,
+    className: m(
+      // Sit the dot's center on the circular border at the 1:30 position.
+      // For a circle of radius r=50% of the parent, the border at 45° is at
+      // (50% + 50%·cos45°, 50% − 50%·sin45°) ≈ (85.36%, 14.64%). The
+      // -translate-1/2 then centers the dot on that exact point so it
+      // straddles the visible border, regardless of size.
+      "pointer-events-none absolute top-[14.64%] left-[85.36%] -translate-x-1/2 -translate-y-1/2 rounded-full",
+      "size-comp-input-dot-size",
+      e ? "bg-icon-dark-tertiary" : "bg-surface-brand-primary"
+    )
+  }
+);
+export {
+  q as DatePickerButton,
+  L as datePickerButtonVariants
+};

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePickerButton } from './DatePickerButton';
+declare const meta: Meta<typeof DatePickerButton>;
+export default meta;
+type Story = StoryObj<typeof DatePickerButton>;
+export declare const Default: Story;
+export declare const Range: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyEmpty: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const AllSizes: Story;
+export declare const AllStates: Story;
+export declare const Controlled: Story;
+//# sourceMappingURL=DatePickerButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DatePickerButton/DatePickerButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAgDvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAenB,CAAA;AA4BD,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAA;AAkED,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAA;AA6BD,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAA"}

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

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

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

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

package/dist/components/Dialog/Dialog.js

@@ -3,8 +3,8 @@ import { forwardRef as b, useState as O, useRef as E, Children as S, isValidElem
 import * as o from "@radix-ui/react-dialog";
 import { typographyVariants as P } from "../Typography/Typography.js";
 import { useMuzaTranslations as T } from "../../translations/TranslationContext.js";
-import { XClose as V } from "../Icons/CustomIcons.js";
 import { cn as i } from "../../utils/cn.js";
+import { XClose as V } from "../Icons/CustomIcons.js";
 const Q = o.Root, U = o.Title, Z = o.Description, A = ({
   className: l,
   ariaLabel: t

package/dist/components/Icons/CustomLogos.d.ts

@@ -1,6 +1,22 @@
 import * as React from 'react';
-/** Shared SVG props for all Múza product logo components. */
-export type LogoProps = React.SVGProps<SVGSVGElement>;
+/**
+ * Shared SVG props for all Múza product logo components.
+ *
+ * Logos paint their glyph paths with `fill="currentColor"`, so they
+ * inherit color from the surrounding CSS `color` cascade. Use a Tailwind
+ * `text-*` class (or any `color`-setting style) to recolor.
+ */
+export interface LogoProps extends React.SVGProps<SVGSVGElement> {
+    /**
+     * Shortcut for the dark-surface treatment — applies
+     * `text-text-invert-def` so the logo renders in the invert (white)
+     * text color. Equivalent to `className="text-text-invert-def"`.
+     * Pass a custom `className` instead when you need a non-default color.
+     *
+     * @default false
+     */
+    light?: boolean;
+}
 /**
  * Base Múza logo.
  * @component

package/dist/components/Icons/CustomLogos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLogos.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/CustomLogos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,6DAA6D;AAC7D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA;AAErD;;;GAGG;AACH,eAAO,MAAM,QAAQ,8FAgDpB,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,WAAW,8FA4DvB,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,cAAc,8FA6E1B,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,8FAwI/B,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,UAAU,8FAwDtB,CAAA"}
+{"version":3,"file":"CustomLogos.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/CustomLogos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC9D;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAWD;;;GAGG;AACH,eAAO,MAAM,QAAQ,8FAiDpB,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,WAAW,8FA6DvB,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,cAAc,8FA8E1B,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,8FAyI/B,CAAA;AAGD;;;GAGG;AACH,eAAO,MAAM,UAAU,8FAyDtB,CAAA"}