@geomak/ui 5.3.0 → 5.4.0

package/dist/index.js

@@ -15,6 +15,7 @@ import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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" }) });
@@ -4629,7 +4630,378 @@ function ChevronLeft() {
 function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ 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 = useId();
+  const hasError = errorMessage != null;
+  const ref = useRef(null);
+  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__ */ jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    ToggleGroup.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__ */ jsxs(
+        ToggleGroup.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__ */ 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 = useId();
+  const hasError = errorMessage != null;
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState(
+    () => toArray(value) ?? toArray(defaultValue) ?? [min]
+  );
+  const current = toArray(value) ?? internal;
+  const [dragging, setDragging] = 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__ */ jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary tabular-nums", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.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__ */ jsx(SliderPrimitive.Track, { className: `relative grow rounded-full bg-surface-raised border border-border ${TRACK_H[size]}`, children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full rounded-full bg-accent" }) }),
+          current.map((_, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.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__ */ 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__ */ jsx("div", { className: "relative mt-2 h-4", children: marks.map((m) => {
+      const pct = (m.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ 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 = useId();
+  const inputRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const [draft, setDraft] = useState("");
+  const [localError, setLocalError] = 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__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: errorText,
+      layout,
+      required,
+      children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              },
+              `${tag}-${idx}`
+            )),
+            /* @__PURE__ */ 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"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, RadioGroup, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, RadioGroup, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map