@shuriken-ui/tailwind 0.0.2 → 0.0.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,53 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/3911343/232132279-8d8bf0ad-b1d7-4802-984e-a696763dc6cd.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
+    <img alt="Shuriken UI logo" src="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
+  </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 config
+})
+```
+
+
+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 {
+  presets: [shurikenUIPreset],
+  // your config
+} satisfies Config
+```

package/dist/components-cff79ff9.d.ts

@@ -0,0 +1,5 @@
+interface PluginOption {
+    prefix?: string;
+}
+
+export { PluginOption as P };

package/dist/config.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
 const preset = require('./preset.cjs');
+require('tailwindcss/defaultTheme');
 require('tailwindcss/colors');
 require('@tailwindcss/typography');
 require('@tailwindcss/aspect-ratio');
 require('tailwindcss/plugin');
+require('defu');
 
 const config = {
   content: [],

package/dist/config.d.ts

@@ -1,4 +1,5 @@
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { P as PluginOption } from './components-cff79ff9.js';
 import * as _tailwindcss_typography from '@tailwindcss/typography';
 import { Config } from 'tailwindcss';
 
@@ -10,7 +11,7 @@ declare const _default: {
         plugins: (typeof _tailwindcss_typography | {
             handler: () => void;
         } | {
-            (options: unknown): {
+            (options: PluginOption): {
                 handler: tailwindcss_types_config.PluginCreator;
                 config?: Partial<Config> | undefined;
             };
@@ -18,10 +19,10 @@ declare const _default: {
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -196,7 +197,7 @@ declare const _default: {
                     };
                 };
                 keyframes: {
-                    indeterminate: {
+                    'nui-indeterminate': {
                         '0%': {
                             'margin-left': string;
                         };
@@ -204,7 +205,7 @@ declare const _default: {
                             'margin-left': string;
                         };
                     };
-                    placeload: {
+                    'nui-placeload': {
                         '0%': {
                             'background-position': string;
                         };
@@ -214,8 +215,8 @@ declare const _default: {
                     };
                 };
                 animation: {
-                    indeterminate: string;
-                    placeload: string;
+                    'nui-indeterminate': string;
+                    'nui-placeload': string;
                 };
             };
         };

package/dist/config.mjs

@@ -1,8 +1,10 @@
 import shurikenUIPreset from './preset.mjs';
+import 'tailwindcss/defaultTheme';
 import 'tailwindcss/colors';
 import '@tailwindcss/typography';
 import '@tailwindcss/aspect-ratio';
 import 'tailwindcss/plugin';
+import 'defu';
 
 const config = {
   content: [],

package/dist/index.cjs

@@ -3,6 +3,7 @@
 const defu = require('defu');
 const config = require('./config.cjs');
 require('./preset.cjs');
+require('tailwindcss/defaultTheme');
 require('tailwindcss/colors');
 require('@tailwindcss/typography');
 require('@tailwindcss/aspect-ratio');

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { P as PluginOption } from './components-cff79ff9.js';
 import * as _tailwindcss_typography from '@tailwindcss/typography';
 import { Config } from 'tailwindcss';
 
@@ -10,7 +11,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         plugins: (typeof _tailwindcss_typography | {
             handler: () => void;
         } | {
-            (options: unknown): {
+            (options: PluginOption): {
                 handler: tailwindcss_types_config.PluginCreator;
                 config?: Partial<Config> | undefined;
             };
@@ -18,10 +19,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -196,7 +197,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 keyframes: {
-                    indeterminate: {
+                    'nui-indeterminate': {
                         '0%': {
                             'margin-left': string;
                         };
@@ -204,7 +205,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                             'margin-left': string;
                         };
                     };
-                    placeload: {
+                    'nui-placeload': {
                         '0%': {
                             'background-position': string;
                         };
@@ -214,8 +215,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 animation: {
-                    indeterminate: string;
-                    placeload: string;
+                    'nui-indeterminate': string;
+                    'nui-placeload': string;
                 };
             };
         };
@@ -227,7 +228,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         plugins: (typeof _tailwindcss_typography | {
             handler: () => void;
         } | {
-            (options: unknown): {
+            (options: PluginOption): {
                 handler: tailwindcss_types_config.PluginCreator;
                 config?: Partial<Config> | undefined;
             };
@@ -235,10 +236,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -413,7 +414,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 keyframes: {
-                    indeterminate: {
+                    'nui-indeterminate': {
                         '0%': {
                             'margin-left': string;
                         };
@@ -421,7 +422,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                             'margin-left': string;
                         };
                     };
-                    placeload: {
+                    'nui-placeload': {
                         '0%': {
                             'background-position': string;
                         };
@@ -431,8 +432,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 animation: {
-                    indeterminate: string;
-                    placeload: string;
+                    'nui-indeterminate': string;
+                    'nui-placeload': string;
                 };
             };
         };
@@ -442,7 +443,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         plugins: (typeof _tailwindcss_typography | {
             handler: () => void;
         } | {
-            (options: unknown): {
+            (options: PluginOption): {
                 handler: tailwindcss_types_config.PluginCreator;
                 config?: Partial<Config> | undefined;
             };
@@ -450,10 +451,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -628,7 +629,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 keyframes: {
-                    indeterminate: {
+                    'nui-indeterminate': {
                         '0%': {
                             'margin-left': string;
                         };
@@ -636,7 +637,7 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                             'margin-left': string;
                         };
                     };
-                    placeload: {
+                    'nui-placeload': {
                         '0%': {
                             'background-position': string;
                         };
@@ -646,8 +647,8 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
                     };
                 };
                 animation: {
-                    indeterminate: string;
-                    placeload: string;
+                    'nui-indeterminate': string;
+                    'nui-placeload': string;
                 };
             };
         };

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { defu } from 'defu';
 import config from './config.mjs';
 import './preset.mjs';
+import 'tailwindcss/defaultTheme';
 import 'tailwindcss/colors';
 import '@tailwindcss/typography';
 import '@tailwindcss/aspect-ratio';

package/dist/preset.cjs

@@ -1,34 +1,41 @@
 'use strict';
 
+const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
 const typography = require('@tailwindcss/typography');
 const aspectRatio = require('@tailwindcss/aspect-ratio');
 const plugin = require('tailwindcss/plugin');
+const defu = require('defu');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
+const defaultTheme__default = /*#__PURE__*/_interopDefaultCompat(defaultTheme);
 const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
 const typography__default = /*#__PURE__*/_interopDefaultCompat(typography);
 const aspectRatio__default = /*#__PURE__*/_interopDefaultCompat(aspectRatio);
 const plugin__default = /*#__PURE__*/_interopDefaultCompat(plugin);
 
+const defaultPluginOptions = {
+  prefix: "nui"
+};
 const shurikenUIComponents = plugin__default.withOptions(
-  function(options = {}) {
+  function(options) {
+    const { prefix } = defu.defu(options, defaultPluginOptions);
     return function({ addComponents }) {
       addComponents({
-        ".placeload": {
+        [`.${prefix}-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%)",
           backgroundSize: "1200px 104px"
         },
-        ".dark .placeload": {
+        [`.dark .${prefix}-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%)",
           backgroundSize: "1200px 104px"
         }
       });
       addComponents({
-        ".nui-focus": {
+        [`.${prefix}-focus`]: {
           "@apply outline-1 outline-dashed outline-offset-2": {},
           "@apply outline-transparent": {},
           "&:focus-within": {
@@ -41,126 +48,122 @@ const shurikenUIComponents = plugin__default.withOptions(
         }
       });
       addComponents({
-        ".nui-mask": {
+        [`.${prefix}-mask`]: {
           "mask-size": "contain",
           "mask-repeat": "no-repeat",
           "mask-position": "center"
         },
-        ".nui-mask-hex": {
+        [`.${prefix}-mask-hex`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
         },
-        ".nui-mask-hexed": {
+        [`.${prefix}-mask-hexed`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
         },
-        ".nui-mask-deca": {
+        [`.${prefix}-mask-deca`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
         },
-        ".nui-mask-blob": {
+        [`.${prefix}-mask-blob`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
         },
-        ".nui-mask-diamond": {
+        [`.${prefix}-mask-diamond`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
         }
       });
       addComponents({
-        ".nui-text-white": {
+        [`.${prefix}-text-white`]: {
           "@apply text-white dark:text-black": {}
         },
-        ".nui-text-50": {
+        [`.${prefix}-text-50`]: {
           "@apply text-muted-50 dark:text-muted-900": {}
         },
-        ".nui-text-100": {
+        [`.${prefix}-text-100`]: {
           "@apply text-muted-100 dark:text-muted-900": {}
         },
-        ".nui-text-200": {
+        [`.${prefix}-text-200`]: {
           "@apply text-muted-200 dark:text-muted-800": {}
         },
-        ".nui-text-300": {
+        [`.${prefix}-text-300`]: {
           "@apply text-muted-300 dark:text-muted-700": {}
         },
-        ".nui-text-400": {
+        [`.${prefix}-text-400`]: {
           "@apply text-muted-400 dark:text-muted-600": {}
         },
-        ".nui-text-500": {
+        [`.${prefix}-text-500`]: {
           "@apply text-muted-500 dark:text-muted-500": {}
         },
-        ".nui-text-600": {
+        [`.${prefix}-text-600`]: {
           "@apply text-muted-600 dark:text-muted-400": {}
         },
-        ".nui-text-700": {
+        [`.${prefix}-text-700`]: {
           "@apply text-muted-700 dark:text-muted-300": {}
         },
-        ".nui-text-800": {
+        [`.${prefix}-text-800`]: {
           "@apply text-muted-800 dark:text-muted-200": {}
         },
-        ".nui-text-900": {
+        [`.${prefix}-text-900`]: {
           "@apply text-muted-900 dark:text-muted-100": {}
         },
-        ".nui-text-black": {
+        [`.${prefix}-text-black`]: {
           "@apply text-black dark:text-white": {}
         }
       });
       addComponents({
-        ".nui-bg-white": {
+        [`.${prefix}-bg-white`]: {
           "@apply bg-white dark:bg-muted-900": {}
         },
-        ".nui-bg-50": {
+        [`.${prefix}-bg-50`]: {
           "@apply bg-muted-50 dark:bg-muted-900": {}
         },
-        ".nui-bg-100": {
+        [`.${prefix}-bg-100`]: {
           "@apply bg-muted-100 dark:bg-muted-900": {}
         },
-        ".nui-bg-200": {
+        [`.${prefix}-bg-200`]: {
           "@apply bg-muted-200 dark:bg-muted-800": {}
         },
-        ".nui-bg-300": {
+        [`.${prefix}-bg-300`]: {
           "@apply bg-muted-300 dark:bg-muted-700": {}
         },
-        ".nui-bg-400": {
+        [`.${prefix}-bg-400`]: {
           "@apply bg-muted-400 dark:bg-muted-600": {}
         },
-        ".nui-bg-500": {
+        [`.${prefix}-bg-500`]: {
           "@apply bg-muted-500 dark:bg-muted-500": {}
         },
-        ".nui-bg-600": {
+        [`.${prefix}-bg-600`]: {
           "@apply bg-muted-600 dark:bg-muted-400": {}
         },
-        ".nui-bg-700": {
+        [`.${prefix}-bg-700`]: {
           "@apply bg-muted-700 dark:bg-muted-300": {}
         },
-        ".nui-bg-800": {
+        [`.${prefix}-bg-800`]: {
           "@apply bg-muted-800 dark:bg-muted-200": {}
         },
-        ".nui-bg-900": {
+        [`.${prefix}-bg-900`]: {
           "@apply bg-muted-900 dark:bg-muted-100": {}
         },
-        ".nui-bg-black": {
+        [`.${prefix}-bg-black`]: {
           "@apply bg-muted-900 dark:bg-white": {}
         }
       });
       addComponents({
-        ".nui-label": {
+        [`.${prefix}-label`]: {
           "@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80": {}
         }
       });
       addComponents({
-        ".nui-dropdown-divider": {
+        [`.${prefix}-dropdown-divider`]: {
           "@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600": {}
         }
       });
       addComponents({
-        ".nui-mark": {
+        [`.${prefix}-mark`]: {
           "@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200": {}
         }
       });
     };
   },
   function(options) {
-    return {
-      theme: {
-        nui: {}
-      }
-    };
+    return {};
   }
 );
 
@@ -170,10 +173,10 @@ const shurikenUIPreset = {
   plugins: [typography__default, aspectRatio__default, shurikenUIComponents],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex", "sans-serif"],
-      heading: ["Inter", "sans-serif"],
-      alt: ["Karla", "sans-serif"],
-      mono: ["ui-monospace", "monospace"]
+      sans: defaultTheme__default.fontFamily.sans,
+      heading: defaultTheme__default.fontFamily.sans,
+      alt: defaultTheme__default.fontFamily.sans,
+      mono: defaultTheme__default.fontFamily.mono
     },
     extend: {
       colors: {
@@ -274,18 +277,18 @@ const shurikenUIPreset = {
         }
       }),
       keyframes: {
-        indeterminate: {
+        "nui-indeterminate": {
           "0%": { "margin-left": "-10%" },
           "100%": { "margin-left": "100%" }
         },
-        placeload: {
+        "nui-placeload": {
           "0%": { "background-position": "-468px 0" },
           "100%": { "background-position": "468px 0" }
         }
       },
       animation: {
-        indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
-        placeload: "placeload 1s linear infinite forwards"
+        "nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
+        "nui-placeload": "nui-placeload 1s linear infinite forwards"
       }
     }
   }

package/dist/preset.d.ts

@@ -1,4 +1,5 @@
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { P as PluginOption } from './components-cff79ff9.js';
 import { Config } from 'tailwindcss';
 import _tailwindcss_typography__default from '@tailwindcss/typography';
 
@@ -8,7 +9,7 @@ declare const _default: {
     plugins: (typeof _tailwindcss_typography__default | {
         handler: () => void;
     } | {
-        (options: unknown): {
+        (options: PluginOption): {
             handler: tailwindcss_types_config.PluginCreator;
             config?: Partial<Config> | undefined;
         };
@@ -16,10 +17,10 @@ declare const _default: {
     })[];
     theme: {
         fontFamily: {
-            sans: [string, string];
-            heading: [string, string];
-            alt: [string, string];
-            mono: [string, string];
+            sans: string[];
+            heading: string[];
+            alt: string[];
+            mono: string[];
         };
         extend: {
             colors: {
@@ -194,7 +195,7 @@ declare const _default: {
                 };
             };
             keyframes: {
-                indeterminate: {
+                'nui-indeterminate': {
                     '0%': {
                         'margin-left': string;
                     };
@@ -202,7 +203,7 @@ declare const _default: {
                         'margin-left': string;
                     };
                 };
-                placeload: {
+                'nui-placeload': {
                     '0%': {
                         'background-position': string;
                     };
@@ -212,8 +213,8 @@ declare const _default: {
                 };
             };
             animation: {
-                indeterminate: string;
-                placeload: string;
+                'nui-indeterminate': string;
+                'nui-placeload': string;
             };
         };
     };

package/dist/preset.mjs

@@ -1,25 +1,31 @@
+import defaultTheme from 'tailwindcss/defaultTheme';
 import colors from 'tailwindcss/colors';
 import typography from '@tailwindcss/typography';
 import aspectRatio from '@tailwindcss/aspect-ratio';
 import plugin from 'tailwindcss/plugin';
+import { defu } from 'defu';
 
+const defaultPluginOptions = {
+  prefix: "nui"
+};
 const shurikenUIComponents = plugin.withOptions(
-  function(options = {}) {
+  function(options) {
+    const { prefix } = defu(options, defaultPluginOptions);
     return function({ addComponents }) {
       addComponents({
-        ".placeload": {
+        [`.${prefix}-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%)",
           backgroundSize: "1200px 104px"
         },
-        ".dark .placeload": {
+        [`.dark .${prefix}-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%)",
           backgroundSize: "1200px 104px"
         }
       });
       addComponents({
-        ".nui-focus": {
+        [`.${prefix}-focus`]: {
           "@apply outline-1 outline-dashed outline-offset-2": {},
           "@apply outline-transparent": {},
           "&:focus-within": {
@@ -32,126 +38,122 @@ const shurikenUIComponents = plugin.withOptions(
         }
       });
       addComponents({
-        ".nui-mask": {
+        [`.${prefix}-mask`]: {
           "mask-size": "contain",
           "mask-repeat": "no-repeat",
           "mask-position": "center"
         },
-        ".nui-mask-hex": {
+        [`.${prefix}-mask-hex`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
         },
-        ".nui-mask-hexed": {
+        [`.${prefix}-mask-hexed`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
         },
-        ".nui-mask-deca": {
+        [`.${prefix}-mask-deca`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
         },
-        ".nui-mask-blob": {
+        [`.${prefix}-mask-blob`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
         },
-        ".nui-mask-diamond": {
+        [`.${prefix}-mask-diamond`]: {
           "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
         }
       });
       addComponents({
-        ".nui-text-white": {
+        [`.${prefix}-text-white`]: {
           "@apply text-white dark:text-black": {}
         },
-        ".nui-text-50": {
+        [`.${prefix}-text-50`]: {
           "@apply text-muted-50 dark:text-muted-900": {}
         },
-        ".nui-text-100": {
+        [`.${prefix}-text-100`]: {
           "@apply text-muted-100 dark:text-muted-900": {}
         },
-        ".nui-text-200": {
+        [`.${prefix}-text-200`]: {
           "@apply text-muted-200 dark:text-muted-800": {}
         },
-        ".nui-text-300": {
+        [`.${prefix}-text-300`]: {
           "@apply text-muted-300 dark:text-muted-700": {}
         },
-        ".nui-text-400": {
+        [`.${prefix}-text-400`]: {
           "@apply text-muted-400 dark:text-muted-600": {}
         },
-        ".nui-text-500": {
+        [`.${prefix}-text-500`]: {
           "@apply text-muted-500 dark:text-muted-500": {}
         },
-        ".nui-text-600": {
+        [`.${prefix}-text-600`]: {
           "@apply text-muted-600 dark:text-muted-400": {}
         },
-        ".nui-text-700": {
+        [`.${prefix}-text-700`]: {
           "@apply text-muted-700 dark:text-muted-300": {}
         },
-        ".nui-text-800": {
+        [`.${prefix}-text-800`]: {
           "@apply text-muted-800 dark:text-muted-200": {}
         },
-        ".nui-text-900": {
+        [`.${prefix}-text-900`]: {
           "@apply text-muted-900 dark:text-muted-100": {}
         },
-        ".nui-text-black": {
+        [`.${prefix}-text-black`]: {
           "@apply text-black dark:text-white": {}
         }
       });
       addComponents({
-        ".nui-bg-white": {
+        [`.${prefix}-bg-white`]: {
           "@apply bg-white dark:bg-muted-900": {}
         },
-        ".nui-bg-50": {
+        [`.${prefix}-bg-50`]: {
           "@apply bg-muted-50 dark:bg-muted-900": {}
         },
-        ".nui-bg-100": {
+        [`.${prefix}-bg-100`]: {
           "@apply bg-muted-100 dark:bg-muted-900": {}
         },
-        ".nui-bg-200": {
+        [`.${prefix}-bg-200`]: {
           "@apply bg-muted-200 dark:bg-muted-800": {}
         },
-        ".nui-bg-300": {
+        [`.${prefix}-bg-300`]: {
           "@apply bg-muted-300 dark:bg-muted-700": {}
         },
-        ".nui-bg-400": {
+        [`.${prefix}-bg-400`]: {
           "@apply bg-muted-400 dark:bg-muted-600": {}
         },
-        ".nui-bg-500": {
+        [`.${prefix}-bg-500`]: {
           "@apply bg-muted-500 dark:bg-muted-500": {}
         },
-        ".nui-bg-600": {
+        [`.${prefix}-bg-600`]: {
           "@apply bg-muted-600 dark:bg-muted-400": {}
         },
-        ".nui-bg-700": {
+        [`.${prefix}-bg-700`]: {
           "@apply bg-muted-700 dark:bg-muted-300": {}
         },
-        ".nui-bg-800": {
+        [`.${prefix}-bg-800`]: {
           "@apply bg-muted-800 dark:bg-muted-200": {}
         },
-        ".nui-bg-900": {
+        [`.${prefix}-bg-900`]: {
           "@apply bg-muted-900 dark:bg-muted-100": {}
         },
-        ".nui-bg-black": {
+        [`.${prefix}-bg-black`]: {
           "@apply bg-muted-900 dark:bg-white": {}
         }
       });
       addComponents({
-        ".nui-label": {
+        [`.${prefix}-label`]: {
           "@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80": {}
         }
       });
       addComponents({
-        ".nui-dropdown-divider": {
+        [`.${prefix}-dropdown-divider`]: {
           "@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600": {}
         }
       });
       addComponents({
-        ".nui-mark": {
+        [`.${prefix}-mark`]: {
           "@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200": {}
         }
       });
     };
   },
   function(options) {
-    return {
-      theme: {
-        nui: {}
-      }
-    };
+    return {};
   }
 );
 
@@ -161,10 +163,10 @@ const shurikenUIPreset = {
   plugins: [typography, aspectRatio, shurikenUIComponents],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex", "sans-serif"],
-      heading: ["Inter", "sans-serif"],
-      alt: ["Karla", "sans-serif"],
-      mono: ["ui-monospace", "monospace"]
+      sans: defaultTheme.fontFamily.sans,
+      heading: defaultTheme.fontFamily.sans,
+      alt: defaultTheme.fontFamily.sans,
+      mono: defaultTheme.fontFamily.mono
     },
     extend: {
       colors: {
@@ -265,18 +267,18 @@ const shurikenUIPreset = {
         }
       }),
       keyframes: {
-        indeterminate: {
+        "nui-indeterminate": {
           "0%": { "margin-left": "-10%" },
           "100%": { "margin-left": "100%" }
         },
-        placeload: {
+        "nui-placeload": {
           "0%": { "background-position": "-468px 0" },
           "100%": { "background-position": "468px 0" }
         }
       },
       animation: {
-        indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
-        placeload: "placeload 1s linear infinite forwards"
+        "nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
+        "nui-placeload": "nui-placeload 1s linear infinite forwards"
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": "shuriken-ui/tailwind",