@keboola/design 11.0.0 → 11.0.1

package/dist/internal/blocks/PasswordInput.js

@@ -1,13 +1,97 @@
-export { PasswordInput } from '../../chunk-U3A6YBTZ.js';
-import '../../chunk-WKAUEL6I.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=PasswordInput.js.map
+import { createChangeInputEvent } from "../../utils-D0c5VAyF.js";
+import { mergeRefs } from "../utils/mergeRefs.js";
+import { ArrowBigUpDash, Eye, EyeOff, X } from "../../icons-Cek151jC.js";
+import { InputGroup } from "../../InputGroup-BJWsI35s.js";
+import { useControllableState } from "../../useControllableState-M6494mCT.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/PasswordInput/PasswordInput.tsx
+const PasswordInput = ({ ref, state, variant, focusVariant, sizing, className, value: valueProp, defaultValue, onValueChange, onValueBlur, onChange, onBlur, onKeyDown, onKeyUp, onMouseDown, allowClear = false, allowPasswordToggle = false, passwordToggleLabel, autoComplete = "new-password", defaultPasswordVisibility = false, disabled, readOnly, ...restInputProps }) => {
+	const inputRef = useRef(null);
+	const [value, setValue] = useControllableState({
+		prop: valueProp === null ? "" : valueProp,
+		defaultProp: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const [capsLock, setCapsLock] = useState(false);
+	const [isPasswordVisible, setIsPasswordVisible] = useState(defaultPasswordVisibility);
+	const canClear = allowClear && !!value && !disabled && !readOnly;
+	const handleChange = (event) => {
+		setValue(event.target.value);
+		onChange?.(event);
+	};
+	const handleBlur = (event) => {
+		if (capsLock) setCapsLock(false);
+		onValueBlur?.(event.target.value);
+		onBlur?.(event);
+	};
+	const handleKeyDown = (event) => {
+		const isOn = event.getModifierState("CapsLock");
+		if (isOn !== capsLock) setCapsLock(isOn);
+		onKeyDown?.(event);
+	};
+	const handleKeyUp = (event) => {
+		const isOn = event.getModifierState("CapsLock");
+		if (isOn !== capsLock) setCapsLock(isOn);
+		onKeyUp?.(event);
+	};
+	const handleMouseDown = (event) => {
+		const isOn = event.getModifierState("CapsLock");
+		if (isOn !== capsLock) setCapsLock(isOn);
+		onMouseDown?.(event);
+	};
+	const handleClear = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+		setValue("");
+		onChange?.(createChangeInputEvent(inputRef.current));
+	};
+	const handleTogglePasswordVisibility = () => {
+		setIsPasswordVisible((prev) => !prev);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+			...restInputProps,
+			ref: mergeRefs(ref ?? null, inputRef),
+			type: isPasswordVisible ? "text" : "password",
+			autoComplete,
+			value,
+			onChange: handleChange,
+			onBlur: handleBlur,
+			onKeyDown: handleKeyDown,
+			onKeyUp: handleKeyUp,
+			onMouseDown: handleMouseDown,
+			disabled,
+			readOnly
+		}), (capsLock || canClear || allowPasswordToggle) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
+			align: "inline-end",
+			children: [
+				capsLock && /* @__PURE__ */ jsx(ArrowBigUpDash, {
+					className: "tw:size-4 tw:text-primary",
+					children: /* @__PURE__ */ jsx("title", { children: "Caps Lock is on" })
+				}),
+				canClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": "Clear password",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: handleClear,
+					children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+				}),
+				allowPasswordToggle && /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": `${isPasswordVisible ? "Hide password" : "Show password"}${passwordToggleLabel ? `: ${passwordToggleLabel}` : ""}`,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: handleTogglePasswordVisibility,
+					children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOff, { className: "tw:size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "tw:size-4" })
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PasswordInput };
+
 //# sourceMappingURL=PasswordInput.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"PasswordInput.js"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/blocks/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { ArrowBigUpDash, Eye, EyeOff, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\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' | 'autoComplete'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string) => void;\n    onValueBlur?: (value: string) => void;\n    allowClear?: boolean;\n    allowPasswordToggle?: boolean;\n    /**\n     * Suffix appended to the reveal button's accessible name, e.g. the field\n     * title. Use it to disambiguate multiple password fields on one form —\n     * \"Show password: API token\" / \"Hide password: API token\". Omit for a\n     * single field.\n     */\n    passwordToggleLabel?: string;\n    autoComplete?: 'new-password' | 'current-password' | 'off';\n    defaultPasswordVisibility?: boolean;\n  };\n\nexport const PasswordInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  allowClear = false,\n  allowPasswordToggle = false,\n  passwordToggleLabel,\n  autoComplete = 'new-password',\n  defaultPasswordVisibility = false,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.\n    prop: valueProp === null ? '' : valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  const [capsLock, setCapsLock] = useState(false);\n  const [isPasswordVisible, setIsPasswordVisible] = useState(defaultPasswordVisibility);\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    if (capsLock) setCapsLock(false);\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  // Both keyDown and keyUp are needed: pressing the Caps Lock key itself\n  // reports the *old* state on keyDown and the *new* state on keyUp, so\n  // toggling Caps Lock off mid-typing is only caught on keyUp.\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyDown?.(event);\n  };\n\n  const handleKeyUp: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onKeyUp?.(event);\n  };\n\n  // Catches the case where the user clicks into the field with Caps Lock\n  // already on. Tab-focus / autofocus have no API to query modifier state.\n  const handleMouseDown: MouseEventHandler<HTMLInputElement> = (event) => {\n    const isOn = event.getModifierState('CapsLock');\n    if (isOn !== capsLock) setCapsLock(isOn);\n    onMouseDown?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue('');\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleTogglePasswordVisibility = () => {\n    setIsPasswordVisible((prev) => !prev);\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type={isPasswordVisible ? 'text' : 'password'}\n        autoComplete={autoComplete}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handleMouseDown}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(capsLock || canClear || allowPasswordToggle) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {capsLock && (\n            <ArrowBigUpDash className=\"tw:size-4 tw:text-primary\">\n              <title>Caps Lock is on</title>\n            </ArrowBigUpDash>\n          )}\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear password\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {allowPasswordToggle && (\n            <InputGroup.Button\n              aria-label={`${isPasswordVisible ? 'Hide password' : 'Show password'}${\n                passwordToggleLabel ? `: ${passwordToggleLabel}` : ''\n              }`}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleTogglePasswordVisibility}\n            >\n              {isPasswordVisible ? <EyeOff className=\"tw:size-4\" /> : <Eye className=\"tw:size-4\" />}\n            </InputGroup.Button>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;AA4CA,MAAa,iBAAiB,EAC5B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,WACA,SACA,aACA,aAAa,OACb,sBAAsB,OACtB,qBACA,eAAe,gBACf,4BAA4B,OAG5B,UACA,UACA,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAErD,MAAM,cAAc,OAAO,KAAK;EAChC,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,yBAAyB;CAEpF,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CAExD,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,KAAK;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,IAAI,UAAU,YAAY,KAAK;EAC/B,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAKA,MAAM,iBAAyD,UAAU;EACvE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,YAAY,KAAK;CACnB;CAEA,MAAM,eAAuD,UAAU;EACrE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,UAAU,KAAK;CACjB;CAIA,MAAM,mBAAwD,UAAU;EACtE,MAAM,OAAO,MAAM,iBAAiB,UAAU;EAC9C,IAAI,SAAS,UAAU,YAAY,IAAI;EACvC,cAAc,KAAK;CACrB;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,EAAE;EACX,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,MAAM,uCAAuC;EAC3C,sBAAsB,SAAS,CAAC,IAAI;CACtC;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAM,oBAAoB,SAAS;GACrB;GACP;GACP,UAAU;GACV,QAAQ;GACR,WAAW;GACX,SAAS;GACT,aAAa;GACH;GACA;EACX,CAAA,IAEC,YAAY,YAAY,wBACxB,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA;IACG,YACC,oBAAC,gBAAD;KAAgB,WAAU;KACxB,UAAA,oBAAC,SAAD,EAAA,UAAO,kBAAsB,CAAA;IACf,CAAA;IAEjB,YACC,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;IAEpB,uBACC,oBAAC,WAAW,QAAZ;KACE,cAAY,GAAG,oBAAoB,kBAAkB,kBACnD,sBAAsB,KAAK,wBAAwB;KAErD,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAER,UAAA,oBAAoB,oBAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,WAAU,YAAa,CAAA;IACnE,CAAA;GAEL;EAEV,CAAA,CAAA;;AAEhB"}

package/dist/internal/blocks/SearchInput.js

@@ -1,12 +1,2 @@
-export { SearchInput } from '../../chunk-RMRQKPL7.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=SearchInput.js.map
-//# sourceMappingURL=SearchInput.js.map
+import { SearchInput } from "../../SearchInput-D2fcOv7E.js";
+export { SearchInput };

package/dist/internal/blocks/SearchInputWithNavigation.js

@@ -1,16 +1,65 @@
-export { SearchInputWithNavigation } from '../../chunk-NHJNNXD3.js';
-import '../../chunk-ANZTVAJU.js';
-import '../../chunk-6DUMGC7Y.js';
-import '../../chunk-HPMYYGP7.js';
-import '../../chunk-WKAUEL6I.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=SearchInputWithNavigation.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { keyCodes } from "../../utils-D0c5VAyF.js";
+import { ChevronDown, ChevronUp, Search } from "../../icons-Cek151jC.js";
+import { Button } from "../../Button-nzmDNS2q.js";
+import { ButtonGroup } from "../components/ButtonGroup.js";
+import { Separator } from "../components/Separator.js";
+import { TextInput } from "../../TextInput-BGed-V13.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.tsx
+const SearchInputWithNavigation = ({ ref, value, onValueChange, placeholder = "Search...", variant = "secondary", onClear, focusVariant, currentIndex, totalResults, onNavigateNext, onNavigatePrevious, className }) => {
+	const withControls = totalResults > 0;
+	const handleKeyDown = (e) => {
+		if (e.key === keyCodes.ENTER) {
+			e.preventDefault();
+			e.shiftKey ? onNavigatePrevious() : onNavigateNext();
+		}
+	};
+	return /* @__PURE__ */ jsx(TextInput, {
+		ref,
+		allowClear: true,
+		value,
+		placeholder,
+		onValueChange,
+		onClear,
+		prefix: /* @__PURE__ */ jsx(Search, { className: "tw:size-4 tw:shrink-0 tw:text-neutral-400" }),
+		focusVariant,
+		onKeyDown: handleKeyDown,
+		variant,
+		className,
+		leftSuffix: /* @__PURE__ */ jsxs("div", {
+			className: cn("tw:flex tw:items-center tw:gap-3", { "tw:hidden": !withControls }),
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "tw:text-xs tw:text-neutral-400",
+					children: [
+						totalResults > 0 ? currentIndex ?? 0 : 0,
+						"/",
+						totalResults
+					]
+				}),
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					size: "3/4"
+				}),
+				/* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "inline",
+					size: "icon-3xs",
+					onClick: onNavigatePrevious,
+					disabled: !totalResults,
+					children: /* @__PURE__ */ jsx(ChevronUp, { className: "tw:size-4" })
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "inline",
+					size: "icon-3xs",
+					onClick: onNavigateNext,
+					disabled: !totalResults,
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" })
+				})] })
+			]
+		})
+	});
+};
+//#endregion
+export { SearchInputWithNavigation };
+
 //# sourceMappingURL=SearchInputWithNavigation.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SearchInputWithNavigation.js"}
+{"version":3,"file":"SearchInputWithNavigation.js","names":[],"sources":["../../../src/blocks/SearchInputWithNavigation/SearchInputWithNavigation.tsx"],"sourcesContent":["import type { ComponentProps, KeyboardEvent, Ref } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { Separator } from '../../components/Separator';\nimport { keyCodes } from '../../constants/keyCodes';\nimport { ChevronDown, ChevronUp, Search } from '../../icons';\nimport { cn } from '../../utils';\nimport { TextInput } from '../TextInput';\n\ntype SearchInputWithNavigationProps = {\n  currentIndex: number | null;\n  totalResults: number;\n  onValueChange: (value: string) => void;\n  onNavigateNext: () => void;\n  onNavigatePrevious: () => void;\n\n  value?: string;\n  placeholder?: string;\n  variant?: 'primary' | 'secondary';\n  onClear?: () => void;\n  focusVariant?: ComponentProps<typeof TextInput>['focusVariant'];\n  className?: string;\n};\n\nexport const SearchInputWithNavigation = ({\n  ref,\n  value,\n  onValueChange,\n  placeholder = 'Search...',\n  variant = 'secondary',\n  onClear,\n  focusVariant,\n  currentIndex,\n  totalResults,\n  onNavigateNext,\n  onNavigatePrevious,\n  className,\n}: SearchInputWithNavigationProps & { ref?: Ref<HTMLInputElement> }) => {\n  const withControls = totalResults > 0;\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === keyCodes.ENTER) {\n      e.preventDefault();\n\n      e.shiftKey ? onNavigatePrevious() : onNavigateNext();\n    }\n  };\n\n  return (\n    <TextInput\n      ref={ref}\n      allowClear\n      value={value}\n      placeholder={placeholder}\n      onValueChange={onValueChange}\n      onClear={onClear}\n      prefix={<Search className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />}\n      focusVariant={focusVariant}\n      onKeyDown={handleKeyDown}\n      variant={variant}\n      className={className}\n      leftSuffix={\n        <div\n          className={cn('tw:flex tw:items-center tw:gap-3', {\n            'tw:hidden': !withControls,\n          })}\n        >\n          <span className=\"tw:text-xs tw:text-neutral-400\">\n            {totalResults > 0 ? (currentIndex ?? 0) : 0}/{totalResults}\n          </span>\n          <Separator orientation=\"vertical\" size=\"3/4\" />\n          <ButtonGroup>\n            <Button\n              variant=\"inline\"\n              size=\"icon-3xs\"\n              onClick={onNavigatePrevious}\n              disabled={!totalResults}\n            >\n              <ChevronUp className=\"tw:size-4\" />\n            </Button>\n            <Button\n              variant=\"inline\"\n              size=\"icon-3xs\"\n              onClick={onNavigateNext}\n              disabled={!totalResults}\n            >\n              <ChevronDown className=\"tw:size-4\" />\n            </Button>\n          </ButtonGroup>\n        </div>\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAyBA,MAAa,6BAA6B,EACxC,KACA,OACA,eACA,cAAc,aACd,UAAU,aACV,SACA,cACA,cACA,cACA,gBACA,oBACA,gBACsE;CACtE,MAAM,eAAe,eAAe;CAEpC,MAAM,iBAAiB,MAAqB;EAC1C,IAAI,EAAE,QAAQ,SAAS,OAAO;GAC5B,EAAE,eAAe;GAEjB,EAAE,WAAW,mBAAmB,IAAI,eAAe;EACrD;CACF;CAEA,OACE,oBAAC,WAAD;EACO;EACL,YAAA;EACO;EACM;EACE;EACN;EACT,QAAQ,oBAAC,QAAD,EAAQ,WAAU,4CAA6C,CAAA;EACzD;EACd,WAAW;EACF;EACE;EACX,YACE,qBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,EAChD,aAAa,CAAC,aAChB,CAAC;GAHH,UAAA;IAKE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG,eAAe,IAAK,gBAAgB,IAAK;MAAE;MAAE;KAC1C;;IACN,oBAAC,WAAD;KAAW,aAAY;KAAW,MAAK;IAAO,CAAA;IAC9C,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,SAAS;KACT,UAAU,CAAC;KAEX,UAAA,oBAAC,WAAD,EAAW,WAAU,YAAa,CAAA;IAC5B,CAAA,GACR,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,SAAS;KACT,UAAU,CAAC;KAEX,UAAA,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA;IAC9B,CAAA,CACG,EAAA,CAAA;GACV;;CAER,CAAA;AAEL"}

package/dist/internal/blocks/SectionNav.js

@@ -1,15 +1,2 @@
-export { SectionNav } from '../../chunk-EQRMGIGY.js';
-import '../../chunk-ERAHK5YQ.js';
-import '../../chunk-FVPGQ6UE.js';
-import '../../chunk-SBGAUGXY.js';
-import '../../chunk-THHB4EWS.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=SectionNav.js.map
-//# sourceMappingURL=SectionNav.js.map
+import { SectionNav } from "../../SectionNav--7bw2b6u.js";
+export { SectionNav };

package/dist/internal/blocks/SplitButton.js

@@ -1,14 +1,46 @@
-export { SplitButton } from '../../chunk-RL64HN7S.js';
-import '../../chunk-ERAHK5YQ.js';
-import '../../chunk-ANZTVAJU.js';
-import '../../chunk-THHB4EWS.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=SplitButton.js.map
+import { ChevronDown } from "../../icons-Cek151jC.js";
+import { Button } from "../../Button-nzmDNS2q.js";
+import { ButtonGroup } from "../components/ButtonGroup.js";
+import { DropdownMenu } from "../../DropdownMenu-B6ZbYvaM.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/SplitButton/SplitButton.tsx
+const iconSizeMap = {
+	medium: "icon",
+	large: "icon-lg",
+	small: "icon-sm"
+};
+const SplitButtonBase = ({ ref, disabled, actions, variant, size = "medium", isActionsOpen, onActionsOpenChange, icon, children, ...rest }) => /* @__PURE__ */ jsxs(ButtonGroup, {
+	space: "compact",
+	children: [/* @__PURE__ */ jsxs(Button, {
+		...rest,
+		ref,
+		disabled,
+		variant,
+		size,
+		children: [!rest.isLoading && icon, children]
+	}), actions && /* @__PURE__ */ jsxs(DropdownMenu, {
+		open: isActionsOpen,
+		onOpenChange: onActionsOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+			asChild: true,
+			disabled,
+			children: /* @__PURE__ */ jsx(Button, {
+				size: iconSizeMap[size],
+				variant,
+				"aria-label": "Additional actions",
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-5" })
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			align: "end",
+			children: actions
+		})]
+	})]
+});
+const SplitButton = Object.assign(SplitButtonBase, {
+	Action: DropdownMenu.Item,
+	Actions: DropdownMenu.Group
+});
+//#endregion
+export { SplitButton };
+
 //# sourceMappingURL=SplitButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SplitButton.js"}
+{"version":3,"file":"SplitButton.js","names":[],"sources":["../../../src/blocks/SplitButton/SplitButton.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\n\ntype Variant = ComponentProps<typeof Button>['variant'];\ntype Size = NonNullable<ComponentProps<typeof Button>['size']>;\ntype SpitButtonSize = Exclude<\n  Size,\n  'icon' | 'icon-lg' | 'icon-sm' | 'icon-xs' | 'icon-2xs' | 'icon-3xs'\n>;\n\ntype Props = {\n  actions?: ReactNode;\n  isActionsOpen?: boolean;\n  onActionsOpenChange?: (open: boolean) => void;\n  /** Optional leading-icon slot — pass a Lucide icon node. */\n  icon?: ReactNode;\n  // inline and invisible aren't supported in SplitButton\n  variant?: Exclude<Variant, 'inline' | 'invisible'>;\n  size?: SpitButtonSize;\n} & Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'icon'>;\n\nconst iconSizeMap: Record<SpitButtonSize, Size> = {\n  medium: 'icon',\n  large: 'icon-lg',\n  small: 'icon-sm',\n};\n\nconst SplitButtonBase = ({\n  ref,\n  disabled,\n  actions,\n  variant,\n  size = 'medium',\n  isActionsOpen,\n  onActionsOpenChange,\n  icon,\n  children,\n  ...rest\n}: Props) => (\n  <ButtonGroup space=\"compact\">\n    <Button {...rest} ref={ref} disabled={disabled} variant={variant} size={size}>\n      {/* Suppress the leading icon while Button renders its spinner so the two\n          glyphs don't double-stack. */}\n      {!rest.isLoading && icon}\n      {children}\n    </Button>\n\n    {actions && (\n      <DropdownMenu open={isActionsOpen} onOpenChange={onActionsOpenChange}>\n        {/* The trigger button is disabled if the main button is disabled, disabled has to be on trigger to prevent dropdown opening*/}\n        <DropdownMenu.Trigger asChild disabled={disabled}>\n          <Button size={iconSizeMap[size]} variant={variant} aria-label=\"Additional actions\">\n            <ChevronDown className=\"tw:size-5\" />\n          </Button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content align=\"end\">{actions}</DropdownMenu.Content>\n      </DropdownMenu>\n    )}\n  </ButtonGroup>\n);\n\nexport const SplitButton = Object.assign(SplitButtonBase, {\n  Action: DropdownMenu.Item,\n  Actions: DropdownMenu.Group,\n});\n"],"mappings":";;;;;;AAyBA,MAAM,cAA4C;CAChD,QAAQ;CACR,OAAO;CACP,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,KACA,UACA,SACA,SACA,OAAO,UACP,eACA,qBACA,MACA,UACA,GAAG,WAEH,qBAAC,aAAD;CAAa,OAAM;CAAnB,UAAA,CACE,qBAAC,QAAD;EAAQ,GAAI;EAAW;EAAe;EAAmB;EAAe;EAAxE,UAAA,CAGG,CAAC,KAAK,aAAa,MACnB,QACK;CAEP,CAAA,GAAA,WACC,qBAAC,cAAD;EAAc,MAAM;EAAe,cAAc;EAAjD,UAAA,CAEE,oBAAC,aAAa,SAAd;GAAsB,SAAA;GAAkB;GACtC,UAAA,oBAAC,QAAD;IAAQ,MAAM,YAAY;IAAgB;IAAS,cAAW;IAC5D,UAAA,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA;GAC9B,CAAA;EACY,CAAA,GACtB,oBAAC,aAAa,SAAd;GAAsB,OAAM;GAAO,UAAA;EAA8B,CAAA,CACrD;CAEL,CAAA,CAAA;;AAGf,MAAa,cAAc,OAAO,OAAO,iBAAiB;CACxD,QAAQ,aAAa;CACrB,SAAS,aAAa;AACxB,CAAC"}

package/dist/internal/blocks/StatCard.js

@@ -1,10 +1,97 @@
-export { StatCard, StatCardGrid } from '../../chunk-XAHEXZJC.js';
-import '../../chunk-F3FOFY2P.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=StatCard.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { Card } from "../../Card-BAoZ35CV.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/StatCard/StatCard.tsx
+const trendClassnames = cva([
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:gap-1",
+	"tw:text-sm",
+	"tw:font-medium"
+], {
+	variants: { direction: {
+		up: "tw:text-success",
+		down: "tw:text-destructive",
+		flat: "tw:text-muted-foreground"
+	} },
+	defaultVariants: { direction: "flat" }
+});
+/**
+* A single KPI / metric tile — a signature composition over `Card` with a label,
+* a large value, an optional trend delta, and an optional leading icon + footnote.
+*
+* **When to use:** the headline numbers of a dashboard (revenue, active users, uptime),
+* usually in a `StatCardGrid` strip at the top of a page.
+* **When NOT to use:** for a chart use `ChartPanel`; for a generic content surface use `Card`.
+* **Composition:** `StatCard.Icon`, `StatCard.Label`, `StatCard.Value`, `StatCard.Trend`,
+* `StatCard.Footnote`. All colours read semantic tokens, so the tile re-skins with the brand.
+*/
+const StatCardRoot = ({ className, children, bordered = true, ...rest }) => /* @__PURE__ */ jsx(Card, {
+	bordered,
+	className: cn("tw:gap-2", className),
+	role: "group",
+	...rest,
+	children
+});
+const StatCardIcon = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", className),
+	...rest,
+	children
+});
+const StatCardLabel = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", {
+	className: cn("tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground", className),
+	...rest,
+	children
+});
+const StatCardValue = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", {
+	className: cn("tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground", className),
+	...rest,
+	children
+});
+const StatCardTrend = ({ className, direction = "flat", icon, children, ...rest }) => /* @__PURE__ */ jsxs("span", {
+	className: trendClassnames({
+		direction,
+		className
+	}),
+	...rest,
+	children: [icon, children]
+});
+const StatCardFootnote = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", {
+	className: cn("tw:m-0 tw:text-xs tw:text-muted-foreground", className),
+	...rest,
+	children
+});
+const StatCard = StatCardRoot;
+StatCard.Icon = StatCardIcon;
+StatCard.Label = StatCardLabel;
+StatCard.Value = StatCardValue;
+StatCard.Trend = StatCardTrend;
+StatCard.Footnote = StatCardFootnote;
+//#endregion
+//#region src/blocks/StatCard/StatCardGrid.tsx
+const gridClassnames = cva(["tw:grid", "tw:gap-4"], {
+	variants: { columns: {
+		2: "tw:grid-cols-1 tw:sm:grid-cols-2",
+		3: "tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3",
+		4: "tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4"
+	} },
+	defaultVariants: { columns: 4 }
+});
+/**
+* Responsive strip of KPI tiles. Lay `StatCard`s inside it at the top of a dashboard.
+* `columns` caps the tiles per row on large screens; the grid collapses to one column on
+* mobile and two on small screens.
+*/
+const StatCardGrid = ({ className, columns = 4, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: gridClassnames({
+		columns,
+		className
+	}),
+	...rest,
+	children
+});
+//#endregion
+export { StatCard, StatCardGrid };
+
 //# sourceMappingURL=StatCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"StatCard.js"}
+{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/blocks/StatCard/StatCard.tsx","../../../src/blocks/StatCard/StatCardGrid.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Card } from '../../components/Card';\nimport { cn } from '../../utils';\n\nconst trendClassnames = cva(\n  ['tw:inline-flex', 'tw:items-center', 'tw:gap-1', 'tw:text-sm', 'tw:font-medium'],\n  {\n    variants: {\n      direction: {\n        up: 'tw:text-success',\n        down: 'tw:text-destructive',\n        flat: 'tw:text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      direction: 'flat',\n    },\n  },\n);\n\ntype TrendDirection = NonNullable<VariantProps<typeof trendClassnames>['direction']>;\n\ntype RootProps = ComponentProps<typeof Card>;\n\n/**\n * A single KPI / metric tile — a signature composition over `Card` with a label,\n * a large value, an optional trend delta, and an optional leading icon + footnote.\n *\n * **When to use:** the headline numbers of a dashboard (revenue, active users, uptime),\n * usually in a `StatCardGrid` strip at the top of a page.\n * **When NOT to use:** for a chart use `ChartPanel`; for a generic content surface use `Card`.\n * **Composition:** `StatCard.Icon`, `StatCard.Label`, `StatCard.Value`, `StatCard.Trend`,\n * `StatCard.Footnote`. All colours read semantic tokens, so the tile re-skins with the brand.\n */\nconst StatCardRoot = ({ className, children, bordered = true, ...rest }: RootProps) => (\n  <Card bordered={bordered} className={cn('tw:gap-2', className)} role=\"group\" {...rest}>\n    {children}\n  </Card>\n);\n\ntype IconProps = ComponentProps<'div'>;\n\nconst StatCardIcon = ({ className, children, ...rest }: IconProps) => (\n  <div\n    className={cn(\n      'tw:flex tw:size-9 tw:items-center tw:justify-center tw:rounded-md tw:bg-accent tw:text-accent-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\ntype LabelProps = ComponentProps<'p'>;\n\nconst StatCardLabel = ({ className, children, ...rest }: LabelProps) => (\n  <p\n    className={cn('tw:m-0 tw:text-sm tw:font-medium tw:text-muted-foreground', className)}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype ValueProps = ComponentProps<'p'>;\n\nconst StatCardValue = ({ className, children, ...rest }: ValueProps) => (\n  <p\n    className={cn(\n      'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-tight tw:tracking-tight tw:text-foreground',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </p>\n);\n\ntype TrendProps = ComponentProps<'span'> & {\n  /** Which way the metric moved — sets the semantic colour (`success` / `destructive` / muted). */\n  direction?: TrendDirection;\n  /** Optional leading icon (e.g. an arrow). */\n  icon?: ReactNode;\n};\n\nconst StatCardTrend = ({ className, direction = 'flat', icon, children, ...rest }: TrendProps) => (\n  <span className={trendClassnames({ direction, className })} {...rest}>\n    {icon}\n    {children}\n  </span>\n);\n\ntype FootnoteProps = ComponentProps<'p'>;\n\nconst StatCardFootnote = ({ className, children, ...rest }: FootnoteProps) => (\n  <p className={cn('tw:m-0 tw:text-xs tw:text-muted-foreground', className)} {...rest}>\n    {children}\n  </p>\n);\n\nexport const StatCard = StatCardRoot as typeof StatCardRoot & {\n  Icon: typeof StatCardIcon;\n  Label: typeof StatCardLabel;\n  Value: typeof StatCardValue;\n  Trend: typeof StatCardTrend;\n  Footnote: typeof StatCardFootnote;\n};\n\nStatCard.Icon = StatCardIcon;\nStatCard.Label = StatCardLabel;\nStatCard.Value = StatCardValue;\nStatCard.Trend = StatCardTrend;\nStatCard.Footnote = StatCardFootnote;\n\nexport type {\n  RootProps as StatCardProps,\n  TrendProps as StatCardTrendProps,\n  TrendDirection as StatCardTrendDirection,\n};\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst gridClassnames = cva(['tw:grid', 'tw:gap-4'], {\n  variants: {\n    columns: {\n      2: 'tw:grid-cols-1 tw:sm:grid-cols-2',\n      3: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3',\n      4: 'tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: 4,\n  },\n});\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof gridClassnames>;\n\n/**\n * Responsive strip of KPI tiles. Lay `StatCard`s inside it at the top of a dashboard.\n * `columns` caps the tiles per row on large screens; the grid collapses to one column on\n * mobile and two on small screens.\n */\nexport const StatCardGrid = ({ className, columns = 4, children, ...rest }: Props) => (\n  <div className={gridClassnames({ columns, className })} {...rest}>\n    {children}\n  </div>\n);\n\nexport type { Props as StatCardGridProps };\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,IACtB;CAAC;CAAkB;CAAmB;CAAY;CAAc;AAAgB,GAChF;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,WAAW,OACb;AACF,CACF;;;;;;;;;;;AAgBA,MAAM,gBAAgB,EAAE,WAAW,UAAU,WAAW,MAAM,GAAG,WAC/D,oBAAC,MAAD;CAAgB;CAAU,WAAW,GAAG,YAAY,SAAS;CAAG,MAAK;CAAQ,GAAI;CAC9E;AACG,CAAA;AAKR,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,WAC9C,oBAAC,OAAD;CACE,WAAW,GACT,4GACA,gDACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAKP,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GAAG,6DAA6D,SAAS;CACpF,GAAI;CAEH;AACA,CAAA;AAKL,MAAM,iBAAiB,EAAE,WAAW,UAAU,GAAG,WAC/C,oBAAC,KAAD;CACE,WAAW,GACT,6FACA,SACF;CACA,GAAI;CAEH;AACA,CAAA;AAUL,MAAM,iBAAiB,EAAE,WAAW,YAAY,QAAQ,MAAM,UAAU,GAAG,WACzE,qBAAC,QAAD;CAAM,WAAW,gBAAgB;EAAE;EAAW;CAAU,CAAC;CAAG,GAAI;CAAhE,UAAA,CACG,MACA,QACG;;AAKR,MAAM,oBAAoB,EAAE,WAAW,UAAU,GAAG,WAClD,oBAAC,KAAD;CAAG,WAAW,GAAG,8CAA8C,SAAS;CAAG,GAAI;CAC5E;AACA,CAAA;AAGL,MAAa,WAAW;AAQxB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,WAAW;;;ACjHpB,MAAM,iBAAiB,IAAI,CAAC,WAAW,UAAU,GAAG;CAClD,UAAU,EACR,SAAS;EACP,GAAG;EACH,GAAG;EACH,GAAG;CACL,EACF;CACA,iBAAiB,EACf,SAAS,EACX;AACF,CAAC;;;;;;AASD,MAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,UAAU,GAAG,WAClE,oBAAC,OAAD;CAAK,WAAW,eAAe;EAAE;EAAS;CAAU,CAAC;CAAG,GAAI;CACzD;AACE,CAAA"}

package/dist/internal/blocks/TextInput.js

@@ -1,13 +1,2 @@
-export { TextInput } from '../../chunk-HPMYYGP7.js';
-import '../../chunk-WKAUEL6I.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=TextInput.js.map
-//# sourceMappingURL=TextInput.js.map
+import { TextInput } from "../../TextInput-BGed-V13.js";
+export { TextInput };

package/dist/internal/blocks/Textarea.js

@@ -1,13 +1,32 @@
-export { Textarea } from '../../chunk-EEK5NGZF.js';
-import '../../chunk-WKAUEL6I.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=Textarea.js.map
+import { InputGroup } from "../../InputGroup-BJWsI35s.js";
+import { useControllableState } from "../../useControllableState-M6494mCT.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/Textarea/Textarea.tsx
+/**
+* Multi-line text input. Chrome resolves from the active brand automatically: a modern brand always
+* renders argo (any `variant` is ignored), while `variant` only tunes the legacy-brand chrome.
+*/
+const Textarea = ({ ref, containerClassName, state = "default", variant, sizing, focusVariant, value: valueProp, defaultValue, onValueChange, ...rest }) => {
+	const [value, setValue] = useControllableState({
+		prop: valueProp === void 0 ? void 0 : valueProp ?? "",
+		defaultProp: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ jsx(InputGroup, {
+		state,
+		sizing,
+		focusVariant,
+		variant,
+		className: containerClassName,
+		children: /* @__PURE__ */ jsx(InputGroup.TextArea, {
+			...rest,
+			ref,
+			value,
+			onValueChange: setValue
+		})
+	});
+};
+//#endregion
+export { Textarea };
+
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Textarea.js"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/blocks/Textarea/Textarea.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'sizing' | 'focusVariant' | 'state'\n>;\n\ntype TextareaNativeProps = Omit<\n  ComponentProps<typeof InputGroup.TextArea>,\n  'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype TextareaOwnProps = {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  onValueBlur?: (value: string) => void;\n  maxRows?: number | 'unlimited';\n  disableResize?: boolean;\n  containerClassName?: string;\n};\n\ntype Props = InputGroupProps & TextareaNativeProps & TextareaOwnProps;\n\n/**\n * Multi-line text input. Chrome resolves from the active brand automatically: a modern brand always\n * renders argo (any `variant` is ignored), while `variant` only tunes the legacy-brand chrome.\n */\nexport const Textarea = ({\n  ref,\n  containerClassName,\n\n  // group props\n  state = 'default',\n  variant,\n  sizing,\n  focusVariant,\n\n  // value handling\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n\n  ...rest\n}: Props) => {\n  const [value, setValue] = useControllableState<string>({\n    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled, coerced to ''.\n    prop: valueProp === undefined ? undefined : (valueProp ?? ''),\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  return (\n    <InputGroup\n      state={state}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      variant={variant}\n      className={containerClassName}\n    >\n      <InputGroup.TextArea {...rest} ref={ref} value={value} onValueChange={setValue} />\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;;;;AA+BA,MAAa,YAAY,EACvB,KACA,oBAGA,QAAQ,WACR,SACA,QACA,cAGA,OAAO,WACP,cACA,eAEA,GAAG,WACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAErD,MAAM,cAAc,KAAA,IAAY,KAAA,IAAa,aAAa;EAC1D,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,OACE,oBAAC,YAAD;EACS;EACC;EACM;EACL;EACT,WAAW;EAEX,UAAA,oBAAC,WAAW,UAAZ;GAAqB,GAAI;GAAW;GAAY;GAAO,eAAe;EAAW,CAAA;CACvE,CAAA;AAEhB"}

package/dist/internal/blocks/TimeInput.js

@@ -1,17 +1,77 @@
-export { TimeInput } from '../../chunk-RFDLHMKL.js';
-import '../../chunk-52NDNMK7.js';
-import '../../chunk-QQA37LFB.js';
-import '../../chunk-ON4BJTHI.js';
-import '../../chunk-WKAUEL6I.js';
-import '../../chunk-SC275NHZ.js';
-import '../../chunk-THHB4EWS.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=TimeInput.js.map
+import { createChangeInputEvent } from "../../utils-D0c5VAyF.js";
+import { mergeRefs } from "../utils/mergeRefs.js";
+import { Clock, X } from "../../icons-Cek151jC.js";
+import { InputGroup } from "../../InputGroup-BJWsI35s.js";
+import { useControllableState } from "../../useControllableState-M6494mCT.js";
+import { TimePicker } from "../../TimePicker-B_NegL-7.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/TimeInput/TimeInput.tsx
+const TimeInput = ({ ref, state, variant, focusVariant, sizing, className, value: valueProp, defaultValue, onValueChange, onValueBlur, onChange, onBlur, allowClear = false, disabled, readOnly, placeholder = "Select time", ...restInputProps }) => {
+	const inputRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue ?? null,
+		onChange: onValueChange
+	});
+	const canClear = allowClear && !!value && !disabled && !readOnly;
+	const showPicker = !disabled && !readOnly;
+	const handleChange = (event) => {
+		setValue(event.target.value || null);
+		onChange?.(event);
+	};
+	const handleBlur = (event) => {
+		onValueBlur?.(event.target.value || null);
+		onBlur?.(event);
+	};
+	const handleTimePickerSelect = (time) => {
+		setValue(time);
+	};
+	const handleClear = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+		setValue(null);
+		onChange?.(createChangeInputEvent(inputRef.current));
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+			...restInputProps,
+			ref: mergeRefs(ref ?? null, inputRef),
+			type: "time",
+			className: "tw:[&::-webkit-calendar-picker-indicator]:hidden tw:[&::-webkit-datetime-edit-fields-wrapper]:py-0",
+			value: value ?? "",
+			placeholder,
+			onChange: handleChange,
+			onBlur: handleBlur,
+			disabled,
+			readOnly
+		}), (canClear || showPicker) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
+			align: "inline-end",
+			children: [canClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+				"aria-label": "Clear time",
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+			}), showPicker && /* @__PURE__ */ jsx(TimePicker, {
+				open: isOpen,
+				onOpenChange: setIsOpen,
+				onSelect: handleTimePickerSelect,
+				selected: value,
+				children: /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": "Select time",
+					children: /* @__PURE__ */ jsx(Clock, { className: "tw:size-4" })
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { TimeInput };
+
 //# sourceMappingURL=TimeInput.js.map