@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-TUCDD33E.js

@@ -0,0 +1,246 @@
+import { Sparkles, Search, X } from './chunk-RQVK4IYC.js';
+import { noop, debounce, createPrefixedString } from './chunk-SWQFYNYG.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useState, useMemo, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+var ClearButton = ({ onClick, testId }) => {
+  const handleMouseDown = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      tabIndex: -1,
+      onMouseDown: handleMouseDown,
+      className: cn(
+        // reset
+        "tw:border-none",
+        "tw:bg-transparent",
+        "tw:p-0",
+        // positioning
+        "tw:flex",
+        "tw:items-center",
+        "tw:cursor-pointer",
+        "tw:text-muted-foreground",
+        "tw:hover:text-foreground"
+      ),
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+    }
+  );
+};
+var searchWrapperVariants = cva(
+  [
+    // positioning
+    "tw:flex",
+    "tw:items-center",
+    "tw:gap-2.5",
+    // base
+    "tw:text-card-foreground",
+    "tw:transition-all",
+    "tw:font-sans",
+    // readonly — `secondary` over `muted`, which is too close to the `card` fill to
+    // read as non-editable in either scheme
+    "tw:has-[input[readonly]]:bg-secondary",
+    "tw:has-[input[readonly]]:focus-within:ring-0",
+    "tw:has-[input[readonly]]:outline-0",
+    // disabled
+    "tw:disabled:opacity-40",
+    // default input padding (was sizing.default)
+    "tw:[&>input]:py-[15px]"
+  ],
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "tw:rounded-lg",
+          "tw:px-5",
+          "tw:bg-card",
+          "tw:shadow-raised",
+          // outline
+          "tw:outline",
+          "tw:outline-1",
+          "tw:outline-transparent",
+          // focus
+          "tw:has-[input:focus]:outline-1",
+          "tw:has-[input:focus]:ring-4",
+          "tw:has-[input:focus]:outline-ring",
+          "tw:has-[input:focus]:ring-ring/30"
+        ],
+        ai: [
+          "tailwindcss-preflight",
+          "tw:relative",
+          "tw:rounded-card",
+          "tw:px-4",
+          "tw:cursor-text",
+          "tw:border-2",
+          "tw:border-transparent",
+          "tw:bg-gradient-to-br",
+          "tw:from-secondary-600",
+          "tw:to-purple-600",
+          "tw:bg-origin-border",
+          // Floods the interior so the gradient shows only in the 2px border box.
+          "tw:shadow-[inset_0_100vw_rgb(var(--card))]",
+          // focus
+          "tw:has-[input:focus]:ring-4",
+          "tw:has-[input:focus]:ring-ring/30"
+        ]
+      }
+    }
+  }
+);
+var searchInputClassnames = [
+  // reset
+  "tw:border-none",
+  "tw:bg-transparent",
+  "tw:outline-hidden",
+  "tw:w-full",
+  "tw:p-0",
+  // base
+  "tw:text-base",
+  "tw:leading-6",
+  "tw:font-normal",
+  "tw:font-sans",
+  // placeholder
+  "tw:placeholder:text-muted-foreground",
+  // disabled
+  "tw:disabled:cursor-not-allowed"
+].join(" ");
+
+// src/components/Search/utils.ts
+var genSearchTestId = (prefix = "") => {
+  const ps = createPrefixedString(prefix);
+  return {
+    toString: () => prefix,
+    wrapper: ps`search-wrapper`,
+    input: ps`search-input`,
+    clearButton: ps`search-clear-button`
+  };
+};
+var Search2 = ({
+  ref,
+  suffix,
+  className,
+  onBlur,
+  onChange = noop,
+  disabled = false,
+  readOnly = false,
+  disableDebounce = false,
+  debounceDelay = 300,
+  value: externalValue,
+  defaultValue,
+  testId: prefixTestId = "",
+  placeholder = "Search",
+  onClear,
+  variant = "default",
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = useState(
+    () => externalValue != null ? externalValue : defaultValue
+  );
+  const hasValue = internalValue !== "";
+  const isClearButtonVisible = hasValue && !disabled && !readOnly;
+  const testId = genSearchTestId(prefixTestId);
+  const debouncedOnChange = useMemo(
+    () => disableDebounce ? onChange : debounce(onChange, debounceDelay),
+    [disableDebounce, debounceDelay, onChange]
+  );
+  useEffect(() => {
+    if (externalValue == null) return;
+    setInternalValue(externalValue);
+  }, [externalValue]);
+  const handleChange = (event) => {
+    const currentValue = event.target.value;
+    setInternalValue(currentValue);
+    debouncedOnChange(currentValue, event);
+  };
+  const handleBlur = (event) => {
+    const currentValue = event.target.value;
+    setInternalValue(currentValue);
+    onBlur?.(currentValue, event);
+  };
+  const handleClear = (event) => {
+    setInternalValue("");
+    onChange?.("", event);
+    onClear?.();
+  };
+  const handleWrapperMouseDown = (event) => {
+    if (disabled || readOnly) return;
+    if (event.target.closest('button, a, input, textarea, [role="button"]')) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.querySelector("input")?.focus();
+  };
+  return (
+    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the
+    // real interactive/focusable target, so no extra role or key handler is needed here.
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          searchWrapperVariants({ variant }),
+          {
+            "tw:cursor-not-allowed tw:opacity-40": disabled
+          },
+          className
+        ),
+        "data-testid": testId.wrapper,
+        onMouseDown: handleWrapperMouseDown,
+        children: [
+          variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw:size-4 tw:shrink-0 tw:text-neutral-400" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              placeholder,
+              "data-testid": testId.input,
+              type: "text",
+              value: internalValue ?? "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: searchInputClassnames,
+              disabled,
+              readOnly
+            }
+          ),
+          isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
+          suffix
+        ]
+      }
+    )
+  );
+};
+var SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const searchEl = event.currentTarget.elements.namedItem(name);
+    onSubmit(searchEl.value);
+  };
+  const onClear = () => {
+    onSubmit("");
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsx(
+    Search2,
+    {
+      ...props,
+      ref,
+      onClear,
+      name,
+      disableDebounce: true
+    }
+  ) });
+};
+
+export { Search2 as Search, SearchForm };
+//# sourceMappingURL=chunk-TUCDD33E.js.map
+//# sourceMappingURL=chunk-TUCDD33E.js.map

package/dist/chunk-TUCDD33E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"names":["Search","jsx"],"mappings":"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","file":"chunk-TUCDD33E.js","sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n  // Prevent default, as we do not want to lose input focus.\n  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      tabIndex={-1} // clear button should not be focusable\n      onMouseDown={handleMouseDown}\n      className={cn(\n        // reset\n        'tw:border-none',\n        'tw:bg-transparent',\n        'tw:p-0',\n\n        // positioning\n        'tw:flex',\n        'tw:items-center',\n\n        'tw:cursor-pointer',\n        'tw:text-muted-foreground',\n        'tw:hover:text-foreground',\n      )}\n      data-testid={testId}\n    >\n      <X className=\"tw:size-4\" />\n    </button>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n  [\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2.5',\n\n    // base\n    'tw:text-card-foreground',\n    'tw:transition-all',\n    'tw:font-sans',\n\n    // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n    // read as non-editable in either scheme\n    'tw:has-[input[readonly]]:bg-secondary',\n    'tw:has-[input[readonly]]:focus-within:ring-0',\n    'tw:has-[input[readonly]]:outline-0',\n\n    // disabled\n    'tw:disabled:opacity-40',\n\n    // default input padding (was sizing.default)\n    'tw:[&>input]:py-[15px]',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:rounded-lg',\n          'tw:px-5',\n          'tw:bg-card',\n          'tw:shadow-raised',\n          // outline\n          'tw:outline',\n          'tw:outline-1',\n          'tw:outline-transparent',\n          // focus\n          'tw:has-[input:focus]:outline-1',\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:outline-ring',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n        ai: [\n          'tailwindcss-preflight',\n          'tw:relative',\n          'tw:rounded-card',\n          'tw:px-4',\n          'tw:cursor-text',\n          'tw:border-2',\n          'tw:border-transparent',\n          'tw:bg-gradient-to-br',\n          'tw:from-secondary-600',\n          'tw:to-purple-600',\n          'tw:bg-origin-border',\n          // Floods the interior so the gradient shows only in the 2px border box.\n          'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n          // focus\n          'tw:has-[input:focus]:ring-4',\n          'tw:has-[input:focus]:ring-ring/30',\n        ],\n      },\n    },\n  },\n);\n\nexport const searchInputClassnames = [\n  // reset\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:outline-hidden',\n  'tw:w-full',\n  'tw:p-0',\n\n  // base\n  'tw:text-base',\n  'tw:leading-6',\n  'tw:font-normal',\n  'tw:font-sans',\n\n  // placeholder\n  'tw:placeholder:text-muted-foreground',\n\n  // disabled\n  'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n  const ps = createPrefixedString(prefix);\n  return {\n    toString: () => prefix,\n    wrapper: ps`search-wrapper`,\n    input: ps`search-input`,\n    clearButton: ps`search-clear-button`,\n  };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentProps,\n  FocusEvent,\n  FocusEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n  value: string,\n  event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n  suffix?: ReactNode;\n  disableDebounce?: boolean;\n  debounceDelay?: number;\n  onChange?: SearchChangeEventHandler;\n  onBlur?: SearchBlurEventHandler;\n  value?: string | null;\n  defaultValue?: string | null;\n  testId?: string;\n  onClear?: () => void;\n  variant?: 'default' | 'ai';\n} & Omit<\n  ComponentProps<'input'>,\n  'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'\n>;\n\n/**\n * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n */\nexport const Search = ({\n  ref,\n  suffix,\n  className,\n  onBlur,\n  onChange = noop,\n  disabled = false,\n  readOnly = false,\n  disableDebounce = false,\n  debounceDelay = 300,\n  value: externalValue,\n  defaultValue,\n  testId: prefixTestId = '',\n  placeholder = 'Search',\n  onClear,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const [internalValue, setInternalValue] = useState(() =>\n    externalValue != null ? externalValue : defaultValue,\n  );\n  const hasValue = internalValue !== '';\n\n  const isClearButtonVisible = hasValue && !disabled && !readOnly;\n  const testId = genSearchTestId(prefixTestId);\n\n  const debouncedOnChange = useMemo(\n    () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n    [disableDebounce, debounceDelay, onChange],\n  );\n\n  useEffect(() => {\n    if (externalValue == null) return; // uncontrolled state\n    // oxlint-disable-next-line react-x/set-state-in-effect\n    setInternalValue(externalValue);\n  }, [externalValue]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    debouncedOnChange(currentValue, event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const currentValue = event.target.value;\n    setInternalValue(currentValue);\n    onBlur?.(currentValue, event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setInternalValue('');\n    onChange?.('', event);\n    onClear?.();\n  };\n\n  // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n  // the empty chrome) focuses the input — the whole pill acts as one click target.\n  const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || readOnly) return;\n    if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n      return;\n    }\n    event.preventDefault();\n    event.currentTarget.querySelector('input')?.focus();\n  };\n\n  return (\n    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n    // real interactive/focusable target, so no extra role or key handler is needed here.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className={cn(\n        searchWrapperVariants({ variant }),\n        {\n          'tw:cursor-not-allowed tw:opacity-40': disabled,\n        },\n        className,\n      )}\n      data-testid={testId.wrapper}\n      onMouseDown={handleWrapperMouseDown}\n    >\n      {variant === 'ai' ? (\n        <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600\" />\n      ) : (\n        <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n      )}\n\n      <input\n        {...rest}\n        ref={ref}\n        placeholder={placeholder}\n        data-testid={testId.input}\n        type=\"text\"\n        value={internalValue ?? ''}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        className={searchInputClassnames}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n      {suffix}\n    </div>\n  );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n  onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n    event.preventDefault();\n    const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n    onSubmit(searchEl.value);\n  };\n\n  const onClear = () => {\n    onSubmit('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Search\n        {...props}\n        ref={ref}\n        onClear={onClear}\n        name={name}\n        // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n        disableDebounce\n      />\n    </form>\n  );\n};\n"]}

package/dist/chunk-TV4WAP2R.js

@@ -0,0 +1,14 @@
+import { useRef, useLayoutEffect, useCallback } from 'react';
+
+// src/hooks/useStableCallback.ts
+var useStableCallback = (callback) => {
+  const latestRef = useRef(callback);
+  useLayoutEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => latestRef.current(...args), []);
+};
+
+export { useStableCallback };
+//# sourceMappingURL=chunk-TV4WAP2R.js.map
+//# sourceMappingURL=chunk-TV4WAP2R.js.map

package/dist/chunk-TV4WAP2R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useStableCallback.ts"],"names":[],"mappings":";;;AAkBO,IAAM,iBAAA,GAAoB,CAC/B,QAAA,KACgC;AAChC,EAAA,MAAM,SAAA,GAAY,OAAO,QAAQ,CAAA;AAEjC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,SAAA,CAAU,OAAA,GAAU,QAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,OAAO,WAAA,CAAY,IAAI,IAAA,KAAe,SAAA,CAAU,QAAQ,GAAG,IAAI,CAAA,EAAG,EAAE,CAAA;AACtE","file":"chunk-TV4WAP2R.js","sourcesContent":["import { useCallback, useLayoutEffect, useRef } from 'react';\n\n/**\n * A callback with a permanently stable identity that always sees the latest\n * render's values — for any consumer that keys off the handler's identity: a\n * third-party component that redoes expensive work when it changes, or a\n * memoized context value.\n *\n * React 19.2's `useEffectEvent` does this in one line, but it is scoped to\n * Effects and explicitly not to be passed to another component, which is the\n * whole point here.\n *\n * The swap is a layout effect rather than a passive one so it lands before the\n * browser can paint and accept input against the previous render's handler. It\n * is still an effect, and a child's runs before its parent's — so a consumer\n * calling the returned function from its own layout effect can still see the\n * previous render's closure.\n */\nexport const useStableCallback = <Args extends unknown[], Result>(\n  callback: (...args: Args) => Result,\n): ((...args: Args) => Result) => {\n  const latestRef = useRef(callback);\n\n  useLayoutEffect(() => {\n    latestRef.current = callback;\n  }, [callback]);\n\n  return useCallback((...args: Args) => latestRef.current(...args), []);\n};\n"]}

package/dist/chunk-U3A6YBTZ.js

@@ -0,0 +1,134 @@
+import { useControllableState } from './chunk-WKAUEL6I.js';
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { ArrowBigUpDash, X, EyeOff, Eye } from './chunk-RQVK4IYC.js';
+import { createChangeInputEvent } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PasswordInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  onKeyDown,
+  onKeyUp,
+  onMouseDown,
+  allowClear = false,
+  allowPasswordToggle = false,
+  passwordToggleLabel,
+  autoComplete = "new-password",
+  defaultPasswordVisibility = false,
+  // input props
+  disabled,
+  readOnly,
+  ...restInputProps
+}) => {
+  const inputRef = useRef(null);
+  const [value, setValue] = useControllableState({
+    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.
+    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" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { PasswordInput };
+//# sourceMappingURL=chunk-U3A6YBTZ.js.map
+//# sourceMappingURL=chunk-U3A6YBTZ.js.map

package/dist/chunk-U3A6YBTZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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","file":"chunk-U3A6YBTZ.js","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"]}

package/dist/chunk-UGT6DKWM.js

@@ -0,0 +1,95 @@
+import { Textarea } from './chunk-EEK5NGZF.js';
+import { Loader2, CircleCheck } from './chunk-RQVK4IYC.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useState } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var AutoSaveTextarea = ({
+  savedValue,
+  onSave,
+  placeholder,
+  disabled,
+  grow = false,
+  ...textareaProps
+}) => {
+  const { maxLength, ...restTextareaProps } = textareaProps;
+  const [value, setValue] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const currentValue = value ?? savedValue ?? "";
+  const isOverLimit = maxLength != null && currentValue.length > maxLength;
+  const isChanged = value !== null && savedValue !== value.trim();
+  const onSaveHandler = (blurValue = "") => {
+    if (!isChanged || isOverLimit) return;
+    setIsSaving(true);
+    onSave(blurValue.trim()).catch(() => {
+    }).finally(() => {
+      setIsSaving(false);
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "tw:relative",
+        // `-mx-1 + px-3` gives the focus ring 4px of horizontal breathing room inside
+        // ancestors that clip with `overflow: hidden` and no horizontal padding (e.g. the
+        // Kai sidebar's TabsContent). `-my-1 + py-1` keeps the original zero vertical inset.
+        grow && "tw:-m-1 tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-hidden tw:px-3 tw:py-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ...restTextareaProps,
+            containerClassName: cn(
+              // Descendant selectors match InputGroup's `tw:[&>textarea]:!min-h-[…]` specificity
+              // so the textarea fills the wrapper instead of being pinned to the sizing min-height.
+              grow && "tw:min-h-0 tw:flex-1 tw:overflow-hidden tw:[&>textarea]:!min-h-full tw:[&>textarea]:!max-h-full tw:[&>textarea]:overflow-y-auto",
+              restTextareaProps.containerClassName
+            ),
+            state: isOverLimit ? "error" : void 0,
+            value: currentValue,
+            onValueChange: setValue,
+            onValueBlur: () => onSaveHandler(value ?? ""),
+            placeholder,
+            disabled: disabled || isSaving,
+            disableResize: grow,
+            maxRows: grow ? "unlimited" : restTextareaProps.maxRows
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "tw:mt-1 tw:flex tw:items-center tw:text-xs",
+              maxLength != null ? "tw:justify-between" : "tw:justify-end"
+            ),
+            children: [
+              maxLength != null && /* @__PURE__ */ jsxs("span", { className: cn(isOverLimit ? "tw:text-error-500" : "tw:text-neutral-400"), children: [
+                currentValue.length,
+                " / ",
+                maxLength
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "tw:flex tw:items-center tw:gap-1 tw:text-neutral-400", children: [
+                isOverLimit && "Character limit exceeded",
+                !isOverLimit && isChanged && !isSaving && "Unsaved",
+                !isOverLimit && isChanged && isSaving && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }),
+                  " Saving"
+                ] }),
+                !isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-4 tw:text-green-500" }),
+                  " Saved"
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { AutoSaveTextarea };
+//# sourceMappingURL=chunk-UGT6DKWM.js.map
+//# sourceMappingURL=chunk-UGT6DKWM.js.map

package/dist/chunk-UGT6DKWM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/AutoSaveTextarea/AutoSaveTextarea.tsx"],"names":[],"mappings":"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","file":"chunk-UGT6DKWM.js","sourcesContent":["import { type ComponentProps, useState } from 'react';\n\nimport { CircleCheck, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { Textarea } from '../Textarea';\n\ntype AutoSaveTextareaProps = {\n  savedValue?: string;\n  onSave: (value: string) => Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  grow?: boolean;\n} & Pick<\n  ComponentProps<typeof Textarea>,\n  'variant' | 'minRows' | 'maxRows' | 'className' | 'containerClassName' | 'maxLength'\n>;\n\nexport const AutoSaveTextarea = ({\n  savedValue,\n  onSave,\n  placeholder,\n  disabled,\n  grow = false,\n  ...textareaProps\n}: AutoSaveTextareaProps) => {\n  const { maxLength, ...restTextareaProps } = textareaProps;\n  const [value, setValue] = useState<string | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const currentValue = value ?? savedValue ?? '';\n  const isOverLimit = maxLength != null && currentValue.length > maxLength;\n  const isChanged = value !== null && savedValue !== value.trim();\n\n  const onSaveHandler = (blurValue = '') => {\n    if (!isChanged || isOverLimit) return;\n\n    setIsSaving(true);\n    onSave(blurValue.trim())\n      .catch(() => {})\n      .finally(() => {\n        setIsSaving(false);\n      });\n  };\n\n  return (\n    <div\n      className={cn(\n        'tw:relative',\n        // `-mx-1 + px-3` gives the focus ring 4px of horizontal breathing room inside\n        // ancestors that clip with `overflow: hidden` and no horizontal padding (e.g. the\n        // Kai sidebar's TabsContent). `-my-1 + py-1` keeps the original zero vertical inset.\n        grow &&\n          'tw:-m-1 tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-hidden tw:px-3 tw:py-1',\n      )}\n    >\n      <Textarea\n        {...restTextareaProps}\n        containerClassName={cn(\n          // Descendant selectors match InputGroup's `tw:[&>textarea]:!min-h-[…]` specificity\n          // so the textarea fills the wrapper instead of being pinned to the sizing min-height.\n          grow &&\n            'tw:min-h-0 tw:flex-1 tw:overflow-hidden tw:[&>textarea]:!min-h-full tw:[&>textarea]:!max-h-full tw:[&>textarea]:overflow-y-auto',\n          restTextareaProps.containerClassName,\n        )}\n        state={isOverLimit ? 'error' : undefined}\n        value={currentValue}\n        onValueChange={setValue}\n        onValueBlur={() => onSaveHandler(value ?? '')}\n        placeholder={placeholder}\n        disabled={disabled || isSaving}\n        disableResize={grow}\n        // `grow` fills the container regardless of content length; skip the 4-row cap.\n        maxRows={grow ? 'unlimited' : restTextareaProps.maxRows}\n      />\n      <div\n        className={cn(\n          'tw:mt-1 tw:flex tw:items-center tw:text-xs',\n          maxLength != null ? 'tw:justify-between' : 'tw:justify-end',\n        )}\n      >\n        {maxLength != null && (\n          <span className={cn(isOverLimit ? 'tw:text-error-500' : 'tw:text-neutral-400')}>\n            {currentValue.length} / {maxLength}\n          </span>\n        )}\n        <span className=\"tw:flex tw:items-center tw:gap-1 tw:text-neutral-400\">\n          {isOverLimit && 'Character limit exceeded'}\n          {!isOverLimit && isChanged && !isSaving && 'Unsaved'}\n          {!isOverLimit && isChanged && isSaving && (\n            <>\n              <Loader2 className=\"tw:size-4 tw:animate-spin\" /> Saving\n            </>\n          )}\n          {!isOverLimit && value !== null && !isChanged && !isSaving && (\n            <>\n              <CircleCheck className=\"tw:size-4 tw:text-green-500\" /> Saved\n            </>\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"]}