@shuriken-ui/tailwind 4.0.0-alpha.5 → 4.0.0-alpha.7

package/README.md

@@ -0,0 +1,55 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/278e3026-1997-4e01-9457-20772adbce31">
+    <source media="(prefers-color-scheme: light)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/06f9d8e2-38aa-45b2-b91e-1c891a20e271">
+    <img alt="Shuriken UI logo" src="https://github.com/shuriken-ui/.github/assets/86636408/06f9d8e2-38aa-45b2-b91e-1c891a20e271">
+  </picture>
+</p>
+
+
+<p align="center">
+  <a href="https://cssninja.io" title="Our official website">by <strong>cssninja.io</strong></a>
+</p>
+
+---
+
+## Shuriken UI - Tailwind CSS v4
+
+Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.
+
+This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.
+
+## Installation
+
+Install dependencies:
+
+```bash
+pnpm install -D @shuriken-ui/tailwind@next tailwindcss@next @tailwindcss/vite@next
+```
+
+Add tailwind plugin to your `vite.config.ts`:
+
+```ts
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
+```
+
+Reference Shuriken UI in your `tailwind.css` file:
+
+```css
+@import 'tailwindcss';
+@import '@shuriken-ui/tailwind';
+
+/* Register the dark mode variant (with .dark class) */
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Customize your theme here */
+}
+```
+
+> See the [theme.css](https://github.com/shuriken-ui/shuriken-ui/blob/main/packages/tailwind/lib/theme.css) file for a complete list of available variables you can customize.

package/lib/css/focus.css

@@ -1,11 +1,4 @@
-/* @utility nui-focus */
-
 @utility nui-focus {
-  @apply outline-2 outline-dashed outline-offset-2;
-  @apply outline-transparent;
-
-  &:focus-within {
-    @apply outline-muted-300 dark:outline-muted-600;
-    @apply outline-dashed ring-0;
-  }
+  @apply outline-none ring-ring ring-1 ring-offset-2 ring-offset-white;
+  @apply dark:ring-offset-muted-950;
 }

package/lib/css/mark.css

@@ -1,5 +1,3 @@
-/* @utility nui-mark */
-
 @utility nui-mark {
   @apply bg-primary-100 dark:bg-primary-800;
   @apply text-primary-800 dark:text-primary-200;

package/lib/css/mask.css

@@ -1,5 +1,3 @@
-/* @utility nui-mask */
-
 @utility nui-mask {
   mask-size: contain;
   mask-repeat: no-repeat;

package/lib/css/slimscroll.css

@@ -1,10 +1,12 @@
 /* @utility nui-slimscroll */
 
 @utility nui-slimscroll {
+  scrollbar-width: auto !important;
+
   &::-webkit-scrollbar {
     scroll-behavior: smooth;
     scrollbar-gutter: stable;
-    @apply w-[6px] h-[6px];
+    @apply w-[6px] h-[6px] block!;
   }
 
   &::-webkit-scrollbar-thumb {
@@ -19,13 +21,14 @@
   &::-webkit-scrollbar {
     scroll-behavior: smooth;
     scrollbar-gutter: stable;
-    @apply w-[6px] h-[6px];
+    @apply w-[6px] h-[6px] block!;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-lg bg-transparent duration-300 transition-all;
   }
 
   &:hover::-webkit-scrollbar-thumb {
     @apply bg-black/20 dark:bg-white/20;
   }
 }
-@utility undefined {
-  @apply rounded-lg bg-transparent duration-300 transition-all;
-}

package/lib/index.css

@@ -2,59 +2,15 @@
 
 @import './theme.css';
 
-@import './css/accordion.css';
-@import './css/autocomplete.css';
-@import './css/avatar-group.css';
-@import './css/avatar.css';
-@import './css/breadcrumb.css';
-@import './css/button-action.css';
-@import './css/button-close.css';
-@import './css/button-group.css';
-@import './css/button-icon.css';
-@import './css/button.css';
-@import './css/card.css';
-@import './css/checkbox.css';
-@import './css/dropdown-divider.css';
-@import './css/dropdown-item.css';
-@import './css/dropdown.css';
 @import './css/focus.css';
-@import './css/fullscreen-dropfile.css';
-@import './css/heading.css';
-@import './css/icon-box.css';
-@import './css/input-file-regular.css';
-@import './css/input-file.css';
-@import './css/input-help-text.css';
-@import './css/input-number.css';
-@import './css/input.css';
-@import './css/kbd.css';
-@import './css/label.css';
-@import './css/link.css';
-@import './css/list.css';
-@import './css/listbox.css';
 @import './css/mark.css';
 @import './css/mask.css';
-@import './css/message-text.css';
-@import './css/message.css';
-@import './css/modal.css';
-@import './css/pagination.css';
-@import './css/paragraph.css';
-@import './css/placeholder-page.css';
-@import './css/placeload.css';
-@import './css/progress-circle.css';
-@import './css/progress.css';
-@import './css/prose.css';
-@import './css/radio.css';
-@import './css/select.css';
 @import './css/slimscroll.css';
-@import './css/snack.css';
-@import './css/switch-ball.css';
-@import './css/switch-thin.css';
-@import './css/tab-slider.css';
-@import './css/tabs.css';
-@import './css/tag.css';
-@import './css/text.css';
-@import './css/textarea.css';
-@import './css/theme-switch.css';
-@import './css/theme-toggle.css';
-@import './css/toast.css';
-@import './css/tooltip.css';
+
+.dark {
+  color-scheme: dark;
+}
+.nui-no-transition * {
+  transition-property: none !important;
+  transition-duration: 0 !important;
+}

package/lib/theme.css

@@ -1,8 +1,8 @@
 @theme {
-  /* --font-family-sans: 'Titillium Web', sans-serif; */
-  /* --font-family-mono: 'Titillium Web', sans-serif; */
-  --font-family-alt: var(--font-family-sans);
-  --font-family-heading: var(--font-family-sans);
+  /* --font-sans: 'Titillium Web', sans-serif; */
+  /* --font-monospace: 'Titillium Web', sans-serif; */
+  --font-alt: var(--font-sans);
+  --font-heading: var(--font-sans);
   
   /** Colors */
   --color-muted-50: var(--color-gray-50);
@@ -16,8 +16,7 @@
   --color-muted-800: var(--color-gray-800);
   --color-muted-900: var(--color-gray-900);
   --color-muted-950: var(--color-gray-950);
-  
-  --color-primary-invert: var(--color-white);
+
   --color-primary-50: var(--color-purple-50);
   --color-primary-100: var(--color-purple-100);
   --color-primary-200: var(--color-purple-200);
@@ -29,6 +28,10 @@
   --color-primary-800: var(--color-purple-800);
   --color-primary-900: var(--color-purple-900);
   --color-primary-950: var(--color-purple-950);
+  --color-primary-invert: var(--color-white);
+  --color-primary-base: var(--color-primary-500);
+  --color-primary-heavy: var(--color-primary-600);
+  --color-primary-light: var(--color-primary-400);
   
   --color-info-50: var(--color-sky-50);
   --color-info-100: var(--color-sky-100);
@@ -41,6 +44,10 @@
   --color-info-800: var(--color-sky-800);
   --color-info-900: var(--color-sky-900);
   --color-info-950: var(--color-sky-950);
+  --color-info-invert: var(--color-white);
+  --color-info-base: var(--color-info-600);
+  --color-info-heavy: var(--color-info-700);
+  --color-info-light: var(--color-info-500);
   
   --color-success-50: var(--color-teal-50);
   --color-success-100: var(--color-teal-100);
@@ -53,6 +60,10 @@
   --color-success-800: var(--color-teal-800);
   --color-success-900: var(--color-teal-900);
   --color-success-950: var(--color-teal-950);
+  --color-success-invert: var(--color-white);
+  --color-success-base: var(--color-success-600);
+  --color-success-heavy: var(--color-success-700);
+  --color-success-light: var(--color-success-500);
   
   --color-warning-50: var(--color-amber-50);
   --color-warning-100: var(--color-amber-100);
@@ -65,23 +76,33 @@
   --color-warning-800: var(--color-amber-800);
   --color-warning-900: var(--color-amber-900);
   --color-warning-950: var(--color-amber-950);
+  --color-warning-invert: var(--color-white);
+  --color-warning-base: var(--color-warning-600);
+  --color-warning-heavy: var(--color-warning-700);
+  --color-warning-light: var(--color-warning-500);
   
-  --color-danger-50: var(--color-rose-50);
-  --color-danger-100: var(--color-rose-100);
-  --color-danger-200: var(--color-rose-200);
-  --color-danger-300: var(--color-rose-300);
-  --color-danger-400: var(--color-rose-400);
-  --color-danger-500: var(--color-rose-500);
-  --color-danger-600: var(--color-rose-600);
-  --color-danger-700: var(--color-rose-700);
-  --color-danger-800: var(--color-rose-800);
-  --color-danger-900: var(--color-rose-900);
-  --color-danger-950: var(--color-rose-950);
+  --color-destructive-50: var(--color-rose-50);
+  --color-destructive-100: var(--color-rose-100);
+  --color-destructive-200: var(--color-rose-200);
+  --color-destructive-300: var(--color-rose-300);
+  --color-destructive-400: var(--color-rose-400);
+  --color-destructive-500: var(--color-rose-500);
+  --color-destructive-600: var(--color-rose-600);
+  --color-destructive-700: var(--color-rose-700);
+  --color-destructive-800: var(--color-rose-800);
+  --color-destructive-900: var(--color-rose-900);
+  --color-destructive-950: var(--color-rose-950);
+  --color-destructive-invert: var(--color-white);
+  --color-destructive-base: var(--color-destructive-600);
+  --color-destructive-heavy: var(--color-destructive-700);
+  --color-destructive-light: var(--color-destructive-500);
+
+  --color-link: var(--color-primary-base);
+  --color-ring: var(--color-muted-300);
 
   --animate-nui-placeload: nui-placeload 1s linear infinite forwards;
   --animate-nui-progress-indeterminate: nui-progress-indeterminate 3s linear infinite forwards;
-  --animate-nui-tooltip-x: nui-tooltip-x 300ms ease-out forwards;
-  --animate-nui-tooltip-y: nui-tooltip-y 300ms ease-out forwards;
+  --animate-nui-spin: spin 2s linear infinite;
   
   @keyframes nui-placeload {
     0% {
@@ -102,16 +123,4 @@
       margin-left: -100%;
     }
   }
-  @keyframes nui-tooltip-x {
-    to {
-      opacity: 1;
-      transform: translate(-50%, 0);
-    }
-  }
-  @keyframes nui-tooltip-y {
-    to {
-      opacity: 1;
-      transform: translate(0, -50%);
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.7",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": {
@@ -35,6 +35,6 @@
   ],
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "4.0.0-beta.2"
+    "tailwindcss": "4.0.0-beta.8"
   }
 }

package/lib/css/accordion.css

@@ -1,175 +0,0 @@
-/* @utility nui-accordion */
-
-@utility nui-accordion {
-  @apply w-full block overflow-hidden;
-  @apply bg-white dark:bg-muted-800;
-  @apply hover:bg-muted-50/60 dark:hover:bg-muted-800/60;
-  @apply border border-muted-300 dark:border-muted-700;
-  @apply transition-colors duration-300;
-
-  &:not(:last-child) {
-    @apply border-b-0;
-  }
-  + .nui-accordion {
-    @apply !border-t-0;
-  }
-
-  .nui-accordion-detail[open]:not(:first-child) {
-    @apply border-t border-muted-300 dark:border-muted-700;
-  }
-
-  .nui-accordion-detail .nui-accordion-dot-icon {
-    @apply bg-muted-200 dark:bg-muted-700;
-  }
-
-  &.nui-accordion-chevron, &.nui-accordion-plus {
-    .nui-accordion-header {
-      @apply px-4 py-3;
-    }
-  }
-}
-
-@utility nui-accordion-summary {
-  @apply cursor-pointer list-none outline-none;
-}
-@utility nui-accordion-header {
-  @apply flex items-center justify-between;
-
-  .nui-accordion-header-inner {
-    @apply text-muted-800 dark:text-white;
-  }
-}
-@utility nui-accordion-dot-icon {
-  @apply ms-2 h-3 w-3 rounded-full;
-  @apply transition-colors duration-300;
-}
-@utility nui-accordion-icon-outer {
-  @apply ms-2 flex items-center justify-center;
-  @apply h-8 w-8 rounded-full;
-  @apply border border-transparent dark:border-transparent;
-  @apply bg-white dark:bg-muted-700/60;
-  @apply transition-all duration-300;
-}
-@utility nui-accordion-chevron-icon {
-  @apply text-muted-400 h-4 w-4;
-  @apply transition-transform duration-300;
-}
-@utility nui-accordion-plus-icon {
-  @apply text-muted-400 h-4 w-4;
-  @apply transition-transform duration-300;
-}
-@utility nui-accordion-content {
-  @apply px-4 pb-4;
-  @apply font-sans text-sm text-muted-500 dark:text-muted-400;
-}
-@utility nui-accordion-default {
-  @apply bg-white dark:bg-muted-800;
-  @apply hover:bg-muted-50/60 dark:hover:bg-muted-800/60;
-  @apply border border-muted-300 dark:border-muted-700;
-}
-@utility nui-accordion-default-contrast {
-  @apply bg-white dark:bg-muted-950;
-  @apply hover:bg-muted-50/60 dark:hover:bg-muted-950/60;
-  @apply border border-muted-300 dark:border-muted-800;
-}
-@utility nui-accordion-muted {
-  @apply bg-muted-100 dark:bg-muted-800;
-  @apply hover:bg-muted-100/60 dark:hover:bg-muted-800/60;
-  @apply border border-muted-200 dark:border-muted-700;
-}
-@utility nui-accordion-muted-contrast {
-  @apply bg-muted-100 dark:bg-muted-950;
-  @apply hover:bg-muted-100/60 dark:hover:bg-muted-950/60;
-  @apply border border-muted-200 dark:border-muted-800;
-}
-@utility nui-accordion-dot-default {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-muted-400 dark:bg-muted-700;
-  }
-}
-@utility nui-accordion-dot-primary {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-primary-500 dark:bg-primary-500;
-  }
-}
-@utility nui-accordion-dot-info {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-info-500 dark:bg-info-500;
-  }
-}
-@utility nui-accordion-dot-success {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-success-500 dark:bg-success-500;
-  }
-}
-@utility nui-accordion-dot-warning {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-warning-500 dark:bg-warning-500;
-  }
-}
-@utility nui-accordion-dot-danger {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-danger-500 dark:bg-danger-500;
-  }
-}
-@utility nui-accordion-dot-dark {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-muted-900 dark:bg-muted-100;
-  }
-}
-@utility nui-accordion-dot-black {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-black dark:bg-white;
-  }
-}
-@utility nui-accordion-dot {
-  .nui-accordion-header {
-    @apply p-4;
-  }
-}
-@utility nui-accordion-chevron {
-  .nui-accordion-detail[open] .nui-icon-outer {
-    @apply rotate-180;
-  }
-}
-@utility nui-accordion-plus {
-  .nui-accordion-detail[open] .nui-icon-outer {
-    @apply rotate-45;
-  }
-}
-@utility nui-accordion-straight {
-  &.nui-accordion:first-child {
-    @apply rounded-t-none;
-  }
-
-  &.nui-accordion:last-child {
-    @apply rounded-b-none;
-  }
-}
-@utility nui-accordion-rounded-sm {
-  &.nui-accordion:first-child {
-    @apply rounded-t-md;
-  }
-
-  &.nui-accordion:last-child {
-    @apply rounded-b-md;
-  }
-}
-@utility nui-accordion-rounded-md {
-  &.nui-accordion:first-child {
-    @apply rounded-t-lg;
-  }
-
-  &.nui-accordion:last-child {
-    @apply rounded-b-lg;
-  }
-}
-@utility nui-accordion-rounded-lg {
-  &.nui-accordion:first-child {
-    @apply rounded-t-xl;
-  }
-
-  &.nui-accordion:last-child {
-    @apply rounded-b-xl;
-  }
-}