@nikala-ui/docs 0.12.0

package/dist/vendor/core-src/registry/components/ui/pin-input.tsx

@@ -0,0 +1,198 @@
+import {
+  createSignal,
+  createMemo,
+  createContext,
+  useContext,
+  type JSX,
+} from "solid-js";
+import { cn } from "@/lib/cn";
+
+export type PinInputType = "numeric" | "alphanumeric";
+
+export interface PinInputContextValue {
+  value: () => string;
+  setValue: (val: string) => void;
+  mask: () => boolean;
+  disabled: () => boolean;
+  length: () => number;
+  type: () => PinInputType;
+  containerRef: HTMLDivElement | undefined;
+}
+
+const PinInputContext = createContext<PinInputContextValue>();
+
+export interface PinInputProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  length?: number;
+  type?: PinInputType;
+  mask?: boolean;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Root PinInput component for 4 or 6-digit OTP / verification PIN codes.
+ */
+export const PinInput = (props: PinInputProps) => {
+  let containerRef: HTMLDivElement | undefined;
+  const [internalValue, setInternalValue] = createSignal(props.value ?? "");
+
+  const value = () => props.value ?? internalValue();
+  const mask = () => props.mask ?? false;
+  const disabled = () => props.disabled ?? false;
+  const length = () => props.length ?? 6;
+
+  const inputType = (): PinInputType => {
+    const t = props.type ?? "numeric";
+    if (t !== "numeric" && t !== "alphanumeric") {
+      return "numeric";
+    }
+    return t;
+  };
+
+  const handleValueChange = (val: string) => {
+    setInternalValue(val);
+    props.onValueChange?.(val);
+  };
+
+  const contextValue: PinInputContextValue = {
+    value,
+    setValue: handleValueChange,
+    mask,
+    disabled,
+    length,
+    type: inputType,
+    get containerRef() {
+      return containerRef;
+    },
+  };
+
+  return (
+    <PinInputContext.Provider value={contextValue}>
+      <div ref={containerRef} class={cn("flex items-center gap-2", props.class)}>
+        {props.children}
+      </div>
+    </PinInputContext.Provider>
+  );
+};
+
+export interface PinInputLabelProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Accessible label for PinInput.
+ */
+export const PinInputLabel = (props: PinInputLabelProps) => {
+  return (
+    <label class={cn("text-sm font-medium leading-none text-foreground", props.class)}>
+      {props.children}
+    </label>
+  );
+};
+
+const focusIndex = (containerRef: HTMLDivElement | undefined, index: number) => {
+  const el = containerRef?.querySelector<HTMLInputElement>(
+    `[data-pin-input-index="${index}"]`
+  );
+  el?.focus();
+  el?.select();
+};
+
+export interface PinInputInputProps {
+  index: number;
+  class?: string;
+}
+
+/**
+ * Individual input slot for a single OTP digit/character.
+ */
+export const PinInputInput = (props: PinInputInputProps) => {
+  const ctx = useContext(PinInputContext);
+  const digit = createMemo(() => ctx?.value()[props.index] ?? "");
+
+  const isCharAllowed = (char: string) => {
+    if (!ctx || char === "") return false;
+    return ctx.type() === "numeric"
+      ? /^[0-9]$/.test(char)
+      : /^[a-zA-Z0-9]$/.test(char);
+  };
+
+  const commitChar = (char: string) => {
+    if (!ctx) return;
+    const currentArray = ctx.value().split("");
+    while (currentArray.length < props.index) currentArray.push("");
+    currentArray[props.index] = char;
+    ctx.setValue(currentArray.join(""));
+  };
+
+  const handleInput = (e: InputEvent & { currentTarget: HTMLInputElement }) => {
+    if (!ctx || ctx.disabled()) return;
+    const val = e.currentTarget.value;
+    const rawChar = val ? val[val.length - 1] : "";
+
+    // Clear digit if input is empty
+    if (rawChar === "") {
+      commitChar("");
+      return;
+    }
+
+    if (!isCharAllowed(rawChar)) {
+      e.currentTarget.value = digit();
+      return;
+    }
+
+    commitChar(rawChar);
+
+    if (props.index < ctx.length() - 1) {
+      focusIndex(ctx.containerRef, props.index + 1);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!ctx || ctx.disabled()) return;
+    if (e.key === "Backspace" && digit() === "" && props.index > 0) {
+      focusIndex(ctx.containerRef, props.index - 1);
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!ctx || ctx.disabled()) return;
+    e.preventDefault();
+    const pasted = e.clipboardData?.getData("text") ?? "";
+    const chars = pasted.split("").filter(isCharAllowed);
+    if (chars.length === 0) return;
+
+    const currentArray = ctx.value().split("");
+    let lastFilled = props.index;
+    for (let i = 0; i < chars.length && props.index + i < ctx.length(); i++) {
+      while (currentArray.length < props.index + i) currentArray.push("");
+      currentArray[props.index + i] = chars[i];
+      lastFilled = props.index + i;
+    }
+    ctx.setValue(currentArray.join(""));
+    focusIndex(ctx.containerRef, Math.min(lastFilled + 1, ctx.length() - 1));
+  };
+
+  return (
+    <input
+      type={ctx?.mask() ? "password" : "text"}
+      inputMode={ctx?.type() === "numeric" ? "numeric" : "text"}
+      autocomplete="one-time-code"
+      maxLength={1}
+      disabled={ctx?.disabled()}
+      data-pin-input-index={props.index}
+      value={digit()}
+      onInput={handleInput}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      class={cn(
+        "relative flex h-10 w-10 text-center text-sm font-semibold rounded-md border border-input bg-background shadow-xs transition-all focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50",
+        props.class
+      )}
+    />
+  );
+};

package/dist/vendor/core-src/registry/components/ui/popover.tsx

@@ -0,0 +1,90 @@
+import { splitProps, type Component, type ComponentProps } from "solid-js";
+import { Popover as KobaltePopover } from "@kobalte/core/popover";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { X } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const Popover = KobaltePopover;
+
+export const PopoverTrigger = KobaltePopover.Trigger;
+
+export const PopoverArrow: Component<ComponentProps<typeof KobaltePopover.Arrow>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobaltePopover.Arrow
+      class={cn("fill-popover stroke-border", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const PopoverContent: Component<ComponentProps<typeof KobaltePopover.Content>> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children", "onInteractOutside"]);
+  let contentRef: HTMLElement | undefined;
+
+  createClickOutside({
+    target: () => contentRef,
+    onInteractOutside: (e) => {
+      if (typeof local.onInteractOutside === "function") {
+        local.onInteractOutside(e as any);
+      }
+    },
+  });
+
+  return (
+    <KobaltePopover.Portal>
+      <KobaltePopover.Content
+        ref={(el) => {
+          contentRef = el;
+          if (typeof (props as any).ref === "function") (props as any).ref(el);
+        }}
+        class={cn(
+          "z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobaltePopover.Content>
+    </KobaltePopover.Portal>
+  );
+};
+
+export const PopoverTitle: Component<ComponentProps<typeof KobaltePopover.Title>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobaltePopover.Title
+      class={cn("text-sm font-semibold text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const PopoverDescription: Component<ComponentProps<typeof KobaltePopover.Description>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobaltePopover.Description
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const PopoverCloseButton: Component<ComponentProps<typeof KobaltePopover.CloseButton>> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <KobaltePopover.CloseButton
+      class={cn(
+        "absolute right-2 top-2 rounded-md p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <X class="h-4 w-4 text-muted-foreground" />}
+    </KobaltePopover.CloseButton>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/progress.tsx

@@ -0,0 +1,66 @@
+import { splitProps, Show, type Component, type JSX } from "solid-js";
+import { Progress as KobalteProgress } from "@kobalte/core/progress";
+import { cn } from "@/lib/cn";
+
+export interface ProgressProps
+  extends Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "value" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax"
+  > {
+  /** The current numeric progress value. */
+  value?: number;
+  /** Minimum progress value. Defaults to 0. */
+  minValue?: number;
+  /** Maximum progress value. Defaults to 100. */
+  maxValue?: number;
+  /** Label text for accessibility and screen readers. */
+  getValueLabel?: (params: { value: number; max: number }) => string;
+  /** Custom label element to display above or beside progress bar. */
+  label?: JSX.Element;
+  /** Optional custom class for root container. */
+  class?: string;
+  /** Optional custom class for indicator fill bar. */
+  indicatorClass?: string;
+}
+
+/**
+ * Nikala UI Progress component for showing task completion status or media timeline positions.
+ */
+export const Progress: Component<ProgressProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "minValue",
+    "maxValue",
+    "getValueLabel",
+    "label",
+    "class",
+    "indicatorClass",
+  ]);
+
+  return (
+    <KobalteProgress
+      value={local.value ?? 0}
+      minValue={local.minValue ?? 0}
+      maxValue={local.maxValue ?? 100}
+      getValueLabel={local.getValueLabel}
+      class={cn("flex w-full flex-col gap-1.5", local.class)}
+      {...rest}
+    >
+      <Show when={local.label}>
+        <div class="flex justify-between text-xs font-medium text-muted-foreground">
+          <KobalteProgress.Label>{local.label}</KobalteProgress.Label>
+          <KobalteProgress.ValueLabel class="font-mono text-foreground" />
+        </div>
+      </Show>
+
+      <KobalteProgress.Track class="relative h-2 w-full overflow-hidden rounded-lg bg-primary/20">
+        <KobalteProgress.Fill
+          class={cn(
+            "h-full w-(--kb-progress-fill-width) bg-primary transition-all duration-300 ease-in-out",
+            local.indicatorClass
+          )}
+        />
+      </KobalteProgress.Track>
+    </KobalteProgress>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/radio-group.tsx

@@ -0,0 +1,95 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import * as RadioGroupPrimitive from "@kobalte/core/radio-group";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { cn } from "@/lib/cn";
+
+export type RadioGroupRootProps<T extends ValidComponent = "div"> =
+  RadioGroupPrimitive.RadioGroupRootProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Root RadioGroup component built on top of Kobalte headless primitives.
+ * Supports both "vertical" (default) and "horizontal" layout orientations.
+ */
+export const RadioGroup = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, RadioGroupRootProps<T>>
+) => {
+  const [local, rest] = splitProps(props as RadioGroupRootProps, ["class", "orientation"]);
+
+  const isHorizontal = () => local.orientation === "horizontal";
+
+  return (
+    <RadioGroupPrimitive.Root
+      orientation={local.orientation || "vertical"}
+      class={cn(
+        isHorizontal()
+          ? "flex flex-row items-center gap-4"
+          : "grid gap-2",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type RadioGroupItemProps<T extends ValidComponent = "div"> =
+  RadioGroupPrimitive.RadioGroupItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    id?: string;
+    value: string;
+  };
+
+/**
+ * Accessible RadioGroup item choice wrapping Kobalte primitives.
+ */
+export const RadioGroupItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, RadioGroupItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as RadioGroupItemProps, ["class", "children"]);
+
+  return (
+    <RadioGroupPrimitive.Item
+      class={cn("flex items-center space-x-2 cursor-pointer", local.class)}
+      {...rest}
+    >
+      <RadioGroupPrimitive.ItemInput />
+      <RadioGroupPrimitive.ItemControl
+        class={cn(
+          "aspect-square h-4 w-4 rounded-lg border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center transition-colors data-[checked]:bg-primary data-[checked]:text-primary-foreground"
+        )}
+      >
+        <RadioGroupPrimitive.ItemIndicator class="flex items-center justify-center">
+          <span class="h-2 w-2 rounded-lg bg-primary-foreground" />
+        </RadioGroupPrimitive.ItemIndicator>
+      </RadioGroupPrimitive.ItemControl>
+      {local.children}
+    </RadioGroupPrimitive.Item>
+  );
+};
+
+export type RadioGroupItemLabelProps<T extends ValidComponent = "label"> =
+  RadioGroupPrimitive.RadioGroupItemLabelProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Accessible text label for a RadioGroup item.
+ */
+export const RadioGroupItemLabel = <T extends ValidComponent = "label">(
+  props: PolymorphicProps<T, RadioGroupItemLabelProps<T>>
+) => {
+  const [local, rest] = splitProps(props as RadioGroupItemLabelProps, ["class"]);
+
+  return (
+    <RadioGroupPrimitive.ItemLabel
+      class={cn(
+        "text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};

package/dist/vendor/core-src/registry/components/ui/rating.tsx

@@ -0,0 +1,185 @@
+import {
+  createSignal,
+  splitProps,
+  For,
+  type JSX,
+  type Component,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Star } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const ratingVariants = cva(
+  "inline-flex items-center select-none transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "gap-0.5",
+        default: "gap-1",
+        lg: "gap-1.5",
+      },
+      variant: {
+        yellow: "text-amber-500 dark:text-amber-400",
+        primary: "text-primary",
+        destructive: "text-destructive",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "yellow",
+    },
+  }
+);
+
+export const ratingStarVariants = cva(
+  "transition-all duration-150 shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        default: "size-4.5",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface RatingProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof ratingVariants> {
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  readOnly?: boolean;
+  disabled?: boolean;
+  class?: string;
+  starClass?: string;
+  onChange?: (value: number) => void;
+  onHover?: (value: number | null) => void;
+}
+
+export const Rating: Component<RatingProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "max",
+    "readOnly",
+    "disabled",
+    "size",
+    "variant",
+    "class",
+    "starClass",
+    "onChange",
+    "onHover",
+  ]);
+
+  const [internalValue, setInternalValue] = createSignal(
+    local.defaultValue ?? 0
+  );
+  const [hoverValue, setHoverValue] = createSignal<number | null>(null);
+
+  const currentValue = () =>
+    local.value !== undefined ? local.value : internalValue();
+
+  const maxStars = () => local.max ?? 5;
+  const isInteractive = () => !local.readOnly && !local.disabled;
+
+  const stars = () => Array.from({ length: maxStars() }, (_, i) => i + 1);
+
+  const handleSelect = (starValue: number) => {
+    if (!isInteractive()) return;
+    if (local.value === undefined) {
+      setInternalValue(starValue);
+    }
+    local.onChange?.(starValue);
+  };
+
+  const handleMouseEnter = (starValue: number) => {
+    if (!isInteractive()) return;
+    setHoverValue(starValue);
+    local.onHover?.(starValue);
+  };
+
+  const handleMouseLeave = () => {
+    if (!isInteractive()) return;
+    setHoverValue(null);
+    local.onHover?.(null);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isInteractive()) return;
+
+    const val = currentValue();
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = Math.min(maxStars(), val + 1);
+      handleSelect(next);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const prev = Math.max(1, val - 1);
+      handleSelect(prev);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      handleSelect(1);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      handleSelect(maxStars());
+    }
+  };
+
+  return (
+    <div
+      role={isInteractive() ? "radiogroup" : "img"}
+      aria-label={`Rating: ${currentValue()} of ${maxStars()} stars`}
+      tabIndex={isInteractive() ? 0 : undefined}
+      onKeyDown={handleKeyDown}
+      onMouseLeave={handleMouseLeave}
+      class={cn(
+        ratingVariants({ size: local.size, variant: local.variant }),
+        local.disabled && "opacity-50 cursor-not-allowed",
+        isInteractive() && "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+        local.class
+      )}
+      {...rest}
+    >
+      <For each={stars()}>
+        {(star) => {
+          const isFilled = () => {
+            const active = hoverValue() !== null ? hoverValue()! : currentValue();
+            return star <= active;
+          };
+
+          return (
+            <button
+              type="button"
+              disabled={local.disabled || local.readOnly}
+              tabIndex={-1}
+              aria-label={`${star} star${star > 1 ? "s" : ""}`}
+              onClick={() => handleSelect(star)}
+              onMouseEnter={() => handleMouseEnter(star)}
+              class={cn(
+                "p-0.5 border-0 bg-transparent transition-transform focus:outline-hidden",
+                isInteractive() && "hover:scale-115 active:scale-95 cursor-pointer",
+                local.readOnly && "cursor-default",
+                local.disabled && "cursor-not-allowed"
+              )}
+            >
+              <Star
+                class={cn(
+                  ratingStarVariants({ size: local.size }),
+                  isFilled()
+                    ? "fill-current"
+                    : "text-muted-foreground/30 fill-transparent",
+                  local.starClass
+                )}
+              />
+            </button>
+          );
+        }}
+      </For>
+    </div>
+  );
+};