@vkzstudio/muza-ui 1.4.0 → 1.5.0

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,86 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { CountryData, ParsedCountry } from 'react-international-phone';
+/**
+ * Metadata passed alongside the E.164 value to `PhoneInput`'s `onChange`.
+ */
+export interface PhoneInputChangeMeta {
+    /** The formatted, human-readable value shown in the input (e.g. `"777 123 456"`). */
+    inputValue: string;
+    /** The resolved country the number currently belongs to. */
+    country: ParsedCountry;
+}
+declare const phoneWrapperVariants: (props?: ({
+    size?: "xs" | "sm" | "lg" | "base" | null | undefined;
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the PhoneInput component.
+ *
+ * A segmented phone-number field: a searchable country selector (flag + dial
+ * code) on the left and a formatted national-number input on the right. The
+ * value is composed and emitted as a single E.164 string. Formatting, country
+ * detection, and dial-code handling are powered by
+ * [react-international-phone](https://react-international-phone.vercel.app/).
+ *
+ * Extends native input attributes except `size`/`type`/`prefix` (managed
+ * internally) and `value`/`defaultValue`/`onChange` (narrowed to the phone
+ * string contract below).
+ */
+export interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'prefix' | 'value' | 'defaultValue' | 'onChange'>, VariantProps<typeof phoneWrapperVariants> {
+    /** Label text rendered above the input. */
+    label?: string;
+    /** Helper or error text rendered below the input. */
+    hint?: string;
+    /** Controls height and typography. @default 'base' */
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    /** Applies error border and hint styling. @default false */
+    error?: boolean;
+    /**
+     * Controlled phone value in E.164 format (e.g. `"+420777123456"`). Pair with
+     * `onChange` for controlled usage.
+     */
+    value?: string;
+    /** Initial phone value in E.164 format for uncontrolled usage. */
+    defaultValue?: string;
+    /**
+     * Fires on every change with the composed E.164 phone string and formatting
+     * metadata. The phone string is empty (`""`) when no number is entered.
+     */
+    onChange?: (phone: string, meta: PhoneInputChangeMeta) => void;
+    /** ISO2 code of the initial country selection (e.g. `"cz"`). @default 'cz' */
+    defaultCountry?: string;
+    /**
+     * Country dataset used for the selector and number guessing. Rarely needed —
+     * override to restrict or reorder the available countries.
+     * @default defaultCountries
+     */
+    countries?: CountryData[];
+    /**
+     * Hides the required asterisk in the label even when `required` is `true`.
+     * @default false
+     */
+    disableRequiredAsterisk?: boolean;
+    /** Custom content rendered inline next to the label. Takes precedence over `infoTooltip`. */
+    labelExtra?: ReactNode;
+    /** Tooltip content shown in an info icon next to the label. Ignored when `labelExtra` is provided. */
+    infoTooltip?: string;
+    /**
+     * Accessible label for the country selector trigger.
+     * @default translations.phoneInput.countrySelectorAriaLabel
+     */
+    countrySelectorAriaLabel?: string;
+    /**
+     * Placeholder for the country search field.
+     * @default translations.phoneInput.searchPlaceholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message shown when the country search yields no matches.
+     * @default translations.phoneInput.noResults
+     */
+    noResultsText?: string;
+}
+export declare const PhoneInput: import('react').ForwardRefExoticComponent<PhoneInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=PhoneInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AACjE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,aAAa,EAGnB,MAAM,2BAA2B,CAAA;AAOlC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,UAAU,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,OAAO,EAAE,aAAa,CAAA;CACvB;AAKD,QAAA,MAAM,oBAAoB;;;8EAyBzB,CAAA;AAcD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,CAAC,EACjC,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnE,EACD,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC9D,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA;IACzB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,UAAU,8GA6HtB,CAAA"}

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,144 @@
+import { jsx as u, jsxs as W } from "react/jsx-runtime";
+import { forwardRef as Y, useId as B, useRef as G, useState as H, useEffect as J } from "react";
+import { cva as K } from "class-variance-authority";
+import { usePhoneInput as O, defaultCountries as Q } from "react-international-phone";
+import { CountrySelector as U } from "./CountrySelector.js";
+import { useMuzaTranslations as X } from "../../translations/TranslationContext.js";
+import { FormField as Z } from "../FormField/FormField.js";
+import { cn as v } from "../../utils/cn.js";
+import { typographyVariants as _ } from "../Typography/Typography.js";
+const q = K(
+  [
+    "group flex items-center",
+    "rounded-full border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
+    "hover:border-comp-input-stroke-hover",
+    "focus-within:border-comp-input-icon-brand-focused",
+    "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-comp-input-stroke-disabled has-[:disabled]:bg-comp-input-fill-disabled"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-comp-input-h-xsm",
+        sm: "h-comp-input-h-small",
+        base: "h-comp-input-h-def",
+        lg: "h-comp-input-h-large"
+      },
+      error: {
+        true: "border-comp-input-stroke-error-def"
+      }
+    },
+    defaultVariants: {
+      size: "base",
+      error: !1
+    }
+  }
+), ee = (t) => v(
+  _({
+    size: t === "xs" || t === "sm" ? "input" : "base",
+    weight: "medium",
+    fixY: !0
+  }),
+  "h-full min-w-0 flex-1 bg-transparent px-comp-input-p-hor text-comp-input-text-primary outline-0 transition-colors",
+  "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
+  "disabled:cursor-not-allowed"
+), te = Y(
+  ({
+    className: t,
+    label: p,
+    hint: c,
+    size: d,
+    error: o,
+    value: m,
+    defaultValue: C,
+    onChange: i,
+    defaultCountry: V = "cz",
+    countries: h = Q,
+    disabled: f,
+    required: l,
+    disableRequiredAsterisk: w,
+    labelExtra: P,
+    infoTooltip: R,
+    id: k,
+    countrySelectorAriaLabel: N,
+    searchPlaceholder: z,
+    noResultsText: F,
+    ...b
+  }, e) => {
+    const s = X(), S = B(), r = k ?? S, y = c ? `${r}-hint` : void 0, x = p ? `${r}-label` : void 0, n = G(null), I = m !== void 0, [j, A] = H(C ?? ""), L = I ? m : j, { inputValue: M, country: T, setCountry: $, handlePhoneValueChange: D } = O({
+      defaultCountry: V,
+      value: L,
+      countries: h,
+      inputRef: n,
+      // Keep the dial code out of the number field — it lives in the country
+      // selector segment. `phone` in onChange is still full E.164.
+      disableDialCodeAndPrefix: !0,
+      onChange: ({
+        phone: a,
+        inputValue: g,
+        country: E
+      }) => {
+        I || A(a), i == null || i(g ? a : "", {
+          inputValue: g,
+          country: E
+        });
+      }
+    });
+    return J(() => {
+      e && (typeof e == "function" ? e(n.current) : e.current = n.current);
+    }, [e]), /* @__PURE__ */ u(
+      Z,
+      {
+        label: p,
+        hint: c,
+        error: o,
+        required: l,
+        disableRequiredAsterisk: w,
+        htmlFor: r,
+        labelId: x,
+        hintId: y,
+        labelExtra: P,
+        infoTooltip: R,
+        children: /* @__PURE__ */ W("div", { className: v(q({ size: d, error: o }), t), children: [
+          /* @__PURE__ */ u(
+            U,
+            {
+              selectedCountry: T.iso2,
+              onCountryChange: (a) => $(a),
+              countries: h,
+              disabled: f,
+              error: o,
+              ariaLabel: N ?? s.phoneInput.countrySelectorAriaLabel,
+              searchPlaceholder: z ?? s.phoneInput.searchPlaceholder,
+              noResultsText: F ?? s.phoneInput.noResults
+            }
+          ),
+          /* @__PURE__ */ u(
+            "input",
+            {
+              ...b,
+              ref: n,
+              id: r,
+              type: "tel",
+              inputMode: "tel",
+              autoComplete: b.autoComplete ?? "tel",
+              "data-slot": "phone-input",
+              value: M,
+              onChange: D,
+              disabled: f,
+              required: l,
+              "aria-describedby": y,
+              "aria-labelledby": x,
+              "aria-invalid": o,
+              "aria-required": l,
+              className: ee(d)
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+te.displayName = "PhoneInput";
+export {
+  te as PhoneInput
+};

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

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PhoneInput } from './PhoneInput';
+declare const meta: Meta<typeof PhoneInput>;
+export default meta;
+type Story = StoryObj<typeof PhoneInput>;
+export declare const Default: Story;
+export declare const Prefilled: Story;
+export declare const ErrorState: Story;
+export declare const Disabled: Story;
+/**
+ * Controlled usage: the parent owns the E.164 value and echoes it back below
+ * the field. This is the real integration pattern — keep the wiring inline so
+ * the code preview teaches it.
+ */
+export declare const Controlled: Story;
+export declare const AllSizes: Story;
+/**
+ * Consolidated state matrix for visual regression. Hover and focus are forced
+ * with `storybook-addon-pseudo-states` (`pseudo-hover` /
+ * `pseudo-focus-within`) rather than duplicating utility classes.
+ */
+export declare const AllStates: Story;
+/**
+ * Country dropdown rendered open so the visual-regression suite captures the
+ * portaled Popover (search field + country list). The closed stories cannot
+ * show it.
+ */
+export declare const OpenState: Story;
+//# sourceMappingURL=PhoneInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8DjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAevB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KA0CvB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAA"}

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

@@ -0,0 +1,2 @@
+export { PhoneInput, type PhoneInputProps, type PhoneInputChangeMeta, } from './PhoneInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,MAAM,cAAc,CAAA"}

package/dist/components/Searchbar/Searchbar.js

@@ -1,9 +1,9 @@
 import { jsxs as R, jsx as e } from "react/jsx-runtime";
 import * as n from "react";
 import { useMuzaTranslations as j } from "../../translations/TranslationContext.js";
-import { MagnifyingGlass as w } from "../Icons/CustomIcons.js";
 import { cn as s } from "../../utils/cn.js";
-import { CloseCircleBold as I } from "@solar-icons/react-perf";
+import { CloseCircleBold as w } from "@solar-icons/react-perf";
+import { MagnifyingGlass as I } from "../Icons/CustomIcons.js";
 import { Input as M } from "../Input/Input.js";
 const F = ({
   className: p,
@@ -49,7 +49,7 @@ const F = ({
         type: "button",
         onClick: z,
         children: /* @__PURE__ */ e(
-          I,
+          w,
           {
             className: s("size-icon-small text-icon-dark-secondary-def", {
               "text-text-dark-tertiary": r
@@ -70,7 +70,7 @@ const F = ({
         "aria-label": L,
         type: "submit",
         children: /* @__PURE__ */ e(
-          w,
+          I,
           {
             className: s(
               "size-icon-small text-icon-dark-primary-def transition-colors",

package/dist/components/Toast/Toast.d.ts

@@ -4,7 +4,7 @@ export interface ToastProps {
     /** Unique identifier for the toast instance. Provided automatically by `toast()`. */
     id: string | number;
     /** Visual style variant indicating message severity. */
-    variant: 'warning' | 'success' | 'error';
+    variant: 'warning' | 'success' | 'error' | 'info';
     /** Message text content displayed in the toast. */
     text?: string;
     /** Enables close button for manual dismissal. @default true */
@@ -31,6 +31,7 @@ export interface ToastProps {
  * toast({ variant: 'success', text: 'Saved successfully' })
  * toast({ variant: 'error', text: 'Failed to save', autoDismiss: 5000 })
  * toast({ variant: 'warning', text: 'Unsaved changes', closable: false })
+ * toast({ variant: 'info', text: 'Sync in progress' })
  */
 declare const toast: (toast: Omit<ToastProps, "id">) => string | number;
 declare const Toast: ({ id, text, variant, icon, dismissAriaLabel, onClose, closable, className, }: ToastProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,wEAAwE;AACxE,MAAM,WAAW,UAAU;IACzB,qFAAqF;IACrF,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACxC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,KAAK,GAAI,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,oBAO3C,CAAA;AAED,QAAA,MAAM,KAAK,GAAI,8EASZ,UAAU,4CA8CZ,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,wEAAwE;AACxE,MAAM,WAAW,UAAU;IACzB,qFAAqF;IACrF,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,wDAAwD;IACxD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IACjD,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,GAAI,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,oBAO3C,CAAA;AAED,QAAA,MAAM,KAAK,GAAI,8EASZ,UAAU,4CAmDZ,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Toast/Toast.js

@@ -1,44 +1,45 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import "react";
-import { toast as a } from "sonner";
-import { XClose as u } from "../Icons/CustomIcons.js";
-import { cn as d } from "../../utils/cn.js";
-import { DangerTriangleOutline as p, UnreadOutline as g } from "@solar-icons/react-perf";
-import { Typography as x } from "../Typography/Typography.js";
-const T = (e) => a.custom((s) => /* @__PURE__ */ t(f, { id: s, ...e }), {
-  dismissible: e.closable,
-  onAutoClose: e.onAutoDismiss,
-  duration: e.autoDismiss,
-  toasterId: e.toasterId
-}), f = ({
-  id: e,
-  text: s,
-  variant: r,
-  icon: i,
-  dismissAriaLabel: c,
-  onClose: o,
-  closable: l = !0,
-  className: n
+import { toast as c } from "sonner";
+import { XClose as n } from "../Icons/CustomIcons.js";
+import { cn as u } from "../../utils/cn.js";
+import { DangerTriangleOutline as g, UnreadOutline as x } from "@solar-icons/react-perf";
+import { Typography as d } from "../Typography/Typography.js";
+const T = (s) => c.custom((o) => /* @__PURE__ */ e(b, { id: o, ...s }), {
+  dismissible: s.closable,
+  onAutoClose: s.onAutoDismiss,
+  duration: s.autoDismiss,
+  toasterId: s.toasterId
+}), b = ({
+  id: s,
+  text: o,
+  variant: t,
+  icon: r,
+  dismissAriaLabel: a,
+  onClose: i,
+  closable: p = !0,
+  className: l
 }) => /* @__PURE__ */ m(
   "div",
   {
-    className: d(
+    className: u(
       "flex items-center gap-comp-alert-gap-sm rounded-xl p-xl",
       {
-        "bg-orange-200 text-comp-alert-text-warning": r === "warning",
-        "bg-green-400 text-text-invert-def": r === "success",
-        "bg-surface-error-def text-text-invert-def": r === "error"
+        "bg-comp-toast-bg-warning text-comp-toast-text-warning": t === "warning",
+        "bg-comp-toast-bg-success text-comp-toast-text-success": t === "success",
+        "bg-comp-toast-bg-error text-comp-toast-text-text-error": t === "error",
+        "bg-comp-toast-bg-info text-comp-toast-text-info": t === "info"
       },
-      n
+      l
     ),
     children: [
       /* @__PURE__ */ m("div", { className: "[&>svg]:size-comp-alert-ico-size", children: [
-        i,
-        !i && (r === "error" || r === "warning") && /* @__PURE__ */ t(p, {}),
-        !i && r === "success" && /* @__PURE__ */ t(g, {})
+        r,
+        !r && (t === "error" || t === "warning" || t === "info") && /* @__PURE__ */ e(g, {}),
+        !r && t === "success" && /* @__PURE__ */ e(x, {})
       ] }),
-      /* @__PURE__ */ t(
-        x,
+      /* @__PURE__ */ e(
+        d,
         {
           component: "p",
           variant: "body",
@@ -46,24 +47,24 @@ const T = (e) => a.custom((s) => /* @__PURE__ */ t(f, { id: s, ...e }), {
           size: "base",
           className: "text-inherit",
           fixY: !0,
-          children: s
+          children: o
         }
       ),
-      l && /* @__PURE__ */ t(
+      p && /* @__PURE__ */ e(
         "button",
         {
           className: "ml-auto focus-visible-auto",
-          "aria-label": c,
+          "aria-label": a,
           onClick: () => {
-            a.dismiss(e), o == null || o();
+            c.dismiss(s), i == null || i();
           },
-          children: /* @__PURE__ */ t(u, { className: "size-comp-alert-ico-size" })
+          children: /* @__PURE__ */ e(n, { className: "size-comp-alert-ico-size" })
         }
       )
     ]
   }
 );
 export {
-  f as Toast,
+  b as Toast,
   T as toast
 };

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

@@ -7,5 +7,6 @@ export declare const Warning: Story;
 export declare const OpenState: Story;
 export declare const Success: Story;
 export declare const Error: Story;
+export declare const Info: Story;
 export declare const AllOptions: Story;
 //# sourceMappingURL=Toast.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,KAAK,EAAS,MAAM,SAAS,CAAA;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4D5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkCnB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgExB,CAAA"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,KAAK,EAAS,MAAM,SAAS,CAAA;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4D5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkCnB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0ExB,CAAA"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -22,11 +22,18 @@ export interface TooltipProps extends React.ComponentProps<typeof TooltipPrimiti
     delayDuration?: number;
     /** Prevents the tooltip from staying open when hovering over the content. */
     disableHoverableContent?: boolean;
+    /**
+     * Opens the tooltip on click/tap instead of hover/focus and renders a close
+     * button (on tablet/mobile) so it can be dismissed on touch devices. Use for
+     * tap-triggered hints, e.g. a help icon beside an input label.
+     * @default false
+     */
+    openOnClick?: boolean;
 }
-declare const Tooltip: React.FC<TooltipProps>;
+declare const Tooltip: ({ openOnClick, open: openProp, defaultOpen, onOpenChange, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 /** Props for the TooltipTrigger. Element that displays tooltip on hover/focus. Use `asChild` for custom elements. */
 export type TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** Props for the TooltipContent. Styled floating container with positioning and animations. */
 export interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
     /** Preferred side of the trigger to render against. @default 'top' */
@@ -37,6 +44,13 @@ export interface TooltipContentProps extends React.ComponentPropsWithoutRef<type
     align?: 'start' | 'center' | 'end';
     /** Offset in pixels from the aligned edge. */
     alignOffset?: number;
+    /**
+     * Accessible label for the close button shown in click (`openOnClick`) mode.
+     * Defaults to translation `tooltip.closeAriaLabel`.
+     */
+    closeAriaLabel?: string;
+    /** Fires when the close button is clicked (click mode only). */
+    onClose?: () => void;
 }
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,+FAA+F;AAC/F,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC;IACxE,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4FAA4F;IAC5F,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAClC;AAED,QAAA,MAAM,eAAe,GAAI,cAAc,oBAAoB,4CAE1D,CAAA;AAED,uEAAuE;AACvE,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC1D,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAClC;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAyB,CAAA;AAE7D,qHAAqH;AACrH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CACpD,OAAO,gBAAgB,CAAC,OAAO,CAChC,CAAA;AAED,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,+FAA+F;AAC/F,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IACvE,sEAAsE;IACtE,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,cAAc,4FAiBlB,CAAA;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAuB3D,+FAA+F;AAC/F,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC;IACxE,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4FAA4F;IAC5F,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAClC;AAED,QAAA,MAAM,eAAe,GAAI,cAAc,oBAAoB,4CAE1D,CAAA;AAED,uEAAuE;AACvE,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC1D,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,OAAO,GAAI,gFAOd,YAAY,4CAmCd,CAAA;AAED,qHAAqH;AACrH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CACpD,OAAO,gBAAgB,CAAC,OAAO,CAChC,CAAA;AAED,QAAA,MAAM,cAAc,sKAiBlB,CAAA;AAGF,+FAA+F;AAC/F,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IACvE,sEAAsE;IACtE,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,QAAA,MAAM,cAAc,4FAkDnB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,25 +1,102 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as n from "react";
-import * as o from "@radix-ui/react-tooltip";
-import { cn as s } from "../../utils/cn.js";
-import { Typography as m } from "../Typography/Typography.js";
-const g = ({ ...t }) => /* @__PURE__ */ i(o.Provider, { delayDuration: 100, ...t }), y = o.Root, T = o.Trigger, l = n.forwardRef(({ className: t, children: e, sideOffset: a = 4, ...r }, d) => /* @__PURE__ */ i(
-  o.Content,
-  {
-    ref: d,
-    sideOffset: a,
-    className: s(
-      "z-50 origin-[--radix-tooltip-content-transform-origin] animate-in overflow-hidden rounded-md bg-surface-brand-brand-tertiary px-lg py-md text-text-brand-def fade-in-0 zoom-in-95 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",
-      t
-    ),
-    ...r,
-    children: /* @__PURE__ */ i(m, { component: "span", variant: "body", weight: "regular", size: "sm", children: e })
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import * as i from "react";
+import * as n from "@radix-ui/react-tooltip";
+import { XClose as y } from "../Icons/CustomIcons.js";
+import { useMuzaTranslationContext as T } from "../../translations/TranslationContext.js";
+import { cn as w } from "../../utils/cn.js";
+import { Typography as z } from "../Typography/Typography.js";
+const b = () => {
+}, u = i.createContext({
+  openOnClick: !1,
+  open: !1,
+  setOpen: b
+}), M = ({ ...t }) => /* @__PURE__ */ s(n.Provider, { delayDuration: 100, ...t }), A = ({
+  openOnClick: t = !1,
+  open: r,
+  defaultOpen: l,
+  onOpenChange: o,
+  children: e,
+  ...d
+}) => {
+  const [p, c] = i.useState(
+    l ?? !1
+  ), a = r !== void 0, m = a ? r : p, f = i.useCallback(
+    (x) => {
+      a || c(x), o == null || o(x);
+    },
+    [a, o]
+  ), g = i.useMemo(
+    () => ({ openOnClick: t, open: m, setOpen: f }),
+    [t, m, f]
+  );
+  return /* @__PURE__ */ s(u.Provider, { value: g, children: /* @__PURE__ */ s(
+    n.Root,
+    {
+      open: t ? m : r,
+      defaultOpen: t ? void 0 : l,
+      onOpenChange: t ? b : o,
+      ...d,
+      children: e
+    }
+  ) });
+}, N = i.forwardRef(({ onClick: t, ...r }, l) => {
+  const { openOnClick: o, open: e, setOpen: d } = i.useContext(u);
+  return /* @__PURE__ */ s(
+    n.Trigger,
+    {
+      ref: l,
+      "aria-expanded": o ? e : void 0,
+      onClick: (p) => {
+        t == null || t(p), o && d(!e);
+      },
+      ...r
+    }
+  );
+});
+N.displayName = n.Trigger.displayName;
+const h = i.forwardRef(
+  ({ className: t, children: r, sideOffset: l = 4, closeAriaLabel: o, onClose: e, ...d }, p) => {
+    const { openOnClick: c, setOpen: a } = i.useContext(u), { translations: m } = T(), f = o ?? m.tooltip.closeAriaLabel;
+    return /* @__PURE__ */ v(
+      n.Content,
+      {
+        ref: p,
+        sideOffset: l,
+        className: w(
+          "relative z-50 origin-[--radix-tooltip-content-transform-origin] animate-in overflow-hidden rounded-comp-tooltip-radius bg-surface-brand-brand-tertiary py-comp-tooltip-p-ver text-text-brand-def fade-in-0 zoom-in-95 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",
+          // Desktop uses the left token on both sides; tablet/mobile reserves
+          // extra right padding for the close button.
+          c ? "pr-comp-tooltip-p-right pl-comp-tooltip-p-left lg:pr-comp-tooltip-p-left" : "px-comp-tooltip-p-left",
+          t
+        ),
+        ...d,
+        ...c && {
+          onEscapeKeyDown: () => a(!1),
+          onPointerDownOutside: () => a(!1)
+        },
+        children: [
+          /* @__PURE__ */ s(z, { component: "span", variant: "body", weight: "regular", size: "sm", children: r }),
+          c && /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                a(!1), e == null || e();
+              },
+              "aria-label": f,
+              className: "absolute top-2xs right-2xs flex size-comp-button-w-xs cursor-pointer items-center justify-center rounded-full text-text-brand-def focus-visible-auto lg:hidden",
+              children: /* @__PURE__ */ s(y, { className: "size-icon-xsmall" })
+            }
+          )
+        ]
+      }
+    );
   }
-));
-l.displayName = o.Content.displayName;
+);
+h.displayName = n.Content.displayName;
 export {
-  y as Tooltip,
-  l as TooltipContent,
-  g as TooltipProvider,
-  T as TooltipTrigger
+  A as Tooltip,
+  h as TooltipContent,
+  M as TooltipProvider,
+  N as TooltipTrigger
 };

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

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Tooltip>;
 export declare const DefaultTooltipComponent: Story;
 export declare const OpenState: Story;
+export declare const OpenOnClick: Story;
 export declare const PrefferedSideBottom: Story;
 //# sourceMappingURL=Tooltip.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EACL,OAAO,EAIR,MAAM,WAAW,CAAA;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA8C9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,uBAAuB,EAAE,KAqBrC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAsBjC,CAAA"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,OAAO,EACL,OAAO,EAIR,MAAM,WAAW,CAAA;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAmD9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,uBAAuB,EAAE,KAqBrC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAsBjC,CAAA"}