@becklyn/components 0.2.2 → 0.3.1

package/README.md

@@ -15,7 +15,7 @@ We also add storybook stories to the components. You need to have storybook inst
 Initialize your project with the necessary configuration.
 
 ```bash
-npx becklyn-components init [options]
+npx @becklyn/components init [options]
 ```
 
 This command will:
@@ -27,7 +27,7 @@ This command will:
 Add components to your project by copying them from the library.
 
 ```bash
-npx becklyn-components add <component> [component...] [options]
+npx @becklyn/components add <component> [component...] [options]
 ```
 
 **Options:**
@@ -40,11 +40,11 @@ npx becklyn-components add <component> [component...] [options]
 
 ```bash
 # Add a single component
-npx becklyn-components add button
+npx @becklyn/components add button
 
 # Add multiple components
-npx becklyn-components add button card dialog
+npx @becklyn/components add button card dialog
 
 # Specify custom directories
-npx becklyn-components add button --components src/ui
+npx @becklyn/components add button --components src/ui
 ```

package/components/atoms/Clickable/Clickable.module.scss

@@ -0,0 +1,32 @@
+@use "@becklyn/next/scss/mixins" as *;
+
+.clickable {
+    display: inline-flex;
+
+    &.disabled {
+        pointer-events: none;
+        color: #777;
+    }
+}
+
+.primary {
+    @include hover {
+        background-color: #000;
+        color: #fff;
+    }
+}
+
+.secondary {
+    @include hover {
+        background-color: #00f;
+        color: #fff;
+    }
+}
+
+.tertiary {
+    text-decoration: underline;
+
+    @include hover {
+        text-decoration: none;
+    }
+}

package/components/atoms/Clickable/Clickable.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Clickable } from "./Clickable";
+
+const meta: Meta<typeof Clickable> = {
+    title: "Atoms/Button/Button",
+    component: Clickable,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            options: ["primary", "secondary", "tertiary"],
+        },
+        disabled: {
+            control: "boolean",
+        },
+        onClick: { action: "clicked" },
+    },
+    render: args => {
+        const handleOnClick = () => {
+            alert("Button clicked!");
+        };
+
+        return (
+            <div className="story-container large flex">
+                <Clickable {...args} onClick={handleOnClick} />
+                <Clickable {...args} href="#">
+                    Button as Link
+                </Clickable>
+            </div>
+        );
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Clickable>;
+
+export const Primary: Story = {
+    args: {
+        variant: "primary",
+        children: "Button",
+    },
+};
+
+export const PrimaryDisabled: Story = {
+    args: {
+        variant: "primary",
+        children: "Button",
+        disabled: true,
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: "secondary",
+        children: "Button",
+    },
+};
+
+export const SecondaryDisabled: Story = {
+    args: {
+        variant: "secondary",
+        children: "Button",
+        disabled: true,
+    },
+};
+
+export const Tertiary: Story = {
+    args: {
+        variant: "tertiary",
+        children: "Button",
+    },
+};
+
+export const TertiaryDisabled: Story = {
+    args: {
+        variant: "tertiary",
+        children: "Button",
+        disabled: true,
+    },
+};

package/components/atoms/Clickable/Clickable.tsx

@@ -0,0 +1,47 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC, PropsWithChildren } from "react";
+import Link from "next/link";
+import clsx from "clsx";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+import styles from "./Clickable.module.scss";
+
+interface ClickableProps {
+    href: string;
+    type: "button" | "submit" | "reset";
+    variant?: "primary" | "secondary" | "tertiary";
+    disabled?: boolean;
+    onClick?: () => void;
+}
+
+const ClickableWrapperComponent: FC<PropsWithChildren<PropsWithClassName<ClickableProps>>> = ({
+    children,
+    ...props
+}) => {
+    return props.href ? (
+        <Link href={props.href} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}>
+            {children}
+        </Link>
+    ) : (
+        <button
+            type={props.type || "button"}
+            {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>
+            {children}
+        </button>
+    );
+};
+
+export const Clickable: FC<PropsWithChildren<PropsWithClassName<ClickableProps>>> = props => {
+    const { variant, disabled, className, ...restProps } = props;
+
+    return (
+        <ClickableWrapperComponent
+            {...restProps}
+            className={clsx(
+                styles.clickable,
+                variant ? styles[variant] : undefined,
+                disabled && styles.disabled,
+                className
+            )}>
+            {props.children}
+        </ClickableWrapperComponent>
+    );
+};

package/components/atoms/TextInput/TextInput.module.scss

@@ -0,0 +1,31 @@
+@use "@becklyn/next/scss/mixins" as *;
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.input {
+    background-color: #fff;
+
+    @include hover {
+        background-color: #bbb;
+    }
+
+    @include focus {
+        background-color: #ddd;
+    }
+
+    @include transition(background-color);
+}
+
+.error {
+    color: #eb1c23;
+}
+
+.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: #777;
+}

package/components/atoms/TextInput/TextInput.stories.tsx

@@ -0,0 +1,56 @@
+import { FC, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { TextInput, TextInputProps } from "./TextInput";
+
+const InteractiveInput: FC<TextInputProps> = args => {
+    const [value, setValue] = useState("");
+
+    return <TextInput {...args} value={value} onChange={setValue} />;
+};
+
+const meta: Meta<typeof TextInput> = {
+    title: "Atoms/TextInput",
+    component: TextInput,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        label: { control: "text" },
+        placeholder: { control: "text" },
+        disabled: { control: "boolean" },
+        error: { control: "text" },
+    },
+    render: args => <InteractiveInput {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Default: Story = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+    },
+};
+
+export const WithoutLabel: Story = {
+    args: {
+        placeholder: "Text Label",
+    },
+};
+
+export const Error: Story = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+        error: "Lorem ipsum",
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+        disabled: true,
+    },
+};

package/components/atoms/TextInput/TextInput.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { FC, HTMLInputTypeAttribute, useId } from "react";
+import clsx from "clsx";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+import styles from "./TextInput.module.scss";
+
+export interface TextInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    type?: HTMLInputTypeAttribute;
+}
+
+export const TextInput: FC<PropsWithClassName<TextInputProps>> = ({
+    id: providedId,
+    label,
+    placeholder,
+    value,
+    error,
+    onChange,
+    disabled,
+    required,
+    className,
+    type = "text",
+}) => {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+
+    return (
+        <div className={clsx(styles.wrapper, className)}>
+            {label && (
+                <label htmlFor={id} className={styles.label}>
+                    {label}
+                    {required && " *"}
+                </label>
+            )}
+            <input
+                id={id}
+                value={value}
+                onChange={e => onChange?.(e.target.value)}
+                placeholder={placeholder}
+                disabled={disabled}
+                required={required}
+                className={clsx(styles.input, disabled && styles.disabled)}
+                type={type}
+            />
+            {error && (
+                <output
+                    htmlFor={id}
+                    name={`${id}_error`}
+                    className={styles.error}
+                    aria-invalid={true}>
+                    {error}
+                </output>
+            )}
+        </div>
+    );
+};

package/dist/bin/cli.js

@@ -6,7 +6,7 @@ const add_1 = require("../cli/add");
 const init_1 = require("../cli/init");
 const registry_1 = require("../cli/registry");
 commander_1.program
-    .name("becklyn-components")
+    .name("@becklyn/components")
     .description("CLI for @becklyn/components - Add components to your project")
     .version("1.0.0");
 commander_1.program

package/dist/cli/add.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../cli/add.ts"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAsB,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,iBA+ClE"}
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../cli/add.ts"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAsB,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,iBAmDlE"}

package/dist/cli/add.js

@@ -45,6 +45,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.add = add;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+const dependencies_1 = require("./dependencies");
 const registry_1 = require("./registry");
 function add(components, options) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -52,12 +53,14 @@ function add(components, options) {
         const cwd = process.cwd();
         const componentsDir = path.join(cwd, options.components || "components");
         try {
+            const packageJson = (0, dependencies_1.loadPackageJson)();
             for (const componentName of components) {
                 const componentConfig = (0, registry_1.getComponent)(componentName);
                 if (!componentConfig) {
                     console.log(`❌ Component "${componentName}" not found. Available components: ${(0, registry_1.getAvailableComponents)().join(", ")}`);
                     continue;
                 }
+                (0, dependencies_1.assertDependencies)(packageJson, componentConfig.dependencies || []);
                 console.log(`📦 Adding ${componentConfig.name}...`);
                 // Create component files
                 for (const file of componentConfig.files) {

package/dist/cli/dependencies.d.ts

@@ -0,0 +1,12 @@
+export declare const requiredPeerDependencies: string[];
+export declare const devDependencies: string[];
+export declare const dependencies: string[];
+type PackageJson = {
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+};
+export declare const loadPackageJson: () => PackageJson;
+export declare const assertDependencies: (packageJson: PackageJson, dependencies: string[]) => void;
+export declare const ensureDependencies: (packageJson: PackageJson, dependencies: string[], devDependencies: string[]) => Promise<void>;
+export {};
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/cli/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../cli/dependencies.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,wBAAwB,UAOpC,CAAC;AACF,eAAO,MAAM,eAAe,UAAyB,CAAC;AACtD,eAAO,MAAM,YAAY,UAA4B,CAAC;AAStD,KAAK,WAAW,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,WAYlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,aAAa,WAAW,EAAE,cAAc,MAAM,EAAE,SAclF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC3B,aAAa,WAAW,EACxB,cAAc,MAAM,EAAE,EACtB,iBAAiB,MAAM,EAAE,kBAa5B,CAAC"}

package/dist/cli/dependencies.js

@@ -0,0 +1,115 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureDependencies = exports.assertDependencies = exports.loadPackageJson = exports.dependencies = exports.devDependencies = exports.requiredPeerDependencies = void 0;
+const child_process_1 = require("child_process");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const util_1 = require("util");
+const execAsync = (0, util_1.promisify)(child_process_1.exec);
+exports.requiredPeerDependencies = [
+    "next",
+    "react",
+    "react-dom",
+    "@types/react",
+    "@types/react-dom",
+    "@storybook/nextjs-vite",
+];
+exports.devDependencies = ["sass", "typescript"];
+exports.dependencies = ["clsx", "@becklyn/next"];
+const installHints = {
+    next: "💡 To install Next.js please have a look at https://nextjs.org/docs/app/getting-started/installation",
+    "@types/react": "💡 To install @types/react run: npm i -D @types/react",
+    "@types/react-dom": "💡 To install @types/react-dom run: npm i -D @types/react-dom",
+    "@storybook/nextjs-vite": "💡 To install @storybook run: npm create storybook@latest",
+};
+const loadPackageJson = () => {
+    const cwd = process.cwd();
+    // Check if package.json exists
+    const packageJsonPath = path.join(cwd, "package.json");
+    if (!fs.existsSync(packageJsonPath)) {
+        console.error("❌ No package.json found in current directory");
+        process.exit(1);
+    }
+    // Check if Next.js is installed
+    return JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+};
+exports.loadPackageJson = loadPackageJson;
+const assertDependencies = (packageJson, dependencies) => {
+    for (const dependency of dependencies) {
+        if (!hasAnyDependency(packageJson, dependency)) {
+            console.error(`❌ Dependency ${dependency} is not installed in this project`);
+            console.error(`💡 Please install ${dependency} first`);
+            const hint = installHints[dependency];
+            if (hint) {
+                console.error(hint);
+            }
+            process.exit(1);
+        }
+    }
+};
+exports.assertDependencies = assertDependencies;
+const ensureDependencies = (packageJson, dependencies, devDependencies) => __awaiter(void 0, void 0, void 0, function* () {
+    for (const dependency of dependencies) {
+        if (!hasDependency(packageJson, dependency)) {
+            yield execAsync(`npm install ${dependency}`);
+        }
+    }
+    for (const devDependency of devDependencies) {
+        if (!hasDevDependency(packageJson, devDependency)) {
+            yield execAsync(`npm install --save-dev ${devDependency}`);
+        }
+    }
+});
+exports.ensureDependencies = ensureDependencies;
+const hasAnyDependency = (packageJson, dependency) => {
+    return ((packageJson.dependencies && packageJson.dependencies[dependency]) ||
+        (packageJson.devDependencies && packageJson.devDependencies[dependency]));
+};
+const hasDevDependency = (packageJson, dependency) => {
+    return packageJson.devDependencies && packageJson.devDependencies[dependency];
+};
+const hasDependency = (packageJson, dependency) => {
+    return packageJson.dependencies && packageJson.dependencies[dependency];
+};

package/dist/cli/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../cli/init.ts"],"names":[],"mappings":"AAWA,wBAAsB,IAAI,kBAiCzB"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../cli/init.ts"],"names":[],"mappings":"AASA,wBAAsB,IAAI,kBAuBzB"}

package/dist/cli/init.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -43,36 +10,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.init = init;
-const child_process_1 = require("child_process");
-const fs = __importStar(require("fs"));
-const path = __importStar(require("path"));
-const util_1 = require("util");
-const execAsync = (0, util_1.promisify)(child_process_1.exec);
-const requiredPeerDependencies = ["next", "react", "react-dom", "@types/react", "@types/react-dom"];
-const devDependencies = ["sass", "typescript"];
-const dependencies = ["clsx", "@becklyn/next"];
+const dependencies_1 = require("./dependencies");
 function init() {
     return __awaiter(this, void 0, void 0, function* () {
         console.log("🚀 Initializing @becklyn/components in your project...\n");
-        const cwd = process.cwd();
         try {
-            // Check if package.json exists
-            const packageJsonPath = path.join(cwd, "package.json");
-            if (!fs.existsSync(packageJsonPath)) {
-                console.error("❌ No package.json found in current directory");
-                process.exit(1);
-            }
-            // Check if Next.js is installed
-            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
-            assertDependencies(packageJson, requiredPeerDependencies);
+            const packageJson = (0, dependencies_1.loadPackageJson)();
+            (0, dependencies_1.assertDependencies)(packageJson, dependencies_1.requiredPeerDependencies);
             console.log("✅ All required dependencies detected");
             console.log("📦 Installing dependencies...");
-            ensureDependencies(packageJson, dependencies, devDependencies);
+            yield (0, dependencies_1.ensureDependencies)(packageJson, dependencies_1.dependencies, dependencies_1.devDependencies);
             console.log("✅ Dependencies installed!");
             console.log("✅ Project initialized successfully!");
             console.log(`
 🎉 You can now add components with:
-   npx becklyn-components add <component>
+   npx @becklyn/components add <component>
 `);
         }
         catch (error) {
@@ -81,34 +33,3 @@ function init() {
         }
     });
 }
-const assertDependencies = (packageJson, dependencies) => __awaiter(void 0, void 0, void 0, function* () {
-    for (const dependency of dependencies) {
-        if (!hasAnyDependency(packageJson, dependency)) {
-            console.error(`❌ Dependency ${dependency} is not installed in this project`);
-            console.error(`💡 Please install ${dependency} first`);
-            process.exit(1);
-        }
-    }
-});
-const ensureDependencies = (packageJson, dependencies, devDependencies) => __awaiter(void 0, void 0, void 0, function* () {
-    for (const dependency of dependencies) {
-        if (!hasDependency(packageJson, dependency)) {
-            yield execAsync(`npm install ${dependency}`);
-        }
-    }
-    for (const devDependency of devDependencies) {
-        if (!hasDevDependency(packageJson, devDependency)) {
-            yield execAsync(`npm install --save-dev ${devDependency}`);
-        }
-    }
-});
-const hasAnyDependency = (packageJson, dependency) => {
-    return ((packageJson.dependencies && packageJson.dependencies[dependency]) ||
-        (packageJson.devDependencies && packageJson.devDependencies[dependency]));
-};
-const hasDevDependency = (packageJson, dependency) => {
-    return packageJson.devDependencies && packageJson.devDependencies[dependency];
-};
-const hasDependency = (packageJson, dependency) => {
-    return packageJson.dependencies && packageJson.dependencies[dependency];
-};

package/dist/cli/registry.d.ts

@@ -4,7 +4,7 @@ export interface ComponentConfig {
         path: string;
         content: string;
     }>;
-    dependencies?: string[];
+    dependencies: string[];
 }
 export declare function getAvailableComponents(): string[];
 export declare function getComponent(name: string): ComponentConfig | undefined;

package/dist/cli/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../cli/registry.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;QACT,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AA0HD,wBAAgB,sBAAsB,IAAI,MAAM,EAAE,CAejD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAqCtE"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../cli/registry.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;QACT,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAoID,wBAAgB,sBAAsB,IAAI,MAAM,EAAE,CAejD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAyCtE"}

package/dist/cli/registry.js

@@ -114,12 +114,17 @@ function scanComponentsRecursively(basePath, relativePath = "") {
  */
 function readComponentFiles(componentName, componentDir, relativePath) {
     const files = [];
+    const dependencies = [];
     try {
         const dirContents = fs.readdirSync(componentDir, { withFileTypes: true });
         for (const item of dirContents) {
             if (item.isFile()) {
                 const filePath = path.join(componentDir, item.name);
                 const content = fs.readFileSync(filePath, "utf-8");
+                if (item.name.endsWith("dependencies.json")) {
+                    console.log(item.name, content);
+                    continue;
+                }
                 // Use the full relative path from components directory if provided
                 const fileRelativePath = relativePath
                     ? `${relativePath}/${item.name}`
@@ -134,7 +139,7 @@ function readComponentFiles(componentName, componentDir, relativePath) {
     catch (error) {
         console.error(`Error reading files from ${componentDir}:`, error);
     }
-    return files;
+    return { files, dependencies };
 }
 function getAvailableComponents() {
     try {
@@ -169,11 +174,11 @@ function getComponent(name) {
         const cleanPath = matchingComponent.path.startsWith("components/")
             ? matchingComponent.path.substring("components/".length)
             : matchingComponent.path;
-        const files = readComponentFiles(matchingComponent.name, componentDir, cleanPath);
+        const { files, dependencies } = readComponentFiles(matchingComponent.name, componentDir, cleanPath);
         return {
             name: matchingComponent.name,
-            files: files,
-            dependencies: [], // Could be enhanced to parse dependencies from package.json or imports
+            files,
+            dependencies,
         };
     }
     catch (error) {

package/dist/components/atoms/Clickable/Clickable.d.ts

@@ -1,12 +1,12 @@
 import { FC, PropsWithChildren } from "react";
+import { PropsWithClassName } from "@becklyn/next/types/style";
 interface ClickableProps {
     href: string;
     type: "button" | "submit" | "reset";
     variant?: "primary" | "secondary" | "tertiary";
     disabled?: boolean;
-    className?: string;
     onClick?: () => void;
 }
-export declare const Clickable: FC<PropsWithChildren<ClickableProps>>;
+export declare const Clickable: FC<PropsWithChildren<PropsWithClassName<ClickableProps>>>;
 export {};
 //# sourceMappingURL=Clickable.d.ts.map

package/dist/components/atoms/Clickable/Clickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAwB,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK3E,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmBD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAe3D,CAAC"}
+{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1F,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmBD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC,CAe/E,CAAC"}

package/dist/components/atoms/Clickable/Clickable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Clickable/Clickable.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA8BhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}
+{"version":3,"file":"Clickable.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Clickable/Clickable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA8BhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}

package/dist/components/atoms/Clickable/Clickable.stories.js

@@ -1,12 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TertiaryDisabled = exports.Tertiary = exports.SecondaryDisabled = exports.Secondary = exports.PrimaryDisabled = exports.Primary = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = __importDefault(require("clsx"));
-const Story_module_scss_1 = __importDefault(require("@becklyn/components/.storybook/Story.module.scss"));
 const Clickable_1 = require("./Clickable");
 const meta = {
     title: "Atoms/Button/Button",
@@ -28,7 +23,7 @@ const meta = {
         const handleOnClick = () => {
             alert("Button clicked!");
         };
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(Story_module_scss_1.default.storyContainer, Story_module_scss_1.default.large, Story_module_scss_1.default.flex), children: [(0, jsx_runtime_1.jsx)(Clickable_1.Clickable, Object.assign({}, args, { onClick: handleOnClick })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, Object.assign({}, args, { href: "#", children: "Button as Link" }))] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "story-container large flex", children: [(0, jsx_runtime_1.jsx)(Clickable_1.Clickable, Object.assign({}, args, { onClick: handleOnClick })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, Object.assign({}, args, { href: "#", children: "Button as Link" }))] }));
     },
 };
 exports.default = meta;

package/dist/components/atoms/TextInput/TextInput.d.ts

@@ -0,0 +1,15 @@
+import { FC, HTMLInputTypeAttribute } from "react";
+import { PropsWithClassName } from "@becklyn/next/types/style";
+export interface TextInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    type?: HTMLInputTypeAttribute;
+}
+export declare const TextInput: FC<PropsWithClassName<TextInputProps>>;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/atoms/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../components/atoms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,sBAAsB,EAAS,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,MAAM,WAAW,cAAc;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,kBAAkB,CAAC,cAAc,CAAC,CA4C5D,CAAC"}

package/dist/components/atoms/TextInput/TextInput.js

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const TextInput_module_scss_1 = __importDefault(require("./TextInput.module.scss"));
+const TextInput = ({ id: providedId, label, placeholder, value, error, onChange, disabled, required, className, type = "text", }) => {
+    const generatedId = (0, react_1.useId)();
+    const id = providedId !== null && providedId !== void 0 ? providedId : generatedId;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(TextInput_module_scss_1.default.wrapper, className), children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: TextInput_module_scss_1.default.label, children: [label, required && " *"] })), (0, jsx_runtime_1.jsx)("input", { id: id, value: value, onChange: e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), placeholder: placeholder, disabled: disabled, required: required, className: (0, clsx_1.default)(TextInput_module_scss_1.default.input, disabled && TextInput_module_scss_1.default.disabled), type: type }), error && ((0, jsx_runtime_1.jsx)("output", { htmlFor: id, name: `${id}_error`, className: TextInput_module_scss_1.default.error, "aria-invalid": true, children: error }))] }));
+};
+exports.TextInput = TextInput;

package/dist/components/atoms/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { TextInput } from "./TextInput";
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=TextInput.stories.d.ts.map

package/dist/components/atoms/TextInput/TextInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AAQxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAahC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/dist/components/atoms/TextInput/TextInput.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Error = exports.WithoutLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextInput_1 = require("./TextInput");
+const InteractiveInput = args => {
+    const [value, setValue] = (0, react_1.useState)("");
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, Object.assign({}, args, { value: value, onChange: setValue }));
+};
+const meta = {
+    title: "Atoms/TextInput",
+    component: TextInput_1.TextInput,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        label: { control: "text" },
+        placeholder: { control: "text" },
+        disabled: { control: "boolean" },
+        error: { control: "text" },
+    },
+    render: args => (0, jsx_runtime_1.jsx)(InteractiveInput, Object.assign({}, args)),
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+    },
+};
+exports.WithoutLabel = {
+    args: {
+        placeholder: "Text Label",
+    },
+};
+exports.Error = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+        error: "Lorem ipsum",
+    },
+};
+exports.Disabled = {
+    args: {
+        label: "Label",
+        placeholder: "Text Label",
+        disabled: true,
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@becklyn/components",
-    "version": "0.2.2",
+    "version": "0.3.1",
     "license": "MIT",
     "homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/components",
     "repository": {
@@ -16,25 +16,23 @@
         "storybook-build": "storybook build"
     },
     "dependencies": {
-        "commander": "^14.0.2"
+        "commander": "^14.0.3"
     },
     "devDependencies": {
         "@becklyn/eslint": "*",
-        "@becklyn/next": "^4.3.0",
+        "@becklyn/next": "*",
         "@becklyn/tsconfig": "*",
-        "@storybook/addon-designs": "^11.1.1",
-        "@storybook/addon-docs": "^10.1.11",
-        "@storybook/addon-links": "^10.1.11",
-        "@types/node": "^25.0.3",
-        "@types/react": "^19.2.7",
+        "@storybook/addon-docs": "^10.2.5",
+        "@storybook/nextjs-vite": "10.2.5",
+        "@types/node": "^25.2.0",
+        "@types/react": "^19.2.10",
         "clsx": "^2.1.1",
-        "eslint-plugin-storybook": "^10.1.11",
-        "next": "^16.1.1",
-        "react": "^19.2.3",
-        "react-dom": "^19.2.3",
-        "sass": "^1.97.2",
-        "storybook": "^10.1.11",
-        "@storybook/nextjs-vite": "10.1.11",
+        "eslint-plugin-storybook": "^10.2.5",
+        "next": "^16.1.6",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "sass": "^1.97.3",
+        "storybook": "^10.2.5",
         "vite": "^7.3.1"
     },
     "peerDependencies": {
@@ -42,9 +40,10 @@
         "react-dom": "^18.3.1 || ^19.0.0"
     },
     "bin": {
-        "becklyn-components": "dist/bin/cli.js"
+        "components": "dist/bin/cli.js"
     },
     "files": [
-        "dist"
+        "dist",
+        "components"
     ]
 }