@nikala-ui/core 0.10.1-nightly.4e09f2a → 0.11.0

package/src/registry/components/ui/toggle-group.tsx

@@ -0,0 +1,203 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { createControllableSignal } from "@nikala-ui/hooks";
+import { cn } from "@/lib/cn";
+
+export const toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3 min-w-9",
+        sm: "h-8 px-2 text-xs min-w-8",
+        lg: "h-10 px-3 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface ToggleGroupContextValue {
+  type: "single" | "multiple";
+  value: Accessor<any>;
+  onItemSelect: (itemValue: string) => void;
+  variant: Accessor<"default" | "outline">;
+  size: Accessor<"default" | "sm" | "lg">;
+  disabled: Accessor<boolean>;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>();
+
+export interface ToggleGroupProps<T extends "single" | "multiple" = "single">
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof toggleGroupItemVariants> {
+  /** Mode of selection: single choice or multiple choices */
+  type?: T;
+  /** Controlled value: string for 'single', string[] for 'multiple' */
+  value?: T extends "multiple" ? string[] : string;
+  /** Uncontrolled default value */
+  defaultValue?: T extends "multiple" ? string[] : string;
+  /** Callback fired when selection changes */
+  onChange?: (value: T extends "multiple" ? string[] : string) => void;
+  /** Layout orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Disables all buttons in the group */
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Root container for grouping connected toggle items with shared single/multiple selection state.
+ */
+export const ToggleGroup = <T extends "single" | "multiple" = "single">(
+  props: ToggleGroupProps<T>
+) => {
+  const [local, rest] = splitProps(props, [
+    "type",
+    "value",
+    "defaultValue",
+    "onChange",
+    "orientation",
+    "variant",
+    "size",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  const type = () => local.type ?? ("single" as T);
+  const variant = () => local.variant ?? "default";
+  const size = () => local.size ?? "default";
+  const disabled = () => local.disabled ?? false;
+  const orientation = () => local.orientation ?? "horizontal";
+
+  const [currentValue, setCurrentValue] = createControllableSignal<any>({
+    value: () => local.value,
+    defaultValue: local.defaultValue ?? (type() === "multiple" ? [] : undefined),
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const onItemSelect = (itemValue: string) => {
+    if (disabled()) return;
+
+    if (type() === "multiple") {
+      const currentList = Array.isArray(currentValue()) ? currentValue() : [];
+      if (currentList.includes(itemValue)) {
+        setCurrentValue(currentList.filter((v: string) => v !== itemValue));
+      } else {
+        setCurrentValue([...currentList, itemValue]);
+      }
+    } else {
+      const current = currentValue();
+      if (current === itemValue) {
+        setCurrentValue(undefined);
+      } else {
+        setCurrentValue(itemValue);
+      }
+    }
+  };
+
+  const contextValue: ToggleGroupContextValue = {
+    type: type(),
+    value: currentValue,
+    onItemSelect,
+    variant,
+    size,
+    disabled,
+  };
+
+  return (
+    <ToggleGroupContext.Provider value={contextValue}>
+      <div
+        role="group"
+        data-orientation={orientation()}
+        class={cn(
+          "flex items-center justify-center gap-1 rounded-lg",
+          orientation() === "vertical" ? "flex-col" : "flex-row",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ToggleGroupContext.Provider>
+  );
+};
+
+export interface ToggleGroupItemProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleGroupItemVariants> {
+  /** Unique value representing this toggle item within the group */
+  value: string;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Individual toggle button item within a ToggleGroup.
+ */
+export const ToggleGroupItem: Component<ToggleGroupItemProps> = (props) => {
+  const context = useContext(ToggleGroupContext);
+
+  if (!context) {
+    throw new Error("ToggleGroupItem must be used within a ToggleGroup");
+  }
+
+  const [local, rest] = splitProps(props, [
+    "value",
+    "variant",
+    "size",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  const isSelected = () => {
+    const groupValue = context.value();
+    if (context.type === "multiple") {
+      return Array.isArray(groupValue) && groupValue.includes(local.value);
+    }
+    return groupValue === local.value;
+  };
+
+  const isDisabled = () => local.disabled || context.disabled();
+  const itemVariant = () => local.variant || context.variant();
+  const itemSize = () => local.size || context.size();
+
+  return (
+    <button
+      type="button"
+      role={context.type === "single" ? "radio" : "checkbox"}
+      aria-checked={isSelected()}
+      data-state={isSelected() ? "on" : "off"}
+      disabled={isDisabled()}
+      onClick={() => context.onItemSelect(local.value)}
+      class={cn(
+        toggleGroupItemVariants({
+          variant: itemVariant(),
+          size: itemSize(),
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};

package/src/registry/index.ts

@@ -9,7 +9,7 @@ export interface RegistryFile {
   /** The full raw text content of the file */
   content: string;
   /** The category type of the file */
-  type: "registry:ui" | "registry:util" | "registry:hook";
+  type: "registry:ui" | "registry:util" | "registry:hook" | "registry:block";
 }
 
 /**
@@ -23,7 +23,7 @@ export interface RegistryItem {
   /** Short summary describing the component */
   description: string;
   /** Component category type */
-  type: "registry:ui" | "registry:util" | "registry:hook";
+  type: "registry:ui" | "registry:util" | "registry:hook" | "registry:block";
   /** Required NPM dependencies to be installed automatically (e.g., ["clsx", "tailwind-merge"]) */
   dependencies?: string[];
   /** Internal Nikala UI component dependencies required by this component (e.g., ["button"]) */
@@ -39,7 +39,7 @@ export interface RegistryIndexItem {
   name: string;
   title: string;
   description: string;
-  type: "registry:ui" | "registry:util" | "registry:hook";
+  type: "registry:ui" | "registry:util" | "registry:hook" | "registry:block";
   dependencies?: string[];
   registryDependencies?: string[];
 }

package/src/registry/metadata.ts

@@ -288,6 +288,81 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
     registryDependencies: ["create-drop-zone"],
   },
+  "toggle-group": {
+    title: "Toggle Group",
+    description: "A set of two-state buttons that can be toggled on or off with single or multiple selection modes.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["create-controllable-signal"],
+  },
+  timeline: {
+    title: "Timeline",
+    description: "A responsive chronological display for event streams, activity logs, order tracking, and multi-step workflows.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  "navigation-menu": {
+    title: "Navigation Menu",
+    description: "A responsive and accessible top header navigation menu with mega-menu dropdowns and link previews.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["create-click-outside"],
+  },
+  navbar: {
+    title: "Navbar",
+    description: "A responsive, accessible, and composable top navigation header suite supporting nested dropdown flyouts, floating card containers, and mobile navigation drawers.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+  },
+  footer: {
+    title: "Footer",
+    description: "A responsive, accessible, and structured bottom navigation layout suite supporting multi-column link directories, brand sections, and newsletter inputs.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  stat: {
+    title: "Stat",
+    description: "Display key performance indicators, statistics, financial data, and metrics with trends and icons.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+  },
+  marquee: {
+    title: "Marquee",
+    description: "A smooth, GPU-accelerated infinite scrolling ticker component for logo clouds, testimonials, and live ribbons.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  "review-card": {
+    title: "Review Card",
+    description: "A versatile, structured card component for customer testimonials, product ratings, verified buyer badges, and social proof.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["avatar", "rating"],
+  },
+  rating: {
+    title: "Rating",
+    description: "An accessible star rating component supporting interactive inputs, hover preview states, and read-only score badges.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+  },
+  pagination: {
+    title: "Pagination",
+    description: "An accessible multi-page navigation bar with previous, next, page numbers, and ellipsis controls.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["create-pagination"],
+  },
+  message: {
+    title: "Message",
+    description: "A structured chat and conversation message layout with avatars, alignment, headers, footers, and actions.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  bubble: {
+    title: "Bubble",
+    description: "Chat message bubble container supporting variants, grouped consecutive bubbles, and emoji reactions.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  marker: {
+    title: "Marker",
+    description: "System chat events, date dividers, and live typing indicator badges.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  sidebar: {
+    title: "Sidebar",
+    description: "A composable, collapsible, and accessible application sidebar navigation suite with icon mode, mobile drawer, and keyboard shortcuts.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+    registryDependencies: ["tooltip", "skeleton", "separator"],
+  },
 };
 
 /**
@@ -458,4 +533,49 @@ export const HOOK_METADATA: Record<string, ComponentMeta> = {
     title: "createDropZone",
     description: "SolidJS reactive primitive for file drag & drop operations, validation, and file chooser dialogs",
   },
+  "create-pagination": {
+    title: "createPagination",
+    description: "SolidJS reactive primitive for computing pagination state, dynamic page ranges with ellipses, and navigation controls",
+  },
+  "create-chat-scroll": {
+    title: "createChatScroll",
+    description: "SolidJS reactive primitive for automated chat container scrolling with manual scroll-up detection",
+  },
+};
+
+/**
+ * Static metadata configuration for ready-to-use application and marketing blocks.
+ */
+export const BLOCK_METADATA: Record<string, ComponentMeta> = {
+  "hero-01": {
+    title: "Hero 01 — Simple Centered with Actions",
+    description: "A clean centered hero section with badge pill, high-contrast headline, and dual CTA buttons.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["button", "badge"],
+  },
+  "login-01": {
+    title: "Login 01 — Split Screen with Social Auth & Testimonial",
+    description: "A modern split-screen authentication page block with OAuth providers, email sign-in form, and brand testimonial visual.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["button", "input", "label", "checkbox", "separator", "form", "field", "form-message"],
+  },
+  "register-01": {
+    title: "Register 01 — Sign-Up Card with Password Strength",
+    description: "A comprehensive sign-up card featuring social logins, live password strength meter with validation checklist, and terms agreement.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["card", "input", "label", "button", "checkbox", "progress", "badge", "separator", "form", "field", "form-message"],
+  },
+  "otp-verification-01": {
+    title: "OTP Verification 01 — Two-Factor Security Code",
+    description: "A clean 2-Factor Authentication block with a 6-digit PIN input, countdown resend timer, and security notifications.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["card", "pin-input", "button", "alert", "badge", "form"],
+  },
+  "forgot-password-01": {
+    title: "Forgot Password 01 — Account Recovery Flow",
+    description: "A sleek password recovery block with email instructions submission and success confirmation states.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["card", "input", "label", "button", "alert", "form", "field", "form-message"],
+  },
 };
+