feat: add components customization + nui-slimscroll + nui-tooltip

README.md

@@ -50,4 +50,58 @@ export default {
   presets: [shurikenUIPreset],
   // your config
 } satisfies Config
+```
+
+## Customization
+
+Shuriken UI is fully customizable. You can override components by using the `theme` option.
+
+```ts
+export default withShurikenUI({
+  theme: {
+    extend: {
+      shurikenUi: {
+        dropdownDivider: {
+          space: '2',
+          border: 'muted-200', // you can use arbitrary value like '[#fff]'
+          borderDark: 'muted-600',
+        },
+        focus: {
+          offset: '2',
+          width: '1',
+          style: 'dashed',
+          color: 'muted-300',
+          colorDark: 'muted-600',
+        },
+        label: {
+          font: 'alt',
+          text: 'muted-400',
+          textDark: 'muted-400/80',
+        },
+        mark: {
+          bg: 'primary-100',
+          bgDark: 'primary-800',
+          text: 'primary-800',
+          textDark: 'primary-200',
+        },
+        slimscroll: {
+          width: '[6px]',
+          bg: 'black/5',
+          bgDark: 'white/5',
+          bgHover: 'black/20',
+          bgHoverDark: 'white/20',
+        },
+        tooltip: {
+          font: 'sans',
+          bg: '[#1e293b]',
+          bgDark: '[#ec4899]',
+          text: '[#fff]',
+          textDark: '[#fff]',
+          minWidth: '3rem',
+          maxWidth: '21rem',
+        },
+      },
+    },
+  },
+})
 ```

src/plugins/base/index.ts

@@ -0,0 +1,7 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(function ({ addBase }) {
+  addBase({
+    '.dark': { colorScheme: 'dark' },
+  })
+})

src/plugins/components/dropdown.ts

@@ -0,0 +1,37 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultDropdownDividerConfig = {
+  space: '2',
+  border: 'muted-200',
+  borderDark: 'muted-600',
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.dropdownDivider'
+      ) satisfies typeof defaultDropdownDividerConfig
+
+      addComponents({
+        [`.${prefix}-dropdown-divider`]: {
+          [`@apply my-${config.space} block h-px w-full border-t border-${config.border} dark:border-${config.borderDark}`]:
+            {},
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          dropdownDivider: defaultDropdownDividerConfig,
+        },
+      },
+    }
+  }
+)

src/plugins/components/focus.ts

@@ -0,0 +1,48 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultFocusConfig = {
+  offset: '2',
+  width: '1',
+  style: 'dashed',
+  color: 'muted-300',
+  colorDark: 'muted-600',
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.focus'
+      ) satisfies typeof defaultFocusConfig
+
+      addComponents({
+        [`.${prefix}-focus`]: {
+          [`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]:
+            {},
+          '@apply outline-transparent': {},
+          '&:focus-within': {
+            [`@apply outline-${config.color} dark:outline-${config.colorDark}`]:
+              {},
+            [`@apply outline-${config.style} ring-0`]: {},
+          },
+          '&:focus-visible': {
+            [`@apply outline-${config.width}`]: {},
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          focus: defaultFocusConfig,
+        },
+      },
+    }
+  }
+)

src/plugins/components/index.ts

@@ -0,0 +1,41 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption } from '../options'
+import dropdown from './dropdown'
+import focus from './focus'
+import label from './label'
+import mark from './mark'
+import mask from './mask'
+import placeload from './placeload'
+import slimscroll from './slimscroll'
+import tooltip from './tooltip'
+
+const components = [
+  dropdown,
+  focus,
+  label,
+  mark,
+  mask,
+  placeload,
+  slimscroll,
+  tooltip,
+]
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    return function (api) {
+      for (const component of components) {
+        component(options).handler(api)
+      }
+    }
+  },
+  function (options) {
+    let config = {}
+
+    for (const component of components) {
+      config = defu(config, component(options).config)
+    }
+
+    return config
+  }
+)