soluid 0.1.1

package/dist/primitives/createToast.d.ts

@@ -0,0 +1,23 @@
+import type { FeedbackVariant } from "../core/types";
+export interface Toast {
+    id: string;
+    message: string;
+    variant?: FeedbackVariant;
+    duration?: number;
+}
+export interface ToastOptions {
+    /** Default auto-dismiss duration in ms (default: 5000) */
+    defaultDuration?: number;
+}
+export interface ToastInput {
+    message: string;
+    variant?: FeedbackVariant;
+    /** Duration in ms. Set to 0 to disable auto-dismiss. */
+    duration?: number;
+}
+export interface ToastReturn {
+    toasts: Toast[];
+    add: (input: ToastInput) => string;
+    dismiss: (id: string) => void;
+}
+export declare function createToast(options?: ToastOptions): ToastReturn;

package/dist/primitives/createToggle.d.ts

@@ -0,0 +1,19 @@
+import type { Accessor } from "solid-js";
+export interface ToggleOptions {
+    /** Initial pressed state (uncontrolled) */
+    defaultPressed?: boolean;
+    /** Controlled pressed state */
+    pressed?: Accessor<boolean>;
+    /** Called when pressed state changes */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export interface ToggleReturn {
+    pressed: Accessor<boolean>;
+    toggle: () => void;
+    setPressed: (value: boolean) => void;
+    props: {
+        "aria-pressed": Accessor<boolean>;
+        onClick: () => void;
+    };
+}
+export declare function createToggle(options?: ToggleOptions): ToggleReturn;

package/dist/primitives/index.d.ts

@@ -0,0 +1,10 @@
+export { createDisclosure } from "./createDisclosure";
+export type { DisclosureOptions, DisclosureReturn } from "./createDisclosure";
+export { createFocusTrap } from "./createFocusTrap";
+export type { FocusTrapOptions } from "./createFocusTrap";
+export { createToggle } from "./createToggle";
+export type { ToggleOptions, ToggleReturn } from "./createToggle";
+export { createToast } from "./createToast";
+export type { Toast, ToastOptions, ToastInput, ToastReturn, } from "./createToast";
+export { createPagination } from "./createPagination";
+export type { PaginationOptions, PaginationReturn } from "./createPagination";

package/dist/registry.js

@@ -0,0 +1,410 @@
+/**
+ * Core is always installed. It provides types, utils, CSS tokens, and theme.
+ */
+export const registry = {
+    // --- Core (always installed) ---
+    core: {
+        name: "core",
+        category: "core",
+        files: [
+            "core/types.ts",
+            "core/utils.ts",
+            "core/soluid.css",
+            "core/theme.ts",
+        ],
+        dependencies: [],
+        description: "Type definitions, CSS tokens, theme utilities",
+    },
+    // --- Primitives ---
+    "createDisclosure": {
+        name: "createDisclosure",
+        category: "primitives",
+        files: ["primitives/createDisclosure.ts"],
+        dependencies: ["core"],
+        description: "Open/close state management with a11y",
+    },
+    "createFocusTrap": {
+        name: "createFocusTrap",
+        category: "primitives",
+        files: ["primitives/createFocusTrap.ts"],
+        dependencies: ["core"],
+        npmDependencies: [
+            "@solid-primitives/active-element",
+            "@solid-primitives/event-listener",
+        ],
+        description: "Trap focus within a container element",
+    },
+    "createToggle": {
+        name: "createToggle",
+        category: "primitives",
+        files: ["primitives/createToggle.ts"],
+        dependencies: ["core"],
+        description: "On/off toggle state with a11y",
+    },
+    "createToast": {
+        name: "createToast",
+        category: "primitives",
+        files: ["primitives/createToast.ts"],
+        dependencies: ["core"],
+        npmDependencies: ["@solid-primitives/scheduled"],
+        description: "Toast notification queue management",
+    },
+    "createPagination": {
+        name: "createPagination",
+        category: "primitives",
+        files: ["primitives/createPagination.ts"],
+        dependencies: ["core"],
+        description: "Page state management",
+    },
+    // --- Layout ---
+    Stack: {
+        name: "Stack",
+        category: "components",
+        files: ["components/layout/Stack.tsx", "components/layout/Stack.css"],
+        dependencies: ["core"],
+        description: "Vertical flex layout with gap",
+    },
+    HStack: {
+        name: "HStack",
+        category: "components",
+        files: ["components/layout/HStack.tsx", "components/layout/HStack.css"],
+        dependencies: ["core"],
+        description: "Horizontal flex layout with gap",
+    },
+    Divider: {
+        name: "Divider",
+        category: "components",
+        files: ["components/layout/Divider.tsx", "components/layout/Divider.css"],
+        dependencies: ["core"],
+        description: "Horizontal/vertical separator",
+    },
+    Spacer: {
+        name: "Spacer",
+        category: "components",
+        files: ["components/layout/Spacer.tsx", "components/layout/Spacer.css"],
+        dependencies: ["core"],
+        description: "Flex spacer",
+    },
+    // --- General ---
+    Button: {
+        name: "Button",
+        category: "components",
+        files: ["components/general/Button.tsx", "components/general/Button.css"],
+        dependencies: ["core"],
+        description: "Primary, neutral, danger button with icon and loading",
+    },
+    IconButton: {
+        name: "IconButton",
+        category: "components",
+        files: [
+            "components/general/IconButton.tsx",
+            "components/general/IconButton.css",
+        ],
+        dependencies: ["core"],
+        description: "Icon-only button with aria-label",
+    },
+    Badge: {
+        name: "Badge",
+        category: "components",
+        files: ["components/general/Badge.tsx", "components/general/Badge.css"],
+        dependencies: ["core"],
+        description: "Status label",
+    },
+    Tag: {
+        name: "Tag",
+        category: "components",
+        files: ["components/general/Tag.tsx", "components/general/Tag.css"],
+        dependencies: ["core"],
+        description: "Removable label for filters",
+    },
+    Tooltip: {
+        name: "Tooltip",
+        category: "components",
+        files: ["components/general/Tooltip.tsx"],
+        dependencies: ["core"],
+        description: "Tooltip (placeholder)",
+    },
+    // --- Form ---
+    FormField: {
+        name: "FormField",
+        category: "components",
+        files: [
+            "components/form/FormField.tsx",
+            "components/form/FormField.css",
+            "components/form/FormFieldContext.ts",
+        ],
+        dependencies: ["core"],
+        description: "Label + error/hint wrapper for form inputs",
+    },
+    TextField: {
+        name: "TextField",
+        category: "components",
+        files: [
+            "components/form/TextField.tsx",
+            "components/form/TextField.css",
+        ],
+        dependencies: ["core", "FormField"],
+        description: "Text input with label/error/hint",
+    },
+    TextArea: {
+        name: "TextArea",
+        category: "components",
+        files: [
+            "components/form/TextArea.tsx",
+            "components/form/TextArea.css",
+        ],
+        dependencies: ["core", "FormField"],
+        description: "Multiline text input",
+    },
+    NumberInput: {
+        name: "NumberInput",
+        category: "components",
+        files: [
+            "components/form/NumberInput.tsx",
+            "components/form/NumberInput.css",
+        ],
+        dependencies: ["core", "FormField"],
+        description: "Number input with stepper buttons",
+    },
+    Select: {
+        name: "Select",
+        category: "components",
+        files: [
+            "components/form/Select.tsx",
+            "components/form/Select.css",
+        ],
+        dependencies: ["core", "FormField"],
+        description: "Native select dropdown",
+    },
+    Checkbox: {
+        name: "Checkbox",
+        category: "components",
+        files: [
+            "components/form/Checkbox.tsx",
+            "components/form/Checkbox.css",
+            "components/form/CheckboxGroupContext.ts",
+        ],
+        dependencies: ["core"],
+        description: "Checkbox with indeterminate support",
+    },
+    CheckboxGroup: {
+        name: "CheckboxGroup",
+        category: "components",
+        files: [
+            "components/form/CheckboxGroup.tsx",
+            "components/form/CheckboxGroup.css",
+        ],
+        dependencies: ["core", "Checkbox"],
+        description: "Checkbox group with shared state",
+    },
+    RadioGroup: {
+        name: "RadioGroup",
+        category: "components",
+        files: [
+            "components/form/RadioGroup.tsx",
+            "components/form/RadioGroup.css",
+            "components/form/RadioGroupContext.ts",
+            "components/form/RadioButton.tsx",
+            "components/form/RadioButton.css",
+        ],
+        dependencies: ["core"],
+        description: "Radio button group",
+    },
+    Switch: {
+        name: "Switch",
+        category: "components",
+        files: [
+            "components/form/Switch.tsx",
+            "components/form/Switch.css",
+        ],
+        dependencies: ["core", "createToggle"],
+        description: "Toggle switch",
+    },
+    // --- Data Display ---
+    Table: {
+        name: "Table",
+        category: "components",
+        files: ["components/data/Table.tsx", "components/data/Table.css"],
+        dependencies: ["core"],
+        description: "Data table with sort, pagination, row selection",
+    },
+    Card: {
+        name: "Card",
+        category: "components",
+        files: ["components/data/Card.tsx", "components/data/Card.css"],
+        dependencies: ["core"],
+        description: "Content card with header/body/footer",
+    },
+    DescriptionList: {
+        name: "DescriptionList",
+        category: "components",
+        files: [
+            "components/data/DescriptionList.tsx",
+            "components/data/DescriptionList.css",
+        ],
+        dependencies: ["core"],
+        description: "Key-value display",
+    },
+    Skeleton: {
+        name: "Skeleton",
+        category: "components",
+        files: ["components/data/Skeleton.tsx", "components/data/Skeleton.css"],
+        dependencies: ["core"],
+        description: "Loading placeholder",
+    },
+    EmptyState: {
+        name: "EmptyState",
+        category: "components",
+        files: [
+            "components/data/EmptyState.tsx",
+            "components/data/EmptyState.css",
+        ],
+        dependencies: ["core"],
+        description: "Empty data display with action",
+    },
+    // --- Feedback ---
+    Dialog: {
+        name: "Dialog",
+        category: "components",
+        files: ["components/feedback/Dialog.tsx", "components/feedback/Dialog.css"],
+        dependencies: ["core", "createFocusTrap"],
+        description: "Modal dialog with focus trap",
+    },
+    Drawer: {
+        name: "Drawer",
+        category: "components",
+        files: ["components/feedback/Drawer.tsx", "components/feedback/Drawer.css"],
+        dependencies: ["core", "createFocusTrap"],
+        description: "Side panel with focus trap",
+    },
+    Alert: {
+        name: "Alert",
+        category: "components",
+        files: ["components/feedback/Alert.tsx", "components/feedback/Alert.css"],
+        dependencies: ["core"],
+        description: "Inline notification",
+    },
+    Toast: {
+        name: "Toast",
+        category: "components",
+        files: ["components/feedback/Toast.tsx", "components/feedback/Toast.css"],
+        dependencies: ["core", "createToast"],
+        description: "Toast notification with queue",
+    },
+    Progress: {
+        name: "Progress",
+        category: "components",
+        files: [
+            "components/feedback/Progress.tsx",
+            "components/feedback/Progress.css",
+        ],
+        dependencies: ["core"],
+        description: "Progress bar",
+    },
+    Spinner: {
+        name: "Spinner",
+        category: "components",
+        files: [
+            "components/feedback/Spinner.tsx",
+            "components/feedback/Spinner.css",
+        ],
+        dependencies: ["core"],
+        description: "Loading spinner",
+    },
+    // --- Navigation ---
+    Tabs: {
+        name: "Tabs",
+        category: "components",
+        files: ["components/navigation/Tabs.tsx", "components/navigation/Tabs.css"],
+        dependencies: ["core"],
+        description: "Tab navigation",
+    },
+    Breadcrumb: {
+        name: "Breadcrumb",
+        category: "components",
+        files: [
+            "components/navigation/Breadcrumb.tsx",
+            "components/navigation/Breadcrumb.css",
+        ],
+        dependencies: ["core"],
+        description: "Breadcrumb navigation",
+    },
+    Pagination: {
+        name: "Pagination",
+        category: "components",
+        files: [
+            "components/navigation/Pagination.tsx",
+            "components/navigation/Pagination.css",
+        ],
+        dependencies: ["core"],
+        description: "Page navigation",
+    },
+    Menu: {
+        name: "Menu",
+        category: "components",
+        files: ["components/navigation/Menu.tsx"],
+        dependencies: ["core"],
+        description: "Dropdown menu (placeholder)",
+    },
+    // --- Utility ---
+    VisuallyHidden: {
+        name: "VisuallyHidden",
+        category: "components",
+        files: [
+            "components/utility/VisuallyHidden.tsx",
+            "components/utility/VisuallyHidden.css",
+        ],
+        dependencies: [],
+        description: "Screen reader only content",
+    },
+    Popover: {
+        name: "Popover",
+        category: "components",
+        files: ["components/utility/Popover.tsx"],
+        dependencies: ["core"],
+        description: "Floating element (placeholder)",
+    },
+};
+/** Resolve all dependencies recursively for a list of component names. */
+export function resolveDependencies(names) {
+    const resolved = new Set();
+    function walk(name) {
+        if (resolved.has(name))
+            return;
+        const entry = registry[name];
+        if (!entry)
+            return;
+        for (const dep of entry.dependencies) {
+            walk(dep);
+        }
+        resolved.add(name);
+    }
+    for (const n of names) {
+        walk(n);
+    }
+    // core always first
+    const result = Array.from(resolved);
+    const coreIdx = result.indexOf("core");
+    if (coreIdx > 0) {
+        result.splice(coreIdx, 1);
+        result.unshift("core");
+    }
+    return result;
+}
+/** Collect all npm dependencies for resolved entries. */
+export function collectNpmDeps(names) {
+    const deps = new Set();
+    for (const name of names) {
+        const entry = registry[name];
+        if (entry?.npmDependencies) {
+            for (const d of entry.npmDependencies) {
+                deps.add(d);
+            }
+        }
+    }
+    return Array.from(deps).sort();
+}
+/** Get all component names (excluding core). */
+export function allComponentNames() {
+    return Object.keys(registry).filter((k) => k !== "core");
+}

package/dist/rewrite-imports.js

@@ -0,0 +1,42 @@
+import * as path from "node:path";
+/**
+ * Rewrite internal soluid imports in a template file.
+ *
+ * Template files use relative imports like:
+ *   import { cls } from "../../core/utils"
+ *   import { FormField } from "./FormField"
+ *   import { createFocusTrap } from "../../primitives/createFocusTrap"
+ *
+ * These need to be rewritten to point to the correct location
+ * in the user's project, using either an alias or relative paths.
+ */
+export function rewriteImports(content, filePath, // path of this file relative to componentDir (e.g. "components/form/TextField.tsx")
+config) {
+    // Match import statements with relative paths (starting with . or ..)
+    const importRegex = /((?:import|export)\s+(?:type\s+)?(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+["'])(\.[^"']+)(["'])/g;
+    return content.replace(importRegex, (_match, prefix, importPath, suffix) => {
+        // Resolve the import path relative to the file's location within the template tree
+        const fileDir = path.dirname(filePath);
+        const resolvedInTemplate = path.normalize(path.join(fileDir, importPath));
+        // Now create the correct import path for the user's project
+        const newImportPath = buildImportPath(resolvedInTemplate, fileDir, config);
+        return `${prefix}${newImportPath}${suffix}`;
+    });
+}
+function buildImportPath(targetPathInTemplate, // e.g. "core/utils" or "components/form/FormField"
+sourceDir, // e.g. "components/form"
+config) {
+    if (config.alias) {
+        // Use alias: @/components/ui/core/utils
+        const aliasRoot = config.aliasBase
+            ? `${config.alias}/${config.componentDir.replace(new RegExp(`^${config.aliasBase}/`), "")}`
+            : `${config.alias}/${config.componentDir}`;
+        return `${aliasRoot}/${targetPathInTemplate}`;
+    }
+    // Use relative path from source file to target
+    let rel = path.relative(sourceDir, targetPathInTemplate);
+    if (!rel.startsWith(".")) {
+        rel = "./" + rel;
+    }
+    return rel;
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "soluid",
+  "version": "0.1.1",
+  "componentsVersion": "0.1.1",
+  "type": "module",
+  "description": "SolidJS Opinionated UI - copy-paste component toolkit",
+  "license": "MIT",
+  "bin": {
+    "soluid": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:cli": "tsc -p cli/tsconfig.json",
+    "prepare": "npm run build:cli",
+    "typecheck": "tsc --noEmit",
+    "fmt": "dprint fmt",
+    "fmt:check": "dprint check",
+    "lint": "oxlint src/ cli/",
+    "lint:fix": "oxlint --fix src/ cli/"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.34",
+    "dprint": "^0.52.0",
+    "oxlint": "^1.50.0",
+    "solid-js": "^1.9.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.0"
+  },
+  "dependencies": {
+    "tar": "^7.5.9"
+  }
+}