czero 0.1.0

package/dist/components.css

@@ -0,0 +1,336 @@
+/**
+ * CZero Component Styles
+ * Pure CSS using --cz-* design tokens
+ */
+
+/* ===== UTILITIES ===== */
+
+/* Display */
+.cz-inline-flex { display: inline-flex; }
+.cz-flex { display: flex; }
+.cz-flex-col { flex-direction: column; }
+.cz-items-center { align-items: center; }
+.cz-justify-center { justify-content: center; }
+.cz-flex-wrap { flex-wrap: wrap; }
+
+/* Gap */
+.cz-gap-1 { gap: 0.25rem; }
+.cz-gap-1\.5 { gap: 0.375rem; }
+.cz-gap-2 { gap: 0.5rem; }
+
+/* Width */
+.cz-w-full { width: 100%; }
+
+/* Whitespace */
+.cz-whitespace-nowrap { white-space: nowrap; }
+
+/* Opacity */
+.cz-opacity-25 { opacity: 0.25; }
+.cz-opacity-50 { opacity: 0.5; }
+.cz-opacity-75 { opacity: 0.75; }
+
+/* Animation */
+@keyframes cz-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.cz-animate-spin { animation: cz-spin 1s linear infinite; }
+
+/* Sizing */
+.cz-h-4 { height: 1rem; }
+.cz-w-4 { width: 1rem; }
+.cz-h-8 { height: 2rem; }
+.cz-h-10 { height: 2.5rem; }
+.cz-h-12 { height: 3rem; }
+
+/* Padding */
+.cz-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.cz-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.cz-px-4 { padding-left: 1rem; padding-right: 1rem; }
+.cz-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.cz-py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
+.cz-p-lg { padding: var(--cz-spacing-lg); }
+.cz-pb-md { padding-bottom: var(--cz-spacing-md); }
+.cz-pt-md { padding-top: var(--cz-spacing-md); }
+.cz-px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+
+/* Margin */
+.cz-mb-md { margin-bottom: var(--cz-spacing-md); }
+.cz-mt-md { margin-top: var(--cz-spacing-md); }
+
+/* Typography */
+.cz-text-xs { font-size: var(--cz-font-size-xs); }
+.cz-text-sm { font-size: var(--cz-font-size-sm); }
+.cz-text-md { font-size: var(--cz-font-size-md); }
+.cz-text-lg { font-size: var(--cz-font-size-lg); }
+.cz-font-medium { font-weight: var(--cz-font-weight-medium); }
+.cz-font-semibold { font-weight: var(--cz-font-weight-semibold); }
+.cz-leading-tight { line-height: var(--cz-font-lineHeight-tight); }
+
+/* Colors - Background */
+.cz-bg-bg { background-color: hsl(var(--cz-color-bg)); }
+.cz-bg-primary { background-color: hsl(var(--cz-color-primary)); }
+.cz-bg-secondary { background-color: hsl(var(--cz-color-secondary)); }
+.cz-bg-muted { background-color: hsl(var(--cz-color-muted)); }
+.cz-bg-danger { background-color: hsl(var(--cz-color-danger)); }
+.cz-bg-success { background-color: hsl(var(--cz-color-success)); }
+.cz-bg-warning { background-color: hsl(var(--cz-color-warning)); }
+.cz-bg-transparent { background-color: transparent; }
+
+/* Colors - Text */
+.cz-text-fg { color: hsl(var(--cz-color-fg)); }
+.cz-text-primary-fg { color: hsl(var(--cz-color-primaryFg)); }
+.cz-text-secondary-fg { color: hsl(var(--cz-color-secondaryFg)); }
+.cz-text-muted-fg { color: hsl(var(--cz-color-mutedFg)); }
+.cz-text-danger { color: hsl(var(--cz-color-danger)); }
+.cz-text-danger-fg { color: hsl(var(--cz-color-dangerFg)); }
+.cz-text-success-fg { color: hsl(var(--cz-color-successFg)); }
+.cz-text-warning-fg { color: hsl(var(--cz-color-warningFg)); }
+
+/* Border */
+.cz-border { border-width: 1px; border-style: solid; }
+.cz-border-b { border-bottom-width: 1px; border-bottom-style: solid; }
+.cz-border-t { border-top-width: 1px; border-top-style: solid; }
+.cz-border-border { border-color: hsl(var(--cz-color-border)); }
+.cz-border-danger { border-color: hsl(var(--cz-color-danger)); }
+
+/* Border Radius */
+.cz-rounded-sm { border-radius: var(--cz-radius-sm); }
+.cz-rounded-md { border-radius: var(--cz-radius-md); }
+.cz-rounded-lg { border-radius: var(--cz-radius-lg); }
+.cz-rounded-full { border-radius: var(--cz-radius-full); }
+
+/* Shadow */
+.cz-shadow-sm { box-shadow: var(--cz-shadow-sm); }
+
+/* Transitions */
+.cz-transition { transition: all var(--cz-transition-fast); }
+
+/* States */
+.cz-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Focus */
+.cz-focus-ring:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+/* Hover states */
+.cz-hover-opacity:hover { opacity: 0.9; }
+.cz-hover-muted:hover { background-color: hsl(var(--cz-color-muted)); }
+
+/* ===== BUTTON ===== */
+
+.cz-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: var(--cz-radius-md);
+  font-weight: var(--cz-font-weight-medium);
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+  border: none;
+}
+
+.cz-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Button Sizes */
+.cz-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: var(--cz-font-size-sm); }
+.cz-btn-md { height: 2.5rem; padding: 0 1rem; font-size: var(--cz-font-size-md); }
+.cz-btn-lg { height: 3rem; padding: 0 1.5rem; font-size: var(--cz-font-size-lg); }
+
+/* Button Variants */
+.cz-btn-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+.cz-btn-primary:hover { opacity: 0.9; }
+
+.cz-btn-secondary {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+.cz-btn-secondary:hover { opacity: 0.8; }
+
+.cz-btn-outline {
+  background-color: transparent;
+  border: 1px solid hsl(var(--cz-color-border));
+  color: hsl(var(--cz-color-fg));
+}
+.cz-btn-outline:hover { background-color: hsl(var(--cz-color-muted)); }
+
+.cz-btn-ghost {
+  background-color: transparent;
+  color: hsl(var(--cz-color-fg));
+}
+.cz-btn-ghost:hover { background-color: hsl(var(--cz-color-muted)); }
+
+.cz-btn-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: hsl(var(--cz-color-dangerFg));
+}
+.cz-btn-danger:hover { opacity: 0.9; }
+
+/* ===== INPUT ===== */
+
+.cz-input {
+  width: 100%;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-input::placeholder {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+}
+
+.cz-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-input-error {
+  border-color: hsl(var(--cz-color-danger));
+}
+.cz-input-error:focus {
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger));
+}
+
+/* Input Sizes */
+.cz-input-sm { height: 2rem; padding: 0 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-input-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-input-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
+
+/* ===== CARD ===== */
+
+.cz-card {
+  border-radius: var(--cz-radius-lg);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  box-shadow: var(--cz-shadow-sm);
+  padding: var(--cz-spacing-lg);
+}
+
+.cz-card-no-padding {
+  padding: 0;
+}
+
+.cz-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding-bottom: var(--cz-spacing-md);
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  margin-bottom: var(--cz-spacing-md);
+}
+
+.cz-card-title {
+  font-size: var(--cz-font-size-lg);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-card-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-card-body {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: var(--cz-spacing-md);
+  margin-top: var(--cz-spacing-md);
+  border-top: 1px solid hsl(var(--cz-color-border));
+}
+
+/* ===== BADGE ===== */
+
+.cz-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--cz-radius-full);
+  font-weight: var(--cz-font-weight-medium);
+  white-space: nowrap;
+}
+
+/* Badge Sizes */
+.cz-badge-sm { padding: 0.125rem 0.375rem; font-size: 0.7rem; }
+.cz-badge-md { padding: 0.125rem 0.5rem; font-size: var(--cz-font-size-xs); }
+
+/* Badge Variants */
+.cz-badge-default {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+
+.cz-badge-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+
+.cz-badge-success {
+  background-color: hsl(var(--cz-color-success));
+  color: hsl(var(--cz-color-successFg));
+}
+
+.cz-badge-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: hsl(var(--cz-color-dangerFg));
+}
+
+.cz-badge-warning {
+  background-color: hsl(var(--cz-color-warning));
+  color: hsl(var(--cz-color-warningFg));
+}
+
+.cz-badge-outline {
+  background-color: transparent;
+  border: 1px solid hsl(var(--cz-color-border));
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== LABEL ===== */
+
+.cz-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== ERROR TEXT ===== */
+
+.cz-error {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-danger));
+}

package/dist/react/core/build-tokens.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Build script to generate CSS from theme.config.ts
+ * Outputs tokens.css with --cz-* prefixed CSS variables
+ */
+export {};
+//# sourceMappingURL=build-tokens.d.ts.map

package/dist/react/core/build-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-tokens.d.ts","sourceRoot":"","sources":["../../../src/core/build-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/dist/react/core/theme.config.d.ts

@@ -0,0 +1,122 @@
+/**
+ * CZero Design Tokens
+ * Single source of truth for all design values
+ */
+export declare const theme: {
+    readonly color: {
+        readonly bg: {
+            readonly light: "0 0% 100%";
+            readonly dark: "220 40% 3%";
+        };
+        readonly fg: {
+            readonly light: "220 15% 10%";
+            readonly dark: "210 40% 96%";
+        };
+        readonly primary: {
+            readonly light: "222 47% 45%";
+            readonly dark: "210 80% 65%";
+        };
+        readonly primaryFg: {
+            readonly light: "0 0% 100%";
+            readonly dark: "220 40% 3%";
+        };
+        readonly secondary: {
+            readonly light: "220 10% 95%";
+            readonly dark: "220 8% 25%";
+        };
+        readonly secondaryFg: {
+            readonly light: "220 15% 10%";
+            readonly dark: "210 40% 96%";
+        };
+        readonly muted: {
+            readonly light: "220 10% 95%";
+            readonly dark: "220 8% 20%";
+        };
+        readonly mutedFg: {
+            readonly light: "220 10% 40%";
+            readonly dark: "220 10% 60%";
+        };
+        readonly danger: {
+            readonly light: "0 70% 55%";
+            readonly dark: "0 80% 65%";
+        };
+        readonly dangerFg: {
+            readonly light: "0 0% 100%";
+            readonly dark: "0 0% 100%";
+        };
+        readonly success: {
+            readonly light: "142 70% 45%";
+            readonly dark: "142 70% 55%";
+        };
+        readonly successFg: {
+            readonly light: "0 0% 100%";
+            readonly dark: "0 0% 100%";
+        };
+        readonly warning: {
+            readonly light: "38 92% 50%";
+            readonly dark: "38 92% 60%";
+        };
+        readonly warningFg: {
+            readonly light: "0 0% 100%";
+            readonly dark: "0 0% 0%";
+        };
+        readonly border: {
+            readonly light: "220 13% 90%";
+            readonly dark: "220 10% 20%";
+        };
+        readonly ring: {
+            readonly light: "222 47% 45%";
+            readonly dark: "210 80% 65%";
+        };
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly full: "9999px";
+    };
+    readonly shadow: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px rgb(0 0 0 / 0.05)";
+        readonly md: "0 2px 4px rgb(0 0 0 / 0.08)";
+        readonly lg: "0 4px 12px rgb(0 0 0 / 0.12)";
+    };
+    readonly spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly lg: "1rem";
+        readonly xl: "1.5rem";
+        readonly "2xl": "2rem";
+    };
+    readonly typography: {
+        readonly fontFamily: "Inter, system-ui, -apple-system, sans-serif";
+        readonly size: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly md: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+        };
+        readonly weight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    readonly transition: {
+        readonly fast: "150ms ease";
+        readonly normal: "200ms ease";
+        readonly slow: "300ms ease";
+    };
+};
+export type Theme = typeof theme;
+//# sourceMappingURL=theme.config.d.ts.map

package/dist/react/core/theme.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.config.d.ts","sourceRoot":"","sources":["../../../src/core/theme.config.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmER,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC"}

package/dist/react/index.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Button = React__namespace.forwardRef(({ className = "", variant = "primary", size = "md", loading = false, disabled, children, ...props }, ref) => {
+    const classes = [
+        "cz-btn",
+        `cz-btn-${variant}`,
+        `cz-btn-${size}`,
+        className,
+    ].filter(Boolean).join(" ");
+    return (jsxRuntime.jsxs("button", { ref: ref, className: classes, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "cz-animate-spin cz-h-4 cz-w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "cz-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "cz-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), children] }));
+});
+Button.displayName = "Button";
+
+const Input = React__namespace.forwardRef(({ className = "", label, error, size = "md", id, ...props }, ref) => {
+    const inputId = id || React__namespace.useId();
+    const inputClasses = [
+        "cz-input",
+        `cz-input-${size}`,
+        error && "cz-input-error",
+        className,
+    ].filter(Boolean).join(" ");
+    return (jsxRuntime.jsxs("div", { className: "cz-flex cz-flex-col cz-gap-1.5", children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: "cz-label", children: label })), jsxRuntime.jsx("input", { ref: ref, id: inputId, className: inputClasses, ...props }), error && jsxRuntime.jsx("span", { className: "cz-error", children: error })] }));
+});
+Input.displayName = "Input";
+
+const CardRoot = React__namespace.forwardRef(({ className = "", noPadding, ...props }, ref) => {
+    const classes = [
+        "cz-card",
+        noPadding && "cz-card-no-padding",
+        className,
+    ].filter(Boolean).join(" ");
+    return jsxRuntime.jsx("div", { ref: ref, className: classes, ...props });
+});
+CardRoot.displayName = "Card";
+const CardHeader = React__namespace.forwardRef(({ className = "", ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: `cz-card-header ${className}`, ...props })));
+CardHeader.displayName = "Card.Header";
+const CardTitle = React__namespace.forwardRef(({ className = "", ...props }, ref) => (jsxRuntime.jsx("h3", { ref: ref, className: `cz-card-title ${className}`, ...props })));
+CardTitle.displayName = "Card.Title";
+const CardDescription = React__namespace.forwardRef(({ className = "", ...props }, ref) => (jsxRuntime.jsx("p", { ref: ref, className: `cz-card-description ${className}`, ...props })));
+CardDescription.displayName = "Card.Description";
+const CardBody = React__namespace.forwardRef(({ className = "", ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: `cz-card-body ${className}`, ...props })));
+CardBody.displayName = "Card.Body";
+const CardFooter = React__namespace.forwardRef(({ className = "", ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: `cz-card-footer ${className}`, ...props })));
+CardFooter.displayName = "Card.Footer";
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Body: CardBody,
+    Footer: CardFooter,
+});
+
+const Badge = React__namespace.forwardRef(({ className = "", variant = "default", size = "md", ...props }, ref) => {
+    const classes = [
+        "cz-badge",
+        `cz-badge-${variant}`,
+        `cz-badge-${size}`,
+        className,
+    ].filter(Boolean).join(" ");
+    return jsxRuntime.jsx("span", { ref: ref, className: classes, ...props });
+});
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.Input = Input;
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/react/components/button.tsx","../../../src/react/components/input.tsx","../../../src/react/components/card.tsx","../../../src/react/components/badge.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  loading?: boolean;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    {\r\n      className = \"\",\r\n      variant = \"primary\",\r\n      size = \"md\",\r\n      loading = false,\r\n      disabled,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const classes = [\r\n      \"cz-btn\",\r\n      `cz-btn-${variant}`,\r\n      `cz-btn-${size}`,\r\n      className,\r\n    ].filter(Boolean).join(\" \");\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        className={classes}\r\n        disabled={disabled || loading}\r\n        {...props}\r\n      >\r\n        {loading && (\r\n          <svg\r\n            className=\"cz-animate-spin cz-h-4 cz-w-4\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"cz-opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"cz-opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\r\n            />\r\n          </svg>\r\n        )}\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface InputProps\r\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\r\n  label?: string;\r\n  error?: string;\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n  ({ className = \"\", label, error, size = \"md\", id, ...props }, ref) => {\r\n    const inputId = id || React.useId();\r\n\r\n    const inputClasses = [\r\n      \"cz-input\",\r\n      `cz-input-${size}`,\r\n      error && \"cz-input-error\",\r\n      className,\r\n    ].filter(Boolean).join(\" \");\r\n\r\n    return (\r\n      <div className=\"cz-flex cz-flex-col cz-gap-1.5\">\r\n        {label && (\r\n          <label htmlFor={inputId} className=\"cz-label\">\r\n            {label}\r\n          </label>\r\n        )}\r\n        <input\r\n          ref={ref}\r\n          id={inputId}\r\n          className={inputClasses}\r\n          {...props}\r\n        />\r\n        {error && <span className=\"cz-error\">{error}</span>}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nInput.displayName = \"Input\";\r\n","import * as React from \"react\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  noPadding?: boolean;\n}\n\nconst CardRoot = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className = \"\", noPadding, ...props }, ref) => {\n    const classes = [\n      \"cz-card\",\n      noPadding && \"cz-card-no-padding\",\n      className,\n    ].filter(Boolean).join(\" \");\n\n    return <div ref={ref} className={classes} {...props} />;\n  }\n);\nCardRoot.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className = \"\", ...props }, ref) => (\n  <div ref={ref} className={`cz-card-header ${className}`} {...props} />\n));\nCardHeader.displayName = \"Card.Header\";\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className = \"\", ...props }, ref) => (\n  <h3 ref={ref} className={`cz-card-title ${className}`} {...props} />\n));\nCardTitle.displayName = \"Card.Title\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className = \"\", ...props }, ref) => (\n  <p ref={ref} className={`cz-card-description ${className}`} {...props} />\n));\nCardDescription.displayName = \"Card.Description\";\n\nconst CardBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className = \"\", ...props }, ref) => (\n  <div ref={ref} className={`cz-card-body ${className}`} {...props} />\n));\nCardBody.displayName = \"Card.Body\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className = \"\", ...props }, ref) => (\n  <div ref={ref} className={`cz-card-footer ${className}`} {...props} />\n));\nCardFooter.displayName = \"Card.Footer\";\n\nexport const Card = Object.assign(CardRoot, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n","import * as React from \"react\";\r\n\r\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  variant?: \"default\" | \"primary\" | \"success\" | \"danger\" | \"warning\" | \"outline\";\r\n  size?: \"sm\" | \"md\";\r\n}\r\n\r\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\r\n  ({ className = \"\", variant = \"default\", size = \"md\", ...props }, ref) => {\r\n    const classes = [\r\n      \"cz-badge\",\r\n      `cz-badge-${variant}`,\r\n      `cz-badge-${size}`,\r\n      className,\r\n    ].filter(Boolean).join(\" \");\r\n\r\n    return <span ref={ref} className={classes} {...props} />;\r\n  }\r\n);\r\n\r\nBadge.displayName = \"Badge\";\r\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,MAAM,GAAGA,gBAAK,CAAC,UAAU,CACpC,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG;QACd,QAAQ;AACR,QAAA,CAAA,OAAA,EAAU,OAAO,CAAA,CAAE;AACnB,QAAA,CAAA,OAAA,EAAU,IAAI,CAAA,CAAE;QAChB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE3B,IAAA,QACEC,eAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,GACzB,KAAK,EAAA,QAAA,EAAA,CAER,OAAO,KACNA,yBACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,CAEnBC,2BACE,SAAS,EAAC,eAAe,EACzB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EAAA,CACf,EACFA,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,eAAe,EACzB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,CAAA,EAAA,CACE,CACP,EACA,QAAQ,CAAA,EAAA,CACF;AAEb,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;ACvDtB,MAAM,KAAK,GAAGF,gBAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACnE,MAAM,OAAO,GAAG,EAAE,IAAIA,gBAAK,CAAC,KAAK,EAAE;AAEnC,IAAA,MAAM,YAAY,GAAG;QACnB,UAAU;AACV,QAAA,CAAA,SAAA,EAAY,IAAI,CAAA,CAAE;AAClB,QAAA,KAAK,IAAI,gBAAgB;QACzB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IAE3B,QACEC,yBAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC5C,KAAK,KACJC,cAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,UAAU,YAC1C,KAAK,EAAA,CACA,CACT,EACDA,cAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,YAAY,EAAA,GACnB,KAAK,EAAA,CACT,EACD,KAAK,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,UAAU,YAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CAC/C;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;ACjC3B,MAAM,QAAQ,GAAGF,gBAAK,CAAC,UAAU,CAC/B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC/C,IAAA,MAAM,OAAO,GAAG;QACd,SAAS;AACT,QAAA,SAAS,IAAI,oBAAoB;QACjC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IAE3B,OAAOE,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,EAAA,CAAI;AACzD,CAAC,CACF;AACD,QAAQ,CAAC,WAAW,GAAG,MAAM;AAE7B,MAAM,UAAU,GAAGF,gBAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAClCE,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,eAAA,EAAkB,SAAS,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,CACvE,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,aAAa;AAEtC,MAAM,SAAS,GAAGF,gBAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAClCE,cAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,cAAA,EAAiB,SAAS,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,CACrE,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,YAAY;AAEpC,MAAM,eAAe,GAAGF,gBAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAClCE,cAAA,CAAA,GAAA,EAAA,EAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,oBAAA,EAAuB,SAAS,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,CAC1E,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,kBAAkB;AAEhD,MAAM,QAAQ,GAAGF,gBAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAClCE,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,aAAA,EAAgB,SAAS,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,CACrE,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,WAAW;AAElC,MAAM,UAAU,GAAGF,gBAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAClCE,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,eAAA,EAAkB,SAAS,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,CACvE,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,aAAa;MAEzB,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC1C,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,MAAM,EAAE,UAAU;AACnB,CAAA;;AC1DM,MAAM,KAAK,GAAGF,gBAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACtE,IAAA,MAAM,OAAO,GAAG;QACd,UAAU;AACV,QAAA,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE;AACrB,QAAA,CAAA,SAAA,EAAY,IAAI,CAAA,CAAE;QAClB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IAE3B,OAAOE,cAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAA,GAAM,KAAK,EAAA,CAAI;AAC1D,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;;;;"}

package/dist/react/index.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    error?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    noPadding?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: "default" | "primary" | "success" | "danger" | "warning" | "outline";
+    size?: "sm" | "md";
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, Button, Card, Input };
+export type { BadgeProps, ButtonProps, CardProps, InputProps };

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC"}