Adding components

.changeset/CHANGELOG.md

@@ -0,0 +1,48 @@
+# @arkitect-ui/react & @arkitect-ui/solid Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.2.0] - 2026-02-28
+
+### Added
+
+#### React Components
+
+- **Alert Dialog** - Modal dialog for alerts and confirmations
+- **Avatar** - User avatar with fallback support
+- **Badge** - Status badges and labels
+- **Button** - Multi-variant button component
+- **Card** - Container card component
+- **Center** - Centering layout utility
+- **Chart** - Recharts-based chart component
+- **Checkbox** - Custom checkbox input
+- **Collapsible** - Expandable/collapsible content
+- **Combobox** - Autocomplete/combobox dropdown
+- **Copy Id Button** - Copy element ID to clipboard
+- **Data Table** - TanStack table implementation
+- **Data Table Filters** - Table filtering utilities
+- **Dialog** - Modal dialog component
+- **Dropdown Menu** - Dropdown menu component
+- **Empty** - Empty state placeholder
+- **Float** - Floating element positioning
+- **Grid** - CSS Grid layout component
+- **Grid Pattern** - Grid background pattern
+- **Input** - Text input component
+- **Input Group** - Input with added controls/buttons
+- **Label** - Form label component
+- **Marquee** - Scrolling text marquee
+- **Pagination** - Pagination controls
+- **Select** - Custom select dropdown
+- **Separator** - Visual divider
+- **Sheet** - Slide-out panel
+- **Sidebar** - Collapsible sidebar navigation
+- **Skeleton** - Loading placeholder
+- **Stack** - Flexbox layout utility
+- **Table** - Data table component
+- **Textarea** - Multi-line text input
+- **Toast** - Toast notification system
+- **Tooltip** - Hover tooltip component
+
+#### Solid.js Components
+
+All React components listed above are also available for Solid.js with the same API.

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/great-deer-relate.md

@@ -0,0 +1,44 @@
+---
+"@arkitect-ui/react": minor
+"@arkitect-ui/solid": minor
+"@arkitect-ui/shared": patch
+---
+
+# Initial Component Release
+
+## React Components
+
+- **Alert Dialog** - Modal dialog for alerts and confirmations
+- **Avatar** - User avatar with fallback support
+- **Badge** - Status badges and labels
+- **Button** - Multi-variant button component
+- **Card** - Container card component
+- **Center** - Centering layout utility
+- **Chart** - Recharts-based chart component
+- **Checkbox** - Custom checkbox input
+- **Collapsible** - Expandable/collapsible content
+- **Combobox** - Autocomplete/combobox dropdown
+- **Copy Id Button** - Copy element ID to clipboard
+- **Data Table** - TanStack table implementation
+- **Data Table Filters** - Table filtering utilities
+- **Dialog** - Modal dialog component
+- **Dropdown Menu** - Dropdown menu component
+- **Empty** - Empty state placeholder
+- **Float** - Floating element positioning
+- **Grid** - CSS Grid layout component
+- **Grid Pattern** - Grid background pattern
+- **Input** - Text input component
+- **Input Group** - Input with added controls/buttons
+- **Label** - Form label component
+- **Marquee** - Scrolling text marquee
+- **Pagination** - Pagination controls
+- **Select** - Custom select dropdown
+- **Separator** - Visual divider
+- **Sheet** - Slide-out panel
+- **Sidebar** - Collapsible sidebar navigation
+- **Skeleton** - Loading placeholder
+- **Stack** - Flexbox layout utility
+- **Table** - Data table component
+- **Textarea** - Multi-line text input
+- **Toast** - Toast notification system
+- **Tooltip** - Hover tooltip component

.zed/settings.json

@@ -0,0 +1,7 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{
+  "hidden_files": ["node_modules"]
+}

apps/docs/astro.config.ts

@@ -60,11 +60,40 @@ export default defineConfig({
               {
                 label: "Components",
                 items: [
+                  "react/components/alert-dialog",
+                  "react/components/avatar",
+                  "react/components/badge",
                   "react/components/button",
+                  "react/components/card",
+                  "react/components/center",
+                  "react/components/chart",
+                  "react/components/checkbox",
+                  "react/components/collapsible",
+                  "react/components/combobox",
+                  "react/components/copy-id-button",
+                  "react/components/data-table",
+                  "react/components/data-table-filters",
                   "react/components/dialog",
                   "react/components/dropdown-menu",
+                  "react/components/empty",
+                  "react/components/float",
+                  "react/components/grid",
+                  "react/components/grid-pattern",
                   "react/components/input",
+                  "react/components/input-group",
+                  "react/components/marquee",
                   "react/components/label",
+                  "react/components/pagination",
+                  "react/components/select",
+                  "react/components/separator",
+                  "react/components/sheet",
+                  "react/components/sidebar",
+                  "react/components/skeleton",
+                  "react/components/stack",
+                  "react/components/table",
+                  "react/components/textarea",
+                  "react/components/toast",
+                  "react/components/tooltip",
                 ],
               },
             ],
@@ -82,11 +111,40 @@ export default defineConfig({
               {
                 label: "Components",
                 items: [
+                  "solid/components/alert-dialog",
+                  "solid/components/avatar",
+                  "solid/components/badge",
                   "solid/components/button",
+                  "solid/components/card",
+                  "solid/components/center",
+                  "solid/components/chart",
+                  "solid/components/checkbox",
+                  "solid/components/collapsible",
+                  "solid/components/combobox",
+                  "solid/components/copy-id-button",
+                  "solid/components/data-table",
+                  "solid/components/data-table-filters",
                   "solid/components/dialog",
                   "solid/components/dropdown-menu",
+                  "solid/components/empty",
+                  "solid/components/float",
+                  "solid/components/grid",
+                  "solid/components/grid-pattern",
                   "solid/components/input",
+                  "solid/components/input-group",
+                  "solid/components/marquee",
                   "solid/components/label",
+                  "solid/components/pagination",
+                  "solid/components/select",
+                  "solid/components/separator",
+                  "solid/components/sheet",
+                  "solid/components/sidebar",
+                  "solid/components/skeleton",
+                  "solid/components/stack",
+                  "solid/components/table",
+                  "solid/components/textarea",
+                  "solid/components/toast",
+                  "solid/components/tooltip",
                 ],
               },
             ],

apps/docs/package.json

@@ -31,6 +31,7 @@
     "react-dom": "catalog:",
     "sharp": "catalog:",
     "solid-js": "catalog:",
+    "starlight-changelogs": "catalog:",
     "starlight-sidebar-topics": "catalog:",
     "starlight-sidebar-topics-dropdown": "catalog:",
     "starlight-theme-nova": "catalog:",

apps/docs/src/content/docs/react/components/alert-dialog.mdx

@@ -0,0 +1,80 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+---
+
+import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
+import ComponentPreview from "@/components/ComponentPreview.astro";
+import alertDialogCode from "../../../../../../../packages/react/src/components/ui/alert-dialog.tsx?raw";
+
+## Component
+
+<ComponentPreview 
+  framework="react"
+  component="alertdialog"
+  story="default"
+  height="200px"
+  code={`import { useState } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Alert Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account
+            and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}`}
+  />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    <Tabs>
+      <TabItem label="npm">
+        ```bash
+        npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/alert-dialog.json
+        ```
+      </TabItem>
+      <TabItem label="pnpm">
+        ```bash
+        pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/alert-dialog.json
+        ```
+      </TabItem>
+      <TabItem label="bun">
+        ```bash
+        bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/alert-dialog.json
+        ```
+      </TabItem>
+    </Tabs>
+  </TabItem>
+  <TabItem label="Manual">
+    <Code code={alertDialogCode} lang="tsx" title="components/ui/alert-dialog.tsx" />
+  </TabItem>
+</Tabs>

apps/docs/src/content/docs/react/components/avatar.mdx

@@ -0,0 +1,54 @@
+---
+title: Avatar
+description: An image element with a fallback for loading and error states.
+---
+
+import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
+import ComponentPreview from "@/components/ComponentPreview.astro";
+import avatarCode from "../../../../../../../packages/react/src/components/ui/avatar.tsx?raw";
+
+## Component
+
+<ComponentPreview 
+  framework="react"
+  component="avatar"
+  story="default"
+  height="100px"
+  code={`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}`}
+  />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    <Tabs>
+      <TabItem label="npm">
+        ```bash
+        npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/avatar.json
+        ```
+      </TabItem>
+      <TabItem label="pnpm">
+        ```bash
+        pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/avatar.json
+        ```
+      </TabItem>
+      <TabItem label="bun">
+        ```bash
+        bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/avatar.json
+        ```
+      </TabItem>
+    </Tabs>
+  </TabItem>
+  <TabItem label="Manual">
+    <Code code={avatarCode} lang="tsx" title="components/ui/avatar.tsx" />
+  </TabItem>
+</Tabs>