@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-VSERHUWD.js

@@ -0,0 +1,212 @@
+import { useControllableState } from './chunk-WKAUEL6I.js';
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { X, Pipette } from './chunk-RQVK4IYC.js';
+import { createChangeInputEvent } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/blocks/ColorInput/utils.ts
+var HEX_CHARSET = /^[0-9a-fA-F]+$/;
+var COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var MAX_HEX_BODY_LENGTH = 8;
+var PICKER_FALLBACK = "#000000";
+var extractHexBody = (value) => {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  return trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+};
+var isCompleteHexColor = (value) => COMPLETE_HEX_PATTERN.test(value);
+var showPicker = (input) => {
+  const isShowPickerSupported = "showPicker" in HTMLInputElement.prototype;
+  isShowPickerSupported ? input.showPicker() : input.click();
+};
+var coerceHexInputValue = (value) => {
+  const body = extractHexBody(value);
+  if (body === null) return "";
+  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];
+  if (!validBody) return "";
+  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;
+};
+var coerceColorPickerValue = (value) => {
+  const body = extractHexBody(value);
+  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
+  if (body.length === 3 || body.length === 4) {
+    const [r, g, b] = body;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  if (body.length === 6 || body.length === 8) {
+    return `#${body.slice(0, 6).toLowerCase()}`;
+  }
+  return PICKER_FALLBACK;
+};
+var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
+  const pickerRef = useRef(null);
+  const handleOpenPicker = () => {
+    if (!pickerRef.current) return;
+    showPicker(pickerRef.current);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tw:relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref: pickerRef,
+        type: "color",
+        value: coerceColorPickerValue(value),
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: "tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0",
+        disabled,
+        readOnly
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroup.Button,
+      {
+        onMouseDown: (event) => event.preventDefault(),
+        disabled: disabled || readOnly,
+        onClick: handleOpenPicker,
+        "aria-label": "Pick color",
+        children: /* @__PURE__ */ jsx(Pipette, { className: "tw:size-4" })
+      }
+    )
+  ] });
+};
+var ColorInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value: valueProp,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  defaultValue,
+  allowClear = 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 isControlled = valueProp !== void 0;
+  const canClear = allowClear && !!value && !disabled && !readOnly;
+  const swatchColor = coerceHexInputValue(value);
+  const isValidSwatch = isCompleteHexColor(swatchColor);
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    const newValue = event.target.value;
+    const sanitizedNewValue = coerceHexInputValue(newValue);
+    if (sanitizedNewValue !== newValue) {
+      if (!isControlled) event.target.value = sanitizedNewValue;
+      setValue(sanitizedNewValue);
+    }
+    onValueBlur?.(sanitizedNewValue);
+    onBlur?.(event);
+  };
+  const handlePickerChange = (event) => {
+    setValue(coerceHexInputValue(event.target.value));
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setValue("");
+    onChange?.(createChangeInputEvent(inputRef.current));
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          InputGroup.Addon,
+          {
+            align: "inline-start",
+            className: cn(
+              { "tw:-ml-7 tw:opacity-0": !value },
+              "tw:transition-[opacity,margin]",
+              "tw:ease-linear",
+              "tw:duration-200"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: isValidSwatch ? { background: swatchColor } : void 0,
+                className: cn(
+                  "tw:size-5",
+                  "tw:shrink-0",
+                  "tw:rounded-sm",
+                  "tw:border",
+                  "tw:border-solid",
+                  "tw:border-neutral-300",
+                  {
+                    "tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]": !isValidSwatch
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...restInputProps,
+            type: "text",
+            ref: mergeRefs(ref ?? null, inputRef),
+            value,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            disabled,
+            readOnly
+          }
+        ),
+        /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          canClear && /* @__PURE__ */ jsx(
+            InputGroup.Button,
+            {
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorPicker,
+            {
+              disabled,
+              readOnly,
+              value,
+              onChange: handlePickerChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { ColorInput };
+//# sourceMappingURL=chunk-VSERHUWD.js.map
+//# sourceMappingURL=chunk-VSERHUWD.js.map

package/dist/chunk-VSERHUWD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/ColorInput/utils.ts","../src/blocks/ColorInput/ColorPicker.tsx","../src/blocks/ColorInput/ColorInput.tsx"],"names":["useRef","jsxs","jsx"],"mappings":"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","file":"chunk-VSERHUWD.js","sourcesContent":["import type { ComponentProps } from 'react';\n\nconst HEX_CHARSET = /^[0-9a-fA-F]+$/;\n// `#` + 3, 4, 6, or 8 hex digits — every length CSS accepts as a hex color.\nconst COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n// Longest hex body CSS accepts (`#rrggbbaa` without the hash).\nconst MAX_HEX_BODY_LENGTH = 8;\n// Native <input type=\"color\"> default when fed anything unparseable.\nconst PICKER_FALLBACK = '#000000';\n\nconst extractHexBody = (value: unknown): string | null => {\n  if (typeof value !== 'string') return null;\n  const trimmed = value.trim();\n  if (trimmed === '') return null;\n  return trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;\n};\n\nexport const isCompleteHexColor = (value: string): boolean => COMPLETE_HEX_PATTERN.test(value);\n\n// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker\nexport const showPicker = (input: HTMLInputElement) => {\n  const isShowPickerSupported = 'showPicker' in HTMLInputElement.prototype;\n  isShowPickerSupported ? input.showPicker() : input.click();\n};\n\n/**\n * Coerces free-form text into a partial hex color for the visible text\n * input. Allows up to 8 hex digits to support `#rrggbbaa` (RGBA / alpha).\n *\n * Behaviour:\n * - empty / null / undefined / non-string → `''`\n * - trims surrounding whitespace\n * - prepends `#` when the user types raw hex without it\n * - keeps only the leading run of valid hex digits, dropping the rest\n * - caps total length at `# + 8` hex digits\n * - returns `''` when no valid hex digits remain (e.g. bare `#`, `zz`) so\n *   the input doesn't sit on a lonely `#`\n *\n * Note: the result may be a *prefix* (e.g. `#a`, `#ab`) that is not yet a\n * valid CSS color — gate any rendering on `isCompleteHexColor`.\n */\nexport const coerceHexInputValue = (value?: string | null): string => {\n  const body = extractHexBody(value);\n  if (body === null) return '';\n  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];\n  if (!validBody) return '';\n  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;\n};\n\n/**\n * Coerces any value into the strict lowercase `#rrggbb` form required by the\n * native `<input type=\"color\">`. Anything the picker can't render is\n * collapsed to `#000000`.\n *\n * - 3-digit shorthand (`#abc`) → expanded to 6 digits (`#aabbcc`)\n * - 4/8-digit RGBA → alpha channel is dropped\n * - invalid characters, wrong length, or non-string types → `#000000`\n *\n * The native picker silently lowercases its value; we lowercase here too so\n * controlled consumers see the same string round-trip.\n */\nexport const coerceColorPickerValue = (value: ComponentProps<'input'>['value'] | null) => {\n  const body = extractHexBody(value);\n  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;\n\n  if (body.length === 3 || body.length === 4) {\n    const [r, g, b] = body;\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n  }\n  if (body.length === 6 || body.length === 8) {\n    return `#${body.slice(0, 6).toLowerCase()}`;\n  }\n  return PICKER_FALLBACK;\n};\n","import { type ComponentProps, type ComponentRef, useRef } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Pipette } from '../../icons';\n\nimport { coerceColorPickerValue, showPicker } from './utils';\n\ntype Props = Omit<ComponentProps<'input'>, 'type'>;\n\nexport const ColorPicker = ({ value, disabled, readOnly, ...props }: Props) => {\n  const pickerRef = useRef<ComponentRef<'input'>>(null);\n\n  const handleOpenPicker = () => {\n    if (!pickerRef.current) return;\n    showPicker(pickerRef.current);\n  };\n\n  return (\n    <div className=\"tw:relative\">\n      <input\n        {...props}\n        ref={pickerRef}\n        type=\"color\"\n        value={coerceColorPickerValue(value)}\n        tabIndex={-1}\n        aria-hidden\n        className=\"tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0\"\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n      <InputGroup.Button\n        onMouseDown={(event) => event.preventDefault()}\n        disabled={disabled || readOnly}\n        onClick={handleOpenPicker}\n        aria-label=\"Pick color\"\n      >\n        <Pipette className=\"tw:size-4\" />\n      </InputGroup.Button>\n    </div>\n  );\n};\n","import { useRef } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { cn, createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { ColorPicker } from './ColorPicker';\nimport { coerceHexInputValue, isCompleteHexColor } from './utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\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  };\n\nexport const ColorInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  defaultValue,\n  allowClear = 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 isControlled = valueProp !== undefined;\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n  const swatchColor = coerceHexInputValue(value);\n  const isValidSwatch = isCompleteHexColor(swatchColor);\n\n  // Preserve raw text while the user is typing — sanitise on blur.\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    const sanitizedNewValue = coerceHexInputValue(newValue);\n\n    if (sanitizedNewValue !== newValue) {\n      // In controlled mode, let the parent decide whether to apply the\n      // sanitised value via `onValueChange` — don't fight its `value` prop.\n      if (!isControlled) event.target.value = sanitizedNewValue;\n      setValue(sanitizedNewValue);\n    }\n\n    onValueBlur?.(sanitizedNewValue);\n    onBlur?.(event);\n  };\n\n  const handlePickerChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(coerceHexInputValue(event.target.value));\n    onChange?.(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  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Addon\n        align=\"inline-start\"\n        className={cn(\n          { 'tw:-ml-7 tw:opacity-0': !value },\n          'tw:transition-[opacity,margin]',\n          'tw:ease-linear',\n          'tw:duration-200',\n        )}\n      >\n        <div\n          style={isValidSwatch ? { background: swatchColor } : undefined}\n          className={cn(\n            'tw:size-5',\n            'tw:shrink-0',\n            'tw:rounded-sm',\n            'tw:border',\n            'tw:border-solid',\n            'tw:border-neutral-300',\n            {\n              'tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]':\n                !isValidSwatch,\n            },\n          )}\n        />\n      </InputGroup.Addon>\n\n      <InputGroup.Input\n        {...restInputProps}\n        type=\"text\"\n        ref={mergeRefs(ref ?? null, inputRef)}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      <InputGroup.Addon align=\"inline-end\">\n        {canClear && (\n          <InputGroup.Button\n            // prevents input focus stealing\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            aria-label=\"Clear color\"\n          >\n            <X className=\"tw:size-4\" />\n          </InputGroup.Button>\n        )}\n        <ColorPicker\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          onChange={handlePickerChange}\n        />\n      </InputGroup.Addon>\n    </InputGroup>\n  );\n};\n"]}

package/dist/chunk-VYG7BDXC.js

@@ -0,0 +1,49 @@
+import { useElement } from './chunk-MWS4VCLV.js';
+import { useState, useEffect } from 'react';
+
+var calcPosition = ({
+  scrollHeight,
+  clientHeight,
+  scrollTop
+}) => {
+  if (scrollHeight <= clientHeight) return "none";
+  if (scrollTop === 0) return "top";
+  if (scrollTop + clientHeight >= scrollHeight - 1) return "bottom";
+  return "middle";
+};
+var useScrollbarPosition = () => {
+  const [element, setElement] = useElement();
+  const [scrollbarPosition, setPosition] = useState("none");
+  useEffect(() => {
+    if (element === null) return;
+    const updatePosition = () => {
+      if (element === null) return;
+      const position = calcPosition({
+        scrollHeight: element.scrollHeight,
+        clientHeight: element.clientHeight,
+        scrollTop: element.scrollTop
+      });
+      setPosition(position);
+    };
+    const rafId = requestAnimationFrame(updatePosition);
+    element.addEventListener("scroll", updatePosition);
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(element);
+    return () => {
+      cancelAnimationFrame(rafId);
+      element.removeEventListener("scroll", updatePosition);
+      resizeObserver.disconnect();
+    };
+  }, [element]);
+  return {
+    setElement,
+    isTop: scrollbarPosition === "top",
+    isBottom: scrollbarPosition === "bottom",
+    isMiddle: scrollbarPosition === "middle",
+    isNone: scrollbarPosition === "none"
+  };
+};
+
+export { useScrollbarPosition };
+//# sourceMappingURL=chunk-VYG7BDXC.js.map
+//# sourceMappingURL=chunk-VYG7BDXC.js.map

package/dist/chunk-VYG7BDXC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useScrollbarPosition.ts"],"names":[],"mappings":";;;AAIA,IAAM,eAAe,CAAC;AAAA,EACpB,YAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAIM;AAEJ,EAAA,IAAI,YAAA,IAAgB,cAAc,OAAO,MAAA;AAEzC,EAAA,IAAI,SAAA,KAAc,GAAG,OAAO,KAAA;AAG5B,EAAA,IAAI,SAAA,GAAY,YAAA,IAAgB,YAAA,GAAe,CAAA,EAAG,OAAO,QAAA;AAEzD,EAAA,OAAO,QAAA;AACT,CAAA;AAEO,IAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,UAAA,EAAW;AACzC,EAAA,MAAM,CAAC,iBAAA,EAAmB,WAAW,CAAA,GAAI,SAA0C,MAAM,CAAA;AAEzF,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAY,IAAA,EAAM;AAEtB,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,YAAY,IAAA,EAAM;AAEtB,MAAA,MAAM,WAAW,YAAA,CAAa;AAAA,QAC5B,cAAc,OAAA,CAAQ,YAAA;AAAA,QACtB,cAAc,OAAA,CAAQ,YAAA;AAAA,QACtB,WAAW,OAAA,CAAQ;AAAA,OACpB,CAAA;AAED,MAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,IACtB,CAAA;AAGA,IAAA,MAAM,KAAA,GAAQ,sBAAsB,cAAc,CAAA;AAGlD,IAAA,OAAA,CAAQ,gBAAA,CAAiB,UAAU,cAAc,CAAA;AAGjD,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,cAAc,CAAA;AACxD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,MAAA,OAAA,CAAQ,mBAAA,CAAoB,UAAU,cAAc,CAAA;AACpD,MAAA,cAAA,CAAe,UAAA,EAAW;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,OAAO,iBAAA,KAAsB,KAAA;AAAA,IAC7B,UAAU,iBAAA,KAAsB,QAAA;AAAA,IAChC,UAAU,iBAAA,KAAsB,QAAA;AAAA,IAChC,QAAQ,iBAAA,KAAsB;AAAA,GAChC;AACF","file":"chunk-VYG7BDXC.js","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useElement } from './useElement';\n\nconst calcPosition = ({\n  scrollHeight,\n  clientHeight,\n  scrollTop,\n}: {\n  scrollHeight: number;\n  clientHeight: number;\n  scrollTop: number;\n}) => {\n  // If content doesn't overflow, no scrollbar\n  if (scrollHeight <= clientHeight) return 'none';\n\n  if (scrollTop === 0) return 'top';\n\n  // At the bottom (with small tolerance for precision issues)\n  if (scrollTop + clientHeight >= scrollHeight - 1) return 'bottom';\n\n  return 'middle';\n};\n\nexport const useScrollbarPosition = () => {\n  const [element, setElement] = useElement();\n  const [scrollbarPosition, setPosition] = useState<ReturnType<typeof calcPosition>>('none');\n\n  useEffect(() => {\n    if (element === null) return;\n\n    const updatePosition = () => {\n      if (element === null) return;\n\n      const position = calcPosition({\n        scrollHeight: element.scrollHeight,\n        clientHeight: element.clientHeight,\n        scrollTop: element.scrollTop,\n      });\n\n      setPosition(position);\n    };\n\n    // Initial check.\n    const rafId = requestAnimationFrame(updatePosition);\n\n    // Listening for scroll events.\n    element.addEventListener('scroll', updatePosition);\n\n    // Listen for the resize event that might affect scrollbar visibility.\n    const resizeObserver = new ResizeObserver(updatePosition);\n    resizeObserver.observe(element);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      element.removeEventListener('scroll', updatePosition);\n      resizeObserver.disconnect();\n    };\n  }, [element]);\n\n  return {\n    setElement,\n    isTop: scrollbarPosition === 'top',\n    isBottom: scrollbarPosition === 'bottom',\n    isMiddle: scrollbarPosition === 'middle',\n    isNone: scrollbarPosition === 'none',\n  };\n};\n"]}

package/dist/chunk-WETKNYZX.js

@@ -0,0 +1,52 @@
+import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
+import { createContext, use } from 'react';
+
+// src/components/ThemeProvider/defaults.ts
+
+// src/components/ThemeProvider/utils.ts
+var createTheme = (brand) => ({
+  id: brand.id,
+  name: brand.name,
+  shell: brand.shell,
+  logo: brand.logo
+});
+var createCssVars = () => {
+  const vars = {};
+  return {
+    set: (name, value) => {
+      if (value !== void 0) vars[name] = value;
+    },
+    expose: () => ({ ...vars })
+  };
+};
+
+// src/components/ThemeProvider/defaults.ts
+var keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
+var DEFAULT_COLOR_SCHEME = "light";
+var DEFAULT_BRAND_ID = "design-system";
+var defaultBrand = {
+  id: DEFAULT_BRAND_ID,
+  name: "Design System",
+  shell: "sidebar",
+  theme: {}
+};
+var defaultTheme = createTheme(defaultBrand);
+var DEFAULT_BRANDS = [];
+var noop = () => void 0;
+var defaultContext = {
+  scheme: DEFAULT_COLOR_SCHEME,
+  resolvedScheme: DEFAULT_COLOR_SCHEME,
+  setScheme: noop,
+  brandId: defaultTheme.id,
+  setBrand: noop,
+  themes: [defaultTheme],
+  currentTheme: defaultTheme
+};
+var ThemeContext = createContext(defaultContext);
+var useTheme = () => use(ThemeContext);
+var ArgoDesignContext = createContext(true);
+var useArgoDesign = () => use(ArgoDesignContext);
+
+export { ArgoDesignContext, DEFAULT_BRANDS, DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME, ThemeContext, createCssVars, createTheme, defaultBrand, keboolaLegacyIds, useArgoDesign, useTheme };
+//# sourceMappingURL=chunk-WETKNYZX.js.map
+//# sourceMappingURL=chunk-WETKNYZX.js.map

package/dist/chunk-WETKNYZX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeProvider/utils.ts","../src/components/ThemeProvider/defaults.ts","../src/components/ThemeProvider/context.tsx"],"names":[],"mappings":";;;;;;AAIO,IAAM,WAAA,GAAc,CAAC,KAAA,MAAyB;AAAA,EACnD,IAAI,KAAA,CAAM,EAAA;AAAA,EACV,MAAM,KAAA,CAAM,IAAA;AAAA,EACZ,OAAO,KAAA,CAAM,KAAA;AAAA,EACb,MAAM,KAAA,CAAM;AACd,CAAA;AAOO,IAAM,gBAAgB,MAAe;AAC1C,EAAA,MAAM,OAA+B,EAAC;AACtC,EAAA,OAAO;AAAA,IACL,GAAA,EAAK,CAAC,IAAA,EAAM,KAAA,KAAU;AACpB,MAAA,IAAI,KAAA,KAAU,MAAA,EAAW,IAAA,CAAK,IAAI,CAAA,GAAI,KAAA;AAAA,IACxC,CAAA;AAAA,IACA,MAAA,EAAQ,OAAO,EAAE,GAAG,IAAA,EAAK;AAAA,GAC3B;AACF;;;AClBO,IAAM,gBAAA,GAAmB,CAAC,oBAAA,CAAqB,EAAA,EAAI,oBAAoB,EAAE;AACzE,IAAM,oBAAA,GAA4C;AAKlD,IAAM,gBAAA,GAAmB;AAIzB,IAAM,YAAA,GAAsB;AAAA,EACjC,EAAA,EAAI,gBAAA;AAAA,EACJ,IAAA,EAAM,eAAA;AAAA,EACN,KAAA,EAAO,SAAA;AAAA,EACP,OAAO;AACT;AACO,IAAM,YAAA,GAAe,YAAY,YAAY,CAAA;AAE7C,IAAM,iBAA0B;ACXvC,IAAM,OAAO,MAAM,MAAA;AAEnB,IAAM,cAAA,GAAoC;AAAA,EACxC,MAAA,EAAQ,oBAAA;AAAA,EACR,cAAA,EAAgB,oBAAA;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,SAAS,YAAA,CAAa,EAAA;AAAA,EACtB,QAAA,EAAU,IAAA;AAAA,EAEV,MAAA,EAAQ,CAAC,YAAY,CAAA;AAAA,EACrB,YAAA,EAAc;AAChB,CAAA;AAEO,IAAM,YAAA,GAAe,cAAc,cAAc;AAEjD,IAAM,QAAA,GAAW,MAAM,GAAA,CAAI,YAAY;AAavC,IAAM,iBAAA,GAAoB,cAAuB,IAAI;AAErD,IAAM,aAAA,GAAgB,MAAM,GAAA,CAAI,iBAAiB","file":"chunk-WETKNYZX.js","sourcesContent":["import type { Brand } from '@keboola/brand-registry';\n\nimport type { Theme } from './types';\n\nexport const createTheme = (brand: Brand): Theme => ({\n  id: brand.id,\n  name: brand.name,\n  shell: brand.shell,\n  logo: brand.logo,\n});\n\nexport type CssVars = {\n  set: (name: string, value: string | undefined) => void;\n  expose: () => Record<string, string>;\n};\n\nexport const createCssVars = (): CssVars => {\n  const vars: Record<string, string> = {};\n  return {\n    set: (name, value) => {\n      if (value !== undefined) vars[name] = value;\n    },\n    expose: () => ({ ...vars }),\n  };\n};\n","import type { Brand } from '@keboola/brand-registry';\nimport { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createTheme } from './utils';\n\nexport const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];\nexport const DEFAULT_COLOR_SCHEME: ResolvedColorScheme = 'light';\n\n// Sentinel active-brand id that maps to no registry brand. It resolves to\n// `defaultBrand` below, whose empty theme injects nothing — so the design-system\n// stylesheet defaults (`:root` / `[data-theme='dark']`) provide every token.\nexport const DEFAULT_BRAND_ID = 'design-system';\n\n// The \"no brand\" fallback: an empty theme → no CSS vars injected → the\n// stylesheet defaults win. Its shell/name still drive AppShell + switcher label.\nexport const defaultBrand: Brand = {\n  id: DEFAULT_BRAND_ID,\n  name: 'Design System',\n  shell: 'sidebar',\n  theme: {},\n};\nexport const defaultTheme = createTheme(defaultBrand);\n\nexport const DEFAULT_BRANDS: Brand[] = [];\n","import { createContext, use } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME, defaultTheme } from './defaults';\nimport type { Theme } from './types';\nimport type { useBrandState } from './useBrandState';\nimport type { useColorSchemeState } from './useColorSchemeState';\n\nexport type ThemeContextValue = ReturnType<typeof useColorSchemeState> &\n  ReturnType<typeof useBrandState> & {\n    themes: Theme[];\n    currentTheme: Theme;\n  };\n\nconst noop = () => void 0;\n\nconst defaultContext: ThemeContextValue = {\n  scheme: DEFAULT_COLOR_SCHEME,\n  resolvedScheme: DEFAULT_COLOR_SCHEME,\n  setScheme: noop,\n  brandId: defaultTheme.id,\n  setBrand: noop,\n\n  themes: [defaultTheme],\n  currentTheme: defaultTheme,\n};\n\nexport const ThemeContext = createContext(defaultContext);\n\nexport const useTheme = () => use(ThemeContext);\n\n/**\n * TEMPORARY — kbc-ui-internal only.\n *\n * Flags whether the subtree renders the argo design language. Defaults to argo\n * (`true`) — the modern default; legacy chrome is the exception. It exists\n * solely to bridge kbc-ui while its chrome is migrated off the legacy design\n * language: kbc-ui provides `false` for legacy brands/surfaces (see its\n * `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does\n * not set it — argo is decoupled from the brand. Once every kbc-ui surface has\n * been migrated, this context and its hook can be deleted.\n */\nexport const ArgoDesignContext = createContext<boolean>(true);\n\nexport const useArgoDesign = () => use(ArgoDesignContext);\n"]}

package/dist/chunk-WGG4AML3.js

@@ -0,0 +1,216 @@
+import { useElement } from './chunk-MWS4VCLV.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { Root } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var CONNECTOR_MARGIN_TOP = 8;
+var useLastLineHeight = () => {
+  const [wrapper, setWrapper] = useElement();
+  const [connector2, setConnector] = useElement();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (wrapper === null) return;
+    if (connector2 === null) return;
+    const updateHeight = () => {
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const connectorRect = connector2.getBoundingClientRect();
+      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;
+      setHeight(distance);
+    };
+    const rafId = requestAnimationFrame(updateHeight);
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [wrapper, connector2]);
+  return {
+    height,
+    setWrapper,
+    setConnector
+  };
+};
+var connectorWrapper = cva(
+  [
+    "tw:grow",
+    "tw:min-h-8",
+    "tw:py-2",
+    // layout
+    "tw:flex",
+    "tw:justify-center",
+    // CONNECTOR LINE
+    "tw:relative",
+    "tw:before:absolute",
+    "tw:before:self-start",
+    // Centered on x-axis
+    "tw:before:left-1/2",
+    "tw:before:-translate-x-1/2",
+    "tw:before:w-px",
+    "tw:before:h-full",
+    "tw:before:group-last/timeline-item:h-(--connector-line-height)",
+    // Solid line
+    "tw:before:group-data-[variant=solid]/timeline:bg-border",
+    // Dashed line using gradient
+    "tw:before:group-data-[variant=dashed]/timeline:bg-gradient-to-b",
+    "tw:before:group-data-[variant=dashed]/timeline:from-border",
+    "tw:before:group-data-[variant=dashed]/timeline:from-50%",
+    "tw:before:group-data-[variant=dashed]/timeline:to-transparent",
+    "tw:before:group-data-[variant=dashed]/timeline:to-50%",
+    "tw:before:group-data-[variant=dashed]/timeline:bg-[length:1px_4px]"
+  ],
+  {
+    defaultVariants: {
+      align: "start"
+    },
+    variants: {
+      align: {
+        start: ["tw:items-start"],
+        center: ["tw:items-center"],
+        end: ["tw:items-end"],
+        baseline: ["tw:items-baseline"]
+      }
+    }
+  }
+);
+var connector = cva(
+  [
+    // ensure that it is always above the connector line.
+    "tw:z-10",
+    "tw:relative"
+  ],
+  {
+    defaultVariants: {
+      variant: "label"
+    },
+    variants: {
+      variant: {
+        none: [],
+        label: [
+          "tw:bg-muted",
+          "tw:text-muted-foreground",
+          "tw:rounded",
+          "tw:p-1.5",
+          "tw:text-nowrap",
+          "tw:text-xs"
+        ],
+        icon: [
+          "tw:bg-background",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+          "tw:[&_svg]:text-muted-foreground"
+        ],
+        line: [
+          "tw:min-w-8",
+          "tw:overflow-hidden",
+          "tw:w-full",
+          // height of the curved corner
+          "tw:h-1",
+          // small offset from top and bottom
+          "tw:my-1.5",
+          // positioning
+          "tw:relative",
+          "tw:before:absolute",
+          "tw:before:left-1/2",
+          "tw:before:bottom-0",
+          // sizing
+          "tw:before:w-full",
+          "tw:before:h-full",
+          // l-shape
+          "tw:before:border-l",
+          "tw:before:border-b",
+          "tw:before:border-border",
+          "tw:before:rounded-bl",
+          // Solid or dashed
+          "tw:before:group-data-[variant=dashed]/timeline:border-dashed",
+          "tw:before:group-data-[variant=solid]/timeline:!border-solid"
+        ]
+      }
+    }
+  }
+);
+var TimelineConnector = ({
+  className,
+  children,
+  asChild,
+  variant,
+  align,
+  offset = 0,
+  style,
+  ...rest
+}) => {
+  const Comp = asChild ? Root : "div";
+  const { setConnector, setWrapper, height } = useLastLineHeight();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setWrapper,
+      style: {
+        "--connector-line-height": `${height}px`
+      },
+      className: connectorWrapper({
+        align
+      }),
+      children: /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ...rest,
+          ref: setConnector,
+          style: {
+            top: align === "end" ? -offset : offset,
+            ...style
+          },
+          className: connector({ variant, className }),
+          children
+        }
+      )
+    }
+  );
+};
+var TimelineContent = ({ className, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...rest,
+    "data-slot": "timeline-content",
+    className: cn(
+      "tw:flex",
+      // spacing in between timeline items
+      "tw:py-2",
+      className
+    )
+  }
+);
+var TimelineItem = ({ className, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      className: cn("tw:contents", "tw:relative", "tw:group/timeline-item", className)
+    }
+  );
+};
+var Timeline = ({ className, variant = "dashed", ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...rest,
+      "data-variant": variant,
+      className: cn(
+        "tailwindcss-preflight",
+        "tw:overflow-y-hidden",
+        // reset default styling
+        "tw:p-0",
+        "tw:grid",
+        "tw:grid-cols-[auto_minmax(0,1fr)]",
+        "tw:group/timeline",
+        "tw:gap-x-4",
+        className
+      )
+    }
+  );
+};
+Timeline.Item = TimelineItem;
+Timeline.Content = TimelineContent;
+Timeline.Connector = TimelineConnector;
+
+export { Timeline };
+//# sourceMappingURL=chunk-WGG4AML3.js.map
+//# sourceMappingURL=chunk-WGG4AML3.js.map

package/dist/chunk-WGG4AML3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timeline/useLastLineHeight.ts","../src/components/Timeline/TimelineConnector.tsx","../src/components/Timeline/TimelineContent.tsx","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"names":["connector","jsx"],"mappings":";;;;;;;AAIA,IAAM,oBAAA,GAAuB,CAAA;AAEtB,IAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,UAAA,EAAW;AACzC,EAAA,MAAM,CAACA,UAAAA,EAAW,YAAY,CAAA,GAAI,UAAA,EAAW;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,CAAC,CAAA;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAY,IAAA,EAAM;AACtB,IAAA,IAAIA,eAAc,IAAA,EAAM;AAExB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,MAAM,WAAA,GAAc,QAAQ,qBAAA,EAAsB;AAClD,MAAA,MAAM,aAAA,GAAgBA,WAAU,qBAAA,EAAsB;AACtD,MAAA,MAAM,QAAA,GAAW,aAAA,CAAc,GAAA,GAAM,WAAA,CAAY,GAAA,GAAM,oBAAA;AACvD,MAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,IACpB,CAAA;AAGA,IAAA,MAAM,KAAA,GAAQ,sBAAsB,YAAY,CAAA;AAEhD,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAASA,UAAS,CAAC,CAAA;AAEvB,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AC5BA,IAAM,gBAAA,GAAmB,GAAA;AAAA,EACvB;AAAA,IACE,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAGA,SAAA;AAAA,IACA,mBAAA;AAAA;AAAA,IAGA,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,sBAAA;AAAA;AAAA,IAGA,oBAAA;AAAA,IACA,4BAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,gEAAA;AAAA;AAAA,IAGA,yDAAA;AAAA;AAAA,IAGA,iEAAA;AAAA,IACA,4DAAA;AAAA,IACA,yDAAA;AAAA,IACA,+DAAA;AAAA,IACA,uDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,CAAC,gBAAgB,CAAA;AAAA,QACxB,MAAA,EAAQ,CAAC,iBAAiB,CAAA;AAAA,QAC1B,GAAA,EAAK,CAAC,cAAc,CAAA;AAAA,QACpB,QAAA,EAAU,CAAC,mBAAmB;AAAA;AAChC;AACF;AAEJ,CAAA;AAEA,IAAM,SAAA,GAAY,GAAA;AAAA,EAChB;AAAA;AAAA,IAEE,SAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,MAAM,EAAC;AAAA,QACP,KAAA,EAAO;AAAA,UACL,aAAA;AAAA,UACA,0BAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,kBAAA;AAAA,UACA,4CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,YAAA;AAAA,UACA,oBAAA;AAAA,UACA,WAAA;AAAA;AAAA,UAEA,QAAA;AAAA;AAAA,UAGA,WAAA;AAAA;AAAA,UAEA,aAAA;AAAA,UACA,oBAAA;AAAA,UACA,oBAAA;AAAA,UACA,oBAAA;AAAA;AAAA,UAGA,kBAAA;AAAA,UACA,kBAAA;AAAA;AAAA,UAGA,oBAAA;AAAA,UACA,oBAAA;AAAA,UACA,yBAAA;AAAA,UAEA,sBAAA;AAAA;AAAA,UAEA,8DAAA;AAAA,UACA;AAAA;AACF;AACF;AACF;AAEJ,CAAA;AAMO,IAAM,oBAAoB,CAAC;AAAA,EAChC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,KAAA;AAC9B,EAAA,MAAM,EAAE,YAAA,EAAc,UAAA,EAAY,MAAA,KAAW,iBAAA,EAAkB;AAE/D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EACE;AAAA,QACE,yBAAA,EAA2B,GAAG,MAAM,CAAA,EAAA;AAAA,OACtC;AAAA,MAEF,WAAW,gBAAA,CAAiB;AAAA,QAC1B;AAAA,OACD,CAAA;AAAA,MAED,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,GAAA,EAAK,YAAA;AAAA,UACL,KAAA,EAAO;AAAA,YACL,GAAA,EAAK,KAAA,KAAU,KAAA,GAAQ,CAAC,MAAA,GAAS,MAAA;AAAA,YACjC,GAAG;AAAA,WACL;AAAA,UACA,SAAA,EAAW,SAAA,CAAU,EAAE,OAAA,EAAS,WAAW,CAAA;AAAA,UAE1C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;ACvJO,IAAM,kBAAkB,CAAC,EAAE,WAAW,GAAG,IAAA,uBAC9CC,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACE,GAAG,IAAA;AAAA,IACJ,WAAA,EAAU,kBAAA;AAAA,IACV,SAAA,EAAW,EAAA;AAAA,MACT,SAAA;AAAA;AAAA,MAEA,SAAA;AAAA,MACA;AAAA;AACF;AACF,CAAA;ACVK,IAAM,eAAe,CAAC,EAAE,SAAA,EAAW,GAAG,MAAK,KAAa;AAC7D,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,aAAA,EAAe,0BAA0B,SAAS;AAAA;AAAA,GACjF;AAEJ,CAAA;ACDO,IAAM,QAAA,GAAW,CAAC,EAAE,SAAA,EAAW,UAAU,QAAA,EAAU,GAAG,MAAK,KAAa;AAC7E,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,uBAAA;AAAA,QACA,sBAAA;AAAA;AAAA,QAEA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,mCAAA;AAAA,QACA,mBAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,IAAA,GAAO,YAAA;AAChB,QAAA,CAAS,OAAA,GAAU,eAAA;AACnB,QAAA,CAAS,SAAA,GAAY,iBAAA","file":"chunk-WGG4AML3.js","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useElement } from '../../hooks/useElement';\n\nconst CONNECTOR_MARGIN_TOP = 8;\n\nexport const useLastLineHeight = () => {\n  const [wrapper, setWrapper] = useElement();\n  const [connector, setConnector] = useElement();\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    if (wrapper === null) return;\n    if (connector === null) return;\n\n    const updateHeight = () => {\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const connectorRect = connector.getBoundingClientRect();\n      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;\n      setHeight(distance);\n    };\n\n    // Initial check.\n    const rafId = requestAnimationFrame(updateHeight);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [wrapper, connector]);\n\n  return {\n    height,\n    setWrapper,\n    setConnector,\n  };\n};\n","import type { ComponentProps, CSSProperties } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useLastLineHeight } from './useLastLineHeight';\n\nconst connectorWrapper = cva(\n  [\n    'tw:grow',\n    'tw:min-h-8',\n    'tw:py-2',\n\n    // layout\n    'tw:flex',\n    'tw:justify-center',\n\n    // CONNECTOR LINE\n    'tw:relative',\n    'tw:before:absolute',\n    'tw:before:self-start',\n\n    // Centered on x-axis\n    'tw:before:left-1/2',\n    'tw:before:-translate-x-1/2',\n    'tw:before:w-px',\n    'tw:before:h-full',\n    'tw:before:group-last/timeline-item:h-(--connector-line-height)',\n\n    // Solid line\n    'tw:before:group-data-[variant=solid]/timeline:bg-border',\n\n    // Dashed line using gradient\n    'tw:before:group-data-[variant=dashed]/timeline:bg-gradient-to-b',\n    'tw:before:group-data-[variant=dashed]/timeline:from-border',\n    'tw:before:group-data-[variant=dashed]/timeline:from-50%',\n    'tw:before:group-data-[variant=dashed]/timeline:to-transparent',\n    'tw:before:group-data-[variant=dashed]/timeline:to-50%',\n    'tw:before:group-data-[variant=dashed]/timeline:bg-[length:1px_4px]',\n  ],\n  {\n    defaultVariants: {\n      align: 'start',\n    },\n    variants: {\n      align: {\n        start: ['tw:items-start'],\n        center: ['tw:items-center'],\n        end: ['tw:items-end'],\n        baseline: ['tw:items-baseline'],\n      },\n    },\n  },\n);\n\nconst connector = cva(\n  [\n    // ensure that it is always above the connector line.\n    'tw:z-10',\n    'tw:relative',\n  ],\n  {\n    defaultVariants: {\n      variant: 'label',\n    },\n    variants: {\n      variant: {\n        none: [],\n        label: [\n          'tw:bg-muted',\n          'tw:text-muted-foreground',\n          'tw:rounded',\n          'tw:p-1.5',\n          'tw:text-nowrap',\n          'tw:text-xs',\n        ],\n        icon: [\n          'tw:bg-background',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n          'tw:[&_svg]:text-muted-foreground',\n        ],\n        line: [\n          'tw:min-w-8',\n          'tw:overflow-hidden',\n          'tw:w-full',\n          // height of the curved corner\n          'tw:h-1',\n\n          // small offset from top and bottom\n          'tw:my-1.5',\n          // positioning\n          'tw:relative',\n          'tw:before:absolute',\n          'tw:before:left-1/2',\n          'tw:before:bottom-0',\n\n          // sizing\n          'tw:before:w-full',\n          'tw:before:h-full',\n\n          // l-shape\n          'tw:before:border-l',\n          'tw:before:border-b',\n          'tw:before:border-border',\n\n          'tw:before:rounded-bl',\n          // Solid or dashed\n          'tw:before:group-data-[variant=dashed]/timeline:border-dashed',\n          'tw:before:group-data-[variant=solid]/timeline:!border-solid',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean; offset?: number } & ComponentProps<'div'> &\n  VariantProps<typeof connectorWrapper> &\n  VariantProps<typeof connector>;\n\nexport const TimelineConnector = ({\n  className,\n  children,\n  asChild,\n  variant,\n  align,\n  offset = 0,\n  style,\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'div';\n  const { setConnector, setWrapper, height } = useLastLineHeight();\n\n  return (\n    <div\n      ref={setWrapper}\n      style={\n        {\n          '--connector-line-height': `${height}px`,\n        } as CSSProperties\n      }\n      className={connectorWrapper({\n        align,\n      })}\n    >\n      <Comp\n        {...rest}\n        ref={setConnector}\n        style={{\n          top: align === 'end' ? -offset : offset,\n          ...style,\n        }}\n        className={connector({ variant, className })}\n      >\n        {children}\n      </Comp>\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const TimelineContent = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    data-slot=\"timeline-content\"\n    className={cn(\n      'tw:flex',\n      // spacing in between timeline items\n      'tw:py-2',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const TimelineItem = ({ className, ...rest }: Props) => {\n  return (\n    <li\n      {...rest}\n      className={cn('tw:contents', 'tw:relative', 'tw:group/timeline-item', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TimelineConnector } from './TimelineConnector';\nimport { TimelineContent } from './TimelineContent';\nimport { TimelineItem } from './TimelineItem';\n\ntype Props = ComponentProps<'ul'> & {\n  variant?: 'solid' | 'dashed';\n};\n\nexport const Timeline = ({ className, variant = 'dashed', ...rest }: Props) => {\n  return (\n    <ul\n      {...rest}\n      data-variant={variant}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:overflow-y-hidden',\n        // reset default styling\n        'tw:p-0',\n        'tw:grid',\n        'tw:grid-cols-[auto_minmax(0,1fr)]',\n        'tw:group/timeline',\n        'tw:gap-x-4',\n        className,\n      )}\n    />\n  );\n};\n\nTimeline.Item = TimelineItem;\nTimeline.Content = TimelineContent;\nTimeline.Connector = TimelineConnector;\n"]}

package/dist/chunk-WKAUEL6I.js

@@ -0,0 +1,30 @@
+import { useState, useRef, useCallback } from 'react';
+
+// src/hooks/useControllableState.ts
+var useControllableState = ({
+  prop,
+  defaultProp,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = prop !== void 0 ? prop : uncontrolled;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(valueRef.current) : next;
+      valueRef.current = nextValue;
+      if (!isControlled) setUncontrolled(nextValue);
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+};
+
+export { useControllableState };
+//# sourceMappingURL=chunk-WKAUEL6I.js.map
+//# sourceMappingURL=chunk-WKAUEL6I.js.map

package/dist/chunk-WKAUEL6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useControllableState.ts"],"names":[],"mappings":";;;AAsBO,IAAM,uBAAuB,CAAI;AAAA,EACtC,IAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAgF;AAC9E,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAY,WAAW,CAAA;AAC/D,EAAA,MAAM,eAAe,IAAA,KAAS,MAAA;AAG9B,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAY,IAAA,GAAO,YAAA;AAI1C,EAAA,MAAM,QAAA,GAAW,OAAO,KAAK,CAAA;AAC7B,EAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AACnB,EAAA,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAEtB,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,IAAA,KAAS;AACR,MAAA,MAAM,YACJ,OAAO,IAAA,KAAS,aAAc,IAAA,CAAwB,QAAA,CAAS,OAAO,CAAA,GAAI,IAAA;AAG5E,MAAA,QAAA,CAAS,OAAA,GAAU,SAAA;AACnB,MAAA,IAAI,CAAC,YAAA,EAAc,eAAA,CAAgB,SAAS,CAAA;AAC5C,MAAA,WAAA,CAAY,UAAU,SAAS,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,OAAO,CAAC,OAAO,QAAQ,CAAA;AACzB","file":"chunk-WKAUEL6I.js","sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\ntype UseControllableStateParams<T> = {\n  /** The controlled value. When defined, the hook operates in controlled mode. */\n  prop: T | undefined;\n  /** The initial value used in uncontrolled mode. */\n  defaultProp: T;\n  /** Called with the next value whenever `setValue` runs (controlled and uncontrolled). */\n  onChange?: (value: T) => void;\n};\n\n/**\n * Controlled/uncontrolled state, à la Radix's `useControllableState`.\n *\n * Returns a `[value, setValue]` tuple where `setValue` accepts a value or an updater\n * function (`SetStateAction<T>`). In controlled mode (`prop !== undefined`) the hook never\n * owns state — `setValue` resolves the next value and calls `onChange`; the parent is\n * responsible for feeding the new `prop` back. In uncontrolled mode the hook owns the value\n * in internal state and still calls `onChange`. `onChange` fires on every `setValue` call\n * (it is not deduped against the previous value).\n */\nexport const useControllableState = <T>({\n  prop,\n  defaultProp,\n  onChange,\n}: UseControllableStateParams<T>): readonly [T, Dispatch<SetStateAction<T>>] => {\n  const [uncontrolled, setUncontrolled] = useState<T>(defaultProp);\n  const isControlled = prop !== undefined;\n  // Inline the `!== undefined` check (rather than reusing `isControlled`) so TypeScript\n  // narrows `prop` from `T | undefined` to `T` here.\n  const value = prop !== undefined ? prop : uncontrolled;\n\n  // Read the latest value/onChange without widening `setValue`'s dependency list,\n  // keeping its identity stable across renders.\n  const valueRef = useRef(value);\n  valueRef.current = value;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const setValue = useCallback<Dispatch<SetStateAction<T>>>(\n    (next) => {\n      const nextValue =\n        typeof next === 'function' ? (next as (prev: T) => T)(valueRef.current) : next;\n      // Advance the ref immediately so multiple functional-updater calls in the same tick\n      // compose (each resolves against the previous result, not the stale render value).\n      valueRef.current = nextValue;\n      if (!isControlled) setUncontrolled(nextValue);\n      onChangeRef.current?.(nextValue);\n    },\n    [isControlled],\n  );\n\n  return [value, setValue] as const;\n};\n"]}