@keboola/design 11.0.0 → 11.0.1

package/dist/internal/blocks/GoogleButton.js

@@ -1,10 +1,95 @@
-export { GoogleButton } from '../../chunk-6NN35XOP.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=GoogleButton.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { Google, Loader2 } from "../../icons-Cek151jC.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/GoogleButton/GoogleButton.tsx
+const LABELS = {
+	signin: "Sign in with Google",
+	signup: "Sign up with Google",
+	continue: "Continue with Google",
+	"signin-short": "Sign in"
+};
+const GOOGLE_FONT_STACK = "'Roboto', arial, sans-serif";
+const variants = cva([
+	"tailwindcss-preflight",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:h-10",
+	"tw:border",
+	"tw:text-sm",
+	"tw:font-[500]",
+	"tw:leading-none",
+	"tw:whitespace-nowrap",
+	"tw:select-none",
+	"tw:cursor-pointer",
+	"tw:transition-shadow",
+	"tw:[&_svg]:shrink-0",
+	"tw:focus-visible:outline-hidden",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-[#4285f4]/60",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:opacity-60",
+	"tw:[[data-theme=dark]_&]:bg-[#131314]",
+	"tw:[[data-theme=dark]_&]:text-[#e3e3e3]",
+	"tw:[[data-theme=dark]_&]:border-[#8e918f]",
+	"tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#1e1f20]",
+	"tw:[[data-theme=dark]_&]:hover:not-disabled:shadow-none"
+], {
+	defaultVariants: {
+		variant: "default",
+		shape: "rectangular",
+		size: "default"
+	},
+	variants: {
+		variant: {
+			default: [
+				"tw:bg-white",
+				"tw:text-[#1f1f1f]",
+				"tw:border-[#747775]",
+				"tw:hover:not-disabled:bg-[#f7f8f8]",
+				"tw:hover:not-disabled:shadow-[0_1px_2px_0_rgba(60,64,67,0.30),0_1px_3px_1px_rgba(60,64,67,0.15)]"
+			],
+			neutral: [
+				"tw:bg-[#f2f2f2]",
+				"tw:text-[#1f1f1f]",
+				"tw:border-transparent",
+				"tw:hover:not-disabled:bg-[#e8eaed]"
+			]
+		},
+		shape: {
+			rectangular: ["tw:rounded"],
+			circle: ["tw:rounded-full"]
+		},
+		size: {
+			default: ["tw:gap-2.5", "tw:px-3"],
+			icon: ["tw:w-10", "tw:p-0"]
+		}
+	}
+});
+const GoogleButton = ({ ref, variant = "default", shape = "rectangular", size = "default", label = "signin", isLoading = false, disabled = false, type = "button", className, children, style, ...buttonProps }) => /* @__PURE__ */ jsxs("button", {
+	...buttonProps,
+	ref,
+	type,
+	disabled,
+	style: {
+		...style,
+		fontFamily: GOOGLE_FONT_STACK
+	},
+	className: cn(variants({
+		variant,
+		shape,
+		size
+	}), className),
+	children: [isLoading ? /* @__PURE__ */ jsx(Loader2, {
+		className: "tw:size-5 tw:shrink-0 tw:animate-spin",
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ jsx(Google, { className: "tw:size-5" }), /* @__PURE__ */ jsx("span", {
+		className: cn({ "tw:sr-only": size === "icon" }),
+		children: children ?? LABELS[label]
+	})]
+});
+//#endregion
+export { GoogleButton };
+
 //# sourceMappingURL=GoogleButton.js.map

package/dist/internal/blocks/GoogleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"GoogleButton.js"}
+{"version":3,"file":"GoogleButton.js","names":[],"sources":["../../../src/blocks/GoogleButton/GoogleButton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Google, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\n\nconst LABELS = {\n  signin: 'Sign in with Google',\n  signup: 'Sign up with Google',\n  continue: 'Continue with Google',\n  'signin-short': 'Sign in',\n} as const;\n\nconst GOOGLE_FONT_STACK = \"'Roboto', arial, sans-serif\";\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:h-10',\n    'tw:border',\n    'tw:text-sm',\n    // Literal weight (Google spec = 500). The `tw:font-*` scale is brand-overridable\n    // (`--font-weight-*`), and this button must stay brand-independent.\n    'tw:font-[500]',\n    'tw:leading-none',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n    'tw:cursor-pointer',\n    'tw:transition-shadow',\n    'tw:[&_svg]:shrink-0',\n\n    // focus — a neutral Google-blue ring, independent of the active brand.\n    'tw:focus-visible:outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-[#4285f4]/60',\n\n    // disabled\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-60',\n\n    // dark treatment — auto-applied under html[data-theme=dark], overriding\n    // whichever `variant` is active (the ancestor selector out-specifies the\n    // variant's plain color classes).\n    'tw:[[data-theme=dark]_&]:bg-[#131314]',\n    'tw:[[data-theme=dark]_&]:text-[#e3e3e3]',\n    'tw:[[data-theme=dark]_&]:border-[#8e918f]',\n    'tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#1e1f20]',\n    'tw:[[data-theme=dark]_&]:hover:not-disabled:shadow-none',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n      shape: 'rectangular',\n      size: 'default',\n    },\n    variants: {\n      // Google's approved light-scheme treatments; dark (above) overrides both.\n      variant: {\n        default: [\n          'tw:bg-white',\n          'tw:text-[#1f1f1f]',\n          'tw:border-[#747775]',\n          'tw:hover:not-disabled:bg-[#f7f8f8]',\n          'tw:hover:not-disabled:shadow-[0_1px_2px_0_rgba(60,64,67,0.30),0_1px_3px_1px_rgba(60,64,67,0.15)]',\n        ],\n        neutral: [\n          'tw:bg-[#f2f2f2]',\n          'tw:text-[#1f1f1f]',\n          'tw:border-transparent',\n          'tw:hover:not-disabled:bg-[#e8eaed]',\n        ],\n      },\n      shape: {\n        rectangular: ['tw:rounded'],\n        circle: ['tw:rounded-full'],\n      },\n      size: {\n        default: ['tw:gap-2.5', 'tw:px-3'],\n        icon: ['tw:w-10', 'tw:p-0'],\n      },\n    },\n  },\n);\n\ntype Props = ComponentPropsWithRef<'button'> &\n  VariantProps<typeof variants> & {\n    label?: keyof typeof LABELS;\n    isLoading?: boolean;\n  };\n\nexport const GoogleButton = ({\n  ref,\n  variant = 'default',\n  shape = 'rectangular',\n  size = 'default',\n  label = 'signin',\n  isLoading = false,\n  disabled = false,\n  type = 'button',\n  className,\n  children,\n  style,\n  ...buttonProps\n}: Props) => (\n  <button\n    {...buttonProps}\n    ref={ref}\n    type={type}\n    disabled={disabled}\n    style={{ ...style, fontFamily: GOOGLE_FONT_STACK }}\n    className={cn(variants({ variant, shape, size }), className)}\n  >\n    {isLoading ? (\n      <Loader2 className=\"tw:size-5 tw:shrink-0 tw:animate-spin\" aria-hidden=\"true\" />\n    ) : (\n      <Google className=\"tw:size-5\" />\n    )}\n\n    <span\n      className={cn({\n        'tw:sr-only': size === 'icon',\n      })}\n    >\n      {children ?? LABELS[label]}\n    </span>\n  </button>\n);\n"],"mappings":";;;;;AAOA,MAAM,SAAS;CACb,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,gBAAgB;AAClB;AAEA,MAAM,oBAAoB;AAE1B,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CAKA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EAER,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,aAAa,CAAC,YAAY;GAC1B,QAAQ,CAAC,iBAAiB;EAC5B;EACA,MAAM;GACJ,SAAS,CAAC,cAAc,SAAS;GACjC,MAAM,CAAC,WAAW,QAAQ;EAC5B;CACF;AACF,CACF;AAQA,MAAa,gBAAgB,EAC3B,KACA,UAAU,WACV,QAAQ,eACR,OAAO,WACP,QAAQ,UACR,YAAY,OACZ,WAAW,OACX,OAAO,UACP,WACA,UACA,OACA,GAAG,kBAEH,qBAAC,UAAD;CACE,GAAI;CACC;CACC;CACI;CACV,OAAO;EAAE,GAAG;EAAO,YAAY;CAAkB;CACjD,WAAW,GAAG,SAAS;EAAE;EAAS;EAAO;CAAK,CAAC,GAAG,SAAS;CAN7D,UAAA,CAQG,YACC,oBAAC,SAAD;EAAS,WAAU;EAAwC,eAAY;CAAQ,CAAA,IAE/E,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,GAGjC,oBAAC,QAAD;EACE,WAAW,GAAG,EACZ,cAAc,SAAS,OACzB,CAAC;EAEA,UAAA,YAAY,OAAO;CAChB,CAAA,CACA"}

package/dist/internal/blocks/MicrosoftButton.js

@@ -1,10 +1,64 @@
-export { MicrosoftButton } from '../../chunk-ZOERRQ6A.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=MicrosoftButton.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { Loader2, Microsoft } from "../../icons-Cek151jC.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/MicrosoftButton/MicrosoftButton.tsx
+/** The same Microsoft mark supports these call-to-action wordings. */
+const LABELS = {
+	signin: "Sign in with Microsoft",
+	signup: "Sign up with Microsoft",
+	continue: "Continue with Microsoft"
+};
+/** Microsoft specifies the Segoe UI typeface; fall back gracefully when it isn't loaded. */
+const MICROSOFT_FONT_STACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+const CLASSES = [
+	"tailwindcss-preflight",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-3",
+	"tw:h-[41px]",
+	"tw:px-3",
+	"tw:rounded-none",
+	"tw:border",
+	"tw:text-[15px]",
+	"tw:font-[400]",
+	"tw:leading-none",
+	"tw:whitespace-nowrap",
+	"tw:select-none",
+	"tw:cursor-pointer",
+	"tw:transition-colors",
+	"tw:[&_svg]:shrink-0",
+	"tw:focus-visible:outline-hidden",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-[#0067b8]/60",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:opacity-60",
+	"tw:bg-white",
+	"tw:text-[#5e5e5e]",
+	"tw:border-[#8c8c8c]",
+	"tw:hover:not-disabled:bg-[#f3f3f3]",
+	"tw:[[data-theme=dark]_&]:bg-[#2f2f2f]",
+	"tw:[[data-theme=dark]_&]:text-white",
+	"tw:[[data-theme=dark]_&]:border-[#2f2f2f]",
+	"tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#3b3b3b]"
+];
+const MicrosoftButton = ({ ref, label = "signin", isLoading = false, disabled = false, type = "button", className, children, style, ...buttonProps }) => /* @__PURE__ */ jsxs("button", {
+	...buttonProps,
+	ref,
+	type,
+	disabled: disabled || isLoading,
+	"aria-disabled": disabled || isLoading,
+	style: {
+		fontFamily: MICROSOFT_FONT_STACK,
+		...style
+	},
+	className: cn(CLASSES, className),
+	children: [isLoading ? /* @__PURE__ */ jsx(Loader2, {
+		className: "tw:size-[21px] tw:shrink-0 tw:animate-spin",
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ jsx(Microsoft, { className: "tw:size-[21px]" }), /* @__PURE__ */ jsx("span", { children: children ?? LABELS[label] })]
+});
+//#endregion
+export { MicrosoftButton };
+
 //# sourceMappingURL=MicrosoftButton.js.map

package/dist/internal/blocks/MicrosoftButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"MicrosoftButton.js"}
+{"version":3,"file":"MicrosoftButton.js","names":[],"sources":["../../../src/blocks/MicrosoftButton/MicrosoftButton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\nimport { Loader2, Microsoft } from '../../icons';\nimport { cn } from '../../utils';\n\n/** The same Microsoft mark supports these call-to-action wordings. */\nconst LABELS = {\n  signin: 'Sign in with Microsoft',\n  signup: 'Sign up with Microsoft',\n  continue: 'Continue with Microsoft',\n} as const;\n\n/** Microsoft specifies the Segoe UI typeface; fall back gracefully when it isn't loaded. */\nconst MICROSOFT_FONT_STACK = \"'Segoe UI', 'Helvetica Neue', Arial, sans-serif\";\n\nconst CLASSES = [\n  'tailwindcss-preflight',\n  'tw:inline-flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:gap-3',\n  'tw:h-[41px]',\n  'tw:px-3',\n  'tw:rounded-none',\n  'tw:border',\n  'tw:text-[15px]',\n  // Literal weight (Microsoft spec = 400). The `tw:font-*` scale is brand-overridable\n  // (`--font-weight-*`), and this button must stay brand-independent.\n  'tw:font-[400]',\n  'tw:leading-none',\n  'tw:whitespace-nowrap',\n  'tw:select-none',\n  'tw:cursor-pointer',\n  'tw:transition-colors',\n  'tw:[&_svg]:shrink-0',\n\n  // focus — Microsoft's brand blue ring, independent of the active brand.\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-[#0067b8]/60',\n\n  // disabled\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-60',\n\n  // light treatment — the base.\n  'tw:bg-white',\n  'tw:text-[#5e5e5e]',\n  'tw:border-[#8c8c8c]',\n  'tw:hover:not-disabled:bg-[#f3f3f3]',\n\n  // dark treatment — auto-applied under html[data-theme=dark] (the ancestor\n  // selector out-specifies the plain light classes above).\n  'tw:[[data-theme=dark]_&]:bg-[#2f2f2f]',\n  'tw:[[data-theme=dark]_&]:text-white',\n  'tw:[[data-theme=dark]_&]:border-[#2f2f2f]',\n  'tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#3b3b3b]',\n];\n\ntype Props = ComponentPropsWithRef<'button'> & {\n  label?: keyof typeof LABELS;\n  isLoading?: boolean;\n};\n\nexport const MicrosoftButton = ({\n  ref,\n  label = 'signin',\n  isLoading = false,\n  disabled = false,\n  type = 'button',\n  className,\n  children,\n  style,\n  ...buttonProps\n}: Props) => (\n  <button\n    {...buttonProps}\n    ref={ref}\n    type={type}\n    disabled={disabled || isLoading}\n    aria-disabled={disabled || isLoading}\n    style={{ fontFamily: MICROSOFT_FONT_STACK, ...style }}\n    className={cn(CLASSES, className)}\n  >\n    {isLoading ? (\n      <Loader2 className=\"tw:size-[21px] tw:shrink-0 tw:animate-spin\" aria-hidden=\"true\" />\n    ) : (\n      <Microsoft className=\"tw:size-[21px]\" />\n    )}\n    <span>{children ?? LABELS[label]}</span>\n  </button>\n);\n"],"mappings":";;;;;AAMA,MAAM,SAAS;CACb,QAAQ;CACR,QAAQ;CACR,UAAU;AACZ;;AAGA,MAAM,uBAAuB;AAE7B,MAAM,UAAU;CACd;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CACA;CAIA;CACA;CACA;CACA;AACF;AAOA,MAAa,mBAAmB,EAC9B,KACA,QAAQ,UACR,YAAY,OACZ,WAAW,OACX,OAAO,UACP,WACA,UACA,OACA,GAAG,kBAEH,qBAAC,UAAD;CACE,GAAI;CACC;CACC;CACN,UAAU,YAAY;CACtB,iBAAe,YAAY;CAC3B,OAAO;EAAE,YAAY;EAAsB,GAAG;CAAM;CACpD,WAAW,GAAG,SAAS,SAAS;CAPlC,UAAA,CASG,YACC,oBAAC,SAAD;EAAS,WAAU;EAA6C,eAAY;CAAQ,CAAA,IAEpF,oBAAC,WAAD,EAAW,WAAU,iBAAkB,CAAA,GAEzC,oBAAC,QAAD,EAAA,UAAO,YAAY,OAAO,OAAa,CAAA,CACjC"}

package/dist/internal/blocks/MultiActionButtonGroup.js

@@ -1,12 +1,2 @@
-export { MultiActionButtonGroup } from '../../chunk-F6J6NNAL.js';
-import '../../chunk-ANZTVAJU.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=MultiActionButtonGroup.js.map
-//# sourceMappingURL=MultiActionButtonGroup.js.map
+import { MultiActionButtonGroup } from "../../MultiActionButtonGroup-CiBHxsSk.js";
+export { MultiActionButtonGroup };

package/dist/internal/blocks/MultiCombobox.js

@@ -1,14 +1,188 @@
-export { MultiCombobox } from '../../chunk-OANXCZYD.js';
-import '../../chunk-5AIE6SET.js';
-import '../../chunk-SBGAUGXY.js';
-import '../../chunk-SC275NHZ.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=MultiCombobox.js.map
+import { useArgoDesign } from "../../context-KxxeMHbR.js";
+import { ChevronDown, Plus, X } from "../../icons-Cek151jC.js";
+import { InputGroup } from "../../InputGroup-BJWsI35s.js";
+import { Combobox as Combobox$1, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isLabeledItem, toLabel } from "../../Combobox-c_xBjf0P.js";
+import { Fragment, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/blocks/MultiCombobox/MultiCombobox.tsx
+const selectAllItem = {
+	value: "__select_all__",
+	label: "Select All"
+};
+const isSelectAllItem = (item) => isLabeledItem(item) && item.value === "__select_all__";
+/**
+* Multi-selection combobox with chip display and search. Built on Base UI Combobox.
+*
+* **When to use:** picking several items from a searchable enumerated list (filter by tags, assign labels).
+* Items render as chips above the input; `maxVisible` collapses excess into a `+N more` chip.
+* **When NOT to use:** for single selection use `Combobox`; for short enums without search use `Select`.
+* **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` for form integration.
+* Pass `allowSelectAll` for a sticky "Select All" item when the full enum is small. Pass `allowCreate`
+* to let the user add free-form values that are not in `items` (e.g. entering column names by hand).
+*
+* @see RECIPES.md#creatable-multi-combobox — for free-form-plus-enumerated patterns
+* @see RECIPES.md#filter-toolbar — for combining multi-select with other filter chips
+*/
+const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, allowSelectAll = false, empty = "No items", indicator, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, itemToDisabled = defaultItemToDisabled, itemToLabel = defaultItemToLabel, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel, itemToChipLabel, itemToChipColor, maxVisible = 3 }) => {
+	const itemsProp = _itemsProp ?? [];
+	const valueProp = _valueProp ?? [];
+	const chipVariant = useArgoDesign() ? "pill" : "default";
+	const [inputValue, setInputValue] = useState("");
+	const [createdItems, setCreatedItems] = useState([]);
+	const query = inputValue.trim();
+	const queryLower = query.toLowerCase();
+	const baseItems = (() => {
+		if (createdItems.length === 0) return itemsProp;
+		if (isGroupItems(itemsProp)) return [...itemsProp, { items: createdItems }];
+		return [...itemsProp, ...createdItems];
+	})();
+	const allFlatItems = baseItems.flatMap((item) => isGroupItem(item) ? item.items : item);
+	const sampleItem = allFlatItems[0];
+	const isAllSelected = allFlatItems.length === (valueProp?.length ?? 0);
+	const defaultFilter = Combobox.useFilter({
+		multiple: true,
+		value: valueProp
+	});
+	const itemsWithSelectAllItem = (() => {
+		if (!allowSelectAll) return baseItems;
+		return [selectAllItem, ...baseItems];
+	})();
+	const itemToString = (item) => itemToStringLabel?.(item) ?? toLabel(item);
+	const items = (() => {
+		const base = itemsWithSelectAllItem;
+		if (!allowCreate || disabled || !query) return base;
+		const exactMatch = allFlatItems.some((item) => itemToString(item).toLowerCase() === queryLower);
+		const alreadySelected = valueProp.some((item) => itemToString(item).toLowerCase() === queryLower);
+		if (exactMatch || alreadySelected) return base;
+		const creatable = createCreatableItem(query);
+		return isGroupItems(base) ? [...base, { items: [creatable] }] : [...base, creatable];
+	})();
+	const filter = (item, query, itemToString) => {
+		if (isSelectAllItem(item)) return true;
+		if (isCreatableItem(item)) return true;
+		if (filterProp) return filterProp(item, query, itemToString);
+		return defaultFilter.contains(item, query, itemToString);
+	};
+	const wrappedItemToStringLabel = !allowCreate ? itemToStringLabel : (item) => isCreatableItem(item) ? item.value : itemToString(item);
+	const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
+	const value = (() => {
+		if (!allowSelectAll) return valueProp;
+		return isAllSelected ? [...valueProp, selectAllItem] : valueProp;
+	})();
+	const handleValueChange = (next, event) => {
+		if (!onValueChange) return;
+		const created = [];
+		const converted = allowCreate ? next.map((item) => {
+			if (!isCreatableItem(item)) return item;
+			const value = defaultToCreateValue(item.value, sampleItem, queryToCreateValue);
+			created.push(value);
+			return value;
+		}) : next;
+		if (allowCreate) {
+			if (created.length > 0) setCreatedItems((prev) => [...prev, ...created]);
+			setInputValue("");
+		}
+		const hasSelectAll = converted.some((item) => isSelectAllItem(item));
+		onValueChange((() => {
+			if (!allowSelectAll) return converted;
+			if (!hasSelectAll) return isAllSelected ? [] : converted;
+			return isAllSelected ? converted.filter((item) => !isSelectAllItem(item)) : allFlatItems;
+		})(), event);
+	};
+	const renderItem = (item) => {
+		return /* @__PURE__ */ jsx(Combobox$1.Item, {
+			value: item,
+			indicator,
+			icon: itemToIcon(item),
+			disabled: itemToDisabled(item),
+			children: itemToLabel(item)
+		});
+	};
+	return /* @__PURE__ */ jsxs(Combobox$1.Root, {
+		multiple: true,
+		items,
+		value,
+		defaultValue,
+		filter,
+		onValueChange: handleValueChange,
+		itemToStringLabel: wrappedItemToStringLabel,
+		itemToStringValue: wrappedItemToStringValue,
+		disabled,
+		inputRef,
+		...allowCreate ? {
+			inputValue,
+			onInputValueChange: (nextValue) => setInputValue(nextValue)
+		} : {},
+		children: [/* @__PURE__ */ jsx(Combobox.Chips, {
+			render: /* @__PURE__ */ jsx(Fragment, {}),
+			children: /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+				variant,
+				sizing,
+				state,
+				focusVariant,
+				className,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5",
+					children: [/* @__PURE__ */ jsx(Combobox$1.Chips, {
+						maxVisible,
+						variant: chipVariant,
+						itemToChipLabel: itemToChipLabel ?? itemToLabel,
+						itemToChipColor
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:flex-1 tw:items-center tw:gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Combobox$1.Input, {
+								id,
+								placeholder,
+								disabled,
+								className: "tw:w-auto tw:min-w-[120px] tw:flex-1"
+							}),
+							allowClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+								asChild: true,
+								"aria-label": "Clear",
+								disabled,
+								children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
+							}),
+							/* @__PURE__ */ jsx(InputGroup.Button, {
+								disabled,
+								asChild: true,
+								"aria-label": "Open combobox",
+								children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
+							})
+						]
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: empty }), /* @__PURE__ */ jsx(Combobox$1.List, { children: (itemOrGroup) => {
+			if (isSelectAllItem(itemOrGroup)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
+				value: itemOrGroup,
+				indicator: "checkbox",
+				children: "Select All"
+			});
+			if (isCreatableItem(itemOrGroup)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
+				value: itemOrGroup,
+				icon: /* @__PURE__ */ jsx(Plus, {}),
+				children: queryToCreateLabel(itemOrGroup.value)
+			});
+			if (isGroupItem(itemOrGroup)) {
+				const maybeCreatable = itemOrGroup.items[0];
+				if (isCreatableItem(maybeCreatable)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
+					value: maybeCreatable,
+					icon: /* @__PURE__ */ jsx(Plus, {}),
+					children: queryToCreateLabel(maybeCreatable.value)
+				});
+				const groupLabel = groupToLabel(itemOrGroup);
+				return /* @__PURE__ */ jsxs(Combobox$1.Group, {
+					items: itemOrGroup.items,
+					children: [groupLabel && /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { children: groupLabel }), /* @__PURE__ */ jsx(Combobox$1.GroupList, { children: renderItem })]
+				});
+			}
+			return renderItem(itemOrGroup);
+		} })] })]
+	});
+};
+//#endregion
+export { MultiCombobox };
+
 //# sourceMappingURL=MultiCombobox.js.map

package/dist/internal/blocks/MultiCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"MultiCombobox.js"}
+{"version":3,"file":"MultiCombobox.js","names":["BaseCombobox","Combobox"],"sources":["../../../src/blocks/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["import { type ComponentProps, Fragment, type ReactNode, useState } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { Combobox } from '../../components/Combobox';\nimport type { Group, LabeledItem } from '../../components/Combobox/types';\nimport {\n  createCreatableItem,\n  defaultGroupToLabel,\n  defaultItemToDisabled,\n  defaultItemToIcon,\n  defaultItemToLabel,\n  defaultQueryToCreateLabel,\n  defaultToCreateValue,\n  isCreatableItem,\n  isGroupItem,\n  isGroupItems,\n  isLabeledItem,\n  toLabel,\n} from '../../components/Combobox/utils';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\nimport { ChevronDown, Plus, X } from '../../icons';\n\ntype ComboboxProps<Value> = BaseCombobox.Root.Props<Value, true>;\ntype ComboboxInputProps = ComponentProps<typeof Combobox.Input>;\ntype ComboboxInputGroupProps = ComponentProps<typeof Combobox.InputGroup>;\ntype ComboboxItemProps = ComponentProps<typeof Combobox.Item>;\ntype ComboboxChipsProps = ComponentProps<typeof Combobox.Chips>;\n\ntype Indicator = NonNullable<ComboboxItemProps['indicator']>;\n\ntype CreatableProps<Value> = {\n  allowCreate?: boolean;\n  queryToCreateLabel?: (query: string) => ReactNode;\n  queryToCreateValue?: (query: string) => Value;\n};\n\n/**\n * Props for `MultiCombobox`. Generic over `Value` (the item shape) and `GroupShape` (optional group wrapper).\n * Use `itemToLabel` / `itemToIcon` / `itemToDisabled` to project custom item shapes; use `filter` to override\n * the default substring matcher. Pass `allowCreate` to let the user add free-form values not in `items`.\n */\ntype Props<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<\n  ComboboxInputProps,\n  'placeholder' | 'id'\n> &\n  Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> &\n  Pick<\n    ComboboxProps<Value>,\n    | 'disabled'\n    | 'inputRef'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'itemToStringLabel'\n    | 'itemToStringValue'\n    | 'filter'\n  > &\n  Pick<ComboboxChipsProps, 'itemToChipLabel' | 'itemToChipColor' | 'maxVisible'> &\n  CreatableProps<Value> & {\n    items?: readonly (Value | GroupShape)[];\n\n    // root specific\n    allowClear?: boolean;\n    allowSelectAll?: boolean;\n    empty?: ReactNode;\n    indicator?: Indicator;\n\n    // item specific\n    itemToLabel?: (item: Value) => ReactNode;\n    itemToIcon?: (item: Value) => ReactNode;\n    itemToDisabled?: (item: Value) => boolean;\n\n    // group specific\n    groupToLabel?: (group: GroupShape) => ReactNode;\n  };\n\nconst selectAllItem: LabeledItem = {\n  value: '__select_all__',\n  label: 'Select All',\n};\n\nconst isSelectAllItem = <Value,>(item: Value) =>\n  isLabeledItem(item) && item.value === '__select_all__';\n\n/**\n * Multi-selection combobox with chip display and search. Built on Base UI Combobox.\n *\n * **When to use:** picking several items from a searchable enumerated list (filter by tags, assign labels).\n * Items render as chips above the input; `maxVisible` collapses excess into a `+N more` chip.\n * **When NOT to use:** for single selection use `Combobox`; for short enums without search use `Select`.\n * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` for form integration.\n * Pass `allowSelectAll` for a sticky \"Select All\" item when the full enum is small. Pass `allowCreate`\n * to let the user add free-form values that are not in `items` (e.g. entering column names by hand).\n *\n * @see RECIPES.md#creatable-multi-combobox — for free-form-plus-enumerated patterns\n * @see RECIPES.md#filter-toolbar — for combining multi-select with other filter chips\n */\nexport const MultiCombobox = <Value, GroupShape extends Group<Value> = Group<Value>>({\n  // root props\n  items: _itemsProp,\n  value: _valueProp,\n  defaultValue,\n  onValueChange,\n  itemToStringLabel,\n  itemToStringValue,\n  disabled,\n  filter: filterProp,\n  inputRef,\n\n  // input props\n  variant,\n  sizing,\n  focusVariant,\n  state,\n  placeholder,\n  allowClear,\n  id,\n  className,\n\n  // own props\n  allowSelectAll = false,\n  empty = 'No items',\n  indicator,\n\n  // creatable\n  allowCreate,\n  queryToCreateValue,\n  queryToCreateLabel = defaultQueryToCreateLabel,\n\n  // own item props\n  itemToDisabled = defaultItemToDisabled,\n  itemToLabel = defaultItemToLabel,\n  itemToIcon = defaultItemToIcon,\n  groupToLabel = defaultGroupToLabel,\n  itemToChipLabel,\n  itemToChipColor,\n  maxVisible = 3,\n}: Props<Value, GroupShape>) => {\n  const itemsProp = _itemsProp ?? [];\n  const valueProp = _valueProp ?? [];\n  const renderArgo = useArgoDesign();\n  const chipVariant = renderArgo ? 'pill' : 'default';\n\n  const [inputValue, setInputValue] = useState('');\n  const [createdItems, setCreatedItems] = useState<Value[]>([]);\n  const query = inputValue.trim();\n  const queryLower = query.toLowerCase();\n\n  // Created values are appended to `items` so Base UI can keep resolving them (as chips and as\n  // list options) once the query clears — otherwise a value that isn't in `items` gets dropped.\n  const baseItems = (() => {\n    if (createdItems.length === 0) return itemsProp;\n    if (isGroupItems(itemsProp))\n      return [...itemsProp, { items: createdItems } as unknown as GroupShape];\n    return [...itemsProp, ...createdItems];\n  })();\n\n  const allFlatItems = baseItems.flatMap((item) => (isGroupItem(item) ? item.items : item));\n  const sampleItem = allFlatItems[0] as Value | undefined;\n  const isAllSelected = allFlatItems.length === (valueProp?.length ?? 0);\n\n  const defaultFilter = BaseCombobox.useFilter({\n    multiple: true,\n    value: valueProp,\n  });\n\n  const itemsWithSelectAllItem = (() => {\n    if (!allowSelectAll) return baseItems;\n    return [selectAllItem, ...baseItems];\n  })();\n\n  const itemToString = (item: Value) => itemToStringLabel?.(item) ?? toLabel(item);\n\n  const items = (() => {\n    const base = itemsWithSelectAllItem;\n    if (!allowCreate || disabled || !query) return base;\n\n    const exactMatch = allFlatItems.some((item) => itemToString(item).toLowerCase() === queryLower);\n    const alreadySelected = valueProp.some(\n      (item) => itemToString(item).toLowerCase() === queryLower,\n    );\n    if (exactMatch || alreadySelected) return base;\n\n    const creatable = createCreatableItem(query);\n    return isGroupItems(base)\n      ? [...base, { items: [creatable] } as unknown as GroupShape]\n      : [...base, creatable as unknown as Value];\n  })();\n\n  const filter = (item: Value, query: string, itemToString?: (value: Value) => string) => {\n    // keep select always visible\n    if (isSelectAllItem(item)) return true;\n    // always offer the transient \"create\" option\n    if (isCreatableItem(item)) return true;\n\n    if (filterProp) return filterProp(item, query, itemToString);\n    return defaultFilter.contains(item, query, itemToString);\n  };\n\n  const wrappedItemToStringLabel: ComboboxProps<Value>['itemToStringLabel'] = !allowCreate\n    ? itemToStringLabel\n    : (item) => (isCreatableItem(item) ? item.value : itemToString(item));\n\n  const wrappedItemToStringValue: ComboboxProps<Value>['itemToStringValue'] =\n    !allowCreate || !itemToStringValue\n      ? itemToStringValue\n      : (item) => (isCreatableItem(item) ? item.value : itemToStringValue(item));\n\n  const value = (() => {\n    if (!allowSelectAll) return valueProp;\n    return isAllSelected ? [...valueProp, selectAllItem as Value] : valueProp;\n  })();\n\n  const handleValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {\n    if (!onValueChange) return;\n\n    const created: Value[] = [];\n    const converted = allowCreate\n      ? next.map((item) => {\n          if (!isCreatableItem(item)) return item;\n          const value = defaultToCreateValue(item.value, sampleItem, queryToCreateValue) as Value;\n          created.push(value);\n          return value;\n        })\n      : next;\n\n    if (allowCreate) {\n      if (created.length > 0) setCreatedItems((prev) => [...prev, ...created]);\n      setInputValue('');\n    }\n\n    const hasSelectAll = converted.some((item) => isSelectAllItem(item));\n    const newValue = (() => {\n      if (!allowSelectAll) return converted;\n      if (!hasSelectAll) return isAllSelected ? [] : converted;\n      return isAllSelected ? converted.filter((item) => !isSelectAllItem(item)) : allFlatItems;\n    })();\n\n    onValueChange(newValue, event);\n  };\n\n  const renderItem = (item: Value) => {\n    return (\n      <Combobox.Item\n        value={item}\n        indicator={indicator}\n        icon={itemToIcon(item)}\n        disabled={itemToDisabled(item)}\n      >\n        {itemToLabel(item)}\n      </Combobox.Item>\n    );\n  };\n\n  return (\n    <Combobox.Root<Value, true>\n      multiple\n      items={items}\n      value={value}\n      defaultValue={defaultValue}\n      filter={filter}\n      onValueChange={handleValueChange}\n      itemToStringLabel={wrappedItemToStringLabel}\n      itemToStringValue={wrappedItemToStringValue}\n      disabled={disabled}\n      inputRef={inputRef}\n      {...(allowCreate\n        ? { inputValue, onInputValueChange: (nextValue: string) => setInputValue(nextValue) }\n        : {})}\n    >\n      <BaseCombobox.Chips render={<Fragment />}>\n        <Combobox.InputGroup\n          variant={variant}\n          sizing={sizing}\n          state={state}\n          focusVariant={focusVariant}\n          className={className}\n        >\n          <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-wrap tw:items-center tw:gap-1.5 tw:px-4 tw:py-1.5\">\n            <Combobox.Chips<Value>\n              maxVisible={maxVisible}\n              variant={chipVariant}\n              itemToChipLabel={itemToChipLabel ?? itemToLabel}\n              itemToChipColor={itemToChipColor}\n            />\n            <div className=\"tw:flex tw:flex-1 tw:items-center tw:gap-1\">\n              <Combobox.Input\n                id={id}\n                placeholder={placeholder}\n                disabled={disabled}\n                className=\"tw:w-auto tw:min-w-[120px] tw:flex-1\"\n              />\n              {allowClear && (\n                <InputGroup.Button asChild aria-label=\"Clear\" disabled={disabled}>\n                  <BaseCombobox.Clear>\n                    <X className=\"tw:size-4\" />\n                  </BaseCombobox.Clear>\n                </InputGroup.Button>\n              )}\n              <InputGroup.Button disabled={disabled} asChild aria-label=\"Open combobox\">\n                <BaseCombobox.Trigger>\n                  <ChevronDown className=\"tw:size-4\" />\n                </BaseCombobox.Trigger>\n              </InputGroup.Button>\n            </div>\n          </div>\n        </Combobox.InputGroup>\n      </BaseCombobox.Chips>\n      <Combobox.Content>\n        <Combobox.Empty>{empty}</Combobox.Empty>\n        <Combobox.List>\n          {(itemOrGroup: Value | GroupShape) => {\n            if (isSelectAllItem(itemOrGroup)) {\n              return (\n                <Combobox.Item value={itemOrGroup} indicator=\"checkbox\">\n                  Select All\n                </Combobox.Item>\n              );\n            }\n\n            if (isCreatableItem(itemOrGroup)) {\n              return (\n                <Combobox.Item value={itemOrGroup} icon={<Plus />}>\n                  {queryToCreateLabel(itemOrGroup.value)}\n                </Combobox.Item>\n              );\n            }\n\n            if (isGroupItem(itemOrGroup)) {\n              const maybeCreatable = itemOrGroup.items[0];\n\n              if (isCreatableItem(maybeCreatable)) {\n                return (\n                  <Combobox.Item value={maybeCreatable} icon={<Plus />}>\n                    {queryToCreateLabel(maybeCreatable.value)}\n                  </Combobox.Item>\n                );\n              }\n\n              const groupLabel = groupToLabel(itemOrGroup);\n              return (\n                <Combobox.Group items={itemOrGroup.items}>\n                  {groupLabel && <Combobox.GroupLabel>{groupLabel}</Combobox.GroupLabel>}\n                  <Combobox.GroupList>{renderItem}</Combobox.GroupList>\n                </Combobox.Group>\n              );\n            }\n\n            return renderItem(itemOrGroup);\n          }}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/internal/blocks/NumberInput.js

@@ -1,12 +1,44 @@
-export { NumberInput } from '../../chunk-QZAWRSEB.js';
-import '../../chunk-SC275NHZ.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=NumberInput.js.map
+import { InputGroup } from "../../InputGroup-BJWsI35s.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/NumberInput/NumberInput.tsx
+const toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
+const NumberInput = ({ ref, state, variant, focusVariant, sizing, className, value, defaultValue, onValueChange, onValueBlur, onChange, onBlur, prefix, suffix, ...inputProps }) => {
+	const handleChange = (event) => {
+		onValueChange?.(toNumberOrNull(event));
+		onChange?.(event);
+	};
+	const handleBlur = (event) => {
+		onValueBlur?.(toNumberOrNull(event));
+		onBlur?.(event);
+	};
+	const valueProp = value !== void 0 ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [
+			prefix && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-start",
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(InputGroup.Input, {
+				...inputProps,
+				...valueProp,
+				ref,
+				type: "number",
+				onChange: handleChange,
+				onBlur: handleBlur
+			}),
+			suffix && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-end",
+				children: suffix
+			})
+		]
+	});
+};
+//#endregion
+export { NumberInput };
+
 //# sourceMappingURL=NumberInput.js.map

package/dist/internal/blocks/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"NumberInput.js"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/blocks/NumberInput/NumberInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentProps,\n  FocusEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type' | 'prefix'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: number | null;\n    defaultValue?: number | null;\n    onValueChange?: (value: number | null) => void;\n    onValueBlur?: (value: number | null) => void;\n    prefix?: ReactNode;\n    suffix?: ReactNode;\n  };\n\nconst toNumberOrNull = (event: ChangeEvent<HTMLInputElement>) =>\n  Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;\n\nexport const NumberInput = ({\n  ref,\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  value,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n\n  prefix,\n  suffix,\n\n  ...inputProps\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    onValueChange?.(toNumberOrNull(event));\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    onValueBlur?.(toNumberOrNull(event));\n    onBlur?.(event);\n  };\n\n  const isControlled = value !== undefined;\n  const valueProp = isControlled ? { value: value ?? '' } : { defaultValue: defaultValue ?? '' };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      {prefix && <InputGroup.Addon align=\"inline-start\">{prefix}</InputGroup.Addon>}\n      <InputGroup.Input\n        {...inputProps}\n        {...valueProp}\n        ref={ref}\n        type=\"number\"\n        onChange={handleChange}\n        onBlur={handleBlur}\n      />\n      {suffix && <InputGroup.Addon align=\"inline-end\">{suffix}</InputGroup.Addon>}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;AA8BA,MAAM,kBAAkB,UACtB,OAAO,MAAM,MAAM,OAAO,aAAa,IAAI,OAAO,MAAM,OAAO;AAEjE,MAAa,eAAe,EAC1B,KACA,OACA,SACA,cACA,QACA,WAEA,OACA,cACA,eACA,aACA,UACA,QAEA,QACA,QAEA,GAAG,iBACQ;CACX,MAAM,gBAAsD,UAAU;EACpE,gBAAgB,eAAe,KAAK,CAAC;EACrC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,eAAe,KAAK,CAAC;EACnC,SAAS,KAAK;CAChB;CAGA,MAAM,YADe,UAAU,KAAA,IACE,EAAE,OAAO,SAAS,GAAG,IAAI,EAAE,cAAc,gBAAgB,GAAG;CAE7F,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOG,UAAU,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IAAgB,UAAA;GAAyB,CAAA;GAC5E,oBAAC,WAAW,OAAZ;IACE,GAAI;IACJ,GAAI;IACC;IACL,MAAK;IACL,UAAU;IACV,QAAQ;GACT,CAAA;GACA,UAAU,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IAAc,UAAA;GAAyB,CAAA;EAChE;;AAEhB"}

package/dist/internal/blocks/OtpInput.js

@@ -1,10 +1,2 @@
-export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from '../../chunk-K65C7CVE.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=OtpInput.js.map
-//# sourceMappingURL=OtpInput.js.map
+import { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "../../OtpInput-CbbymqYs.js";
+export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/internal/blocks/PageHeader.js

@@ -1,9 +1,2 @@
-export { PageHeader } from '../../chunk-SLCCUJVN.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=PageHeader.js.map
-//# sourceMappingURL=PageHeader.js.map
+import { PageHeader } from "../../PageHeader-Q3IpCnQd.js";
+export { PageHeader };

package/dist/internal/blocks/PageLayout.js

@@ -1,9 +1,2 @@
-export { PageLayout } from '../../chunk-JUW2ETEI.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=PageLayout.js.map
-//# sourceMappingURL=PageLayout.js.map
+import { PageLayout } from "../../PageLayout-DSVM-ASz.js";
+export { PageLayout };

package/dist/internal/blocks/PageToolbar.js

@@ -1,13 +1,2 @@
-export { PageToolbar } from '../../chunk-WU3F2K3T.js';
-import '../../chunk-SBGAUGXY.js';
-import '../../chunk-ON4BJTHI.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=PageToolbar.js.map
-//# sourceMappingURL=PageToolbar.js.map
+import { PageToolbar } from "../../PageToolbar-0_1OBzaZ.js";
+export { PageToolbar };