@nextworks/blocks-core 0.2.0-alpha.0 → 0.2.0-alpha.2

package/dist-cjs/ui/skeleton.cjs

@@ -0,0 +1,20 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../lib/utils");
+function Skeleton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, utils_1.cn)("bg-muted animate-pulse rounded-md", className) }, props)));
+}

package/dist-cjs/ui/switch.cjs

@@ -0,0 +1,60 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../lib/utils");
+const Switch = React.forwardRef((_a, ref) => {
+    var { className, isLoading, disabled } = _a, props = __rest(_a, ["className", "isLoading", "disabled"]);
+    const checked = !!props.checked;
+    const isDisabled = !!disabled || !!isLoading;
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, utils_1.cn)("focus-within:ring-offset-background inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2", isDisabled ? "cursor-not-allowed opacity-80" : "cursor-pointer", className), children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "checkbox", role: "switch", ref: ref, className: "sr-only", disabled: isDisabled, "aria-busy": isLoading ? "true" : undefined }, props)), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": true, className: (0, utils_1.cn)("relative inline-flex h-6 w-11 flex-shrink-0 rounded-full transition-colors duration-200", checked ? "bg-[var(--primary)]" : "bg-[var(--primary)]/80"), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(
+                        // Thumb should adjust for theme to guarantee contrast
+                        "absolute top-0.5 left-0.5 h-5 w-5 transform rounded-full bg-[var(--switch-thumb)] shadow-md transition-transform duration-200 ease-in-out", checked ? "translate-x-5" : "translate-x-0") }), isLoading && ((0, jsx_runtime_1.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-4 w-4 animate-spin text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }) }))] })] }));
+});
+exports.Switch = Switch;
+Switch.displayName = "Switch";

package/dist-cjs/ui/table.cjs

@@ -0,0 +1,48 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+exports.TableHeader = TableHeader;
+exports.TableBody = TableBody;
+exports.TableRow = TableRow;
+exports.TableHead = TableHead;
+exports.TableCell = TableCell;
+exports.TableCaption = TableCaption;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../lib/utils");
+function Table(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative w-full overflow-auto", children: (0, jsx_runtime_1.jsx)("table", Object.assign({ className: (0, utils_1.cn)("w-full caption-bottom text-sm", 
+            // Optional fg override
+            "text-[var(--table-fg)]", className) }, props)) }));
+}
+function TableHeader(props) {
+    return ((0, jsx_runtime_1.jsx)("thead", Object.assign({ className: (0, utils_1.cn)("[&_tr]:border-b", 
+        // Variable hooks for border color and head text
+        "text-[var(--table-head-fg)] [&_tr]:border-[var(--table-border)]") }, props)));
+}
+function TableBody(props) {
+    return ((0, jsx_runtime_1.jsx)("tbody", Object.assign({ className: (0, utils_1.cn)("[&_tr:last-child]:border-0", "[&_tr]:border-[var(--table-border)]") }, props)));
+}
+function TableRow(props) {
+    return ((0, jsx_runtime_1.jsx)("tr", Object.assign({ className: (0, utils_1.cn)("hover:bg-muted/50 border-b transition-colors", "border-[var(--table-border)] hover:bg-[var(--table-row-hover-bg)]") }, props)));
+}
+function TableHead(props) {
+    return ((0, jsx_runtime_1.jsx)("th", Object.assign({ className: (0, utils_1.cn)("text-muted-foreground h-10 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0", "text-[var(--table-head-fg)]") }, props)));
+}
+function TableCell(props) {
+    return ((0, jsx_runtime_1.jsx)("td", Object.assign({ className: (0, utils_1.cn)("p-4 align-middle [&:has([role=checkbox])]:pr-0", "text-[var(--table-fg)]") }, props)));
+}
+function TableCaption(props) {
+    return ((0, jsx_runtime_1.jsx)("caption", Object.assign({ className: (0, utils_1.cn)("text-muted-foreground mt-4 text-sm", "text-[var(--table-muted-fg)]") }, props)));
+}

package/dist-cjs/ui/testimonial-card.cjs

@@ -0,0 +1,39 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestimonialCard = TestimonialCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../lib/utils");
+function getInitials(from) {
+    var _a, _b;
+    if (!from)
+        return undefined;
+    const parts = from.trim().split(/\s+/);
+    const first = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a[0]) || "";
+    const last = parts.length > 1 ? ((_b = parts[parts.length - 1]) === null || _b === void 0 ? void 0 : _b[0]) || "" : "";
+    const res = `${first}${last}`.toUpperCase();
+    return res || undefined;
+}
+function TestimonialCard({ id, className, 
+// legacy defaults
+testimonialText = "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.", testimonialAuthor = " - Cillum Dolore", testimonialAuthorInitials = "JD", 
+// new props (no defaults, we derive below)
+quote, name, role, card = {
+    className: "bg-card text-card-foreground p-6 rounded-lg border border-border shadow-md transition-transform duration-200 hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, content = {
+    className: "flex flex-col space-y-4",
+}, text = {
+    className: "text-muted-foreground text-base leading-relaxed italic text-[var(--card-fg)]",
+}, author = {
+    className: "text-muted-foreground text-sm font-medium text-[var(--card-muted-fg)]",
+}, avatar = {
+    className: "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+}, avatarText = {
+    className: "text-white font-bold",
+}, }) {
+    var _a;
+    const displayText = quote !== null && quote !== void 0 ? quote : testimonialText;
+    const computedAuthor = testimonialAuthor !== null && testimonialAuthor !== void 0 ? testimonialAuthor : (name ? ` - ${name}${role ? `, ${role}` : ""}` : " - Cillum Dolore");
+    const initials = (_a = testimonialAuthorInitials !== null && testimonialAuthorInitials !== void 0 ? testimonialAuthorInitials : getInitials(name)) !== null && _a !== void 0 ? _a : "JD";
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, className: (0, utils_1.cn)(card.className, className), children: (0, jsx_runtime_1.jsxs)("div", { className: content.className, children: [(0, jsx_runtime_1.jsx)("div", { className: avatar.className, children: (0, jsx_runtime_1.jsx)("span", { className: avatarText.className, children: initials }) }), (0, jsx_runtime_1.jsxs)("p", { className: text.className, children: ["\u201C", displayText, "\u201D"] }), (0, jsx_runtime_1.jsx)("p", { className: author.className, children: computedAuthor })] }) }));
+}

package/dist-cjs/ui/textarea.cjs

@@ -0,0 +1,60 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../lib/utils");
+const Textarea = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ className: (0, utils_1.cn)(
+        // Base structural + token fallbacks
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", 
+        // CSS variable hooks (preset-first). When vars are unset, tokens above apply.
+        "border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]", className), ref: ref }, props)));
+});
+exports.Textarea = Textarea;
+Textarea.displayName = "Textarea";

package/dist-cjs/ui/theme-selector.cjs

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = ThemeSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const next_themes_1 = require("next-themes");
+const enhanced_theme_provider_1 = require("../components/enhanced-theme-provider");
+const themes_1 = require("../lib/themes");
+const button_1 = require("../ui/button");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+function ThemeSelector(_a) {
+    var _b, _c, _d;
+    var { ariaLabel = "Demo: Color theme", label = "Theme", className } = _a, buttonProps = __rest(_a, ["ariaLabel", "label", "className"]);
+    const { theme, setTheme } = (0, next_themes_1.useTheme)();
+    const { themeVariant, setThemeVariant, setCustomBrandColors } = (0, enhanced_theme_provider_1.useThemeVariant)();
+    const isDark = theme === "dark";
+    const [showCustom, setShowCustom] = React.useState(false);
+    const [custom, setCustom] = React.useState({});
+    function openCustomDialog() {
+        setCustom({});
+        setShowCustom(true);
+    }
+    function applyCustom() {
+        setCustomBrandColors(custom);
+        document.cookie = `theme-variant=custom; Path=/; Max-Age=31536000; SameSite=Lax`;
+        document.cookie = `theme-custom=${encodeURIComponent(JSON.stringify(custom))}; Path=/; Max-Age=31536000; SameSite=Lax`;
+        setShowCustom(false);
+    }
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ variant: "outline", size: "sm", className: `gap-2 ${className !== null && className !== void 0 ? className : ""}`, "aria-label": ariaLabel }, buttonProps, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Palette, { className: "h-4 w-4" }), label] })) }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-64", children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuLabel, { className: "space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: "Color theme variants" }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "border-border bg-muted/50 text-muted-foreground rounded-md border px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase", children: "Gallery" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-xs", children: "Affects this preview only ( button is not part of the shared Navbar. )" })] }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSeparator, {}), Object.entries(themes_1.themes).map(([key, themeConfig]) => ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { onClick: () => {
+                            setThemeVariant(key);
+                            document.cookie = `theme-variant=${key}; Path=/; Max-Age=31536000; SameSite=Lax`;
+                        }, className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 rounded-full border", style: {
+                                            backgroundColor: isDark
+                                                ? themes_1.darkThemes[key].colors.primary
+                                                : themeConfig.colors.primary,
+                                        } }), themeConfig.name] }), themeVariant === key && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" })] }, key))), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuLabel, { children: "Custom" }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { onClick: openCustomDialog, className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wrench, { className: "h-4 w-4" }), "Customize brand colors\u2026"] }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuLabel, { children: "Appearance" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })] }), showCustom && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4", children: (0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "customBrandColorsTitle", className: "bg-popover text-popover-foreground w-full max-w-md rounded-md border p-4 shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { id: "customBrandColorsTitle", className: "mb-3 text-sm font-semibold", children: "Custom brand colors" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "w-28 text-sm", children: "primary" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "oklch(...) or #hex", className: "bg-background flex-1 rounded border p-2 text-sm", value: (_b = custom.primary) !== null && _b !== void 0 ? _b : "", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { primary: e.target.value }))) }), (0, jsx_runtime_1.jsx)("input", { type: "color", className: "h-8 w-10 cursor-pointer", value: typeof custom.primary === "string" &&
+                                                custom.primary.startsWith("#")
+                                                ? custom.primary
+                                                : "#000000", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { primary: e.target.value }))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "w-28 text-sm", children: "accent" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "oklch(...) or #hex", className: "bg-background flex-1 rounded border p-2 text-sm", value: (_c = custom.accent) !== null && _c !== void 0 ? _c : "", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { accent: e.target.value }))) }), (0, jsx_runtime_1.jsx)("input", { type: "color", className: "h-8 w-10 cursor-pointer", value: typeof custom.accent === "string" &&
+                                                custom.accent.startsWith("#")
+                                                ? custom.accent
+                                                : "#000000", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { accent: e.target.value }))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "w-28 text-sm", children: "ring" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "oklch(...) or #hex", className: "bg-background flex-1 rounded border p-2 text-sm", value: (_d = custom.ring) !== null && _d !== void 0 ? _d : "", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { ring: e.target.value }))) }), (0, jsx_runtime_1.jsx)("input", { type: "color", className: "h-8 w-10 cursor-pointer", value: typeof custom.ring === "string" &&
+                                                custom.ring.startsWith("#")
+                                                ? custom.ring
+                                                : "#000000", onChange: (e) => setCustom((c) => (Object.assign(Object.assign({}, c), { ring: e.target.value }))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", onClick: () => setShowCustom(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", onClick: applyCustom, children: "Apply" })] })] }) }))] }));
+}

package/dist-cjs/ui/theme-toggle.cjs

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeToggle = ThemeToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const next_themes_1 = require("next-themes");
+const utils_1 = require("../lib/utils");
+const button_1 = require("../ui/button");
+function ThemeToggle({ buttonProps, ariaLabel = "Toggle theme", moonClassName, sunClassName, }) {
+    const { theme, setTheme } = (0, next_themes_1.useTheme)();
+    const mergedButtonProps = Object.assign(Object.assign({ variant: "outline", size: "icon" }, buttonProps), { className: (0, utils_1.cn)("relative", 
+        // Prefer preset variables if provided on Navbar
+        "bg-[var(--navbar-toggle-bg)] text-[var(--navbar-accent)] hover:bg-[var(--navbar-hover-bg)] focus-visible:ring-[var(--navbar-ring)]", 
+        // Ensure border uses preset variable; provide width for unstyled cases
+        "border border-[var(--navbar-border)]", buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className), 
+        // Inline style ensures our accent wins over token classes even under dark: variants
+        style: Object.assign(Object.assign({}, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.style), { color: "var(--navbar-accent)", backgroundColor: "var(--navbar-toggle-bg)", borderColor: "var(--navbar-border)", 
+            // Tell Tailwind ring utilities which ring color to use
+            "--tw-ring-color": "var(--navbar-ring)" }) });
+    return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, mergedButtonProps, { onClick: () => setTheme(theme === "light" ? "dark" : "light"), "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Moon, { className: (0, utils_1.cn)("h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90", moonClassName) }), (0, jsx_runtime_1.jsx)(lucide_react_1.Sun, { className: (0, utils_1.cn)("absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0", sunClassName) }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: ariaLabel })] })));
+}

package/dist-cjs/ui/toaster.cjs

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AppToaster;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sonner_1 = require("sonner");
+function AppToaster() {
+    return (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { position: "top-center", richColors: true, closeButton: true });
+}

package/package.json

@@ -1,23 +1,29 @@
 {
   "name": "@nextworks/blocks-core",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.2",
   "private": false,
-  "main": "dist/index.js",
+  "main": "dist-cjs/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "dist-cjs",
     "package.json",
     "README.md"
   ],
   "repository": "github:jblh/nextworks-cli",
-"bugs": "https://github.com/jblh/nextworks-cli/issues",
-"homepage": "https://github.com/jblh/nextworks-cli#readme",
+  "bugs": "https://github.com/jblh/nextworks-cli/issues",
+  "homepage": "https://github.com/jblh/nextworks-cli#readme",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true }); require('fs').rmSync('dist-cjs', { recursive: true, force: true }); require('fs').rmSync('dist-types', { recursive: true, force: true });\"",
+    "build:esm": "npx tsc -p tsconfig.build.json",
+    "build:cjs": "npx tsc -p tsconfig.cjs.json",
     "build:types": "npx tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationMap --outDir dist-types",
-    "build": "npx tsc -p tsconfig.build.json && npm run build:types && node scripts/postbuild.js",
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types",
+    "postbuild": "node scripts/postbuild.js",
     "test:types": "npx tsc -p tsconfig.build.json --noEmit --pretty false"
   },
   "dependencies": {
@@ -46,15 +52,22 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.cjs",
       "default": "./dist/index.js"
     },
     "./server": {
       "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "require": "./dist-cjs/server.cjs",
       "default": "./dist/server.js"
     },
     "./lib/themes": {
       "types": "./dist/lib/themes.d.ts",
+      "import": "./dist/lib/themes.js",
+      "require": "./dist-cjs/lib/themes.cjs",
       "default": "./dist/lib/themes.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }