@vkzstudio/muza-ui 1.0.46 → 1.0.48

package/dist/components/CardCheckboxAmount/CardCheckboxAmount.d.ts

@@ -0,0 +1,111 @@
+import { CheckboxProps } from '../Checkbox';
+import { StepperProps } from '../Stepper';
+import * as React from 'react';
+/** Props for the {@link CardCheckboxAmount} component. */
+export interface CardCheckboxAmountProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'title' | 'defaultChecked'> {
+    /** Primary label rendered next to the checkbox. */
+    title: React.ReactNode;
+    /**
+     * Secondary line rendered below the title in muted color. Constrained to
+     * `string` because the underlying Checkbox's `secondaryLabel` is a string.
+     */
+    description?: string;
+    /** Controlled checked state of the underlying checkbox. */
+    checked?: boolean;
+    /**
+     * Initial checked state for uncontrolled usage.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /** Fires when the user toggles the checkbox. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Controlled amount value of the embedded stepper (only visible while checked). */
+    amount?: number;
+    /**
+     * Initial amount for uncontrolled usage.
+     * @default 1
+     */
+    defaultAmount?: number;
+    /** Fires when the user increments/decrements the amount. */
+    onAmountChange?: (amount: number) => void;
+    /**
+     * Minimum allowed amount; the decrement button is disabled at this value.
+     * @default 1
+     */
+    min?: number;
+    /** Maximum allowed amount; the increment button is disabled at this value. */
+    max?: number;
+    /**
+     * Marks the card as unavailable: disables the checkbox, hides the stepper,
+     * mutes the content, and shows {@link unavailableMessage}. The internal
+     * `checked` / `amount` state is preserved while unavailable — flipping the
+     * flag back to `false` restores the previous selection.
+     * @default false
+     */
+    unavailable?: boolean;
+    /**
+     * Message displayed when {@link unavailable} is true.
+     * @default translations.cardCheckboxAmount.unavailableMessage
+     */
+    unavailableMessage?: React.ReactNode;
+    /**
+     * Helper message displayed below the stepper once the amount reaches `max`.
+     * @default translations.cardCheckboxAmount.maxAmountMessage
+     */
+    maxAmountMessage?: React.ReactNode;
+    /** Custom ID for the underlying checkbox input. Auto-generated if omitted. */
+    id?: string;
+    /** Name attribute forwarded to the underlying checkbox for form submission. */
+    name?: string;
+    /** Value attribute forwarded to the underlying checkbox for form submission. */
+    value?: string;
+    /**
+     * Accessible label for the stepper's increment button.
+     * @default translations.stepper.incrementAriaLabel
+     */
+    incrementAriaLabel?: StepperProps['incrementAriaLabel'];
+    /**
+     * Accessible label for the stepper's decrement button.
+     * @default translations.stepper.decrementAriaLabel
+     */
+    decrementAriaLabel?: StepperProps['decrementAriaLabel'];
+    /** Escape hatch for advanced Checkbox wiring (`required`, `error`, etc.). */
+    checkboxProps?: Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'disabled' | 'label' | 'secondaryLabel' | 'id' | 'name' | 'value'>;
+}
+/**
+ * Selectable card that combines a checkbox with a quantity stepper for picking
+ * a single item and the amount of it (e.g. choosing a credit/voucher).
+ *
+ * Composed from `Card` (checkout variant), `Checkbox`, and `Stepper`. Toggling
+ * the checkbox reveals the stepper, which is bounded by `min` / `max`. Once
+ * `amount` reaches `max`, a helper message appears below the stepper. Marking
+ * the card `unavailable` disables interaction and surfaces a red explanatory
+ * message instead of the stepper. Supports both controlled and uncontrolled
+ * usage of the checked + amount state.
+ *
+ * @example
+ * // Uncontrolled
+ * <CardCheckboxAmount
+ *   title="Kredit v hodnotě 500 Kč"
+ *   description="500 Kč (-10%)"
+ *   max={10}
+ * />
+ *
+ * @example
+ * // Controlled — parent owns both checked and amount
+ * const [checked, setChecked] = useState(false)
+ * const [amount, setAmount] = useState(1)
+ *
+ * <CardCheckboxAmount
+ *   title="Kredit v hodnotě 500 Kč"
+ *   description="500 Kč (-10%)"
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ *   amount={amount}
+ *   onAmountChange={setAmount}
+ *   max={10}
+ * />
+ */
+declare const CardCheckboxAmount: React.ForwardRefExoticComponent<CardCheckboxAmountProps & React.RefAttributes<HTMLElement>>;
+export { CardCheckboxAmount };
+//# sourceMappingURL=CardCheckboxAmount.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardCheckboxAmount.d.ts","sourceRoot":"","sources":["../../../src/components/CardCheckboxAmount/CardCheckboxAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAGvD,0DAA0D;AAC1D,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,GAAG,OAAO,GAAG,gBAAgB,CACxC;IACD,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,oFAAoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAA;IACvD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAA;IACvD,6EAA6E;IAC7E,aAAa,CAAC,EAAE,IAAI,CAClB,aAAa,EACX,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,IAAI,GACJ,MAAM,GACN,OAAO,CACV,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,kBAAkB,6FA6IvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/CardCheckboxAmount/CardCheckboxAmount.js

@@ -0,0 +1,115 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { useMuzaTranslations as O } from "../../translations/TranslationContext.js";
+import { Card as Q } from "../Card/Card.js";
+import { Checkbox as V } from "../Checkbox/Checkbox.js";
+import { Stepper as W } from "../Stepper/Stepper.js";
+import { cn as X } from "../../utils/cn.js";
+import { Typography as y } from "../Typography/Typography.js";
+const Y = i.forwardRef(
+  ({
+    className: C,
+    title: M,
+    description: A,
+    checked: m,
+    defaultChecked: N,
+    onCheckedChange: n,
+    amount: c,
+    defaultAmount: b = 1,
+    onAmountChange: o,
+    min: D = 1,
+    max: d,
+    unavailable: a = !1,
+    unavailableMessage: S,
+    maxAmountMessage: k,
+    id: z,
+    name: K,
+    value: j,
+    incrementAriaLabel: I,
+    decrementAriaLabel: R,
+    checkboxProps: t,
+    ...T
+  }, B) => {
+    const f = O(), p = m !== void 0, [E, L] = i.useState(
+      N ?? !1
+    ), l = p ? m : E, u = c !== void 0, [U, q] = i.useState(b), x = u ? c : U, w = (e) => {
+      const s = e === !0;
+      p || L(s), n == null || n(s);
+    }, F = (e) => {
+      u || q(e), o == null || o(e);
+    }, G = (e) => {
+      var s;
+      (s = t == null ? void 0 : t.onKeyDown) == null || s.call(t, e), !(e.defaultPrevented || a) && e.key === "Enter" && (e.preventDefault(), w(!l));
+    }, H = l && !a, J = d !== void 0 && x >= d, h = S ?? f.cardCheckboxAmount.unavailableMessage, g = k ?? f.cardCheckboxAmount.maxAmountMessage;
+    return /* @__PURE__ */ v(
+      Q,
+      {
+        ref: B,
+        variant: "checkout",
+        direction: "column",
+        className: X(
+          "items-start gap-md md:flex-row md:items-center md:gap-lg",
+          a && "border-stroke-base-disabled",
+          C
+        ),
+        ...T,
+        children: [
+          /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ r(
+            V,
+            {
+              ...t,
+              id: z,
+              name: K,
+              value: j,
+              checked: l,
+              onCheckedChange: w,
+              onKeyDown: G,
+              disabled: a,
+              label: M,
+              secondaryLabel: A
+            }
+          ) }),
+          a && h && /* @__PURE__ */ r(
+            y,
+            {
+              variant: "body",
+              size: "base",
+              weight: "regular",
+              component: "span",
+              className: "pl-2-5-xl text-text-state-error-def md:pl-0 md:text-right md:whitespace-nowrap",
+              children: h
+            }
+          ),
+          H && /* @__PURE__ */ v("div", { className: "flex flex-col items-start gap-2xs pl-2-5-xl md:items-end md:pl-0", children: [
+            /* @__PURE__ */ r(
+              W,
+              {
+                value: x,
+                onChange: F,
+                min: D,
+                max: d,
+                incrementAriaLabel: I,
+                decrementAriaLabel: R
+              }
+            ),
+            J && g && /* @__PURE__ */ r(
+              y,
+              {
+                variant: "body",
+                size: "sm",
+                weight: "regular",
+                component: "span",
+                className: "text-text-dark-secondary md:text-right md:whitespace-nowrap",
+                children: g
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Y.displayName = "CardCheckboxAmount";
+export {
+  Y as CardCheckboxAmount
+};

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CardCheckboxAmount } from './CardCheckboxAmount';
+declare const meta: Meta<typeof CardCheckboxAmount>;
+export default meta;
+type Story = StoryObj<typeof CardCheckboxAmount>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const MaxAmount: Story;
+export declare const Unavailable: Story;
+export declare const CustomMessages: Story;
+export declare const Controlled: Story;
+export declare const AllStates: Story;
+//# sourceMappingURL=CardCheckboxAmount.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardCheckboxAmount.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CardCheckboxAmount/CardCheckboxAmount.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CA2DzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEhD,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAoCvB,CAAA"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,CACxB;IACD;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,qFA6CT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,YAAY;;;8EA8CjB,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,CACxB;IACD;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,qFA6CT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Chip/Chip.js

@@ -27,7 +27,11 @@ const v = m(
           "[&>svg]:text-icon-dark-secondary-def",
           "hover:text-text-brand-hover",
           "hover:bg-surface-brand-brand-tertiary",
-          "hover:[&>svg]:text-icon-brand-hover"
+          // `[&:hover>svg]:` compiles to the flat selector
+          // `.x:hover > svg` instead of nested CSS, so
+          // storybook-addon-pseudo-states can rewrite the :hover
+          // and force the colour under .pseudo-hover.
+          "[&:hover>svg]:text-icon-brand-hover"
         ]
       },
       disabled: {
@@ -37,7 +41,7 @@ const v = m(
           "[&>svg]:text-icon-dark-tertiary",
           "hover:bg-transparent",
           "hover:text-text-dark-disabled",
-          "hover:[&>svg]:text-icon-dark-tertiary"
+          "[&:hover>svg]:text-icon-dark-tertiary"
         ],
         false: ""
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqC3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmDvB,CAAA"}
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqC3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmDvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmDvB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js

@@ -110,7 +110,15 @@ const vt = et(
           t && (v.current = e ?? i), s === void 0 && M(t), d == null || d(t);
         },
         children: [
-          /* @__PURE__ */ n(
+          S ? (
+            // The caller owns the full trigger structure — including its own
+            // `<PopoverTrigger>` (typically via `asChild`) and any siblings
+            // (e.g. a clear button next to the trigger). DatePicker does not
+            // wrap the returned element, so the caller can place the
+            // `<PopoverTrigger>` precisely where it wants without nesting
+            // interactive elements inside another button.
+            S()
+          ) : /* @__PURE__ */ n(
             nt,
             {
               className: l(
@@ -118,7 +126,7 @@ const vt = et(
                 o == null ? void 0 : o.popoverTrigger
               ),
               disabled: R,
-              children: S ? S() : /* @__PURE__ */ n(
+              children: /* @__PURE__ */ n(
                 st,
                 {
                   ref: N,

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

@@ -1 +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,CA2KjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAuBxC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAyBxC,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAmCzC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KA8CnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyB1C,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyB1C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAkClC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiC5C,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAoCzB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA"}
+{"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;AAK3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA2KjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAuBxC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAyBxC,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAmCzC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KAkDnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyB1C,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyB1C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAkClC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiC5C,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAoCzB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA"}

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

@@ -0,0 +1,97 @@
+import { VariantProps } from 'class-variance-authority';
+import { DatePickerProps, DatePickerRangeProps, DatePickerSingleProps } from '../DatePicker';
+/**
+ * Variant styles for the DatePickerButton trigger element.
+ *
+ * Mirrors Input's size + state tokens so the trigger drops in alongside other
+ * inline form controls (e.g. next to a Searchbar) without visual mismatch.
+ */
+export declare const datePickerButtonVariants: (props?: ({
+    variant?: "default" | "iconOnly" | null | undefined;
+    size?: "xs" | "sm" | "lg" | "base" | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Visual style of the DatePickerButton trigger. */
+export type DatePickerButtonVariant = NonNullable<VariantProps<typeof datePickerButtonVariants>['variant']>;
+/** Size token of the DatePickerButton trigger; matches Input sizes. */
+export type DatePickerButtonSize = NonNullable<VariantProps<typeof datePickerButtonVariants>['size']>;
+/**
+ * Subset of {@link DatePickerProps} relevant to the button-style trigger.
+ * Input-only props (`label`, `hint`, `placeholder`, etc.) and trigger
+ * overrides are excluded — DatePickerButton renders its own trigger.
+ */
+type SharedDatePickerProps = Omit<DatePickerProps, 'label' | 'hint' | 'placeholder' | 'renderCustomTrigger' | 'classNames' | 'error' | keyof DatePickerSingleProps | keyof DatePickerRangeProps>;
+type SharedButtonProps = {
+    /**
+     * Visual style of the trigger.
+     * - `'default'` — shows the date and a clear (X) button when a value is set;
+     *   collapses to the round icon button when empty.
+     * - `'iconOnly'` — always the round icon button; shows a small dot indicator
+     *   in the top-right corner when a value is set.
+     *
+     * @default 'default'
+     * @example
+     * <DatePickerButton mode="single" variant="default" />
+     * <DatePickerButton mode="range" variant="iconOnly" aria-label="Filter" />
+     */
+    variant?: DatePickerButtonVariant;
+    /**
+     * Size of the trigger button. Matches Input's `size` tokens so the trigger
+     * lines up with adjacent inputs.
+     *
+     * @default 'base'
+     */
+    size?: DatePickerButtonSize;
+    /** Applies error border styling. @default false */
+    error?: boolean;
+    /**
+     * Hides the clear (X) icon in `variant='default'`, even when a value is set.
+     * Use when the date is required and cannot be cleared from the trigger.
+     *
+     * @default false
+     */
+    hideClearButton?: boolean;
+    /** Accessible label for the trigger. Required for `variant='iconOnly'`. */
+    'aria-label'?: string;
+    /**
+     * Accessible label for the clear (X) button. Defaults to the
+     * `datePicker.clearDateAriaLabel` translation.
+     */
+    clearAriaLabel?: string;
+    /** Class applied to the visible trigger wrapper. */
+    className?: string;
+};
+/** Props for `DatePickerButton` in `mode='single'`. */
+export type DatePickerButtonSingleProps = SharedDatePickerProps & SharedButtonProps & DatePickerSingleProps;
+/** Props for `DatePickerButton` in `mode='range'`. */
+export type DatePickerButtonRangeProps = SharedDatePickerProps & SharedButtonProps & DatePickerRangeProps;
+/** Props for the DatePickerButton component. */
+export type DatePickerButtonProps = DatePickerButtonSingleProps | DatePickerButtonRangeProps;
+/**
+ * DatePickerButton renders a button-style trigger that opens the same
+ * calendar dropdown as {@link DatePicker}. Functionality and logic — value
+ * handling, range selection, presets, immediateCommit, allowOneDayRange,
+ * required, reset behavior — are unified with DatePicker via composition.
+ *
+ * The implementation dispatches to a mode-specific internal component so
+ * each branch carries concrete `Date` / `DateRange` types throughout — no
+ * runtime type assertions are needed inside the impls.
+ *
+ * The trigger and clear (X) controls are real, independently-focusable
+ * `<button>` elements. They sit as siblings under a `<PopoverAnchor>` so the
+ * calendar aligns to the visible pill without any nested-interactive HTML.
+ *
+ * @example
+ * <DatePickerButton mode="single" aria-label="Pick date" />
+ *
+ * @example
+ * <DatePickerButton
+ *   mode="range"
+ *   variant="iconOnly"
+ *   aria-label="Filter by date"
+ * />
+ */
+export declare const DatePickerButton: import('react').ForwardRefExoticComponent<DatePickerButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=DatePickerButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerButton.d.ts","sourceRoot":"","sources":["../../../src/components/DatePickerButton/DatePickerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAKjE,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC3B,MAAM,eAAe,CAAA;AAKtB;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB;;;;;8EAmEpC,CAAA;AAED,oDAAoD;AACpD,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAC/C,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,SAAS,CAAC,CACzD,CAAA;AAED,uEAAuE;AACvE,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CACtD,CAAA;AAED;;;;GAIG;AACH,KAAK,qBAAqB,GAAG,IAAI,CAC/B,eAAe,EACb,OAAO,GACP,MAAM,GACN,aAAa,GACb,qBAAqB,GACrB,YAAY,GACZ,OAAO,GACP,MAAM,qBAAqB,GAC3B,MAAM,oBAAoB,CAC7B,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,uDAAuD;AACvD,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,GAC7D,iBAAiB,GACjB,qBAAqB,CAAA;AAEvB,sDAAsD;AACtD,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,GAC5D,iBAAiB,GACjB,oBAAoB,CAAA;AAEtB,gDAAgD;AAChD,MAAM,MAAM,qBAAqB,GAC7B,2BAA2B,GAC3B,0BAA0B,CAAA;AAwU9B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,qHAQ3B,CAAA"}