@vkzstudio/muza-ui 1.0.6 → 1.0.7

package/dist/components/Flex/Flex.d.ts

@@ -23,7 +23,7 @@ declare const flexVariants: (props?: ({
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
     justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | "stretch" | null | undefined;
     align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
-    flex?: "none" | 1 | "auto" | "initial" | null | undefined;
+    flex?: 1 | "none" | "auto" | "initial" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HTMLElementTag = keyof React.JSX.IntrinsicElements & keyof HTMLElementTagNameMap;
 export interface FlexProps extends Omit<VariantProps<typeof flexVariants>, 'gap' | 'gapX' | 'gapY' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'm' | 'mx' | 'my' | 'mt' | 'mr' | 'mb' | 'ml'>, SpacingProps {

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAad,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC;AAED,eAAO,MAAM,WAAW,6FAqMvB,CAAA"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAcd,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC;AAED,eAAO,MAAM,WAAW,6FAwMvB,CAAA"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,43 +1,44 @@
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import p, { forwardRef as O, useMemo as R, useRef as j, useEffect as k } from "react";
-import { triggerWrapperVariants as A } from "../Select/utils.js";
-import { Typography as u } from "../Typography/Typography.js";
+import u, { forwardRef as k, useMemo as R, useRef as A, useEffect as I } from "react";
+import { triggerWrapperVariants as V } from "../Select/utils.js";
+import { useMuzaTranslations as E } from "../../translations/TranslationContext.js";
+import { Typography as f } from "../Typography/Typography.js";
 import { Tag as h } from "../Tag/Tag.js";
-import { DropdownMenu as I, DropdownMenuTrigger as V, DropdownMenuContent as E, DropdownMenuCheckboxItem as _ } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as B } from "@solar-icons/react-perf";
-import { cn as F } from "../../utils/cn.js";
-const L = O(
+import { DropdownMenu as _, DropdownMenuTrigger as B, DropdownMenuContent as F, DropdownMenuCheckboxItem as L } from "../DropdownMenu/DropdownMenu.js";
+import { AltArrowUpOutline as P } from "@solar-icons/react-perf";
+import { cn as U } from "../../utils/cn.js";
+const $ = k(
   (T, x) => {
-    const {
+    const z = E(), {
       label: g,
       hint: b,
       error: w,
       options: o,
-      onChange: l,
+      onChange: s,
       value: r,
-      disabled: m,
-      prefix: d,
+      disabled: d,
+      prefix: m,
       maxNumberOfVisibleTags: c = 2,
-      size: z,
-      placeholder: N = "Select..."
-    } = T, v = R(() => new Map(o.map((e) => [e.value, e.label])), [o]), S = R(() => {
-      const e = r && r.map((s) => v.get(s));
-      return e != null && e.length ? e.length <= c ? /* @__PURE__ */ t("div", { className: "flex flex-1 items-start justify-start gap-xs", children: e.map((s, a) => /* @__PURE__ */ t(h, { variant: "info", className: "max-w-[72px]", children: s }, a)) }) : /* @__PURE__ */ t("div", { className: "flex flex-1 items-center gap-xs", children: [
-        ...e.slice(0, c).map((s, a) => /* @__PURE__ */ t(
+      size: D,
+      placeholder: S
+    } = T, N = S ?? z.select.placeholder, v = R(() => new Map(o.map((e) => [e.value, e.label])), [o]), W = R(() => {
+      const e = r && r.map((l) => v.get(l));
+      return e != null && e.length ? e.length <= c ? /* @__PURE__ */ t("div", { className: "flex flex-1 items-start justify-start gap-xs", children: e.map((l, n) => /* @__PURE__ */ t(h, { variant: "info", className: "max-w-[72px]", children: l }, n)) }) : /* @__PURE__ */ t("div", { className: "flex flex-1 items-center gap-xs", children: [
+        ...e.slice(0, c).map((l, n) => /* @__PURE__ */ t(
           h,
           {
             variant: "info",
             className: "max-w-[72px] overflow-hidden",
-            children: /* @__PURE__ */ t("span", { className: "truncate", children: s })
+            children: /* @__PURE__ */ t("span", { className: "truncate", children: l })
           },
-          a
+          n
         )),
         /* @__PURE__ */ i(h, { variant: "info", children: [
           e.length - c,
           "+"
         ] }, "more")
       ] }) : /* @__PURE__ */ t(
-        u,
+        f,
         {
           size: "input",
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
@@ -46,19 +47,19 @@ const L = O(
           children: N
         }
       );
-    }, [r, N, c, v]), [y, D] = p.useState(!1), [M, W] = p.useState(0), f = p.useRef(!1), C = j(null), n = (typeof x == "function" ? null : x) ?? C;
-    return k(() => {
+    }, [r, N, c, v]), [y, C] = u.useState(!1), [M, O] = u.useState(0), p = u.useRef(!1), j = A(null), a = (typeof x == "function" ? null : x) ?? j;
+    return I(() => {
       const e = () => {
-        n.current && W(n.current.offsetWidth);
+        a.current && O(a.current.offsetWidth);
       };
       e();
-      const s = new ResizeObserver(e);
-      return n.current && s.observe(n.current), () => {
-        s.disconnect();
+      const l = new ResizeObserver(e);
+      return a.current && l.observe(a.current), () => {
+        l.disconnect();
       };
-    }, [n]), /* @__PURE__ */ i("div", { className: "flex flex-col gap-sm", children: [
+    }, [a]), /* @__PURE__ */ i("div", { className: "flex flex-col gap-sm", children: [
       g && /* @__PURE__ */ t(
-        u,
+        f,
         {
           component: "label",
           size: "sm",
@@ -68,39 +69,39 @@ const L = O(
         }
       ),
       /* @__PURE__ */ i(
-        I,
+        _,
         {
           onOpenChange: (e) => {
-            D(e);
+            C(e);
           },
           children: [
-            /* @__PURE__ */ t(V, { disabled: m, asChild: !0, children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t(B, { disabled: d, asChild: !0, children: /* @__PURE__ */ t(
               "button",
               {
-                ref: n,
+                ref: a,
                 type: "button",
                 role: "input",
                 tabIndex: 0,
-                disabled: m,
-                className: A({
-                  size: z,
+                disabled: d,
+                className: V({
+                  size: D,
                   error: w,
                   expanded: y,
-                  hasIcon: !!d || (r == null ? void 0 : r.length) === 0
+                  hasIcon: !!m || (r == null ? void 0 : r.length) === 0
                 }),
                 children: /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
-                  d && /* @__PURE__ */ t(
+                  m && /* @__PURE__ */ t(
                     "span",
                     {
-                      className: m ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
-                      children: d
+                      className: d ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                      children: m
                     }
                   ),
-                  S,
+                  W,
                   /* @__PURE__ */ t(
-                    B,
+                    P,
                     {
-                      className: F(
+                      className: U(
                         "transition-transform duration-200",
                         y ? "rotate-0" : "rotate-180"
                       )
@@ -110,23 +111,23 @@ const L = O(
               }
             ) }),
             /* @__PURE__ */ t(
-              E,
+              F,
               {
                 className: "mt-1",
                 style: {
                   width: M > 0 ? `${M}px` : void 0
                 },
                 onCloseAutoFocus: (e) => {
-                  f.current || e.preventDefault(), f.current = !1;
+                  p.current || e.preventDefault(), p.current = !1;
                 },
                 children: o.map((e) => /* @__PURE__ */ t(
-                  _,
+                  L,
                   {
                     checked: r == null ? void 0 : r.includes(e.value),
                     disabled: e.disabled,
                     icon: e.icon,
-                    onCheckedChange: (s) => {
-                      s ? l == null || l([...r || [], e.value]) : l == null || l((r || []).filter((a) => a !== e.value)), f.current = !0;
+                    onCheckedChange: (l) => {
+                      l ? s == null || s([...r || [], e.value]) : s == null || s((r || []).filter((n) => n !== e.value)), p.current = !0;
                     },
                     children: e.label
                   },
@@ -138,7 +139,7 @@ const L = O(
         }
       ),
       b && /* @__PURE__ */ t(
-        u,
+        f,
         {
           component: "p",
           size: "sm",
@@ -150,7 +151,7 @@ const L = O(
     ] });
   }
 );
-L.displayName = "MultiSelect";
+$.displayName = "MultiSelect";
 export {
-  L as MultiSelect
+  $ as MultiSelect
 };

package/dist/components/MuzaUIProvider/MuzaUIProvider.d.ts

@@ -0,0 +1,19 @@
+import { ToasterProps } from 'sonner';
+import { TranslationConfig } from '../../translations/index';
+import { TooltipProvider } from '../Tooltip';
+import * as React from 'react';
+export type MuzaTooltipConfig = Omit<React.ComponentPropsWithoutRef<typeof TooltipProvider>, 'children'>;
+export type MuzaToastConfig = Omit<ToasterProps, 'children'>;
+export interface MuzaUIProviderProps {
+    children: React.ReactNode;
+    tooltipConfig?: MuzaTooltipConfig;
+    toastConfig?: MuzaToastConfig;
+    /** Translation configuration for locale and custom translations */
+    translationConfig?: TranslationConfig;
+}
+declare const MuzaUIProvider: {
+    ({ children, tooltipConfig, toastConfig, translationConfig, }: MuzaUIProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MuzaUIProvider };
+//# sourceMappingURL=MuzaUIProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MuzaUIProvider.d.ts","sourceRoot":"","sources":["../../../src/components/MuzaUIProvider/MuzaUIProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAC1C,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,EACtD,UAAU,CACX,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;AAE5D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACtC;AAED,QAAA,MAAM,cAAc;mEAKjB,mBAAmB;;CASrB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/MuzaUIProvider/MuzaUIProvider.js

@@ -0,0 +1,19 @@
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import "react";
+import "sonner";
+import { TranslationProvider as p } from "../../translations/TranslationContext.js";
+import { TooltipProvider as a } from "../Tooltip/Tooltip.js";
+import { ToastContainer as n } from "../Toast/ToastContainer.js";
+const d = ({
+  children: o,
+  tooltipConfig: i = {},
+  toastConfig: t = {},
+  translationConfig: m = {}
+}) => /* @__PURE__ */ r(p, { ...m, children: /* @__PURE__ */ e(a, { ...i, children: [
+  o,
+  /* @__PURE__ */ r(n, { ...t })
+] }) });
+d.displayName = "MuzaUIProvider";
+export {
+  d as MuzaUIProvider
+};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MuzaUIProvider } from './MuzaUIProvider';
+declare const meta: Meta<typeof MuzaUIProvider>;
+export default meta;
+type Story = StoryObj<typeof MuzaUIProvider>;
+export declare const Default: Story;
+export declare const CustomTooltipDelay: Story;
+export declare const CustomToastPosition: Story;
+export declare const LanguageProviderShowcase: Story;
+//# sourceMappingURL=MuzaUIProvider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MuzaUIProvider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MuzaUIProvider/MuzaUIProvider.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CA0ErC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5C,eAAO,MAAM,OAAO,EAAE,KAoCrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KA+CtC,CAAA"}

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

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

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

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

package/dist/components/Searchbar/Searchbar.d.ts

@@ -9,6 +9,6 @@ export interface SearchbarProps extends Omit<InputProps, 'type' | 'onSubmit' | '
     searchButtonAriaLabel?: string;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
-declare const Searchbar: ({ className, error, size, showButtons, clearButtonAriaLabel, searchButtonAriaLabel, disabled, value, defaultValue, name, placeholder, onChange, onSubmit, ...props }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Searchbar: ({ className, error, size, showButtons, clearButtonAriaLabel: clearButtonAriaLabelProp, searchButtonAriaLabel: searchButtonAriaLabelProp, disabled, value, defaultValue, name, placeholder, onChange, onSubmit, ...props }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
 export { Searchbar };
 //# sourceMappingURL=Searchbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,CAC1D;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,sKAehB,cAAc,4CAiGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,CAC1D;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,2NAehB,cAAc,4CAuGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Searchbar/Searchbar.js

@@ -1,81 +1,82 @@
-import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { jsxs as R, jsx as e } from "react/jsx-runtime";
 import * as n from "react";
-import { MagnifyingGlass as z } from "../Icons/CustomIcons.js";
-import { cn as a } from "../../utils/cn.js";
+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 { Input as V } from "../Input/Input.js";
-const G = ({
-  className: m,
-  error: p = !1,
+import { Input as M } from "../Input/Input.js";
+const F = ({
+  className: p,
+  error: h = !1,
   size: x = "sm",
   showButtons: d = !0,
   clearButtonAriaLabel: y,
-  searchButtonAriaLabel: h,
-  disabled: e = !1,
-  value: o,
+  searchButtonAriaLabel: b,
+  disabled: r = !1,
+  value: a,
   defaultValue: k,
   name: v,
   placeholder: g,
-  onChange: s,
+  onChange: o,
   onSubmit: i,
-  ...N
+  ...B
 }) => {
-  const f = n.useRef(null), [c, l] = n.useState(
-    o ?? k ?? ""
+  const u = j(), A = y ?? u.searchbar.clearButtonAriaLabel, L = b ?? u.searchbar.searchButtonAriaLabel, f = n.useRef(null), [c, l] = n.useState(
+    a ?? k ?? ""
   );
   n.useEffect(() => {
-    o !== void 0 && l(o);
-  }, [o]);
-  const C = (t) => {
-    l(t.target.value), s && s(t);
-  }, R = () => {
-    var t, u;
-    l(""), (u = (t = f.current) == null ? void 0 : t.querySelector("input")) == null || u.focus(), s && s({
+    a !== void 0 && l(a);
+  }, [a]);
+  const N = (t) => {
+    l(t.target.value), o && o(t);
+  }, z = () => {
+    var t, m;
+    l(""), (m = (t = f.current) == null ? void 0 : t.querySelector("input")) == null || m.focus(), o && o({
       target: { value: "" }
     });
-  }, j = d ? /* @__PURE__ */ w("div", { className: "flex gap-sm", children: [
-    /* @__PURE__ */ r(
+  }, C = d ? /* @__PURE__ */ R("div", { className: "flex gap-sm", children: [
+    /* @__PURE__ */ e(
       "button",
       {
-        className: a(
+        className: s(
           "flex shrink-0 cursor-pointer items-center focus-visible-default transition-opacity",
           {
             "opacity-0": !c,
-            "cursor-not-allowed": e
+            "cursor-not-allowed": r
           }
         ),
-        "aria-label": y,
+        "aria-label": A,
         type: "button",
-        onClick: R,
-        children: /* @__PURE__ */ r(
+        onClick: z,
+        children: /* @__PURE__ */ e(
           I,
           {
-            className: a("size-icon-small text-icon-dark-secondary-def", {
-              "text-text-dark-tertiary": e
+            className: s("size-icon-small text-icon-dark-secondary-def", {
+              "text-text-dark-tertiary": r
             })
           }
         )
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "button",
       {
-        className: a(
+        className: s(
           "flex shrink-0 cursor-pointer items-center focus-visible-default",
           {
-            "cursor-not-allowed": e
+            "cursor-not-allowed": r
           }
         ),
-        "aria-label": h,
+        "aria-label": L,
         type: "submit",
-        children: /* @__PURE__ */ r(
-          z,
+        children: /* @__PURE__ */ e(
+          w,
           {
-            className: a(
+            className: s(
               "size-icon-small text-icon-dark-primary-def transition-colors",
               {
-                "text-text-dark-tertiary": e,
-                "group-hover:text-icon-dark-primary-hover": !e
+                "text-text-dark-tertiary": r,
+                "group-hover:text-icon-dark-primary-hover": !r
               }
             )
           }
@@ -83,33 +84,33 @@ const G = ({
       }
     )
   ] }) : void 0;
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "form",
     {
       ref: f,
       onSubmit: (t) => {
         t.preventDefault(), c.length > 0 && (i == null || i(t));
       },
-      className: m,
-      children: /* @__PURE__ */ r(
-        V,
+      className: p,
+      children: /* @__PURE__ */ e(
+        M,
         {
-          suffix: j,
+          suffix: C,
           type: "text",
           size: x,
-          error: p,
-          disabled: e,
+          error: h,
+          disabled: r,
           value: c,
           name: v,
-          onChange: C,
+          onChange: N,
           placeholder: g,
           className: "group",
-          ...N
+          ...B
         }
       )
     }
   );
 };
 export {
-  G as Searchbar
+  F as Searchbar
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAad,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,MAAM,wFA2LlB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAcd,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,MAAM,wFA8LlB,CAAA"}

package/dist/components/Select/Select.js

@@ -1,26 +1,27 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import m, { forwardRef as C, useMemo as V, useRef as N, useEffect as R } from "react";
-import { triggerWrapperVariants as A } from "./utils.js";
+import m, { forwardRef as A, useMemo as I, useRef as N, useEffect as R } from "react";
+import { triggerWrapperVariants as j } from "./utils.js";
+import { useMuzaTranslations as E } from "../../translations/TranslationContext.js";
 import { Typography as s } from "../Typography/Typography.js";
-import { DropdownMenu as I, DropdownMenuTrigger as j, DropdownMenuContent as E, DropdownMenuRadioGroup as _, DropdownMenuRadioItem as k } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as B } from "@solar-icons/react-perf";
-import { cn as F } from "../../utils/cn.js";
-const G = C(
-  (S, f) => {
-    const {
-      label: x,
-      hint: g,
-      error: h,
+import { DropdownMenu as P, DropdownMenuTrigger as _, DropdownMenuContent as k, DropdownMenuRadioGroup as B, DropdownMenuRadioItem as F } from "../DropdownMenu/DropdownMenu.js";
+import { AltArrowUpOutline as G } from "@solar-icons/react-perf";
+import { cn as L } from "../../utils/cn.js";
+const U = A(
+  (z, f) => {
+    const S = E(), {
+      label: h,
+      hint: x,
+      error: g,
       options: c,
-      onChange: i,
+      onChange: a,
       value: r,
-      disabled: a,
+      disabled: i,
       prefix: b,
-      size: z,
-      placeholder: w = "Select...",
-      shouldScrollToSelectedOption: v,
+      size: M,
+      placeholder: T,
+      shouldScrollToSelectedOption: w,
       collisionPadding: D
-    } = S, M = V(() => {
+    } = z, v = T ?? S.select.placeholder, O = I(() => {
       const e = r && c.find((l) => l.value === r);
       return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
         s,
@@ -38,13 +39,13 @@ const G = C(
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
           weight: "regular",
           component: "span",
-          children: w
+          children: v
         }
       );
-    }, [c, r, w]), [o, O] = m.useState(!1), [y, T] = m.useState(0), d = m.useRef(!1), W = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? W;
+    }, [c, r, v]), [o, W] = m.useState(!1), [y, C] = m.useState(0), d = m.useRef(!1), V = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? V;
     return R(() => {
       const e = () => {
-        n.current && T(n.current.offsetWidth);
+        n.current && C(n.current.offsetWidth);
       };
       e();
       const l = new ResizeObserver(e);
@@ -53,47 +54,47 @@ const G = C(
       };
     }, [n]), R(() => {
       var e;
-      o && r && u.current[r] && v && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
-    }, [o, v, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
-      x && /* @__PURE__ */ t(
+      o && r && u.current[r] && w && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [o, w, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
+      h && /* @__PURE__ */ t(
         s,
         {
           component: "label",
           size: "sm",
           weight: "regular",
           className: "text-comp-select-text-primary",
-          children: x
+          children: h
         }
       ),
       /* @__PURE__ */ p(
-        I,
+        P,
         {
           onOpenChange: (e) => {
-            O(e);
+            W(e);
           },
           children: [
-            /* @__PURE__ */ t(j, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t(_, { disabled: i, asChild: !0, children: /* @__PURE__ */ t(
               "button",
               {
                 ref: n,
                 type: "button",
                 role: "input",
                 tabIndex: 0,
-                disabled: a,
-                className: A({ size: z, error: h, expanded: o }),
+                disabled: i,
+                className: j({ size: M, error: g, expanded: o }),
                 children: /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
                   b && /* @__PURE__ */ t(
                     "span",
                     {
-                      className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                      className: i ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
                       children: b
                     }
                   ),
-                  M,
+                  O,
                   /* @__PURE__ */ t(
-                    B,
+                    G,
                     {
-                      className: F(
+                      className: L(
                         "transition-transform duration-200",
                         o ? "rotate-0" : "rotate-180"
                       )
@@ -103,7 +104,7 @@ const G = C(
               }
             ) }),
             /* @__PURE__ */ t(
-              E,
+              k,
               {
                 className: "mt-1",
                 style: {
@@ -114,14 +115,14 @@ const G = C(
                 },
                 collisionPadding: D,
                 children: /* @__PURE__ */ t(
-                  _,
+                  B,
                   {
                     value: r,
                     onValueChange: (e) => {
-                      d.current = !0, i == null || i(e);
+                      d.current = !0, a == null || a(e);
                     },
                     children: c.map((e) => /* @__PURE__ */ t(
-                      k,
+                      F,
                       {
                         value: e.value.toString(),
                         disabled: e.disabled,
@@ -140,20 +141,20 @@ const G = C(
           ]
         }
       ),
-      g && /* @__PURE__ */ t(
+      x && /* @__PURE__ */ t(
         s,
         {
           component: "p",
           size: "sm",
           weight: "regular",
-          className: h ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
-          children: g
+          className: g ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
+          children: x
         }
       )
     ] });
   }
 );
-G.displayName = "Select";
+U.displayName = "Select";
 export {
-  G as Select
+  U as Select
 };