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

package/lib/css/text.css

@@ -0,0 +1,77 @@
+/* @utility nui-text */
+
+@utility nui-text {
+  @apply font-sans;
+}
+@utility nui-text-content-xs {
+  @apply text-xs;
+}
+@utility nui-text-content-sm {
+  @apply text-sm;
+}
+@utility nui-text-content-md {
+  @apply text-base;
+}
+@utility nui-text-content-lg {
+  @apply text-lg;
+}
+@utility nui-text-content-xl {
+  @apply text-xl;
+}
+@utility nui-text-content-2xl {
+  @apply text-2xl;
+}
+@utility nui-text-content-3xl {
+  @apply text-3xl;
+}
+@utility nui-text-content-4xl {
+  @apply text-4xl;
+}
+@utility nui-text-content-5xl {
+  @apply text-5xl;
+}
+@utility nui-text-content-6xl {
+  @apply text-6xl;
+}
+@utility nui-text-content-7xl {
+  @apply text-7xl;
+}
+@utility nui-text-content-8xl {
+  @apply text-8xl;
+}
+@utility nui-text-content-9xl {
+  @apply text-9xl;
+}
+@utility nui-text-weight-light {
+  @apply font-light;
+}
+@utility nui-text-weight-normal {
+  @apply font-normal;
+}
+@utility nui-text-weight-medium {
+  @apply font-medium;
+}
+@utility nui-text-weight-semibold {
+  @apply font-semibold;
+}
+@utility nui-text-weight-bold {
+  @apply font-bold;
+}
+@utility nui-text-weight-extrabold {
+  @apply font-extrabold;
+}
+@utility nui-text-lead-none {
+  @apply leading-none;
+}
+@utility nui-text-lead-normal {
+  @apply leading-normal;
+}
+@utility nui-text-lead-tight {
+  @apply leading-tight;
+}
+@utility nui-text-lead-snug {
+  @apply leading-snug;
+}
+@utility nui-text-lead-loose {
+  @apply leading-loose;
+}

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-textarea */
 
 @utility nui-textarea-wrapper {

package/{src → lib}/css/theme-switch.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-theme-switch */
 
 @utility nui-theme-switch {

package/{src → lib}/css/theme-toggle.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-theme-toggle */
 
 @utility nui-theme-toggle {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-toast */
 
 @utility nui-toast {
@@ -8,7 +7,7 @@
   @apply flex items-center grow gap-2 px-4 py-3;
 }
 @utility nui-toast-title {
-  @apply nui-heading nui-heading-sm nui-weight-medium;
+  @apply nui-heading nui-heading-sm nui-heading-weight-medium;
   @apply text-muted-800 dark:text-muted-100;
 }
 @utility nui-toast-subtitle {
@@ -21,7 +20,7 @@
 @utility nui-toast-icon-block {
   @apply h-16 w-16 flex items-center justify-center;
 }
-@utility nui-button-close {
+@utility nui-toast-button-close {
   @apply ms-auto;
 }
 @utility nui-toast-low-contrast {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-tooltip */
 
 [data-nui-tooltip] {
@@ -97,23 +96,3 @@
 [data-nui-tooltip][data-nui-tooltip-position^='left']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='left']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='right']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='right']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='start']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='start']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='end']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='end']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='left']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='left']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='right']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='right']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='start']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='start']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='end']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='end']:focus-visible::after {
   @apply animate-nui-tooltip-y;
 }
-
-@utility animate-nui-tooltip-x {
-  animation: nui-tooltip-x 300ms ease-out forwards;
-}
-@utility animate-nui-tooltip-y {
-  animation: nui-tooltip-y 300ms ease-out forwards;
-}
-
-@keyframes nui-tooltip-x {
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-}
-@keyframes nui-tooltip-y {
-  to {
-    opacity: 1;
-    transform: translate(0, -50%);
-  }
-}

package/{src → lib}/index.css

@@ -4,43 +4,45 @@
 
 @import './css/accordion.css';
 @import './css/autocomplete.css';
-@import './css/avatar.css';
 @import './css/avatar-group.css';
+@import './css/avatar.css';
 @import './css/breadcrumb.css';
-@import './css/button.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.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.css';
-@import './css/input-file.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.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/progress.css';
+@import './css/placeload.css';
 @import './css/progress-circle.css';
-/* @import './css/prose.css'; */
+@import './css/progress.css';
+@import './css/prose.css';
 @import './css/radio.css';
 @import './css/select.css';
 @import './css/slimscroll.css';
@@ -55,4 +57,4 @@
 @import './css/theme-switch.css';
 @import './css/theme-toggle.css';
 @import './css/toast.css';
-/* @import './css/tooltip.css'; */
+@import './css/tooltip.css';

package/{src → lib}/theme.css

@@ -77,4 +77,41 @@
   --color-danger-800: var(--color-rose-800);
   --color-danger-900: var(--color-rose-900);
   --color-danger-950: var(--color-rose-950);
+
+  --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;
+  
+  @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%;
+    }
+  }
+  @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,9 +1,13 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.5",
   "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.2"
   }
 }

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/README.md

@@ -1,109 +0,0 @@
-<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 
-
-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
-
-```bash
-pnpm install -D @shuriken-ui/tailwind
-```
-
-## Usage
-
-The simplest way to register Shuriken UI is to use `withShurikenUI` helper function.
-
-```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.
-
-```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
-```
-
-
-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
-
-Shuriken UI is fully customizable. You can override components by using the `theme` option.
-
-```ts
-export default withShurikenUI({
-  theme: {
-    extend: {
-      nui: {
-        // your customizations
-      },
-    },
-  },
-})
-```
-
-> note: Documentation is coming soon!

package/src/css/placeload.css

@@ -1,13 +0,0 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-placeload */
-
-@utility nui-placeload {
-  position: relative;
-  background: linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%);
-  background-size: 1200px 104px;
-}
-.dark .nui-placeload {
-  position: relative;
-  background: linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%);
-  background-size: 1200px 104px;
-}

package/src/css/text.css

@@ -1,78 +0,0 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-text */
-
-@utility nui-text {
-  @apply font-sans;
-}
-@utility nui-content-xs {
-  @apply text-xs;
-}
-@utility nui-content-sm {
-  @apply text-sm;
-}
-@utility nui-content-md {
-  @apply text-base;
-}
-@utility nui-content-lg {
-  @apply text-lg;
-}
-@utility nui-content-xl {
-  @apply text-xl;
-}
-@utility nui-content-2xl {
-  @apply text-2xl;
-}
-@utility nui-content-3xl {
-  @apply text-3xl;
-}
-@utility nui-content-4xl {
-  @apply text-4xl;
-}
-@utility nui-content-5xl {
-  @apply text-5xl;
-}
-@utility nui-content-6xl {
-  @apply text-6xl;
-}
-@utility nui-content-7xl {
-  @apply text-7xl;
-}
-@utility nui-content-8xl {
-  @apply text-8xl;
-}
-@utility nui-content-9xl {
-  @apply text-9xl;
-}
-@utility nui-weight-light {
-  @apply font-light;
-}
-@utility nui-weight-normal {
-  @apply font-normal;
-}
-@utility nui-weight-medium {
-  @apply font-medium;
-}
-@utility nui-weight-semibold {
-  @apply font-semibold;
-}
-@utility nui-weight-bold {
-  @apply font-bold;
-}
-@utility nui-weight-extrabold {
-  @apply font-extrabold;
-}
-@utility nui-lead-none {
-  @apply leading-none;
-}
-@utility nui-lead-normal {
-  @apply leading-normal;
-}
-@utility nui-lead-tight {
-  @apply leading-tight;
-}
-@utility nui-lead-snug {
-  @apply leading-snug;
-}
-@utility nui-lead-loose {
-  @apply leading-loose;
-}