@shuriken-ui/tailwind 4.0.0-alpha.2 → 4.0.0-alpha.20

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/dark.css

@@ -0,0 +1,64 @@
+@layer base {
+  .dark {
+    --color-field-label: var(--color-muted-300);
+    --color-field-description: var(--color-muted-400);
+    --color-field-loading: var(--color-muted-300);
+
+    --color-input-default-border: var(--color-muted-800);
+    --color-input-default-bg: var(--color-muted-900);
+    --color-input-default-text: var(--color-muted-200);
+    --color-input-default-placeholder: var(--color-muted-700);
+    --color-input-default-button-bg: var(--color-muted-800);
+    --color-input-default-button-bg-active: var(--color-muted-700);
+    --color-input-default-button-text: var(--color-muted-400);
+
+    --color-input-muted-border: var(--color-muted-800);
+    --color-input-muted-bg: var(--color-muted-900);
+    --color-input-muted-text: var(--color-muted-200);
+    --color-input-muted-placeholder: var(--color-muted-300);
+    --color-input-muted-button-bg: var(--color-muted-800);
+    --color-input-muted-button-bg-active: var(--color-muted-700);
+    --color-input-muted-button-text: var(--color-muted-400);
+
+    --color-portal-default-bg: var(--color-muted-950);
+    --color-portal-default-border: var(--color-muted-800);
+    --color-portal-default-item-bg-active: var(--color-muted-800);
+    --color-portal-default-item-text-active: var(--color-primary-light);
+
+    --color-portal-muted-bg: var(--color-muted-950);
+    --color-portal-muted-border: var(--color-muted-800);
+    --color-portal-muted-item-bg-active: var(--color-muted-800);
+    --color-portal-muted-item-text-active: var(--color-primary-light);
+
+    --color-track-default-bg: var(--color-muted-900);
+    --color-track-default-bg-active: var(--color-muted-400);
+    --color-track-default-handle-bg: var(--color-muted-700);
+    --color-track-default-handle-border: var(--color-muted-600);
+
+    --color-track-dark-bg: var(--color-muted-900);
+    --color-track-dark-bg-active: var(--color-muted-50);
+    --color-track-dark-bg-invert: var(--color-muted-900);
+    --color-track-dark-handle-bg: var(--color-muted-700);
+    --color-track-dark-handle-border: var(--color-muted-600);
+
+    --color-card-default-bg: var(--color-muted-950);
+    --color-card-default-border: var(--color-muted-800);
+
+    --color-card-muted-bg: var(--color-muted-950);
+    --color-card-muted-border: var(--color-muted-800);
+
+    --color-tag-default-bg: var(--color-muted-950);
+    --color-tag-default-border: var(--color-muted-200);
+    --color-tag-default-text: var(--color-muted-200);
+
+    --color-tag-muted-bg: var(--color-muted-950);
+    --color-tag-muted-border: var(--color-muted-200);
+    --color-tag-muted-text: var(--color-muted-200);
+
+    --color-tag-dark-bg: var(--color-muted-100);
+    --color-tag-dark-border: var(--color-muted-100);
+    --color-tag-dark-text: var(--color-muted-100);
+
+    color-scheme: dark;
+  } 
+}

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,16 @@
+@plugin '@tailwindcss/typography';
+
+@import './theme.css';
+@import './css/dark.css';
+
+@import './css/focus.css';
+@import './css/mark.css';
+@import './css/mask.css';
+@import './css/slimscroll.css';
+
+@layer base {
+  .nui-no-transition * {
+    transition-property: none !important;
+    transition-duration: 0 !important;
+  }
+}

package/lib/theme.css

@@ -0,0 +1,189 @@
+@theme {
+  /** Fonts */
+  --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);
+
+  --color-field-label: var(--color-muted-600);
+  --color-field-description: var(--color-muted-500);
+  --color-field-loading: var(--color-muted-400);
+
+  --color-input-default-border: var(--color-muted-300);
+  --color-input-default-bg: var(--color-white);
+  --color-input-default-text: var(--color-muted-600);
+  --color-input-default-placeholder: var(--color-muted-300);
+  --color-input-default-button-bg: var(--color-muted-100);
+  --color-input-default-button-bg-active: var(--color-muted-200);
+  --color-input-default-button-text: var(--color-muted-700);
+
+  --color-input-muted-border: var(--color-muted-300);
+  --color-input-muted-bg: var(--color-muted-50);
+  --color-input-muted-text: var(--color-muted-600);
+  --color-input-muted-placeholder: var(--color-muted-300);
+  --color-input-muted-button-bg: var(--color-muted-200);
+  --color-input-muted-button-bg-active: var(--color-muted-300);
+  --color-input-muted-button-text: var(--color-muted-700);
+
+  --color-portal-default-bg: var(--color-white);
+  --color-portal-default-border: var(--color-muted-300);
+  --color-portal-default-item-bg-active: var(--color-muted-100);
+  --color-portal-default-item-text: var(--color-input-default-text);
+  --color-portal-default-item-text-active: var(--color-primary-base);
+
+  --color-portal-muted-bg: var(--color-muted-50);
+  --color-portal-muted-border: var(--color-muted-300);
+  --color-portal-muted-item-bg-active: var(--color-muted-200);
+  --color-portal-muted-item-text: var(--color-input-muted-text);
+  --color-portal-muted-item-text-active: var(--color-primary-base);
+
+  --color-track-default-bg: var(--color-muted-200);
+  --color-track-default-bg-active: var(--color-muted-500);
+  --color-track-default-bg-invert: var(--color-white);
+  --color-track-default-handle-bg: var(--color-white);
+  --color-track-default-handle-border: var(--color-muted-300);
+  --color-track-default-handle-ring: var(--color-track-default-bg-active);
+
+  --color-track-dark-bg: var(--color-muted-200);
+  --color-track-dark-bg-active: var(--color-muted-900);
+  --color-track-dark-bg-invert: var(--color-white);
+  --color-track-dark-handle-bg: var(--color-white);
+  --color-track-dark-handle-border: var(--color-muted-300);
+  --color-track-dark-handle-ring: var(--color-track-dark-bg-active);
+
+  --color-card-default-bg: var(--color-white);
+  --color-card-default-border: var(--color-muted-300);
+
+  --color-card-muted-bg: var(--color-muted-50);
+  --color-card-muted-border: var(--color-muted-300);
+
+  --color-tag-default-bg: var(--color-white);
+  --color-tag-default-border: var(--color-muted-400);
+  --color-tag-default-text: var(--color-muted-400);
+
+  --color-tag-muted-bg: var(--color-muted-400);
+  --color-tag-muted-border: var(--color-muted-400);
+  --color-tag-muted-text: var(--color-muted-400);
+
+  --color-tag-dark-bg: var(--color-muted-900);
+  --color-tag-dark-border: var(--color-muted-900);
+  --color-tag-dark-text: var(--color-muted-900);
+  
+  /** Animations */
+  --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,9 +1,13 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "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": [
@@ -19,62 +23,18 @@
     "module"
   ],
   "type": "module",
-  "main": "./src/index.css",
   "exports": {
-    ".": "./src/index.css",
-    "./theme.css": "./src/theme.css",
-    "./*.css": "./src/css/*.css"
+    ".": "./lib/index.css",
+    "./theme.css": "./lib/theme.css",
+    "./*.css": "./lib/css/*.css"
   },
   "files": [
-    "src/index.css",
-    "src/theme.css",
-    "src/css"
+    "lib/index.css",
+    "lib/theme.css",
+    "lib/css"
   ],
   "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"
-  },
-  "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"
+    "tailwindcss": "4.0.0-beta.9"
   }
 }

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.