@shuriken-ui/tailwind 4.0.0-alpha.1 → 4.0.0-alpha.10

package/README.md

@@ -13,7 +13,7 @@
 
 ---
 
-## Shuriken UI - Tailwind CSS 
+## 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.
 
@@ -21,89 +21,35 @@ This package contains the Tailwind CSS preset, components, and shared utils like
 
 ## Installation
 
+Install dependencies:
+
 ```bash
-pnpm install -D @shuriken-ui/tailwind
+pnpm install -D @shuriken-ui/tailwind@next tailwindcss@next @tailwindcss/vite@next
 ```
 
-## Usage
-
-The simplest way to register Shuriken UI is to use `withShurikenUI` helper function.
+Add tailwind plugin to your `vite.config.ts`:
 
 ```ts
-// tailwind.config.ts
-import { withShurikenUI } from '@shuriken-ui/tailwind'
-
-export default withShurikenUI({
-  // your tailwind config
-  content: [],
-})
-```
-
-
-You can also direcly import the preset and use it in your config.
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
 
-```ts
-// tailwind.config.ts
-import type { Config } from 'tailwindcss'
-import preset from '@shuriken-ui/tailwind/preset'
-
-export default {
-  // your tailwind config, with the preset
-  content: [],
-  presets: [preset],
-} satisfies Config
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
 ```
 
+Reference Shuriken UI in your `tailwind.css` file:
 
-Also, you can import only the components and utils you needs.
-
-```ts
-// tailwind.config.ts
-import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import colors from 'tailwindcss/colors'
-
-import { input, button } from '@shuriken-ui/tailwind/plugins'
-
-export default {
-  // your tailwind config, with only the components you need
-  plugins: [input, button],
-  theme: {
-    fontFamily: {
-      sans: fontFamily.sans,
-      heading: fontFamily.sans,
-      alt: fontFamily.sans,
-      mono: fontFamily.mono,
-    },
-    extend: {
-      colors: {
-        primary: colors.violet,
-        'primary-invert': colors.white,
-        muted: colors.slate,
-        info: colors.sky,
-        success: colors.teal,
-        warning: colors.amber,
-        danger: colors.rose,
-      },
-    },
-  },
-} satisfies Config
-```
-
-## Customization
+```css
+@import 'tailwindcss';
+@import '@shuriken-ui/tailwind';
 
-Shuriken UI is fully customizable. You can override components by using the `theme` option.
+/* Register the dark mode variant (with .dark class) */
+@variant dark (&:where(.dark, .dark *));
 
-```ts
-export default withShurikenUI({
-  theme: {
-    extend: {
-      nui: {
-        // your customizations
-      },
-    },
-  },
-})
+@theme {
+  /* Customize your theme here */
+}
 ```
 
-> note: Documentation is coming soon!
+> 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

@@ -0,0 +1,4 @@
+@utility nui-focus {
+  @apply outline-none ring-ring ring-1 ring-offset-2 ring-offset-white;
+  @apply dark:ring-offset-muted-950;
+}

package/{src → lib}/css/mark.css

@@ -1,6 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-mark */
-
 @utility nui-mark {
   @apply bg-primary-100 dark:bg-primary-800;
   @apply text-primary-800 dark:text-primary-200;

package/{src → lib}/css/mask.css

@@ -1,6 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-mask */
-
 @utility nui-mask {
   mask-size: contain;
   mask-repeat: no-repeat;

package/{src → lib}/css/slimscroll.css

@@ -1,11 +1,10 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @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 {
@@ -20,13 +19,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

@@ -0,0 +1,18 @@
+@plugin '@tailwindcss/typography';
+
+@import './theme.css';
+
+@import './css/focus.css';
+@import './css/mark.css';
+@import './css/mask.css';
+@import './css/slimscroll.css';
+
+@layer base {
+  .dark {
+    color-scheme: dark;
+  }
+  .nui-no-transition * {
+    transition-property: none !important;
+    transition-duration: 0 !important;
+  }
+}

package/lib/theme.css

@@ -0,0 +1,126 @@
+@theme {
+  /* --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);
+  --color-muted-100: var(--color-gray-100);
+  --color-muted-200: var(--color-gray-200);
+  --color-muted-300: var(--color-gray-300);
+  --color-muted-400: var(--color-gray-400);
+  --color-muted-500: var(--color-gray-500);
+  --color-muted-600: var(--color-gray-600);
+  --color-muted-700: var(--color-gray-700);
+  --color-muted-800: var(--color-gray-800);
+  --color-muted-900: var(--color-gray-900);
+  --color-muted-950: var(--color-gray-950);
+
+  --color-primary-50: var(--color-purple-50);
+  --color-primary-100: var(--color-purple-100);
+  --color-primary-200: var(--color-purple-200);
+  --color-primary-300: var(--color-purple-300);
+  --color-primary-400: var(--color-purple-400);
+  --color-primary-500: var(--color-purple-500);
+  --color-primary-600: var(--color-purple-600);
+  --color-primary-700: var(--color-purple-700);
+  --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);
+  --color-info-200: var(--color-sky-200);
+  --color-info-300: var(--color-sky-300);
+  --color-info-400: var(--color-sky-400);
+  --color-info-500: var(--color-sky-500);
+  --color-info-600: var(--color-sky-600);
+  --color-info-700: var(--color-sky-700);
+  --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);
+  --color-success-200: var(--color-teal-200);
+  --color-success-300: var(--color-teal-300);
+  --color-success-400: var(--color-teal-400);
+  --color-success-500: var(--color-teal-500);
+  --color-success-600: var(--color-teal-600);
+  --color-success-700: var(--color-teal-700);
+  --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);
+  --color-warning-200: var(--color-amber-200);
+  --color-warning-300: var(--color-amber-300);
+  --color-warning-400: var(--color-amber-400);
+  --color-warning-500: var(--color-amber-500);
+  --color-warning-600: var(--color-amber-600);
+  --color-warning-700: var(--color-amber-700);
+  --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-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-spin: spin 2s linear infinite;
+  
+  @keyframes nui-placeload {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+  @keyframes nui-progress-indeterminate {
+    0% {
+      margin-left: -100%;
+    }
+    60% {
+      margin-left: 100%;
+    }
+    100% {
+      margin-left: -100%;
+    }
+  }
+}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.1",
-  "packageManager": "pnpm@9.12.3",
+  "version": "4.0.0-alpha.10",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
-  "repository": "shuriken-ui/tailwind",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shuriken-ui/shuriken-ui.git",
+    "directory": "packages/tailwind"
+  },
   "bugs": "https://github.com/shuriken-ui/tailwind/issues",
   "homepage": "https://github.com/shuriken-ui/tailwind",
   "keywords": [
@@ -20,60 +23,18 @@
     "module"
   ],
   "type": "module",
-  "main": "./src/index.css",
   "exports": {
-    ".": "./src/index.css",
-    "./*.css": "./src/css/*.css"
+    ".": "./lib/index.css",
+    "./theme.css": "./lib/theme.css",
+    "./*.css": "./lib/css/*.css"
   },
   "files": [
-    "src/index.css",
-    "src/css"
+    "lib/index.css",
+    "lib/theme.css",
+    "lib/css"
   ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "unbuild",
-    "build-storybook": "storybook build",
-    "lint": "run-s lint:eslint:fix lint:prettier:fix",
-    "lint:prettier": "prettier --check \"./**/*.(ts|css|scss|md)\"",
-    "lint:prettier:fix": "prettier --write \"./**/*.(ts|css|scss|md)\"",
-    "lint:eslint": "eslint -c .eslintrc.cjs --ext .ts .",
-    "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix  --ext .ts .",
-    "test": "run-s lint:eslint lint:prettier test:vitest",
-    "test:vitest": "vitest",
-    "coverage": "vitest run --coverage",
-    "release": "run-s test release:*",
-    "release:standard-version": "standard-version",
-    "release:publish": "git push --follow-tags origin main && npm publish"
-  },
   "dependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "^4.0.0 || 4.0.0-alpha.31"
-  },
-  "devDependencies": {
-    "@open-wc/lit-helpers": "0.7.0",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-themes": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/web-components": "^8.4.2",
-    "@storybook/web-components-vite": "^8.4.2",
-    "@types/node": "22.9.0",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@vitest/coverage-v8": "^2.1.4",
-    "@vitest/ui": "^2.1.4",
-    "chromatic": "^11.16.5",
-    "defu": "^6.1.4",
-    "glob": "^11.0.0",
-    "jiti": "^2.4.0",
-    "jsdom": "^25.0.1",
-    "lit": "^3.2.1",
-    "npm-run-all": "^4.1.5",
-    "standard-version": "^9.5.0",
-    "storybook": "^8.4.2",
-    "typescript": "^5.6.3",
-    "unbuild": "^2.0.0",
-    "vitest": "^2.1.4",
-    "vitest-axe": "1.0.0-pre.2"
+    "tailwindcss": "4.0.0-beta.8"
   }
-}
+}

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Css Ninja
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/css/accordion.css

@@ -1,175 +0,0 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-accordion */
-
-@utility nui-accordion {
-  &:not(:last-child) {
-    @apply border-b-0;
-  }
-  @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;
-
-  .nui-accordion-detail[open]:not(:first-child) {
-    @apply border-t border-muted-300 dark:border-muted-700;
-  }
-
-  .nui-accordion-detail .nui-accordion-dot {
-    @apply bg-muted-200 dark:bg-muted-700;
-  }
-
-  &.nui-accordion-chevron, &.nui-accordion-plus {
-    .nui-accordion-header {
-      @apply px-4 py-3;
-    }
-  }
-
-  + .nui-accordion {
-    @apply !border-t-0;
-  }
-}
-@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 {
-  @apply ms-2 h-3 w-3 rounded-full;
-  @apply transition-colors duration-300;
-}
-@utility nui-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-chevron-icon {
-  @apply text-muted-400 h-4 w-4;
-  @apply transition-transform duration-300;
-}
-@utility nui-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-dot-default {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-muted-400 dark:bg-muted-700;
-  }
-}
-@utility nui-dot-primary {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-primary-500 dark:bg-primary-500;
-  }
-}
-@utility nui-dot-info {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-info-500 dark:bg-info-500;
-  }
-}
-@utility nui-dot-success {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-success-500 dark:bg-success-500;
-  }
-}
-@utility nui-dot-warning {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-warning-500 dark:bg-warning-500;
-  }
-}
-@utility nui-dot-danger {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-danger-500 dark:bg-danger-500;
-  }
-}
-@utility nui-dot-dark {
-  .nui-accordion-detail[open] .nui-accordion-dot {
-    @apply bg-muted-900 dark:bg-muted-100;
-  }
-}
-@utility nui-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;
-  }
-}