@jameskabz/nextcraft-ui 0.6.16 → 0.7.0

package/dist/styles.css

@@ -44,12 +44,16 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wide: 0.025em;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-xl: 24px;
@@ -212,6 +216,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -244,8 +251,8 @@
   .top-6 {
     top: calc(var(--spacing) * 6);
   }
-  .top-10 {
-    top: calc(var(--spacing) * 10);
+  .top-12 {
+    top: calc(var(--spacing) * 12);
   }
   .top-full {
     top: 100%;
@@ -289,6 +296,18 @@
   .z-50 {
     z-index: 50;
   }
+  .row-1 {
+    grid-row: 1;
+  }
+  .row-2 {
+    grid-row: 2;
+  }
+  .row-3 {
+    grid-row: 3;
+  }
+  .row-4 {
+    grid-row: 4;
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -319,6 +338,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -328,6 +350,9 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .block {
     display: block;
   }
@@ -400,6 +425,9 @@
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-3\/4 {
+    width: calc(3/4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -424,8 +452,8 @@
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
-  .w-48 {
-    width: calc(var(--spacing) * 48);
+  .w-56 {
+    width: calc(var(--spacing) * 56);
   }
   .w-full {
     width: 100%;
@@ -460,9 +488,15 @@
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -501,6 +535,15 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -528,12 +571,18 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -546,6 +595,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -627,12 +679,23 @@
       margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
@@ -648,6 +711,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -703,27 +769,33 @@
   .border-\[rgb\(var\(--nc-accent-2\)\/0\.45\)\] {
     border-color: rgb(var(--nc-accent-2)/0.45);
   }
+  .border-\[rgb\(var\(--nc-accent-3\)\)\] {
+    border-color: rgb(var(--nc-accent-3));
+  }
   .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\.2\)\] {
+    border-color: rgb(var(--nc-border)/0.2);
+  }
   .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
     border-color: rgb(var(--nc-border)/0.3);
   }
   .border-\[rgb\(var\(--nc-border\)\/0\.15\)\] {
     border-color: rgb(var(--nc-border)/0.15);
   }
+  .border-\[rgb\(var\(--nc-border\)\/0\.25\)\] {
+    border-color: rgb(var(--nc-border)/0.25);
+  }
   .border-\[rgb\(var\(--nc-border\)\/0\.35\)\] {
     border-color: rgb(var(--nc-border)/0.35);
   }
   .border-\[rgb\(var\(--nc-border\)\/0\.45\)\] {
     border-color: rgb(var(--nc-border)/0.45);
   }
-  .border-\[rgb\(var\(--nc-fg-muted\)\)\] {
-    border-color: rgb(var(--nc-fg-muted));
-  }
   .border-amber-400\/40 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -745,6 +817,9 @@
   .border-slate-300 {
     border-color: var(--color-slate-300);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -784,9 +859,6 @@
   .bg-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
     background-color: rgb(var(--nc-accent-1)/0.3);
   }
-  .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);
   }
@@ -805,9 +877,15 @@
   .bg-\[rgb\(var\(--nc-accent-3\)\/0\.18\)\] {
     background-color: rgb(var(--nc-accent-3)/0.18);
   }
+  .bg-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
+    background-color: rgb(var(--nc-border)/0.3);
+  }
   .bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
     background-color: rgb(var(--nc-surface)/0.2);
   }
+  .bg-\[rgb\(var\(--nc-surface\)\/0\.04\)\] {
+    background-color: rgb(var(--nc-surface)/0.04);
+  }
   .bg-\[rgb\(var\(--nc-surface\)\/0\.08\)\] {
     background-color: rgb(var(--nc-surface)/0.08);
   }
@@ -898,6 +976,9 @@
   .bg-clip-text {
     background-clip: text;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -946,11 +1027,17 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-10 {
-    padding-block: calc(var(--spacing) * 10);
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
   }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
@@ -1011,6 +1098,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1034,12 +1124,18 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .text-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
     color: rgb(var(--nc-accent-1));
   }
   .text-\[rgb\(var\(--nc-accent-1\)\)\] {
     color: rgb(var(--nc-accent-1));
   }
+  .text-\[rgb\(var\(--nc-accent-2\)\)\] {
+    color: rgb(var(--nc-accent-2));
+  }
   .text-\[rgb\(var\(--nc-accent-3\)\)\] {
     color: rgb(var(--nc-accent-3));
   }
@@ -1061,6 +1157,9 @@
   .text-amber-200 {
     color: var(--color-amber-200);
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-emerald-200 {
     color: var(--color-emerald-200);
   }
@@ -1116,6 +1215,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-25 {
+    opacity: 25%;
+  }
   .opacity-40 {
     opacity: 40%;
   }
@@ -1125,6 +1227,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-75 {
+    opacity: 75%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1208,6 +1313,10 @@
     --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);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1350,6 +1459,11 @@
       color: rgb(var(--nc-fg));
     }
   }
+  .placeholder\:text-\[rgb\(var\(--nc-fg-muted\)\)\] {
+    &::placeholder {
+      color: rgb(var(--nc-fg-muted));
+    }
+  }
   .placeholder\:text-\[rgb\(var\(--nc-fg-soft\)\)\] {
     &::placeholder {
       color: rgb(var(--nc-fg-soft));
@@ -1718,6 +1832,13 @@
       }
     }
   }
+  .hover\:text-\[rgb\(var\(--nc-accent-2\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: rgb(var(--nc-accent-2));
+      }
+    }
+  }
   .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1772,6 +1893,11 @@
       border-color: rgb(var(--nc-accent-1)/0.8);
     }
   }
+  .focus\:border-\[rgb\(var\(--nc-accent-3\)\)\] {
+    &:focus {
+      border-color: rgb(var(--nc-accent-3));
+    }
+  }
   .focus\:shadow-\[0_0_30px_-5px_var\(--glow-color\)\] {
     &:focus {
       --tw-shadow: 0 0 30px -5px var(--tw-shadow-color, var(--glow-color));
@@ -1800,6 +1926,11 @@
       --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
     }
   }
+  .focus\:ring-\[rgb\(var\(--nc-accent-3\)\/0\.35\)\] {
+    &:focus {
+      --tw-ring-color: rgb(var(--nc-accent-3)/0.35);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -2353,6 +2484,27 @@ body {
     transform: rotate(360deg);
   }
 }
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jameskabz/nextcraft-ui",
-  "version": "0.6.16",
+  "version": "0.7.0",
   "description": "Next.js + Tailwind UI components with a bold, crafted aesthetic.",
   "private": false,
   "license": "MIT",
@@ -45,19 +45,20 @@
     "test:coverage": "echo \"No coverage configured\""
   },
   "peerDependencies": {
-    "lucide-react": "^0.563.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "next": "^16.1.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.71.1",
     "tailwindcss": "^4"
   },
-  "peerDependenciesMeta": {
-    "lucide-react": {
-      "optional": true
-    }
-  },
+  "peerDependenciesMeta": {},
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@tailwindcss/cli": "^4",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
@@ -66,7 +67,6 @@
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.4",
-    "lucide-react": "^0.563.0",
     "next": "16.1.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",