@nikala-ui/core 0.10.0 → 0.10.1-nightly.3fd7ba3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.10.0",
+  "version": "0.10.1-nightly.3fd7ba3",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,

package/registry/button-group.json

@@ -0,0 +1,20 @@
+{
+  "name": "button-group",
+  "title": "Button Group",
+  "description": "Groups related buttons into a connected horizontal or vertical control.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/button-group.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Controls whether grouped buttons are arranged in a row or column. */\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n}\n\n/**\n * Groups adjacent buttons into a connected control with shared borders and radii.\n *\n * ButtonGroup is intentionally presentational. Use Button for individual actions\n * and compose the group with the same reactive state as the surrounding feature.\n */\nexport const ButtonGroup: Component<ButtonGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n\n  return (\n    <div\n      role=\"group\"\n      data-orientation={orientation()}\n      class={cn(\n        \"isolate inline-flex\",\n        orientation() === \"horizontal\"\n          ? \"flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none\"\n          : \"flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none\",\n        \"[&>button:focus-visible]:z-10\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/index.json

@@ -74,6 +74,19 @@
       "tailwind-merge"
     ]
   },
+  {
+    "name": "button-group",
+    "title": "Button Group",
+    "description": "Groups related buttons into a connected horizontal or vertical control.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "button"
+    ]
+  },
   {
     "name": "button",
     "title": "Button",

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

@@ -0,0 +1,42 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Controls whether grouped buttons are arranged in a row or column. */
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+}
+
+/**
+ * Groups adjacent buttons into a connected control with shared borders and radii.
+ *
+ * ButtonGroup is intentionally presentational. Use Button for individual actions
+ * and compose the group with the same reactive state as the surrounding feature.
+ */
+export const ButtonGroup: Component<ButtonGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation ?? "horizontal";
+
+  return (
+    <div
+      role="group"
+      data-orientation={orientation()}
+      class={cn(
+        "isolate inline-flex",
+        orientation() === "horizontal"
+          ? "flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none"
+          : "flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none",
+        "[&>button:focus-visible]:z-10",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/src/registry/metadata.ts

@@ -16,6 +16,12 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
     registryDependencies: ["spinner"],
   },
+  "button-group": {
+    title: "Button Group",
+    description: "Groups related buttons into a connected horizontal or vertical control.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["button"],
+  },
   input: {
     title: "Input",
     description: "A standard text input field with styling variants.",