@jameskabz/nextcraft-ui 0.5.0 → 0.6.0

package/dist/styles.css

@@ -6,8 +6,10 @@
     --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-rose-300: oklch(81% 0.117 11.638);
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-slate-900: oklch(20.8% 0.042 265.755);
@@ -17,6 +19,7 @@
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
     --container-3xl: 48rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
@@ -286,6 +289,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -298,6 +304,9 @@
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -340,6 +349,9 @@
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -358,6 +370,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
@@ -403,6 +418,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
@@ -418,6 +436,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -436,9 +457,15 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -585,6 +612,13 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-10 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -635,6 +669,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[3px\] {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -662,6 +700,21 @@
   .border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
     border-color: rgb(var(--nc-accent-1)/0.6);
   }
+  .border-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
+    border-color: rgb(var(--nc-accent-1)/0.25);
+  }
+  .border-\[rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-1)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-2\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-2)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-3\)\/0\.45\)\] {
+    border-color: rgb(var(--nc-accent-3)/0.45);
+  }
+  .border-\[rgb\(var\(--nc-accent-3\)\/0\.65\)\] {
+    border-color: rgb(var(--nc-accent-3)/0.65);
+  }
   .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
     border-color: rgb(var(--nc-border)/0.3);
   }
@@ -710,6 +763,9 @@
       border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .border-t-\[rgb\(var\(--nc-accent-1\)\)\] {
+    border-top-color: rgb(var(--nc-accent-1));
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -737,12 +793,24 @@
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.08\)\] {
     background-color: rgb(var(--nc-accent-1)/0.08);
   }
+  .bg-\[rgb\(var\(--nc-accent-1\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-1)/0.12);
+  }
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
     background-color: rgb(var(--nc-accent-1)/0.25);
   }
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.65\)\] {
     background-color: rgb(var(--nc-accent-1)/0.65);
   }
+  .bg-\[rgb\(var\(--nc-accent-2\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-2)/0.12);
+  }
+  .bg-\[rgb\(var\(--nc-accent-3\)\/0\.12\)\] {
+    background-color: rgb(var(--nc-accent-3)/0.12);
+  }
+  .bg-\[rgb\(var\(--nc-accent-3\)\/0\.18\)\] {
+    background-color: rgb(var(--nc-accent-3)/0.18);
+  }
   .bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
     background-color: rgb(var(--nc-surface)/0.2);
   }
@@ -1005,6 +1073,12 @@
   .text-emerald-200 {
     color: var(--color-emerald-200);
   }
+  .text-emerald-300 {
+    color: var(--color-emerald-300);
+  }
+  .text-rose-300 {
+    color: var(--color-rose-300);
+  }
   .text-slate-300 {
     color: var(--color-slate-300);
   }
@@ -1035,6 +1109,12 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1081,6 +1161,10 @@
     --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.25\)\] {
+    --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.35\)\] {
     --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.35));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1125,6 +1209,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1170,6 +1258,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1526,6 +1619,20 @@
       }
     }
   }
+  .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.16\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--nc-surface)/0.16);
+      }
+    }
+  }
+  .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.18\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--nc-surface)/0.18);
+      }
+    }
+  }
   .hover\:bg-transparent {
     &:hover {
       @media (hover: hover) {
@@ -1543,6 +1650,13 @@
       }
     }
   }
+  .hover\:text-\[rgb\(var\(--nc-accent-1\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: rgb(var(--nc-accent-1));
+      }
+    }
+  }
   .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1691,6 +1805,11 @@
       }
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -1776,6 +1895,11 @@
       grid-template-columns: 260px 1fr;
     }
   }
+  .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+    @media (width >= 64rem) {
+      grid-template-columns: minmax(0,1fr) auto;
+    }
+  }
   .lg\:self-start {
     @media (width >= 64rem) {
       align-self: flex-start;

package/dist/theme-context-EVI9PfKv.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React 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.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;
+
+export { type ThemeMode as T, type ThemeName as a, ThemeProvider as b, useTheme as u };

package/dist/theme-context-EVI9PfKv.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React 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.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;
+
+export { type ThemeMode as T, type ThemeName as a, ThemeProvider as b, useTheme as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jameskabz/nextcraft-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Next.js + Tailwind UI components with a bold, crafted aesthetic.",
   "private": false,
   "license": "MIT",
@@ -27,6 +27,31 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./components": {
+      "types": "./dist/craft/components.d.ts",
+      "import": "./dist/craft/components.js",
+      "require": "./dist/craft/components.cjs"
+    },
+    "./layout": {
+      "types": "./dist/craft/layout.d.ts",
+      "import": "./dist/craft/layout.js",
+      "require": "./dist/craft/layout.cjs"
+    },
+    "./forms": {
+      "types": "./dist/craft/forms.d.ts",
+      "import": "./dist/craft/forms.js",
+      "require": "./dist/craft/forms.cjs"
+    },
+    "./theme": {
+      "types": "./dist/craft/theme.d.ts",
+      "import": "./dist/craft/theme.js",
+      "require": "./dist/craft/theme.cjs"
+    },
+    "./table": {
+      "types": "./dist/craft/table.d.ts",
+      "import": "./dist/craft/table.js",
+      "require": "./dist/craft/table.cjs"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "sideEffects": [
@@ -45,6 +70,7 @@
     "test:coverage": "echo \"No coverage configured\""
   },
   "peerDependencies": {
+    "lucide-react": "^0.542.0",
     "next": "^16.1.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
@@ -60,6 +86,7 @@
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.4",
+    "lucide-react": "^0.542.0",
     "next": "16.1.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",