@geomak/ui 5.3.0 → 5.4.0

package/dist/index.cjs

@@ -16,6 +16,7 @@ var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -49,6 +50,7 @@ var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
@@ -4663,6 +4665,377 @@ function ChevronLeft() {
 function ChevronRight3() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
+var LINE_HEIGHT_PX = 21;
+function TextArea({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  label,
+  htmlFor,
+  placeholder,
+  name,
+  layout = "vertical",
+  size = "md",
+  rows = 4,
+  autoGrow = false,
+  maxRows = 12,
+  maxLength,
+  showCount = false,
+  resize,
+  errorMessage,
+  required,
+  style,
+  inputStyle
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const ref = React8.useRef(null);
+  React8.useLayoutEffect(() => {
+    if (!autoGrow) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const maxH = maxRows * LINE_HEIGHT_PX + 16;
+    el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }, [value, autoGrow, maxRows]);
+  const count = typeof value === "string" ? value.length : 0;
+  const resizeClass = (resize ?? (autoGrow ? "none" : "vertical")) === "none" ? "resize-none" : (resize ?? "vertical") === "horizontal" ? "resize-x" : (resize ?? "vertical") === "both" ? "resize" : "resize-y";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            onBlur,
+            name,
+            id: htmlFor,
+            rows,
+            maxLength,
+            placeholder: placeholder ?? "",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: `${fieldShell({ size, hasError, disabled, sized: false })} px-3 py-2 leading-normal ${resizeClass}`,
+            style: { ...style, ...inputStyle }
+          }
+        ),
+        showCount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-right text-xs text-foreground-muted tabular-nums", children: maxLength != null ? `${count} / ${maxLength}` : count })
+      ]
+    }
+  );
+}
+var SIZE = {
+  sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
+  md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
+  lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
+};
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  disabled,
+  "aria-label": ariaLabel
+}) {
+  const sz = SIZE[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroup__namespace.Root,
+    {
+      type: "single",
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        if (v) onChange?.(v);
+      },
+      disabled,
+      "aria-label": ariaLabel,
+      className: [
+        "inline-flex items-center gap-1 rounded-lg border border-border bg-surface-raised p-1",
+        sz.h,
+        fullWidth ? "flex w-full" : "",
+        disabled ? "opacity-60 cursor-not-allowed" : ""
+      ].filter(Boolean).join(" "),
+      children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ToggleGroup__namespace.Item,
+        {
+          value: opt.value,
+          disabled: opt.disabled,
+          className: [
+            "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
+            "transition-colors duration-150 h-full",
+            sz.text,
+            sz.pad,
+            fullWidth ? "flex-1" : "",
+            // Resting: muted text, transparent. Hover lifts the text.
+            "text-foreground-secondary hover:text-foreground",
+            // Active: surface-white pill + accent text + subtle shadow.
+            "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
+            "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+            "disabled:opacity-40 disabled:cursor-not-allowed"
+          ].filter(Boolean).join(" "),
+          children: [
+            opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: opt.icon }),
+            opt.label
+          ]
+        },
+        opt.value
+      ))
+    }
+  );
+}
+var TRACK_H = { sm: "h-1", md: "h-1.5", lg: "h-2" };
+var THUMB = { sm: "h-3.5 w-3.5", md: "h-4 w-4", lg: "h-5 w-5" };
+var toArray = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
+function Slider({
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  formatValue = (n) => String(n),
+  marks,
+  tooltip = false,
+  size = "md",
+  disabled,
+  errorMessage,
+  name,
+  htmlFor
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = React8.useState(
+    () => toArray(value) ?? toArray(defaultValue) ?? [min]
+  );
+  const current = toArray(value) ?? internal;
+  const [dragging, setDragging] = React8.useState(false);
+  const emit = (arr) => {
+    setInternal(arr);
+    const next = isRange ? [arr[0], arr[1]] : arr[0];
+    onChange?.(next);
+  };
+  const valueText = current.map(formatValue).join(" \u2013 ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary tabular-nums", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SliderPrimitive__namespace.Root,
+      {
+        id: htmlFor,
+        name,
+        value: toArray(value),
+        defaultValue: toArray(defaultValue),
+        min,
+        max,
+        step,
+        disabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onValueChange: (v) => {
+          emit(v);
+          setDragging(true);
+        },
+        onValueCommit: (v) => {
+          setDragging(false);
+          onChangeEnd?.(isRange ? [v[0], v[1]] : v[0]);
+        },
+        className: "relative flex items-center select-none touch-none w-full h-5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: `relative grow rounded-full bg-surface-raised border border-border ${TRACK_H[size]}`, children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full rounded-full bg-accent" }) }),
+          current.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            SliderPrimitive__namespace.Thumb,
+            {
+              className: `group relative block ${THUMB[size]} rounded-full border-2 border-accent bg-surface shadow-sm transition-shadow
+                            focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring
+                            disabled:cursor-not-allowed`,
+              children: tooltip && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 rounded-md bg-foreground px-1.5 py-0.5 text-xs text-background tabular-nums whitespace-nowrap transition-opacity ${dragging ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"}`,
+                  children: formatValue(current[i])
+                }
+              )
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    marks && marks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-2 h-4", children: marks.map((m) => {
+      const pct = (m.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "absolute -translate-x-1/2 text-xs text-foreground-muted tabular-nums",
+          style: { left: `${pct}%` },
+          children: m.label ?? m.value
+        },
+        m.value
+      );
+    }) })
+  ] });
+}
+function TagsInput({
+  value,
+  defaultValue,
+  onChange,
+  label,
+  htmlFor,
+  name,
+  placeholder = "Add and press Enter",
+  layout = "vertical",
+  size = "md",
+  disabled,
+  errorMessage,
+  required,
+  maxTags,
+  dedupe = true,
+  validate,
+  separators = ["Enter", ","]
+}) {
+  const errorId = React8.useId();
+  const inputRef = React8.useRef(null);
+  const [internal, setInternal] = React8.useState(defaultValue ?? []);
+  const [draft, setDraft] = React8.useState("");
+  const [localError, setLocalError] = React8.useState(null);
+  const tags = value ?? internal;
+  const hasError = errorMessage != null || localError != null;
+  const errorText = errorMessage ?? localError ?? void 0;
+  const commitTags = (next) => {
+    setInternal(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag) return false;
+    if (maxTags != null && tags.length >= maxTags) return false;
+    if (dedupe && tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
+      setLocalError(`"${tag}" is already added`);
+      return false;
+    }
+    if (validate) {
+      const res = validate(tag, tags);
+      if (res !== true) {
+        setLocalError(typeof res === "string" ? res : `"${tag}" is not valid`);
+        return false;
+      }
+    }
+    setLocalError(null);
+    commitTags([...tags, tag]);
+    return true;
+  };
+  const removeTag = (idx) => {
+    commitTags(tags.filter((_, i) => i !== idx));
+    setLocalError(null);
+  };
+  const onKeyDown = (e) => {
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      if (addTag(draft)) setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  const onPaste = (e) => {
+    const text = e.clipboardData.getData("text");
+    const parts = text.split(/[\n,;]+/).map((p) => p.trim()).filter(Boolean);
+    if (parts.length > 1) {
+      e.preventDefault();
+      let added = false;
+      for (const p of parts) added = addTag(p) || added;
+      if (added) setDraft("");
+    }
+  };
+  const atMax = maxTags != null && tags.length >= maxTags;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: errorText,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `flex flex-wrap items-center gap-1.5 min-h-[36px] ${fieldShell({ size, hasError, disabled, focusWithin: true, sized: false })} px-2 py-1.5`,
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            tags.map((tag, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-md bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 border border-border",
+                children: [
+                  tag,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeTag(idx);
+                      },
+                      "aria-label": `Remove ${tag}`,
+                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              },
+              `${tag}-${idx}`
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: htmlFor,
+                name,
+                disabled: disabled || atMax,
+                value: draft,
+                onChange: (e) => {
+                  setDraft(e.target.value);
+                  if (localError) setLocalError(null);
+                },
+                onKeyDown,
+                onPaste,
+                onBlur: () => {
+                  if (addTag(draft)) setDraft("");
+                },
+                placeholder: atMax ? "" : tags.length === 0 ? placeholder : "",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                autoComplete: "off",
+                className: "flex-1 min-w-[6rem] bg-transparent outline-none text-sm placeholder:text-foreground-muted disabled:cursor-not-allowed"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
@@ -4711,15 +5084,19 @@ exports.Portal = Portal;
 exports.RadioGroup = RadioGroup;
 exports.ScalableContainer = ScalableContainer;
 exports.SearchInput = SearchInput_default;
+exports.SegmentedControl = SegmentedControl;
 exports.Sidebar = Sidebar;
 exports.SkeletonBox = SkeletonBox;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;
+exports.Slider = Slider;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TagsInput = TagsInput;
 exports.Temporal = DatePicker;
+exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;