shapes-ui 0.1.1

package/.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)

package/.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": []
+}

package/.cta.json

@@ -0,0 +1,12 @@
+{
+  "projectName": "shapes-ui",
+  "mode": "file-router",
+  "typescript": true,
+  "packageManager": "npm",
+  "tailwind": true,
+  "addOnOptions": {},
+  "git": true,
+  "version": 1,
+  "framework": "react-cra",
+  "chosenAddOns": ["start"]
+}

package/.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release
+
+on:
+    push:
+        branches:
+            - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+    release:
+        name: Release
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            pull-requests: write
+        steps:
+            - name: Checkout Repo
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js 20
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+
+            - uses: pnpm/action-setup@v3
+              with:
+                  version: 9
+
+            - name: Install Dependencies
+              run: pnpm install
+
+            - name: Create Release Pull Request or Publish to npm
+              id: changesets
+              uses: changesets/action@v1
+              with:
+                  # This runs when changesets are detected to create a PR,
+                  # OR when the version PR is merged to publish.
+                  publish: pnpm release
+                  commit: "chore: version packages"
+                  title: "chore: version packages"
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.oxfmtrc.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [],
+  "experimentalTailwindcss": {
+    "stylesheet": "./src/styles/styles.css",
+    "attributes": ["class", "className"],
+    "functions": ["clsx", "cn", "cva"],
+    "preserveWhitespace": true
+  },
+  "experimentalSortImports": {
+    "groups": [
+      ["side-effect"],
+      ["builtin"],
+      ["external", "type-external"],
+      ["internal", "type-internal"],
+      ["parent", "type-parent"],
+      ["sibling", "type-sibling"],
+      ["index", "type-index"]
+    ]
+  }
+}

package/.oxlintrc.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": null,
+  "categories": {},
+  "rules": {},
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# shapes-ui
+
+## 0.1.1
+
+### Patch Changes
+
+- 42852ef: added mising dep
+
+## 0.1.0
+
+### Minor Changes
+
+- 0fbf911: Added badge component
+- 73c6324: Added button component
+- 8574db7: added accordion component
+- 20e8386: added alert dialog component
+- 5de8809: Setup docs, styles, scripts and everything else.
+
+### Patch Changes
+
+- a938a75: Setup cloudflare hosting
+- 668e868: Setup registry build, and examples for the docs

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Abdullah Khan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Shapes UI

package/content/components/accordion.mdx

@@ -0,0 +1,41 @@
+---
+title: Accordion
+slug: accordion
+description: Expandable sections that reveal content one at a time, or multiple sections can be expanded simultaneously.
+---
+
+<RenderPreview name="accordion-demo" />
+
+## Installation
+
+<InstallationBlock name="accordion" />
+
+## Examples
+
+### Default
+
+<RenderPreview name="accordion-demo" />
+
+### Surface
+
+An accordion with background, useful for when you want to visually separate the accordion from the rest of the content.
+
+<RenderPreview name="accordion-surface" />
+
+### Multiple
+
+Pass the `multiple` prop to allow multiple sections to be expanded at the same time.
+
+<RenderPreview name="accordion-multiple" />
+
+### Small
+
+Pass the `size="small"` prop to reduce the padding and font size of the accordion items. This is useful for when you want a more compact accordion.
+
+<RenderPreview name="accordion-small" />
+
+### With icon
+
+Add icons to accordion triggers to provide visual context for each section.
+
+<RenderPreview name="accordion-icon" />

package/content/components/alert-dialog.mdx

@@ -0,0 +1,25 @@
+---
+title: Alert dialog
+slug: alert-dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+---
+
+<RenderPreview name="alert-dialog-demo" />
+
+## Installation
+
+<InstallationBlock name="alert-dialog" />
+
+## Examples
+
+### Default
+
+<RenderPreview name="alert-dialog-demo" />
+
+### Destructive action
+
+<RenderPreview name="alert-dialog-destructive" />
+
+### With icon
+
+<RenderPreview name="alert-dialog-icon" />

package/content/components/alert.mdx

@@ -0,0 +1,53 @@
+---
+title: Alert
+slug: alert
+description: Contextual messages for user feedback.
+---
+
+<RenderPreview name="alert-demo" />
+
+## Installation
+
+<InstallationBlock name="alert" />
+
+## Examples
+
+### Default
+
+<RenderPreview name="alert-demo" />
+
+### Success
+
+<RenderPreview name="alert-success" />
+
+### Warning
+
+<RenderPreview name="alert-warning" />
+
+### Info
+
+<RenderPreview name="alert-info" />
+
+### Destructive
+
+<RenderPreview name="alert-destructive" />
+
+### With action
+
+Add buttons to alerts for user actions like retry, dismiss, or learn more.
+
+<RenderPreview name="alert-action" />
+
+### With link
+
+Include inline links within alert descriptions.
+
+<RenderPreview name="alert-link" />
+
+### Title only
+
+<RenderPreview name="alert-title" />
+
+### Description only
+
+<RenderPreview name="alert-description" />

package/content/components/badge.mdx

@@ -0,0 +1,27 @@
+---
+title: Badge
+slug: badge
+description: Displays a badge or a component that looks like a badge.
+---
+
+<RenderPreview name="badge-demo" />
+
+## Installation
+
+<InstallationBlock name="badge" />
+
+## Examples
+
+### Variants
+
+<RenderPreview name="badge-variants" />
+
+### Status variants
+
+<RenderPreview name="badge-status" />
+
+### With icon
+
+Use <code>data-icon="start"</code> or <code>data-icon="end"</code> to position icons.
+
+<RenderPreview name="badge-status-icon" />

package/content/components/button.mdx

@@ -0,0 +1,55 @@
+---
+title: Button
+slug: button
+description: Composable buttons with predefined sizes and variants. Triggers events and actions.
+---
+
+<RenderPreview name="button-demo" />
+
+## Installation
+
+<InstallationBlock name="button" />
+
+## Examples
+
+### Sizes
+
+Sizes are controlled by the `size` prop. Variants are controlled by the `variant` prop.
+
+<RenderPreview name="button-sizes" />
+
+### Default
+
+<RenderPreview name="button-default" />
+
+### Outlined
+
+<RenderPreview name="button-outline" />
+
+### Ghost
+
+<RenderPreview name="button-ghost" />
+
+### Destructive
+
+<RenderPreview name="button-destructive" />
+
+### Success
+
+<RenderPreview name="button-success" />
+
+### Warning
+
+<RenderPreview name="button-warning" />
+
+### Info
+
+<RenderPreview name="button-info" />
+
+### Link
+
+<RenderPreview name="button-link" />
+
+### Loading
+
+<RenderPreview name="button-loading" />

package/content-collections.ts

@@ -0,0 +1,67 @@
+import { defineCollection, defineConfig } from "@content-collections/core";
+import { compileMDX } from "@content-collections/mdx";
+import rehypePrettyCode from "rehype-pretty-code";
+import remarkGfm from "remark-gfm";
+import { z } from "zod";
+
+const components = defineCollection({
+  name: "components",
+  directory: "content/components",
+  include: "*.mdx",
+  schema: z.object({
+    title: z.string(),
+    slug: z.string(),
+    description: z.string().optional(),
+    content: z.string(),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      files: (appender) => {
+        appender.file(
+          "@/components/docs/markdown/render-preview",
+          "./src/components/docs/markdown/render-preview.tsx",
+        );
+      },
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [
+        [
+          rehypePrettyCode,
+          {
+            theme: {
+              light: "github-light",
+              dark: "github-dark",
+            },
+            keepBackground: false,
+            transformers: [
+              {
+                name: "line-numbers",
+                pre(node: any) {
+                  node.properties["data-line-numbers"] = "";
+                },
+                line(node: any, line: number) {
+                  node.properties.className = ["line"];
+                  node.children.unshift({
+                    type: "element",
+                    tagName: "span",
+                    properties: {
+                      className: ["line-number"],
+                    },
+                    children: [{ type: "text", value: String(line) }],
+                  });
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    });
+    return {
+      ...document,
+      mdx,
+    };
+  },
+});
+
+export default defineConfig({
+  collections: [components],
+});

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node