@nikala-ui/core 0.6.0

package/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/src/registry/components/ui/select.tsx

@@ -0,0 +1,138 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import * as SelectPrimitive from "@kobalte/core/select";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { cn } from "@/lib/cn";
+
+export type SelectRootProps<Option = any, OptGroup = any, T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectRootProps<Option, OptGroup, T> & {
+    class?: string;
+  };
+
+/**
+ * Root Select component built on top of Kobalte headless primitives.
+ */
+export const Select = <Option = any, OptGroup = any, T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>
+) => {
+  const [local, rest] = splitProps(props as SelectRootProps, ["class"]);
+
+  return <SelectPrimitive.Root class={cn("relative w-full", local.class)} {...(rest as any)} />;
+};
+
+export type SelectTriggerProps<T extends ValidComponent = "button"> =
+  SelectPrimitive.SelectTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Trigger button opening the Select options list.
+ */
+export const SelectTrigger = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, SelectTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectTriggerProps, ["class", "children"]);
+
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer text-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <SelectPrimitive.Icon
+        as="svg"
+        class="h-4 w-4 opacity-50 transition-transform"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+};
+
+export type SelectValueProps<Option, T extends ValidComponent = "span"> =
+  SelectPrimitive.SelectValueProps<Option, T> & {
+    class?: string;
+  };
+
+/**
+ * Renders the currently selected option text or placeholder.
+ */
+export const SelectValue = <Option = any, T extends ValidComponent = "span">(
+  props: PolymorphicProps<T, SelectValueProps<Option, T>>
+) => {
+  const [local, rest] = splitProps(props as SelectValueProps<Option>, ["class"]);
+
+  return (
+    <SelectPrimitive.Value
+      class={cn("block truncate", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SelectContentProps<T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectContentProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Portaled overlay container rendering the listbox options.
+ */
+export const SelectContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectContentProps, ["class"]);
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        class={cn(
+          "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
+          local.class
+        )}
+        {...rest}
+      >
+        <SelectPrimitive.Listbox class="p-1 outline-none" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+};
+
+export type SelectItemProps<T extends ValidComponent = "li"> =
+  SelectPrimitive.SelectItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Individual option item choice inside SelectContent.
+ */
+export const SelectItem = <T extends ValidComponent = "li">(
+  props: PolymorphicProps<T, SelectItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SelectItemProps, ["class", "children"]);
+
+  return (
+    <SelectPrimitive.Item
+      class={cn(
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      <SelectPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
+    </SelectPrimitive.Item>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Orientation of the separator line */
+  orientation?: "horizontal" | "vertical";
+  /** Whether the element is purely visual or semantic for screen readers */
+  decorative?: boolean;
+  class?: string;
+}
+
+/**
+ * Nikala UI Separator component used to divide content visually or semantically.
+ */
+export const Separator: Component<SeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "decorative",
+    "class",
+  ]);
+
+  const orientation = () => local.orientation || "horizontal";
+  const isDecorative = () => local.decorative ?? true;
+
+  return (
+    <div
+      role={isDecorative() ? "none" : "separator"}
+      aria-orientation={isDecorative() ? undefined : orientation()}
+      class={cn(
+        "shrink-0 bg-border",
+        orientation() === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,216 @@
+import { splitProps, type Component, type JSX, type ValidComponent, Show } from "solid-js";
+import * as DialogPrimitive from "@kobalte/core/dialog";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+// Global CSS Keyframe Animations specifically designed for Kobalte animationend DOM events
+const sheetStyles = `
+@keyframes sheet-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes sheet-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes sheet-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes sheet-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes sheet-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes sheet-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+@keyframes sheet-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
+@keyframes sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes sheet-fade-out { from { opacity: 1; } to { opacity: 0; } }
+`;
+
+/**
+ * CVA variants for CSS keyframe slide animations across 4 edges.
+ */
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-card p-6 text-card-foreground shadow-lg",
+  {
+    variants: {
+      side: {
+        left: "fixed top-0 bottom-0 left-0 w-3/4 border-r border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-left_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-left_300ms_ease-in-out]",
+        right: "fixed top-0 bottom-0 right-0 w-3/4 border-l border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-right_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-right_300ms_ease-in-out]",
+        top: "fixed top-0 left-0 right-0 border-b border-border data-[expanded]:animate-[sheet-slide-in-top_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-top_300ms_ease-in-out]",
+        bottom: "fixed bottom-0 left-0 right-0 border-t border-border data-[expanded]:animate-[sheet-slide-in-bottom_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-bottom_300ms_ease-in-out]",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+export type SheetRootProps = DialogPrimitive.DialogRootProps;
+
+export const Sheet: Component<SheetRootProps> = (props) => {
+  return <DialogPrimitive.Root {...props} />;
+};
+
+export const SheetTrigger = DialogPrimitive.Trigger;
+export const SheetClose = DialogPrimitive.CloseButton;
+
+export interface SheetOverlayProps<T extends ValidComponent = "div"> {
+  /** Whether to apply background blur effect or keep transparent (default: true) */
+  blur?: boolean;
+  class?: string;
+}
+
+/**
+ * Backdrop overlay wrapper with fade-in and fade-out animations.
+ */
+export const SheetOverlay = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SheetOverlayProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetOverlayProps, ["class", "blur"]);
+
+  return (
+    <DialogPrimitive.Overlay
+      class={cn(
+        "fixed inset-0 z-50 data-[expanded]:animate-[sheet-fade-in_300ms_ease-in-out] data-[closed]:animate-[sheet-fade-out_300ms_ease-in-out]",
+        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-transparent",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SheetContentProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogContentProps<T> &
+  VariantProps<typeof sheetVariants> & {
+    /** Direction from which the sheet slides out: top, bottom, left, right */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Whether to display the top-right close (X) button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether clicking outside closes the sheet (default: true) */
+    closeOnOutsideClick?: boolean;
+    /** Whether to apply background backdrop blur (default: true) */
+    blur?: boolean;
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Main sheet container with smooth CSS keyframe slide animations.
+ */
+export const SheetContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SheetContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetContentProps, [
+    "side",
+    "showCloseButton",
+    "closeOnOutsideClick",
+    "blur",
+    "class",
+    "children",
+    "onPointerDownOutside",
+    "onInteractOutside",
+  ]);
+
+  const side = () => local.side || "right";
+
+  const handlePointerDownOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onPointerDownOutside === "function") {
+      local.onPointerDownOutside(e as any);
+    }
+  };
+
+  const handleInteractOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onInteractOutside === "function") {
+      local.onInteractOutside(e as any);
+    }
+  };
+
+  return (
+    <DialogPrimitive.Portal>
+      <style>{sheetStyles}</style>
+      <SheetOverlay blur={local.blur} />
+      <DialogPrimitive.Content
+        onPointerDownOutside={handlePointerDownOutside}
+        onInteractOutside={handleInteractOutside}
+        class={cn(sheetVariants({ side: side() }), local.class)}
+        {...(rest as any)}
+      >
+        {local.children}
+        <Show when={local.showCloseButton !== false}>
+          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm 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 cursor-pointer">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <span class="sr-only">Close</span>
+          </DialogPrimitive.CloseButton>
+        </Show>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+};
+
+export interface SheetHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const SheetHeader: Component<SheetHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col space-y-2 text-center sm:text-left", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface SheetFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const SheetFooter: Component<SheetFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export type SheetTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
+
+export const SheetTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, SheetTitleProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetTitleProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-lg font-semibold text-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SheetDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
+
+export const SheetDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, SheetDescriptionProps<T>>
+) => {
+  const [local, rest] = splitProps(props as SheetDescriptionProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};

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

@@ -0,0 +1,24 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Skeleton component for rendering animated pulse loading placeholders.
+ */
+export const Skeleton: Component<SkeletonProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "animate-pulse rounded-md bg-muted",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,79 @@
+import { createSignal, splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface SwitchProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Uncontrolled default checked state */
+  defaultChecked?: boolean;
+  /** Event handler triggered when toggle state changes */
+  onChange?: (checked: boolean) => void;
+  class?: string;
+}
+
+/**
+ * Nikala UI Switch component for boolean toggle inputs built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Switch: Component<SwitchProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity
+  const [local, rest] = splitProps(props, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "disabled",
+    "class",
+    "onClick",
+  ]);
+
+  // Internal state for uncontrolled mode
+  const [internalChecked, setInternalChecked] = createSignal(
+    local.defaultChecked ?? false
+  );
+
+  // Computed checked state supporting both controlled and uncontrolled modes
+  const isChecked = () =>
+    local.checked !== undefined ? local.checked : internalChecked();
+
+  const toggle = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+
+    const nextState = !isChecked();
+    if (local.checked === undefined) {
+      setInternalChecked(nextState);
+    }
+
+    if (typeof local.onChange === "function") {
+      local.onChange(nextState);
+    }
+
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isChecked()}
+      data-state={isChecked() ? "checked" : "unchecked"}
+      disabled={local.disabled}
+      onClick={toggle}
+      class={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        local.class
+      )}
+      {...rest}
+    >
+      <span
+        data-state={isChecked() ? "checked" : "unchecked"}
+        class={cn(
+          "pointer-events-none block h-4 w-4 rounded-sm bg-primary-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </button>
+  );
+};