npm - @jameskabz/nextcraft-ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

@jameskabz/nextcraft-ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -11,6 +11,7 @@ npm install @jameskabz/nextcraft-ui
 ## Usage
 ```tsx
+import "@jameskabz/nextcraft-ui/styles.css";
 import { CraftButton, GlassCard } from "@jameskabz/nextcraft-ui";
 export default function Example() {
@@ -26,19 +27,46 @@ export default function Example() {
 }
 ```
-## Tailwind setup
+## Styles setup
-This library ships class names only. Make sure Tailwind scans your node_modules
-for the package so the classes are generated:
+This library ships a precompiled stylesheet. Import it once in your app’s
+global entry:
 ```ts
-// tailwind.config.ts
-export default {
-  content: [
-    "./src/**/*.{ts,tsx}",
-    "./node_modules/@jameskabz/nextcraft-ui/dist/**/*.{js,mjs}"
-  ]
-};
+// App Router (Next.js)
+import "@jameskabz/nextcraft-ui/styles.css";
+```
+## Themes
+Wrap your app once to enable theme switching:
+```tsx
+import { ThemeProvider } from "@jameskabz/nextcraft-ui";
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider>
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+Add a switcher anywhere in your UI:
+```tsx
+import { ThemeSwitcher } from "@jameskabz/nextcraft-ui";
+export function Settings() {
+  return <ThemeSwitcher />;
+}
+```
+Per-component theme override:
+```tsx
+<GlassCard tone="ember">...</GlassCard>
 ```
 ## Troubleshooting: Module not found

package/dist/index.cjs CHANGED Viewed

@@ -32,29 +32,37 @@ var index_exports = {};
 __export(index_exports, {
   CraftButton: () => CraftButton,
   CraftInput: () => CraftInput,
-  GlassCard: () => GlassCard
+  GlassCard: () => GlassCard,
+  ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
+// src/utils/cn.ts
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
 // src/components/craft-button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var cn = (...classes) => classes.filter(Boolean).join(" ");
 var sizeClasses = {
   sm: "h-9 px-4 text-xs",
   md: "h-11 px-6 text-sm",
   lg: "h-13 px-8 text-base"
 };
 var variantClasses = {
-  solid: "bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]",
+  solid: "bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]",
   ghost: "bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20",
-  outline: "bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10",
-  gradient: "bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]"
+  outline: "bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]",
+  gradient: "bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]"
 };
 function CraftButton({
   className,
   variant = "solid",
   size = "md",
   glow = true,
+  tone,
   disabled,
   ...props
 }) {
@@ -62,32 +70,21 @@ function CraftButton({
     "button",
     {
       className: cn(
-        "relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100",
+        "relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100",
         sizeClasses[size],
         variantClasses[variant],
-        glow && (variant === "solid" || variant === "gradient") ? "before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity" : "",
+        glow && (variant === "solid" || variant === "gradient") ? "before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-[rgb(var(--nc-accent-1)/0.2)] before:via-[rgb(var(--nc-accent-2)/0.2)] before:to-[rgb(var(--nc-accent-3)/0.2)] before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity" : "",
         className
       ),
+      "data-nc-theme": tone,
       disabled,
       ...props
     }
   );
 }
-// src/utils/cn.ts
-function cn2(...values) {
-  return values.filter(Boolean).join(" ");
-}
 // src/components/glass-card.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var cardToneClasses = {
-  aurora: "bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30",
-  ember: "bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30",
-  ocean: "bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30",
-  midnight: "bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30",
-  cosmic: "bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30"
-};
 var intensityClasses = {
   subtle: "backdrop-blur-md bg-opacity-50",
   medium: "backdrop-blur-xl bg-opacity-70",
@@ -95,7 +92,7 @@ var intensityClasses = {
 };
 function GlassCard({
   className,
-  tone = "ocean",
+  tone,
   intensity = "medium",
   bordered = true,
   children,
@@ -104,17 +101,19 @@ function GlassCard({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
-      className: cn2(
+      className: cn(
         "relative overflow-hidden rounded-3xl p-6 text-white",
         "shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
         "transition-all duration-300",
         "hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
         intensityClasses[intensity],
-        cardToneClasses[tone],
+        "bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.15)] via-[rgb(var(--nc-accent-2)/0.10)] to-[rgb(var(--nc-accent-3)/0.15)]",
+        "border-[rgb(var(--nc-accent-1)/0.3)]",
         bordered ? "border-2" : "border-0",
         "before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
         className
       ),
+      "data-nc-theme": tone,
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10", children })
     }
@@ -124,40 +123,35 @@ function GlassCard({
 // src/components/craft-input.tsx
 var React = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var cn3 = (...classes) => classes.filter(Boolean).join(" ");
-var inputToneClasses = {
-  aurora: "border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40",
-  ember: "border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40",
-  ocean: "border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40",
-  midnight: "border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40"
-};
 var inputSizeClasses = {
   sm: "h-10 px-4 text-sm",
   md: "h-12 px-5 text-base",
   lg: "h-14 px-6 text-lg"
 };
 var CraftInput = React.forwardRef(
-  ({ className, tone = "ocean", inputSize = "md", glow = true, icon, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full", children: [
+  ({ className, tone, inputSize = "md", glow = true, icon, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-white/50", children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           ref,
-          className: cn3(
+          className: cn(
             "w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl",
             "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
             "focus:outline-none focus:ring-4",
             "transition-all duration-300",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             inputSizeClasses[inputSize],
-            inputToneClasses[tone],
+            "border-[rgb(var(--nc-accent-1)/0.3)]",
+            "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+            "placeholder:text-[rgb(var(--nc-accent-soft)/0.4)]",
             glow ? "focus:shadow-[0_0_30px_-5px_var(--glow-color)]" : "",
             icon ? "pl-12" : "",
             className
           ),
           style: {
-            "--glow-color": tone === "aurora" ? "rgba(52,211,153,0.5)" : tone === "ember" ? "rgba(251,191,36,0.5)" : tone === "midnight" ? "rgba(167,139,250,0.5)" : "rgba(56,189,248,0.5)"
+            "--glow-color": "rgb(var(--nc-accent-1) / 0.5)"
           },
           ...props
         }
@@ -166,10 +160,130 @@ var CraftInput = React.forwardRef(
   }
 );
 CraftInput.displayName = "CraftInput";
+// src/theme/theme-context.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var THEME_NAMES = [
+  "aurora",
+  "ember",
+  "ocean",
+  "midnight",
+  "cosmic"
+];
+var ThemeContext = React2.createContext(null);
+var DEFAULT_THEME_KEY = "nextcraft-theme";
+var DEFAULT_MODE_KEY = "nextcraft-mode";
+function ThemeProvider({
+  children,
+  defaultTheme = "ocean",
+  defaultMode = "system",
+  storageKeyTheme = DEFAULT_THEME_KEY,
+  storageKeyMode = DEFAULT_MODE_KEY
+}) {
+  const [theme, setTheme] = React2.useState(defaultTheme);
+  const [mode, setMode] = React2.useState(defaultMode);
+  React2.useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const storedTheme = window.localStorage.getItem(storageKeyTheme);
+      const storedMode = window.localStorage.getItem(storageKeyMode);
+      if (storedTheme) setTheme(storedTheme);
+      if (storedMode) setMode(storedMode);
+    } catch {
+    }
+  }, [storageKeyTheme, storageKeyMode]);
+  React2.useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKeyTheme, theme);
+      window.localStorage.setItem(storageKeyMode, mode);
+    } catch {
+    }
+  }, [theme, mode, storageKeyTheme, storageKeyMode]);
+  React2.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.dataset.ncTheme = theme;
+    if (mode !== "system") {
+      root.dataset.ncMode = mode;
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const applySystem = () => {
+      root.dataset.ncMode = mediaQuery.matches ? "dark" : "light";
+    };
+    applySystem();
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", applySystem);
+      return () => mediaQuery.removeEventListener("change", applySystem);
+    }
+    mediaQuery.addListener(applySystem);
+    return () => mediaQuery.removeListener(applySystem);
+  }, [theme, mode]);
+  const value = React2.useMemo(
+    () => ({ theme, mode, setTheme, setMode }),
+    [theme, mode]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React2.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+// src/components/theme-switcher.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MODE_OPTIONS = ["system", "light", "dark"];
+function ThemeSwitcher({ className, showLabels = true, ...props }) {
+  const { theme, mode, setTheme, setMode } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", children: [
+          showLabels && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white/70", children: "Theme" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "select",
+            {
+              className: "rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
+              value: theme,
+              onChange: (event) => setTheme(event.target.value),
+              children: THEME_NAMES.map((name) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: name, className: "text-slate-900", children: name }, name))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", children: [
+          showLabels && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white/70", children: "Mode" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "select",
+            {
+              className: "rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
+              value: mode,
+              onChange: (event) => setMode(event.target.value),
+              children: MODE_OPTIONS.map((value) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value, className: "text-slate-900", children: value }, value))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CraftButton,
   CraftInput,
-  GlassCard
+  GlassCard,
+  ThemeProvider,
+  ThemeSwitcher,
+  useTheme
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/components/craft-button.tsx","../src/utils/cn.ts","../src/components/glass-card.tsx","../src/components/craft-input.tsx"],"sourcesContent":["export { CraftButton } from \"./components/craft-button\";\nexport type { CraftButtonProps } from \"./components/craft-button\";\n\nexport { GlassCard } from \"./components/glass-card\";\nexport type { GlassCardProps } from \"./components/glass-card\";\n\nexport { CraftInput } from \"./components/craft-input\";\nexport type { CraftInputProps } from \"./components/craft-input\";\n","import * as React from \"react\";\n\nconst cn = (...classes: (string \| boolean \| undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\ntype CraftButtonVariant = \"solid\" \| \"ghost\" \| \"outline\" \| \"gradient\";\ntype CraftButtonSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n glow?: boolean;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20\",\n outline:\n \"bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10\",\n gradient:\n \"bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n glow = true,\n disabled,\n ...props\n}: CraftButtonProps) {\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" \|\| variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n disabled={disabled}\n {...props}\n />\n );\n}","export function cn(...values: Array<string \| false \| null \| undefined>): string {\n return values.filter(Boolean).join(\" \");\n}\n","import { cn } from \"@/utils/cn\";\n\nexport type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {\n tone?: \"aurora\" \| \"ember\" \| \"ocean\" \| \"midnight\" \| \"cosmic\";\n intensity?: \"subtle\" \| \"medium\" \| \"strong\";\n bordered?: boolean;\n};\n\nconst cardToneClasses: Record<NonNullable<GlassCardProps[\"tone\"]>, string> = {\n aurora:\n \"bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30\",\n ember: \n \"bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30\",\n ocean: \n \"bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30\",\n midnight:\n \"bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30\",\n cosmic:\n \"bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30\",\n};\n\nconst intensityClasses: Record<NonNullable<GlassCardProps[\"intensity\"]>, string> = {\n subtle: \"backdrop-blur-md bg-opacity-50\",\n medium: \"backdrop-blur-xl bg-opacity-70\",\n strong: \"backdrop-blur-2xl bg-opacity-90\",\n};\n\nexport function GlassCard({\n className,\n tone = \"ocean\",\n intensity = \"medium\",\n bordered = true,\n children,\n ...props\n}: GlassCardProps) {\n return (\n <div\n className={cn(\n \"relative overflow-hidden rounded-3xl p-6 text-white\",\n \"shadow-[0_8px_32px_rgba(0,0,0,0.3)]\",\n \"transition-all duration-300\",\n \"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]\",\n intensityClasses[intensity],\n cardToneClasses[tone],\n bordered ? \"border-2\" : \"border-0\",\n \"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300\",\n className\n )}\n {...props}\n >\n <div className=\"relative z-10\">{children}</div>\n </div>\n );\n}","\nimport * as React from \"react\";\n\nconst cn = (...classes: (string \| boolean \| undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\n// ============================================================================\n// CRAFT INPUT\n// ============================================================================\n\ntype CraftInputTone = \"aurora\" \| \"ember\" \| \"ocean\" \| \"midnight\";\ntype CraftInputSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport type CraftInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\"\n> & {\n tone?: CraftInputTone;\n inputSize?: CraftInputSize;\n glow?: boolean;\n icon?: React.ReactNode;\n};\n\nconst inputToneClasses: Record<CraftInputTone, string> = {\n aurora:\n \"border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40\",\n ember:\n \"border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40\",\n ocean: \n \"border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40\",\n midnight:\n \"border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40\",\n};\n\nconst inputSizeClasses: Record<CraftInputSize, string> = {\n sm: \"h-10 px-4 text-sm\",\n md: \"h-12 px-5 text-base\",\n lg: \"h-14 px-6 text-lg\",\n};\n\nexport const CraftInput = React.forwardRef<HTMLInputElement, CraftInputProps>(\n (\n { className, tone = \"ocean\", inputSize = \"md\", glow = true, icon, ...props },\n ref\n ) => {\n return (\n <div className=\"relative w-full\">\n {icon && (\n <div className=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/50\">\n {icon}\n </div>\n )}\n <input\n ref={ref}\n className={cn(\n \"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl\",\n \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n \"focus:outline-none focus:ring-4\",\n \"transition-all duration-300\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n inputSizeClasses[inputSize],\n inputToneClasses[tone],\n glow ? \"focus:shadow-[0_0_30px_-5px_var(--glow-color)]\" : \"\",\n icon ? \"pl-12\" : \"\",\n className\n )}\n style={{\n \"--glow-color\": tone === \"aurora\" ? \"rgba(52,211,153,0.5)\" : \n tone === \"ember\" ? \"rgba(251,191,36,0.5)\" : \n tone === \"midnight\" ? \"rgba(167,139,250,0.5)\" :\n \"rgba(56,189,248,0.5)\"\n } as React.CSSProperties}\n {...props}\n />\n </div>\n );\n }\n);\n\nCraftInput.displayName = \"CraftInput\";"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACwCI;AAtCJ,IAAM,KAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAWlC,IAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,iBAAqD;AAAA,EACzD,OACE;AAAA,EACF,OACE;AAAA,EACF,SACE;AAAA,EACF,UACE;AACJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,eAAe,OAAO;AAAA,QACtB,SAAS,YAAY,WAAW,YAAY,cACxC,kPACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACtDO,SAASA,OAAM,QAA0D;AAC9E,SAAO,OAAO,OAAO,OAAO,EAAE,KAAK,GAAG;AACxC;;;ACgDM,IAAAC,sBAAA;AA1CN,IAAM,kBAAuE;AAAA,EAC3E,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,QACE;AACJ;AAEA,IAAM,mBAA6E;AAAA,EACjF,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB,SAAS;AAAA,QAC1B,gBAAgB,IAAI;AAAA,QACpB,WAAW,aAAa;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,uDAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA;AAAA,EAC3C;AAEJ;;;ACpDA,YAAuB;AA6CjB,IAAAC,sBAAA;AA3CN,IAAMC,MAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAmBlC,IAAM,mBAAmD;AAAA,EACvD,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AACJ;AAEA,IAAM,mBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,aAAmB;AAAA,EAC9B,CACE,EAAE,WAAW,OAAO,SAAS,YAAY,MAAM,OAAO,MAAM,MAAM,GAAG,MAAM,GAC3E,QACG;AACH,WACE,8CAAC,SAAI,WAAU,mBACZ;AAAA,cACC,6CAAC,SAAI,WAAU,0DACZ,gBACH;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAWA;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,SAAS;AAAA,YAC1B,iBAAiB,IAAI;AAAA,YACrB,OAAO,mDAAmD;AAAA,YAC1D,OAAO,UAAU;AAAA,YACjB;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,gBAAgB,SAAS,WAAW,yBACpB,SAAS,UAAU,yBACnB,SAAS,aAAa,0BACtB;AAAA,UAClB;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["cn","import_jsx_runtime","cn","import_jsx_runtime","cn"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/utils/cn.ts","../src/components/craft-button.tsx","../src/components/glass-card.tsx","../src/components/craft-input.tsx","../src/theme/theme-context.tsx","../src/components/theme-switcher.tsx"],"sourcesContent":["export { CraftButton } from \"./components/craft-button\";\nexport type { CraftButtonProps } from \"./components/craft-button\";\n\nexport { GlassCard } from \"./components/glass-card\";\nexport type { GlassCardProps } from \"./components/glass-card\";\n\nexport { CraftInput } from \"./components/craft-input\";\nexport type { CraftInputProps } from \"./components/craft-input\";\n\nexport { ThemeSwitcher } from \"./components/theme-switcher\";\nexport type { ThemeSwitcherProps } from \"./components/theme-switcher\";\n\nexport { ThemeProvider, useTheme } from \"./theme/theme-context\";\nexport type { ThemeName, ThemeMode } from \"./theme/theme-context\";\n","export function cn(...values: Array<string \| false \| null \| undefined>): string {\n return values.filter(Boolean).join(\" \");\n}\n","import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\ntype CraftButtonVariant = \"solid\" \| \"ghost\" \| \"outline\" \| \"gradient\";\ntype CraftButtonSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n glow?: boolean;\n tone?: ThemeName;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20\",\n outline:\n \"bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]\",\n gradient:\n \"bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n glow = true,\n tone,\n disabled,\n ...props\n}: CraftButtonProps) {\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" \|\| variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-[rgb(var(--nc-accent-1)/0.2)] before:via-[rgb(var(--nc-accent-2)/0.2)] before:to-[rgb(var(--nc-accent-3)/0.2)] before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n data-nc-theme={tone}\n disabled={disabled}\n {...props}\n />\n );\n}\n","import { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {\n tone?: ThemeName;\n intensity?: \"subtle\" \| \"medium\" \| \"strong\";\n bordered?: boolean;\n};\n\nconst intensityClasses: Record<NonNullable<GlassCardProps[\"intensity\"]>, string> = {\n subtle: \"backdrop-blur-md bg-opacity-50\",\n medium: \"backdrop-blur-xl bg-opacity-70\",\n strong: \"backdrop-blur-2xl bg-opacity-90\",\n};\n\nexport function GlassCard({\n className,\n tone,\n intensity = \"medium\",\n bordered = true,\n children,\n ...props\n}: GlassCardProps) {\n return (\n <div\n className={cn(\n \"relative overflow-hidden rounded-3xl p-6 text-white\",\n \"shadow-[0_8px_32px_rgba(0,0,0,0.3)]\",\n \"transition-all duration-300\",\n \"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]\",\n intensityClasses[intensity],\n \"bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.15)] via-[rgb(var(--nc-accent-2)/0.10)] to-[rgb(var(--nc-accent-3)/0.15)]\",\n \"border-[rgb(var(--nc-accent-1)/0.3)]\",\n bordered ? \"border-2\" : \"border-0\",\n \"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300\",\n className\n )}\n data-nc-theme={tone}\n {...props}\n >\n <div className=\"relative z-10\">{children}</div>\n </div>\n );\n}\n","\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\n// ============================================================================\n// CRAFT INPUT\n// ============================================================================\n\ntype CraftInputSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport type CraftInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\"\n> & {\n tone?: ThemeName;\n inputSize?: CraftInputSize;\n glow?: boolean;\n icon?: React.ReactNode;\n};\n\nconst inputSizeClasses: Record<CraftInputSize, string> = {\n sm: \"h-10 px-4 text-sm\",\n md: \"h-12 px-5 text-base\",\n lg: \"h-14 px-6 text-lg\",\n};\n\nexport const CraftInput = React.forwardRef<HTMLInputElement, CraftInputProps>(\n (\n { className, tone, inputSize = \"md\", glow = true, icon, ...props },\n ref\n ) => {\n return (\n <div className=\"relative w-full\" data-nc-theme={tone}>\n {icon && (\n <div className=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/50\">\n {icon}\n </div>\n )}\n <input\n ref={ref}\n className={cn(\n \"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl\",\n \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n \"focus:outline-none focus:ring-4\",\n \"transition-all duration-300\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n inputSizeClasses[inputSize],\n \"border-[rgb(var(--nc-accent-1)/0.3)]\",\n \"focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]\",\n \"placeholder:text-[rgb(var(--nc-accent-soft)/0.4)]\",\n glow ? \"focus:shadow-[0_0_30px_-5px_var(--glow-color)]\" : \"\",\n icon ? \"pl-12\" : \"\",\n className\n )}\n style={{\n \"--glow-color\": \"rgb(var(--nc-accent-1) / 0.5)\",\n } as React.CSSProperties}\n {...props}\n />\n </div>\n );\n }\n);\n\nCraftInput.displayName = \"CraftInput\";\n","\"use client\";\n\nimport * as React from \"react\";\n\nexport type ThemeName = \"aurora\" \| \"ember\" \| \"ocean\" \| \"midnight\" \| \"cosmic\";\nexport type ThemeMode = \"light\" \| \"dark\" \| \"system\";\n\nexport const THEME_NAMES: ThemeName[] = [\n \"aurora\",\n \"ember\",\n \"ocean\",\n \"midnight\",\n \"cosmic\",\n];\n\ntype ThemeContextValue = {\n theme: ThemeName;\n mode: ThemeMode;\n setTheme: (theme: ThemeName) => void;\n setMode: (mode: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue \| null>(null);\n\ntype ThemeProviderProps = {\n children: React.ReactNode;\n defaultTheme?: ThemeName;\n defaultMode?: ThemeMode;\n storageKeyTheme?: string;\n storageKeyMode?: string;\n};\n\nconst DEFAULT_THEME_KEY = \"nextcraft-theme\";\nconst DEFAULT_MODE_KEY = \"nextcraft-mode\";\n\nexport function ThemeProvider({\n children,\n defaultTheme = \"ocean\",\n defaultMode = \"system\",\n storageKeyTheme = DEFAULT_THEME_KEY,\n storageKeyMode = DEFAULT_MODE_KEY,\n}: ThemeProviderProps) {\n const [theme, setTheme] = React.useState<ThemeName>(defaultTheme);\n const [mode, setMode] = React.useState<ThemeMode>(defaultMode);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n const storedTheme = window.localStorage.getItem(storageKeyTheme) as ThemeName \| null;\n const storedMode = window.localStorage.getItem(storageKeyMode) as ThemeMode \| null;\n if (storedTheme) setTheme(storedTheme);\n if (storedMode) setMode(storedMode);\n } catch {\n // Ignore storage errors.\n }\n }, [storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(storageKeyTheme, theme);\n window.localStorage.setItem(storageKeyMode, mode);\n } catch {\n // Ignore storage errors.\n }\n }, [theme, mode, storageKeyTheme, storageKeyMode]);\n\n React.useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.dataset.ncTheme = theme;\n\n if (mode !== \"system\") {\n root.dataset.ncMode = mode;\n return;\n }\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const applySystem = () => {\n root.dataset.ncMode = mediaQuery.matches ? \"dark\" : \"light\";\n };\n\n applySystem();\n\n if (typeof mediaQuery.addEventListener === \"function\") {\n mediaQuery.addEventListener(\"change\", applySystem);\n return () => mediaQuery.removeEventListener(\"change\", applySystem);\n }\n\n mediaQuery.addListener(applySystem);\n return () => mediaQuery.removeListener(applySystem);\n }, [theme, mode]);\n\n const value = React.useMemo(\n () => ({ theme, mode, setTheme, setMode }),\n [theme, mode]\n );\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n const context = React.useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within ThemeProvider\");\n }\n return context;\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { THEME_NAMES, type ThemeMode, type ThemeName, useTheme } from \"@/theme/theme-context\";\n\nconst MODE_OPTIONS: ThemeMode[] = [\"system\", \"light\", \"dark\"];\n\nexport type ThemeSwitcherProps = React.HTMLAttributes<HTMLDivElement> & {\n showLabels?: boolean;\n};\n\nexport function ThemeSwitcher({ className, showLabels = true, ...props }: ThemeSwitcherProps) {\n const { theme, mode, setTheme, setMode } = useTheme();\n\n return (\n <div\n className={cn(\n \"flex flex-wrap items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]\",\n className\n )}\n {...props}\n >\n <label className=\"flex items-center gap-2\">\n {showLabels && <span className=\"text-white/70\">Theme</span>}\n <select\n className=\"rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]\"\n value={theme}\n onChange={(event) => setTheme(event.target.value as ThemeName)}\n >\n {THEME_NAMES.map((name) => (\n <option key={name} value={name} className=\"text-slate-900\">\n {name}\n </option>\n ))}\n </select>\n </label>\n <label className=\"flex items-center gap-2\">\n {showLabels && <span className=\"text-white/70\">Mode</span>}\n <select\n className=\"rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]\"\n value={mode}\n onChange={(event) => setMode(event.target.value as ThemeMode)}\n >\n {MODE_OPTIONS.map((value) => (\n <option key={value} value={value} className=\"text-slate-900\">\n {value}\n </option>\n ))}\n </select>\n </label>\n </div>\n );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts CHANGED Viewed

@@ -1,35 +1,58 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
+type ThemeName = "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
+type ThemeMode = "light" | "dark" | "system";
+type ThemeContextValue = {
+    theme: ThemeName;
+    mode: ThemeMode;
+    setTheme: (theme: ThemeName) => void;
+    setMode: (mode: ThemeMode) => void;
+};
+type ThemeProviderProps = {
+    children: React$1.ReactNode;
+    defaultTheme?: ThemeName;
+    defaultMode?: ThemeMode;
+    storageKeyTheme?: string;
+    storageKeyMode?: string;
+};
+declare function ThemeProvider({ children, defaultTheme, defaultMode, storageKeyTheme, storageKeyMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
 type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
 type CraftButtonSize = "sm" | "md" | "lg";
 type CraftButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: CraftButtonVariant;
     size?: CraftButtonSize;
     glow?: boolean;
+    tone?: ThemeName;
 };
-declare function CraftButton({ className, variant, size, glow, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
+declare function CraftButton({ className, variant, size, glow, tone, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
 type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {
-    tone?: "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
+    tone?: ThemeName;
     intensity?: "subtle" | "medium" | "strong";
     bordered?: boolean;
 };
 declare function GlassCard({ className, tone, intensity, bordered, children, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
-type CraftInputTone = "aurora" | "ember" | "ocean" | "midnight";
 type CraftInputSize = "sm" | "md" | "lg";
 type CraftInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    tone?: CraftInputTone;
+    tone?: ThemeName;
     inputSize?: CraftInputSize;
     glow?: boolean;
     icon?: React$1.ReactNode;
 };
 declare const CraftInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    tone?: CraftInputTone;
+    tone?: ThemeName;
     inputSize?: CraftInputSize;
     glow?: boolean;
     icon?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLInputElement>>;
-export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps };
+type ThemeSwitcherProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    showLabels?: boolean;
+};
+declare function ThemeSwitcher({ className, showLabels, ...props }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps, type ThemeMode, type ThemeName, ThemeProvider, ThemeSwitcher, type ThemeSwitcherProps, useTheme };

package/dist/index.d.ts CHANGED Viewed

@@ -1,35 +1,58 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
+type ThemeName = "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
+type ThemeMode = "light" | "dark" | "system";
+type ThemeContextValue = {
+    theme: ThemeName;
+    mode: ThemeMode;
+    setTheme: (theme: ThemeName) => void;
+    setMode: (mode: ThemeMode) => void;
+};
+type ThemeProviderProps = {
+    children: React$1.ReactNode;
+    defaultTheme?: ThemeName;
+    defaultMode?: ThemeMode;
+    storageKeyTheme?: string;
+    storageKeyMode?: string;
+};
+declare function ThemeProvider({ children, defaultTheme, defaultMode, storageKeyTheme, storageKeyMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
 type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
 type CraftButtonSize = "sm" | "md" | "lg";
 type CraftButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: CraftButtonVariant;
     size?: CraftButtonSize;
     glow?: boolean;
+    tone?: ThemeName;
 };
-declare function CraftButton({ className, variant, size, glow, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
+declare function CraftButton({ className, variant, size, glow, tone, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
 type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {
-    tone?: "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
+    tone?: ThemeName;
     intensity?: "subtle" | "medium" | "strong";
     bordered?: boolean;
 };
 declare function GlassCard({ className, tone, intensity, bordered, children, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
-type CraftInputTone = "aurora" | "ember" | "ocean" | "midnight";
 type CraftInputSize = "sm" | "md" | "lg";
 type CraftInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    tone?: CraftInputTone;
+    tone?: ThemeName;
     inputSize?: CraftInputSize;
     glow?: boolean;
     icon?: React$1.ReactNode;
 };
 declare const CraftInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    tone?: CraftInputTone;
+    tone?: ThemeName;
     inputSize?: CraftInputSize;
     glow?: boolean;
     icon?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLInputElement>>;
-export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps };
+type ThemeSwitcherProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    showLabels?: boolean;
+};
+declare function ThemeSwitcher({ className, showLabels, ...props }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps, type ThemeMode, type ThemeName, ThemeProvider, ThemeSwitcher, type ThemeSwitcherProps, useTheme };