@nikala-ui/core 0.9.11 → 0.10.0

package/src/registry/components/ui/field.tsx

@@ -0,0 +1,67 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { Label, type LabelProps } from "./label";
+
+export interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A consistent layout wrapper for labels, controls, descriptions, and errors. */
+export const Field: Component<FieldProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("grid w-full gap-1.5", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+export interface FieldLabelProps extends LabelProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const FieldLabel: Component<FieldLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <Label class={cn("text-sm font-medium", local.class)} {...rest}>
+      {local.children}
+    </Label>
+  );
+};
+
+export interface FieldDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldDescription: Component<FieldDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p class={cn("text-sm text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </p>
+  );
+};
+
+export interface FieldErrorProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldError: Component<FieldErrorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      role="alert"
+      class={cn("text-sm font-medium text-destructive", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};

package/src/registry/components/ui/form-message.tsx

@@ -0,0 +1,36 @@
+import { Show, splitProps, type JSX } from "solid-js";
+import type { CreateFormReturn } from "@nikala-ui/hooks";
+import { FieldError, type FieldErrorProps } from "./field";
+
+type FormState<T extends Record<string, any>> = Pick<
+  CreateFormReturn<T>,
+  "errors" | "touched"
+>;
+
+export interface FormMessageProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+> extends Omit<FieldErrorProps, "children"> {
+  form: FormState<T>;
+  name: K;
+  /** Show the message even before the field has been touched. */
+  showUntouched?: boolean;
+}
+
+/** Displays a field's validation error from createForm when it should be visible. */
+export function FormMessage<
+  T extends Record<string, any>,
+  K extends keyof T,
+>(props: FormMessageProps<T, K>): JSX.Element {
+  const [local, rest] = splitProps(props, ["form", "name", "showUntouched", "class"]);
+  const error = () => local.form.errors()[local.name] as string | undefined;
+  const touched = () => local.form.touched()[local.name] === true;
+
+  return (
+    <Show when={error() && (local.showUntouched || touched())}>
+      <FieldError class={local.class} {...rest}>
+        {error()}
+      </FieldError>
+    </Show>
+  );
+}

package/src/registry/components/ui/form.tsx

@@ -0,0 +1,21 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
+  /** Indicates that the form is currently processing a submission. */
+  loading?: boolean;
+  class?: string;
+}
+
+/** A semantic form layout wrapper designed to work with the createForm hook. */
+export const Form: Component<FormProps> = (props) => {
+  const [local, rest] = splitProps(props, ["loading", "class"]);
+
+  return (
+    <form
+      aria-busy={local.loading ? "true" : undefined}
+      class={cn("w-full space-y-5", local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/components/ui/icon-button.tsx

@@ -0,0 +1,34 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Button, type ButtonProps } from "./button";
+import { cn } from "@/lib/cn";
+
+export interface IconButtonProps
+  extends Omit<ButtonProps, "size" | "children"> {
+  /** Accessible label for the icon-only button. */
+  label: string;
+  size?: "sm" | "default" | "lg";
+  children?: JSX.Element;
+}
+
+/** An accessible square button intended for a single icon action. */
+export const IconButton: Component<IconButtonProps> = (props) => {
+  const [local, rest] = splitProps(props, ["label", "size", "class", "children"]);
+
+  return (
+    <Button
+      size="icon"
+      aria-label={local.label}
+      class={cn(
+        {
+          "size-8": local.size === "sm",
+          "size-9": !local.size || local.size === "default",
+          "size-10": local.size === "lg",
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </Button>
+  );
+};

package/src/registry/components/ui/number-input.tsx

@@ -0,0 +1,150 @@
+import { createSignal, onCleanup, splitProps, type Component, type JSX } from "solid-js";
+import { NumberField as KobalteNumberField } from "@kobalte/core/number-field";
+import { Plus, Minus } from "lucide-solid";
+import { Input } from "./input";
+import { Button } from "./button";
+import { createLongPress } from "@nikala-ui/hooks";
+import { cn } from "@/lib/cn";
+
+export interface NumberInputProps {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  allowNegative?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  class?: string;
+  id?: string;
+}
+
+export const NumberInput: Component<NumberInputProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "minValue",
+    "maxValue",
+    "step",
+    "allowNegative",
+    "disabled",
+    "readOnly",
+    "class",
+    "id",
+  ]);
+
+  const [internalVal, setInternalVal] = createSignal<number>(
+    local.value !== undefined
+      ? local.value
+      : local.defaultValue !== undefined
+      ? local.defaultValue
+      : 0
+  );
+
+  let autoRepeatInterval: ReturnType<typeof setInterval> | undefined;
+
+  const currentVal = () => (local.value !== undefined ? local.value : internalVal());
+
+  const effectiveMin = () => {
+    if (local.minValue !== undefined) return local.minValue;
+    return local.allowNegative ? -Infinity : 0;
+  };
+
+  const effectiveMax = () => {
+    if (local.maxValue !== undefined) return local.maxValue;
+    return Infinity;
+  };
+
+  const handleValueChange = (val: number) => {
+    if (isNaN(val)) return;
+    const clamped = Math.max(effectiveMin(), Math.min(effectiveMax(), val));
+    setInternalVal(clamped);
+    local.onValueChange?.(clamped);
+  };
+
+  const stopAutoRepeat = () => {
+    if (autoRepeatInterval) {
+      clearInterval(autoRepeatInterval);
+      autoRepeatInterval = undefined;
+    }
+  };
+
+  const startAutoRepeat = (direction: 1 | -1) => {
+    if (local.disabled || local.readOnly) return;
+    stopAutoRepeat();
+    const stepAmount = local.step || 1;
+    autoRepeatInterval = setInterval(() => {
+      handleValueChange(currentVal() + direction * stepAmount);
+    }, 75);
+  };
+
+  /* Nikala UI createLongPress hook for Increment Trigger */
+  const incrementLongPress = createLongPress(
+    () => {
+      startAutoRepeat(1);
+    },
+    {
+      threshold: 300,
+      onCancel: stopAutoRepeat,
+    }
+  );
+
+  /* Nikala UI createLongPress hook for Decrement Trigger */
+  const decrementLongPress = createLongPress(
+    () => {
+      startAutoRepeat(-1);
+    },
+    {
+      threshold: 300,
+      onCancel: stopAutoRepeat,
+    }
+  );
+
+  onCleanup(() => stopAutoRepeat());
+
+  return (
+    <KobalteNumberField
+      value={currentVal()}
+      onRawValueChange={handleValueChange}
+      minValue={effectiveMin()}
+      maxValue={effectiveMax()}
+      step={local.step || 1}
+      disabled={local.disabled}
+      readOnly={local.readOnly}
+      id={local.id}
+      class={cn("relative flex items-center max-w-[160px]", local.class)}
+      {...rest}
+    >
+      <KobalteNumberField.Input
+        as={Input}
+        class="pr-16 text-center font-mono focus-visible:ring-1"
+      />
+
+      <div class="absolute right-1 flex items-center gap-0.5">
+        <KobalteNumberField.DecrementTrigger
+          as={Button}
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none"
+          aria-label="Decrement value"
+          {...decrementLongPress.props}
+        >
+          <Minus class="h-3.5 w-3.5" />
+        </KobalteNumberField.DecrementTrigger>
+
+        <KobalteNumberField.IncrementTrigger
+          as={Button}
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7 rounded-sm p-0 text-muted-foreground hover:text-foreground select-none"
+          aria-label="Increment value"
+          {...incrementLongPress.props}
+        >
+          <Plus class="h-3.5 w-3.5" />
+        </KobalteNumberField.IncrementTrigger>
+      </div>
+    </KobalteNumberField>
+  );
+};

package/src/registry/components/ui/resizable.tsx

@@ -0,0 +1,193 @@
+import {
+  createSignal,
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createElementSize } from "@nikala-ui/hooks";
+import { GripVertical, GripHorizontal } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export interface ResizableContextValue {
+  orientation: Accessor<"horizontal" | "vertical">;
+  registerPanel: (id: string, initialSizes: number) => void;
+  sizes: Accessor<Record<string, number>>;
+  startDragging: (handleIndex: number, event: PointerEvent) => void;
+  containerRef: () => HTMLDivElement | undefined;
+}
+
+const ResizableContext = createContext<ResizableContextValue>();
+
+export interface ResizableGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ResizableGroup: Component<ResizableGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["orientation", "class", "children"]);
+  const orientation = () => local.orientation || "horizontal";
+  let containerEl: HTMLDivElement | undefined;
+
+  const [panelOrder, setPanelOrder] = createSignal<string[]>([]);
+  const [sizes, setSizes] = createSignal<Record<string, number>>({});
+
+  const registerPanel = (id: string, initialSize: number) => {
+    setPanelOrder((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    setSizes((prev) => (prev[id] !== undefined ? prev : { ...prev, [id]: initialSize }));
+  };
+
+  const startDragging = (handleIndex: number, event: PointerEvent) => {
+    if (!containerEl) return;
+    event.preventDefault();
+
+    const order = panelOrder();
+    if (handleIndex < 0 || handleIndex >= order.length - 1) return;
+
+    const leftId = order[handleIndex];
+    const rightId = order[handleIndex + 1];
+
+    const isHoriz = orientation() === "horizontal";
+    const startPos = isHoriz ? event.clientX : event.clientY;
+    const rect = containerEl.getBoundingClientRect();
+    const totalPx = isHoriz ? rect.width : rect.height;
+
+    const startLeftPct = sizes()[leftId] ?? 50;
+    const startRightPct = sizes()[rightId] ?? 50;
+
+    const onPointerMove = (e: PointerEvent) => {
+      const currentPos = isHoriz ? e.clientX : e.clientY;
+      const deltaPx = currentPos - startPos;
+      const deltaPct = (deltaPx / totalPx) * 100;
+
+      let newLeft = startLeftPct + deltaPct;
+      let newRight = startRightPct - deltaPct;
+
+      if (newLeft < 10) {
+        newLeft = 10;
+        newRight = startLeftPct + startRightPct - 10;
+      } else if (newRight < 10) {
+        newRight = 10;
+        newLeft = startLeftPct + startRightPct - 10;
+      }
+
+      setSizes((prev) => ({
+        ...prev,
+        [leftId]: newLeft,
+        [rightId]: newRight,
+      }));
+    };
+
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  return (
+    <ResizableContext.Provider
+      value={{
+        orientation,
+        registerPanel,
+        sizes,
+        startDragging,
+        containerRef: () => containerEl,
+      }}
+    >
+      <div
+        ref={containerEl}
+        class={cn(
+          "flex h-full w-full overflow-hidden rounded-lg border border-border bg-background",
+          orientation() === "vertical" ? "flex-col" : "flex-row",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ResizableContext.Provider>
+  );
+};
+
+export interface ResizablePanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  initialSize?: number;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ResizablePanel: Component<ResizablePanelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["id", "initialSize", "class", "children"]);
+  const ctx = useContext(ResizableContext);
+
+  if (!ctx) {
+    throw new Error("ResizablePanel must be used within a ResizableGroup");
+  }
+
+  ctx.registerPanel(local.id, local.initialSize ?? 50);
+
+  const currentPct = () => ctx.sizes()[local.id] ?? local.initialSize ?? 50;
+
+  const containerSize = createElementSize(() => ctx.containerRef());
+
+  return (
+    <div
+      class={cn("overflow-auto transition-[flex-basis] duration-75", local.class)}
+      style={{
+        "flex-basis": `${currentPct()}%`,
+        "flex-grow": 0,
+        "flex-shrink": 0,
+      }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+export interface ResizableHandleProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  handleIndex: number;
+  withHandle?: boolean;
+  class?: string;
+}
+
+export const ResizableHandle: Component<ResizableHandleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["handleIndex", "withHandle", "class"]);
+  const ctx = useContext(ResizableContext);
+
+  if (!ctx) {
+    throw new Error("ResizableHandle must be used within a ResizableGroup");
+  }
+
+  const isHoriz = () => ctx.orientation() === "horizontal";
+
+  return (
+    <div
+      role="separator"
+      tabIndex={0}
+      class={cn(
+        "relative flex select-none items-center justify-center bg-border transition-colors hover:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-col-resize",
+        isHoriz() ? "h-full w-1.5 cursor-col-resize" : "h-1.5 w-full cursor-row-resize",
+        local.class
+      )}
+      onPointerDown={(e) => ctx.startDragging(local.handleIndex, e)}
+      {...rest}
+    >
+      {local.withHandle && (
+        <div class="z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border bg-muted shadow-2xs">
+          {isHoriz() ? (
+            <GripVertical class="h-2.5 w-2.5 text-muted-foreground" />
+          ) : (
+            <GripHorizontal class="h-2.5 w-2.5 text-muted-foreground" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};