devnonla-ui 0.2.0 → 0.3.0

package/src/colorpicker/color.ts

@@ -0,0 +1,246 @@
+export type ColorFormat = "hex" | "rgb" | "hsb";
+
+export type HsbaColor = {
+  h: number;
+  s: number;
+  b: number;
+  a: number;
+};
+
+export type RgbaColor = {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+};
+
+export type ColorType = string | Color;
+
+const HEX = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB = /^rgba?\(\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSL = /^hsla?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSB = /^hsba?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSV = /^hsva?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+
+export function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function round(n: number, digits = 0) {
+  const f = 10 ** digits;
+  return Math.round(n * f) / f;
+}
+
+function wrapHue(h: number) {
+  const n = ((h % 360) + 360) % 360;
+  return n;
+}
+
+function hexByte(n: number) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+}
+
+function parseChannel(raw: string, max: number) {
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp((parseFloat(t) / 100) * max, 0, max);
+  return clamp(parseFloat(t), 0, max);
+}
+
+function parseAlpha(raw: string | undefined) {
+  if (raw == null || raw === "") return 1;
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp(parseFloat(t) / 100, 0, 1);
+  const n = parseFloat(t);
+  return n > 1 ? clamp(n / 255, 0, 1) : clamp(n, 0, 1);
+}
+
+export function hsbaToRgba({ h, s, b, a }: HsbaColor): RgbaColor {
+  const hue = wrapHue(h);
+  const sat = clamp(s, 0, 1);
+  const val = clamp(b, 0, 1);
+  const c = val * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = val - c;
+  let r = 0;
+  let g = 0;
+  let bl = 0;
+  if (hue < 60) [r, g, bl] = [c, x, 0];
+  else if (hue < 120) [r, g, bl] = [x, c, 0];
+  else if (hue < 180) [r, g, bl] = [0, c, x];
+  else if (hue < 240) [r, g, bl] = [0, x, c];
+  else if (hue < 300) [r, g, bl] = [x, 0, c];
+  else [r, g, bl] = [c, 0, x];
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((bl + m) * 255),
+    a: clamp(a, 0, 1),
+  };
+}
+
+export function rgbaToHsba({ r, g, b, a }: RgbaColor): HsbaColor {
+  const R = clamp(r, 0, 255) / 255;
+  const G = clamp(g, 0, 255) / 255;
+  const B = clamp(b, 0, 255) / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === R) h = ((G - B) / d) % 6;
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : d / max, b: max, a: clamp(a, 0, 1) };
+}
+
+function hslToHsba(h: number, s: number, l: number, a: number): HsbaColor {
+  const sat = clamp(s, 0, 1);
+  const lit = clamp(l, 0, 1);
+  const v = lit + sat * Math.min(lit, 1 - lit);
+  const sv = v === 0 ? 0 : 2 * (1 - lit / v);
+  return { h: wrapHue(h), s: sv, b: v, a: clamp(a, 0, 1) };
+}
+
+function expandHex(hex: string) {
+  if (hex.length === 3 || hex.length === 4) {
+    return hex
+      .split("")
+      .map((c) => c + c)
+      .join("");
+  }
+  return hex;
+}
+
+function parseHex(raw: string): HsbaColor | null {
+  const m = HEX.exec(raw.trim());
+  if (!m) return null;
+  const hex = expandHex(m[1]!.toLowerCase());
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+  return rgbaToHsba({ r, g, b, a });
+}
+
+function parseCss(raw: string): HsbaColor | null {
+  const t = raw.trim();
+  if (!t) return null;
+  if (t.toLowerCase() === "transparent") return { h: 0, s: 0, b: 0, a: 0 };
+  const hex = parseHex(t);
+  if (hex) return hex;
+  const rgb = RGB.exec(t);
+  if (rgb) {
+    return rgbaToHsba({
+      r: parseChannel(rgb[1]!, 255),
+      g: parseChannel(rgb[2]!, 255),
+      b: parseChannel(rgb[3]!, 255),
+      a: parseAlpha(rgb[4]),
+    });
+  }
+  const hsl = HSL.exec(t);
+  if (hsl) return hslToHsba(parseFloat(hsl[1]!), parseFloat(hsl[2]!) / 100, parseFloat(hsl[3]!) / 100, parseAlpha(hsl[4]));
+  const hsb = HSB.exec(t) ?? HSV.exec(t);
+  if (hsb) {
+    return {
+      h: wrapHue(parseFloat(hsb[1]!)),
+      s: clamp(parseFloat(hsb[2]!) / 100, 0, 1),
+      b: clamp(parseFloat(hsb[3]!) / 100, 0, 1),
+      a: parseAlpha(hsb[4]),
+    };
+  }
+  return null;
+}
+
+export function isColor(value: unknown): value is Color {
+  return value instanceof Color;
+}
+
+export class Color {
+  private readonly meta: HsbaColor;
+
+  constructor(input?: ColorType | HsbaColor | RgbaColor | null) {
+    this.meta = toHsba(input);
+  }
+
+  toHsb(): HsbaColor {
+    return { h: this.meta.h, s: this.meta.s, b: this.meta.b, a: this.meta.a };
+  }
+
+  toRgb(): RgbaColor {
+    return hsbaToRgba(this.meta);
+  }
+
+  toHex(ignoreAlpha = false): string {
+    const { r, g, b, a } = this.toRgb();
+    const hex = `${hexByte(r)}${hexByte(g)}${hexByte(b)}`;
+    if (ignoreAlpha || a >= 1) return hex;
+    return `${hex}${hexByte(a * 255)}`;
+  }
+
+  toHexString(ignoreAlpha = false): string {
+    return `#${this.toHex(ignoreAlpha)}`;
+  }
+
+  toRgbString(): string {
+    const { r, g, b, a } = this.toRgb();
+    if (a < 1) return `rgba(${r}, ${g}, ${b}, ${round(a, 2)})`;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  toHsbString(): string {
+    const { h, s, b, a } = this.meta;
+    const H = Math.round(wrapHue(h));
+    const S = Math.round(s * 100);
+    const B = Math.round(b * 100);
+    if (a < 1) return `hsba(${H}, ${S}%, ${B}%, ${round(a, 2)})`;
+    return `hsb(${H}, ${S}%, ${B}%)`;
+  }
+
+  toCssString(): string {
+    return this.toRgbString();
+  }
+
+  toString(format: ColorFormat = "hex"): string {
+    if (format === "rgb") return this.toRgbString();
+    if (format === "hsb") return this.toHsbString();
+    return this.toHexString();
+  }
+
+  static fromHsba(hsba: HsbaColor): Color {
+    return new Color(hsba);
+  }
+}
+
+function isHsbaLike(value: object): value is HsbaColor {
+  return "h" in value && "s" in value && "b" in value;
+}
+
+function isRgbaLike(value: object): value is RgbaColor {
+  return "r" in value && "g" in value && "b" in value;
+}
+
+function toHsba(input?: ColorType | HsbaColor | RgbaColor | null): HsbaColor {
+  if (input == null || input === "") return { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isColor(input)) return input.toHsb();
+  if (typeof input === "string") return parseCss(input) ?? { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isHsbaLike(input)) {
+    return { h: wrapHue(input.h), s: clamp(input.s, 0, 1), b: clamp(input.b, 0, 1), a: clamp(input.a ?? 1, 0, 1) };
+  }
+  if (isRgbaLike(input)) return rgbaToHsba({ r: input.r, g: input.g, b: input.b, a: input.a ?? 1 });
+  return { h: 215, s: 0.91, b: 1, a: 1 };
+}
+
+export function parseColor(input?: ColorType | null): Color | null {
+  if (input == null || input === "") return null;
+  if (isColor(input)) return input;
+  if (typeof input === "string") {
+    const parsed = parseCss(input);
+    return parsed ? Color.fromHsba(parsed) : null;
+  }
+  return new Color(input);
+}
+
+export const DEFAULT_COLOR = new Color("#1677ff");

package/src/form/variants/FieldColor.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
-import { Input } from "../../input/Input";
-import { Popover } from "../../popover/Popover";
+import { ColorPicker, type PresetColorType } from "../../colorpicker/ColorPicker";
+import type { ControlSize } from "../../lib/sizes";
 
 type Props = {
   field: ControllerRenderProps<FieldValues, string>;
@@ -9,55 +8,21 @@ type Props = {
   status?: "error" | "warning";
 };
 
-const FALLBACK = "#000000";
-
 export function FieldColor({ field, options, status }: Props) {
-  const raw = typeof field.value === "string" ? field.value : field.value ? String(field.value) : "";
-  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(raw) ? raw : FALLBACK;
-  const [open, setOpen] = useState(false);
-
+  const opts = options ?? {};
+  const raw = typeof field.value === "string" ? field.value : field.value != null ? String(field.value) : "";
   return (
-    <div className="flex items-center gap-2">
-      <Popover
-        open={open}
-        onOpenChange={setOpen}
-        trigger="click"
-        placement="bottom"
-        content={
-          <div className="flex flex-col gap-2 p-1 min-w-45">
-            <input
-              type="color"
-              value={hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              className="h-24 w-full cursor-pointer border-0 bg-transparent p-0"
-              aria-label="Pick color"
-            />
-            <Input
-              value={raw || hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              placeholder="#000000"
-              status={status}
-              className="font-mono text-sm"
-              {...(options as object)}
-            />
-          </div>
-        }
-      >
-        <button
-          type="button"
-          className="size-9 shrink-0 cursor-pointer rounded border border-input p-0"
-          style={{ backgroundColor: raw || hex }}
-          aria-label="Color picker"
-        />
-      </Popover>
-      <Input
-        className="flex-1 font-mono text-sm"
-        value={raw}
-        onChange={(e) => field.onChange(e.target.value)}
-        onBlur={field.onBlur}
-        placeholder="#000000"
-        status={status}
-      />
-    </div>
+    <ColorPicker
+      value={raw || null}
+      onChange={(color) => field.onChange(color.toHexString())}
+      onClear={() => field.onChange("")}
+      showText
+      allowClear={opts.allowClear !== false}
+      disabled={opts.disabled as boolean | undefined}
+      disabledAlpha={opts.disabledAlpha as boolean | undefined}
+      size={opts.size as ControlSize | undefined}
+      status={status}
+      presets={opts.presets as PresetColorType[] | undefined}
+    />
   );
 }

package/src/index.ts

@@ -22,8 +22,8 @@ export type { SwitchProps, SwitchVariant } from "./switch/Switch";
 export { Checkbox } from "./checkbox/Checkbox";
 export type { CheckboxProps } from "./checkbox/Checkbox";
 
-export { ColorPicker } from "./colorpicker/ColorPicker";
-export type { ColorPickerProps } from "./colorpicker/ColorPicker";
+export { ColorPicker, Color } from "./colorpicker/ColorPicker";
+export type { ColorPickerProps, ColorFormat, ColorType, PresetColorType, ColorPickerSemanticSlot } from "./colorpicker/ColorPicker";
 
 export { Tooltip } from "./tooltip/Tooltip";
 export type { TooltipProps, TooltipPlacement } from "./tooltip/Tooltip";
@@ -77,6 +77,9 @@ export type { PopconfirmProps } from "./popconfirm/Popconfirm";
 export { Drawer } from "./drawer/Drawer";
 export type { DrawerProps, DrawerPlacement } from "./drawer/Drawer";
 
+export { Splitter, SplitterPanel } from "./splitter/Splitter";
+export type { SplitterProps, SplitterPanelProps, SplitterOrientation, SplitterSize, SplitterSemanticSlot } from "./splitter/Splitter";
+
 export { Table } from "./table/Table";
 export type {
   TableProps,

package/src/splitter/Splitter.tsx

@@ -0,0 +1,330 @@
+import {
+  Children,
+  Fragment,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../lib/cn";
+import { applyDrag, distributeSizes, parseSplitterSize, scaleSizes, type SplitterSize } from "./sizes";
+
+export type { SplitterSize };
+export type SplitterOrientation = "horizontal" | "vertical";
+export type SplitterSemanticSlot = "root" | "panel" | "dragger";
+
+export type SplitterPanelProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  defaultSize?: SplitterSize;
+  size?: SplitterSize;
+  min?: SplitterSize;
+  max?: SplitterSize;
+  resizable?: boolean;
+  destroyOnHidden?: boolean;
+};
+
+export type SplitterProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  orientation?: SplitterOrientation;
+  /** When set with `orientation`, `orientation` wins. */
+  vertical?: boolean;
+  draggerIcon?: ReactNode;
+  destroyOnHidden?: boolean;
+  classNames?: Partial<Record<SplitterSemanticSlot, string>>;
+  styles?: Partial<Record<SplitterSemanticSlot, CSSProperties>>;
+  onResize?: (sizes: number[]) => void;
+  onResizeStart?: (sizes: number[]) => void;
+  onResizeEnd?: (sizes: number[]) => void;
+};
+
+type PanelConfig = SplitterPanelProps & { key: string };
+
+type DragSession = {
+  index: number;
+  startPos: number;
+  startLeft: number;
+  startRight: number;
+};
+
+const PANEL_MARK = "__NONLA_SPLITTER_PANEL__";
+
+function isPanelElement(child: ReactNode): child is ReactElement<SplitterPanelProps> {
+  return isValidElement(child) && Boolean((child.type as { [PANEL_MARK]?: boolean })[PANEL_MARK]);
+}
+
+function collectPanels(children: ReactNode): PanelConfig[] {
+  return Children.toArray(children).filter(isPanelElement).map((child, index) => ({
+    key: child.key != null ? String(child.key) : String(index),
+    ...child.props,
+  }));
+}
+
+function SplitterPanel(_props: SplitterPanelProps) {
+  return null;
+}
+SplitterPanel.displayName = "Splitter.Panel";
+(SplitterPanel as typeof SplitterPanel & { [PANEL_MARK]: true })[PANEL_MARK] = true;
+
+function SplitterRoot({
+  children,
+  className,
+  style,
+  orientation,
+  vertical = false,
+  draggerIcon,
+  destroyOnHidden = false,
+  classNames,
+  styles,
+  onResize,
+  onResizeStart,
+  onResizeEnd,
+}: SplitterProps) {
+  const isVertical = (orientation ?? (vertical ? "vertical" : "horizontal")) === "vertical";
+  const panels = useMemo(() => collectPanels(children), [children]);
+  const count = panels.length;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const sizesRef = useRef<number[]>([]);
+  const dragRef = useRef<DragSession | null>(null);
+
+  const [container, setContainer] = useState(0);
+  const [sizes, setSizes] = useState<number[]>([]);
+  const [dragging, setDragging] = useState(false);
+
+  sizesRef.current = sizes;
+
+  const sizeKey = panels.map((panel) => String(panel.size ?? "")).join("|");
+
+  const resolve = useCallback(
+    (prev: number[] | null) => {
+      const scaled = prev && prev.length === count && container > 0 ? scaleSizes(prev, container) : null;
+      const declared = panels.map((panel, index) => {
+        const controlled = parseSplitterSize(panel.size, container);
+        if (controlled != null) return controlled;
+        if (scaled?.[index] != null) return scaled[index];
+        return parseSplitterSize(panel.defaultSize, container);
+      });
+      return distributeSizes(declared, container);
+    },
+    [container, count, panels],
+  );
+
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const read = () => {
+      const next = isVertical ? el.clientHeight : el.clientWidth;
+      setContainer((curr) => (Math.abs(curr - next) < 0.5 ? curr : next));
+    };
+    read();
+    const ro = new ResizeObserver(read);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isVertical]);
+
+  useLayoutEffect(() => {
+    if (container <= 0 || count === 0 || dragRef.current) return;
+    setSizes((prev) => {
+      const next = resolve(prev.length === count ? prev : null);
+      if (prev.length === next.length && prev.every((value, index) => Math.abs(value - (next[index] ?? 0)) < 0.5)) return prev;
+      return next;
+    });
+  }, [container, count, resolve, sizeKey]);
+
+  const commitSizes = (next: number[]) => {
+    setSizes(next);
+    onResize?.(next);
+  };
+
+  const boundsOf = (index: number) => {
+    const panel = panels[index]!;
+    return {
+      min: parseSplitterSize(panel.min, container) ?? 0,
+      max: parseSplitterSize(panel.max, container) ?? container,
+    };
+  };
+
+  const movePair = (index: number, delta: number, source: number[]) => {
+    const left = boundsOf(index);
+    const right = boundsOf(index + 1);
+    const [nextLeft, nextRight] = applyDrag(source[index] ?? 0, source[index + 1] ?? 0, delta, left.min, left.max, right.min, right.max);
+    const next = source.slice();
+    next[index] = nextLeft;
+    next[index + 1] = nextRight;
+    return next;
+  };
+
+  const onBarPointerDown = (index: number, event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    if (panels[index]?.resizable === false || panels[index + 1]?.resizable === false) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const pos = isVertical ? event.clientY : event.clientX;
+    dragRef.current = {
+      index,
+      startPos: pos,
+      startLeft: sizes[index] ?? 0,
+      startRight: sizes[index + 1] ?? 0,
+    };
+    setDragging(true);
+    onResizeStart?.(sizes);
+  };
+
+  const onBarPointerUp = (event?: PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    if (event) {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch {
+        /* already released */
+      }
+    }
+    dragRef.current = null;
+    setDragging(false);
+    onResizeEnd?.(sizesRef.current);
+  };
+
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (event: globalThis.PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const pos = isVertical ? event.clientY : event.clientX;
+      const source = Array.from({ length: count }, (_, i) => (i === drag.index ? drag.startLeft : i === drag.index + 1 ? drag.startRight : (sizesRef.current[i] ?? 0)));
+      commitSizes(movePair(drag.index, pos - drag.startPos, source));
+    };
+    const onUp = () => onBarPointerUp();
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [dragging, count, isVertical]);
+
+  const onBarKeyDown = (index: number, event: KeyboardEvent<HTMLDivElement>) => {
+    if (panels[index]?.resizable === false || panels[index + 1]?.resizable === false) return;
+    const step = event.shiftKey ? 32 : 8;
+    const backward = isVertical ? event.key === "ArrowUp" : event.key === "ArrowLeft";
+    const forward = isVertical ? event.key === "ArrowDown" : event.key === "ArrowRight";
+    if (!backward && !forward) return;
+    event.preventDefault();
+    commitSizes(movePair(index, backward ? -step : step, sizes));
+  };
+
+  useEffect(() => {
+    if (!dragging) return;
+    const prevCursor = document.body.style.cursor;
+    const prevSelect = document.body.style.userSelect;
+    document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = prevCursor;
+      document.body.style.userSelect = prevSelect;
+    };
+  }, [dragging, isVertical]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("nonla-splitter relative flex h-full min-h-0 min-w-0 w-full overflow-hidden", isVertical ? "flex-col" : "flex-row", classNames?.root, className)}
+      style={{ ...styles?.root, ...style }}
+      data-orientation={isVertical ? "vertical" : "horizontal"}
+    >
+      {panels.map((panel, index) => {
+        const size = sizes[index] ?? 0;
+        const hidden = size <= 0;
+        const destroy = hidden && (panel.destroyOnHidden ?? destroyOnHidden);
+        const resizable = panel.resizable !== false && panels[index + 1]?.resizable !== false;
+
+        return (
+          <Fragment key={panel.key}>
+            <div
+              className={cn("nonla-splitter-panel min-h-0 min-w-0 overflow-auto", hidden && "pointer-events-none", classNames?.panel, panel.className)}
+              style={{
+                flexGrow: container <= 0 ? 1 : 0,
+                flexShrink: 0,
+                flexBasis: container <= 0 ? 0 : size,
+                ...(isVertical ? { height: container <= 0 ? undefined : size, width: "100%" } : { width: container <= 0 ? undefined : size, height: "100%" }),
+                ...styles?.panel,
+                ...panel.style,
+              }}
+            >
+              {destroy ? null : panel.children}
+            </div>
+            {index < count - 1 ? (
+              <div
+                className={cn("nonla-splitter-bar relative z-10 shrink-0", isVertical ? "h-0 w-full" : "h-full w-0")}
+                style={styles?.dragger}
+              >
+                <div
+                  role="separator"
+                  aria-orientation={isVertical ? "vertical" : "horizontal"}
+                  aria-valuenow={Math.round(size)}
+                  aria-valuemin={0}
+                  aria-valuemax={Math.round(container)}
+                  tabIndex={resizable ? 0 : -1}
+                  className={cn(
+                    "group absolute z-10 touch-none select-none",
+                    isVertical ? "inset-x-0 top-1/2 h-3 -translate-y-1/2 cursor-row-resize" : "inset-y-0 left-1/2 w-3 -translate-x-1/2 cursor-col-resize",
+                    !resizable && "cursor-default",
+                    classNames?.dragger,
+                  )}
+                  onPointerDown={resizable ? (event) => onBarPointerDown(index, event) : undefined}
+                  onKeyDown={resizable ? (event) => onBarKeyDown(index, event) : undefined}
+                >
+                  <span
+                    className={cn(
+                      "pointer-events-none absolute rounded-full transition-colors",
+                      isVertical ? "inset-x-0 top-1/2 h-0.5 -translate-y-1/2" : "inset-y-0 left-1/2 w-0.5 -translate-x-1/2",
+                      dragging ? "bg-brand" : "bg-border group-hover:bg-brand group-focus-visible:bg-brand",
+                    )}
+                  />
+                  {draggerIcon ? (
+                    <span
+                      className={cn(
+                        "pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm bg-card text-muted-foreground shadow-button-outline",
+                        isVertical ? "h-1.5 w-5" : "h-5 w-1.5",
+                      )}
+                    >
+                      {draggerIcon}
+                    </span>
+                  ) : (
+                    <span
+                      className={cn(
+                        "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm bg-card shadow-button-outline transition-opacity",
+                        "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
+                        dragging && "opacity-100",
+                        isVertical ? "h-1 w-8" : "h-8 w-1",
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+type SplitterComponent = typeof SplitterRoot & { Panel: typeof SplitterPanel };
+
+export const Splitter = Object.assign(SplitterRoot, { Panel: SplitterPanel }) as SplitterComponent;
+export { SplitterPanel };