@becklyn/components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Becklyn Studios
+
+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,50 @@
+# @becklyn/components
+
+A collection of reusable React components built with TypeScript and SCSS modules. This library provides a shadcn-ui-like experience but uses SCSS modules instead of Tailwind CSS for styling.
+
+## Before using this library
+
+This library is designed to be used with Next.js. You won't be able to use all components properly without Next.js.
+
+We also add storybook stories to the components. You need to have storybook installed in your project to use them.
+
+## CLI Commands
+
+### `init`
+
+Initialize your project with the necessary configuration.
+
+```bash
+npx becklyn-components init [options]
+```
+
+This command will:
+
+- Install required dependencies
+
+### `add`
+
+Add components to your project by copying them from the library.
+
+```bash
+npx becklyn-components add <component> [component...] [options]
+```
+
+**Options:**
+
+- `--components <path>` - Components directory (default: "src/components")
+- `--overwrite` - Overwrite existing files
+- `-y, --yes` - Skip confirmation prompts
+
+**Examples:**
+
+```bash
+# Add a single component
+npx becklyn-components add button
+
+# Add multiple components
+npx becklyn-components add button card dialog
+
+# Specify custom directories
+npx becklyn-components add button --components src/ui
+```

package/dist/bin/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../bin/cli.ts"],"names":[],"mappings":""}

package/dist/bin/cli.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const add_1 = require("../cli/add");
+const init_1 = require("../cli/init");
+const registry_1 = require("../cli/registry");
+commander_1.program
+    .name("becklyn-components")
+    .description("CLI for @becklyn/components - Add components to your project")
+    .version("1.0.0");
+commander_1.program
+    .command("init")
+    .description("Initialize your project and install dependencies")
+    .action(init_1.init);
+commander_1.program
+    .command("add")
+    .description(`
+Add a component to your project
+
+Available components: 
+  - ${(0, registry_1.getAvailableComponents)().join("\n  - ")}
+
+Example:
+   npx @becklyn/components add Button`)
+    .argument("<components...>", "The components to add")
+    .option("-y, --yes", "Skip confirmation prompts")
+    .option("--overwrite", "Overwrite existing files")
+    .option("--components <path>", "Components directory", "components")
+    .action(add_1.add);
+commander_1.program.parse();

package/dist/cli/add.d.ts

@@ -0,0 +1,8 @@
+interface AddOptions {
+    yes?: boolean;
+    overwrite?: boolean;
+    components?: string;
+}
+export declare function add(components: string[], options: AddOptions): Promise<void>;
+export {};
+//# sourceMappingURL=add.d.ts.map

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

@@ -0,0 +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"}

package/dist/cli/add.js

@@ -0,0 +1,87 @@
+"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.add = add;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const registry_1 = require("./registry");
+function add(components, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log(`🔥 Adding components: ${components.join(", ")}\n`);
+        const cwd = process.cwd();
+        const componentsDir = path.join(cwd, options.components || "components");
+        try {
+            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;
+                }
+                console.log(`📦 Adding ${componentConfig.name}...`);
+                // Create component files
+                for (const file of componentConfig.files) {
+                    const filePath = path.join(componentsDir, file.path);
+                    const fileDir = path.dirname(filePath);
+                    // Create directory if it doesn't exist
+                    yield fs.promises.mkdir(fileDir, { recursive: true });
+                    // Check if file exists and handle overwrite
+                    if (fs.existsSync(filePath) && !options.overwrite) {
+                        console.log(`⚠️  ${file.path} already exists. Use --overwrite to replace it.`);
+                        continue;
+                    }
+                    yield fs.promises.writeFile(filePath, file.content);
+                    console.log(`✅ Created ${file.path}`);
+                }
+                console.log(`🎉 Successfully added ${componentConfig.name}!`);
+            }
+            console.log(`
+📁 Components added to: ${componentsDir}
+`);
+        }
+        catch (error) {
+            console.error("❌ Error adding components:", error);
+            process.exit(1);
+        }
+    });
+}

package/dist/cli/init.d.ts

@@ -0,0 +1,2 @@
+export declare function init(): Promise<void>;
+//# sourceMappingURL=init.d.ts.map

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

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

package/dist/cli/init.js

@@ -0,0 +1,114 @@
+"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.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 = ["zod", "clsx", "@becklyn/next"];
+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);
+            console.log("✅ All required dependencies detected");
+            console.log("📦 Installing dependencies...");
+            ensureDependencies(packageJson, dependencies, devDependencies);
+            console.log("✅ Dependencies installed!");
+            console.log("✅ Project initialized successfully!");
+            console.log(`
+🎉 You can now add components with:
+   npx becklyn-components add <component>
+`);
+        }
+        catch (error) {
+            console.error("❌ Error during initialization:", error);
+            process.exit(1);
+        }
+    });
+}
+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

@@ -0,0 +1,11 @@
+export interface ComponentConfig {
+    name: string;
+    files: Array<{
+        path: string;
+        content: string;
+    }>;
+    dependencies?: string[];
+}
+export declare function getAvailableComponents(): string[];
+export declare function getComponent(name: string): ComponentConfig | undefined;
+//# sourceMappingURL=registry.d.ts.map

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

@@ -0,0 +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"}

package/dist/cli/registry.js

@@ -0,0 +1,183 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvailableComponents = getAvailableComponents;
+exports.getComponent = getComponent;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Get the path to the components directory relative to this registry file
+ */
+function getComponentsPath() {
+    // When running from compiled code in dist/, we need to go up more levels
+    // From dist/cjs/cli/ or dist/es/cli/ to the components/ directory
+    const currentDir = __dirname;
+    // Check if we're running from compiled code
+    if (currentDir.includes("/dist/")) {
+        // From dist/cjs/cli/ -> ../../../components/
+        // From dist/es/cli/ -> ../../../components/
+        return path.join(__dirname, "../../../components");
+    }
+    else {
+        // Running from source code
+        return path.join(__dirname, "../components");
+    }
+}
+/**
+ * Check if a directory is a valid component directory
+ */
+function isValidComponentDir(dirPath) {
+    try {
+        const tsxFile = fs.readdirSync(dirPath).find(file => file.endsWith(".tsx"));
+        return tsxFile !== undefined;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Recursively scan for components in nested directories (atoms, molecules, organisms, etc.)
+ */
+function scanComponentsRecursively(basePath, relativePath = "") {
+    const components = [];
+    try {
+        const entries = fs.readdirSync(basePath, { withFileTypes: true });
+        for (const entry of entries) {
+            if (entry.isDirectory()) {
+                // Skip hidden directories (starting with .) and common non-component directories
+                if (entry.name.startsWith(".") ||
+                    entry.name === "node_modules" ||
+                    entry.name === "dist" ||
+                    entry.name === "__tests__" ||
+                    entry.name === "test" ||
+                    entry.name === "tests") {
+                    continue;
+                }
+                const fullPath = path.join(basePath, entry.name);
+                const currentRelativePath = relativePath
+                    ? `${relativePath}/${entry.name}`
+                    : entry.name;
+                // Check if this directory is a component directory
+                if (isValidComponentDir(fullPath)) {
+                    components.push({
+                        name: entry.name,
+                        path: currentRelativePath,
+                    });
+                }
+                else {
+                    // Recursively scan subdirectories (like atoms/, molecules/, etc.)
+                    const nestedComponents = scanComponentsRecursively(fullPath, currentRelativePath);
+                    components.push(...nestedComponents);
+                }
+            }
+        }
+    }
+    catch (_a) {
+        // Silently ignore directories that can't be read
+    }
+    return components;
+}
+/**
+ * Read all files in a component directory and return them as file objects
+ */
+function readComponentFiles(componentName, componentDir, relativePath) {
+    const files = [];
+    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");
+                // Use the full relative path from components directory if provided
+                const fileRelativePath = relativePath
+                    ? `${relativePath}/${item.name}`
+                    : `${componentName}/${item.name}`;
+                files.push({
+                    path: fileRelativePath,
+                    content: content,
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error(`Error reading files from ${componentDir}:`, error);
+    }
+    return files;
+}
+function getAvailableComponents() {
+    try {
+        const componentsPath = getComponentsPath();
+        if (!fs.existsSync(componentsPath)) {
+            console.warn(`Components directory not found at: ${componentsPath}`);
+            return [];
+        }
+        const components = scanComponentsRecursively(componentsPath);
+        return components.map(component => component.name.toLowerCase());
+    }
+    catch (error) {
+        console.error("Error reading components directory:", error);
+        return [];
+    }
+}
+function getComponent(name) {
+    try {
+        const componentsPath = getComponentsPath();
+        const componentName = name.toLowerCase();
+        // Scan for all components and find the matching one
+        const allComponents = scanComponentsRecursively(componentsPath);
+        const matchingComponent = allComponents.find(component => component.name.toLowerCase() === componentName);
+        if (!matchingComponent) {
+            return undefined;
+        }
+        const componentDir = path.join(componentsPath, matchingComponent.path);
+        if (!isValidComponentDir(componentDir)) {
+            return undefined;
+        }
+        // Remove any "components/" prefix from the path to avoid double nesting
+        const cleanPath = matchingComponent.path.startsWith("components/")
+            ? matchingComponent.path.substring("components/".length)
+            : matchingComponent.path;
+        const files = readComponentFiles(matchingComponent.name, componentDir, cleanPath);
+        return {
+            name: matchingComponent.name,
+            files: files,
+            dependencies: [], // Could be enhanced to parse dependencies from package.json or imports
+        };
+    }
+    catch (error) {
+        console.error(`Error reading component "${name}":`, error);
+        return undefined;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from "react";
+import { ButtonProps } from "./ButtonSchema";
+export declare const Button: FC<PropsWithChildren<ButtonProps>>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAwB,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI3E,OAAO,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAgB3D,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAqBrD,CAAC"}

package/dist/components/atoms/Button/Button.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const clsx_1 = __importDefault(require("clsx"));
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const ButtonSchema_1 = require("./ButtonSchema");
+const ButtonWrapperComponent = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return props.href ? ((0, jsx_runtime_1.jsx)(link_1.default, Object.assign({ href: props.href }, props, { children: children }))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: props.type || "button" }, props, { children: children })));
+};
+const Button = props => {
+    const validatedProps = ButtonSchema_1.ButtonSchema.safeParse(props);
+    if (!validatedProps.data) {
+        return undefined;
+    }
+    const _a = validatedProps.data, { variant, disabled, className } = _a, restProps = __rest(_a, ["variant", "disabled", "className"]);
+    return ((0, jsx_runtime_1.jsx)(ButtonWrapperComponent, Object.assign({}, restProps, { className: (0, clsx_1.default)(Button_module_scss_1.default.button, Button_module_scss_1.default[variant], disabled && Button_module_scss_1.default.disabled, className), children: props.children })));
+};
+exports.Button = Button;

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const PrimaryDisabled: Story;
+export declare const Secondary: Story;
+export declare const SecondaryDisabled: Story;
+export declare const Tertiary: Story;
+export declare const TertiaryDisabled: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA8B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,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/Button/Button.stories.js

@@ -0,0 +1,73 @@
+"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 Button_1 = require("./Button");
+const meta = {
+    title: "Atoms/Button/Button",
+    component: Button_1.Button,
+    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 ((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)(Button_1.Button, Object.assign({}, args, { onClick: handleOnClick })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, args, { href: "#", children: "Button as Link" }))] }));
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        variant: "primary",
+        children: "Button",
+    },
+};
+exports.PrimaryDisabled = {
+    args: {
+        variant: "primary",
+        children: "Button",
+        disabled: true,
+    },
+};
+exports.Secondary = {
+    args: {
+        variant: "secondary",
+        children: "Button",
+    },
+};
+exports.SecondaryDisabled = {
+    args: {
+        variant: "secondary",
+        children: "Button",
+        disabled: true,
+    },
+};
+exports.Tertiary = {
+    args: {
+        variant: "tertiary",
+        children: "Button",
+    },
+};
+exports.TertiaryDisabled = {
+    args: {
+        variant: "tertiary",
+        children: "Button",
+        disabled: true,
+    },
+};

package/dist/components/atoms/Button/ButtonSchema.d.ts

@@ -0,0 +1,27 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from "react";
+import { z } from "zod";
+export declare const ButtonVariantSchema: z.ZodEnum<{
+    primary: "primary";
+    secondary: "secondary";
+    tertiary: "tertiary";
+}>;
+export type ButtonVariant = z.input<typeof ButtonVariantSchema>;
+/**
+ * Zod schema for Button component props validation
+ */
+export declare const ButtonSchema: z.ZodObject<{
+    variant: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
+        primary: "primary";
+        secondary: "secondary";
+        tertiary: "tertiary";
+    }>>>;
+    disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
+    type: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
+        button: "button";
+        submit: "submit";
+        reset: "reset";
+    }>>>;
+    className: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+}, z.core.$loose>;
+export type ButtonProps = z.input<typeof ButtonSchema> & (ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+//# sourceMappingURL=ButtonSchema.d.ts.map

package/dist/components/atoms/Button/ButtonSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSchema.d.ts","sourceRoot":"","sources":["../../../../components/atoms/Button/ButtonSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,eAAO,MAAM,mBAAmB;;;;EAA+C,CAAC;AAChF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;iBASvB,CAAC;AAGH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,GAClD,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,CAAC"}

package/dist/components/atoms/Button/ButtonSchema.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSchema = exports.ButtonVariantSchema = void 0;
+const zod_1 = require("zod");
+// Zod schema for button variants
+exports.ButtonVariantSchema = zod_1.z.enum(["primary", "secondary", "tertiary"]);
+/**
+ * Zod schema for Button component props validation
+ */
+exports.ButtonSchema = zod_1.z.looseObject({
+    // Visual style variant
+    variant: exports.ButtonVariantSchema.optional().default("primary"),
+    // Full width button
+    disabled: zod_1.z.boolean().optional().default(false),
+    // type of the button, defaults to "button"
+    type: zod_1.z.enum(["button", "submit", "reset"]).optional().default("button"),
+    // CSS class
+    className: zod_1.z.string().optional().default(""),
+});

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@becklyn/components",
+	"version": "0.1.0",
+	"license": "MIT",
+	"homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/components",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Becklyn-Studios/ts-libs.git"
+	},
+	"scripts": {
+		"lint": "eslint . --max-warnings 0 && prettier --check \"./**/*.{ts,tsx}\"",
+		"fix": "eslint . --fix && prettier --write \"./**/*.{ts,tsx,scss}\"",
+		"build": "rm -rf dist && tsc && chmod +x dist/bin/cli.js",
+		"prepublishOnly": "npm run lint && npm run build",
+		"storybook": "storybook dev -p 6006",
+		"storybook-build": "storybook build"
+	},
+	"dependencies": {
+		"commander": "^14.0.0"
+	},
+	"devDependencies": {
+		"@becklyn/eslint": "*",
+		"@becklyn/next": "^3.0.0",
+		"@becklyn/tsconfig": "*",
+		"@storybook/addon-designs": "^10.0.2",
+		"@storybook/addon-docs": "^9.1.1",
+		"@storybook/addon-links": "^9.1.1",
+		"@storybook/nextjs": "^9.1.1",
+		"@types/node": "^24.2.0",
+		"@types/react": "^19.1.9",
+		"clsx": "^2.1.1",
+		"eslint-plugin-storybook": "^9.1.1",
+		"next": "^15.4.6",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
+		"sass": "^1.90.0",
+		"storybook": "^9.1.1",
+		"zod": "^4.0.15"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1 || ^19.0.0",
+		"react-dom": "^18.3.1 || ^19.0.0"
+	},
+	"bin": {
+		"becklyn-components": "dist/bin/cli.js"
+	},
+	"files": [
+		"dist"
+	]
+}