@nikala-ui/core 0.10.1 → 0.11.0

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

@@ -0,0 +1,350 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- Timeline Context --- */
+interface TimelineContextValue {
+  orientation: Accessor<"vertical" | "horizontal">;
+  align: Accessor<"left" | "right" | "alternate">;
+  size: Accessor<"sm" | "default" | "lg">;
+}
+
+const TimelineContext = createContext<TimelineContextValue>();
+
+export interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {
+  /** Layout orientation of the timeline */
+  orientation?: "vertical" | "horizontal";
+  /** Alignment of content relative to the timeline line */
+  align?: "left" | "right" | "alternate";
+  /** Sizing of dots and spacing */
+  size?: "sm" | "default" | "lg";
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Root container for chronological timeline event sequences.
+ */
+export const Timeline: Component<TimelineProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "align",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation ?? "vertical";
+  const align = () => local.align ?? "left";
+  const size = () => local.size ?? "default";
+
+  const contextValue: TimelineContextValue = {
+    orientation,
+    align,
+    size,
+  };
+
+  return (
+    <TimelineContext.Provider value={contextValue}>
+      <ol
+        role="list"
+        data-orientation={orientation()}
+        data-align={align()}
+        class={cn(
+          "relative flex",
+          orientation() === "vertical"
+            ? "flex-col w-full"
+            : "flex-row w-full items-start",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </ol>
+    </TimelineContext.Provider>
+  );
+};
+
+/* --- Timeline Item --- */
+export interface TimelineItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Individual event row container in the timeline.
+ */
+export const TimelineItem: Component<TimelineItemProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <li
+      class={cn(
+        "group relative flex",
+        isVertical()
+          ? "min-h-[3.5rem] w-full items-start"
+          : "flex-1 min-w-0 flex-col items-start",
+        isVertical() && align() === "right" && "flex-row-reverse",
+        isVertical() && align() === "alternate" && "[&:nth-child(even)]:flex-row-reverse",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </li>
+  );
+};
+
+/* --- Timeline Separator (Dot + Connector wrapper) --- */
+export interface TimelineSeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const TimelineSeparator: Component<TimelineSeparatorProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "flex shrink-0 relative",
+        isVertical()
+          ? "flex-col items-center self-stretch"
+          : "flex-row items-center w-full",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Timeline Point / Dot --- */
+export const timelinePointVariants = cva(
+  "relative z-10 flex shrink-0 items-center justify-center rounded-lg font-medium transition-all shadow-xs",
+  {
+    variants: {
+      variant: {
+        default: "border-2 bg-background",
+        solid: "text-primary-foreground",
+        subtle: "bg-muted text-muted-foreground",
+        outline: "border-2 border-border bg-card text-foreground",
+      },
+      status: {
+        default: "border-border text-foreground bg-card",
+        primary: "border-primary bg-primary text-primary-foreground",
+        success: "border-emerald-500 bg-emerald-500 text-white dark:border-emerald-400 dark:bg-emerald-400",
+        warning: "border-amber-500 bg-amber-500 text-white dark:border-amber-400 dark:bg-amber-400",
+        destructive: "border-destructive bg-destructive text-destructive-foreground",
+        muted: "border-border/60 bg-muted text-muted-foreground",
+      },
+      size: {
+        sm: "size-5 text-[10px] [&_svg]:size-3",
+        default: "size-8 text-xs [&_svg]:size-4",
+        lg: "size-10 text-sm [&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      status: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface TimelinePointProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof timelinePointVariants> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Status indicator node or icon container in the timeline separator.
+ */
+export const TimelinePoint: Component<TimelinePointProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "status",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  const size = () => local.size || context?.size() || "default";
+
+  return (
+    <div
+      class={cn(
+        timelinePointVariants({
+          variant: local.variant,
+          status: local.status,
+          size: size(),
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Timeline Connector (Line track) --- */
+export interface TimelineConnectorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  dashed?: boolean;
+  class?: string;
+}
+
+/**
+ * Line track connecting sequential timeline items.
+ */
+export const TimelineConnector: Component<TimelineConnectorProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["dashed", "class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "transition-colors group-last:hidden",
+        isVertical()
+          ? "w-0.5 flex-1 min-h-6 my-1 bg-border"
+          : "h-0.5 flex-1 min-w-4 mx-2 bg-border",
+        local.dashed && (
+          isVertical()
+            ? "border-l-2 border-dashed border-border bg-transparent w-0"
+            : "border-t-2 border-dashed border-border bg-transparent h-0"
+        ),
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Content (Event Details) --- */
+export interface TimelineContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Primary container holding the description, title, and body for a timeline event.
+ */
+export const TimelineContent: Component<TimelineContentProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col",
+        isVertical() ? "flex-1 pb-6 pt-0.5" : "pt-2 pr-2 text-left",
+        isVertical() && align() === "left" && "text-left pl-3.5 pr-0",
+        isVertical() && align() === "right" && "text-right pr-3.5 pl-0",
+        isVertical() && align() === "alternate" && "text-left pl-3.5 group-even:text-right group-even:pr-3.5 group-even:pl-0",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Opposite Content --- */
+export interface TimelineOppositeContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Content placed on the opposite side of the timeline separator (e.g. timestamps in alternate layouts).
+ */
+export const TimelineOppositeContent: Component<TimelineOppositeContentProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col text-xs text-muted-foreground",
+        align() !== "alternate" && "hidden",
+        isVertical()
+          ? "flex-1 pb-6 pt-1 text-right pr-3.5 group-even:text-left group-even:pl-3.5 group-even:pr-0"
+          : "pb-1 pr-2",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Title --- */
+export interface TimelineTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const TimelineTitle: Component<TimelineTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h4
+      class={cn("text-sm font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Description --- */
+export interface TimelineDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const TimelineDescription: Component<TimelineDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Time --- */
+export interface TimelineTimeProps extends JSX.HTMLAttributes<HTMLTimeElement> {
+  class?: string;
+}
+
+export const TimelineTime: Component<TimelineTimeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <time
+      class={cn("text-xs font-medium text-muted-foreground/80", local.class)}
+      {...rest}
+    />
+  );
+};

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[];
 }