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

package/src/css/theme-toggle.css

@@ -0,0 +1,62 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-theme-toggle */
+
+@utility nui-theme-toggle {
+  @apply nui-focus relative block shrink-0 overflow-hidden rounded-full;
+  @apply h-9 w-9;
+  @apply focus-visible:outline-2 ring-2 ring-transparent ring-offset-muted-200 dark:ring-offset-muted-900;
+  @apply transition-all duration-300;
+
+  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-sun {
+    @apply -translate-y-1/2 opacity-100;
+  }
+
+  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-sun {
+    @apply translate-y-[-150%] opacity-0;
+  }
+
+  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-moon {
+    @apply translate-y-[-150%] opacity-0;
+  }
+
+  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-moon {
+    @apply -translate-y-1/2 opacity-100;
+  }
+
+  &:not(nui-theme-toggle-inverted) {
+    @apply ring-offset-muted-500 dark:ring-offset-muted-900;
+
+    .nui-toggle-inner {
+      @apply border border-white dark:border-muted-800;
+      @apply bg-white dark:bg-muted-800;
+    }
+  }
+}
+@utility nui-theme-toggle-inner {
+  @apply relative block rounded-full;
+  @apply h-9 w-9;
+  @apply bg-white dark:bg-muted-800;
+  @apply border border-muted-300 dark:border-muted-700;
+}
+@utility nui-theme-toggle-input {
+  @apply absolute start-0 top-0 z-[2] h-full w-full cursor-pointer opacity-0;
+}
+@utility nui-sun {
+  @apply pointer-events-none absolute start-1/2 top-1/2 block -translate-y-1/2 translate-x-[-50%] rtl:translate-x-[50%];
+  @apply h-5 w-5;
+  @apply text-yellow-400 dark:text-yellow-400;
+  @apply transition-all duration-300;
+}
+@utility nui-moon {
+  @apply pointer-events-none absolute start-1/2 top-1/2 block translate-x-[-50%] rtl:translate-x-[45%];
+  @apply h-5 w-5;
+  @apply text-yellow-400 dark:text-yellow-400;
+  @apply transition-all duration-300;
+}
+@utility nui-theme-toggle-inverted {
+  @apply ring-offset-muted-500 dark:ring-offset-muted-400;
+
+  .nui-toggle-inner {
+    @apply !bg-primary-700 dark:!bg-primary-700;
+  }
+}

package/src/css/toast.css

@@ -0,0 +1,132 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-toast */
+
+@utility nui-toast {
+  @apply relative flex font-sans overflow-hidden;
+}
+@utility nui-toast-inner {
+  @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 text-muted-800 dark:text-muted-100;
+}
+@utility nui-toast-subtitle {
+  @apply nui-paragraph text-xs;
+  @apply text-muted-400 dark:text-muted-500;
+}
+@utility nui-toast-icon {
+  @apply w-6 h-6;
+}
+@utility nui-toast-icon-block {
+  @apply h-16 w-16 flex items-center justify-center;
+}
+@utility nui-button-close {
+  @apply ms-auto;
+}
+@utility nui-toast-low-contrast {
+  @apply bg-white dark:bg-muted-800;
+  @apply border-2 border-muted-300 dark:border-muted-700;
+}
+@utility nui-toast-high-contrast {
+  @apply bg-white dark:bg-muted-950;
+  @apply border-2 border-muted-300 dark:border-muted-800;
+}
+@utility nui-toast-default {
+  .nui-toast-icon {
+    @apply text-muted-500 dark:text-muted-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-muted-100 dark:bg-muted-700;
+  }
+}
+@utility nui-toast-primary {
+  @apply border-2 border-primary-500 dark:border-primary-500;
+
+  .nui-toast-icon {
+    @apply text-primary-500 dark:text-primary-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-primary-500/10 dark:bg-primary-500/10;
+  }
+}
+@utility nui-toast-info {
+  @apply border-2 border-info-500 dark:border-info-500;
+
+  .nui-toast-icon {
+    @apply text-info-500 dark:text-info-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-info-500/10 dark:bg-info-500/10;
+  }
+}
+@utility nui-toast-success {
+  @apply border-2 border-success-500 dark:border-success-500;
+
+  .nui-toast-icon {
+    @apply text-success-500 dark:text-success-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-success-500/10 dark:bg-success-500/10;
+  }
+}
+@utility nui-toast-warning {
+  @apply border-2 border-warning-500 dark:border-warning-500;
+
+  .nui-toast-icon {
+    @apply text-warning-500 dark:text-warning-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-warning-500/10 dark:bg-warning-500/10;
+  }
+}
+@utility nui-toast-danger {
+  @apply border-2 border-danger-500 dark:border-danger-500;
+
+  .nui-toast-icon {
+    @apply text-danger-500 dark:text-danger-500;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-danger-500/10 dark:bg-danger-500/10;
+  }
+}
+@utility nui-toast-dark {
+  @apply border-2 border-muted-900 dark:border-muted-100;
+
+  .nui-toast-icon {
+    @apply text-muted-900 dark:text-muted-100;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-muted-900/10 dark:bg-muted-100/10;
+  }
+}
+@utility nui-toast-black {
+  @apply border-2 border-black dark:border-white;
+
+  .nui-toast-icon {
+    @apply text-black dark:text-white;
+  }
+
+  .nui-toast-icon-block {
+    @apply bg-black/10 dark:bg-white/10;
+  }
+}
+@utility nui-toast-rounded-sm {
+  @apply rounded-md;
+}
+@utility nui-toast-rounded-md {
+  @apply rounded-lg;
+}
+@utility nui-toast-rounded-lg {
+  @apply rounded-xl;
+}
+@utility nui-toast-borderless {
+  @apply !border-0 shadow-muted-300/30 dark:shadow-muted-800/30 shadow-xl;
+}

package/src/css/tooltip.css

@@ -0,0 +1,99 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-tooltip */
+
+[data-nui-tooltip] {
+  position: relative;
+}
+[data-nui-tooltip]::before, [data-nui-tooltip]::after {
+  text-transform: none;
+  font-size: 0.9em;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  display: none;
+  opacity: 0;
+}
+[data-nui-tooltip]::before {
+  content: '';
+  border: 5px solid transparent;
+  z-index: 1001;
+}
+[data-nui-tooltip]::after {
+  content: attr(data-nui-tooltip);
+  text-align: center;
+  min-width: 3rem;
+  max-width: 21rem;
+  white-space: pre;
+  overflow: hidden;
+  padding: 1ch 1.5ch;
+  border-radius: 0.5ch;
+  z-index: 1000;
+  @apply font-sans text-xs shadow-lg;
+  @apply text-[#fff] dark:text-[#fff];
+  @apply !bg-[#1e293b] dark:!bg-[#4c1d95];
+}
+[data-nui-tooltip]:hover::before, [data-nui-tooltip]:hover::after, [data-nui-tooltip]:focus-visible::before, [data-nui-tooltip]:focus-visible::after {
+  display: block;
+}
+[data-nui-tooltip='']::before, [data-nui-tooltip='']::after {
+  display: none !important;
+}
+[data-nui-tooltip]:not([data-nui-tooltip-position])::before, [data-nui-tooltip][data-nui-tooltip-position^='up']::before {
+  bottom: calc(100% + 8px);
+  border-bottom-width: 0;
+  border-top-color: currentColor;
+  @apply !text-[#1e293b] dark:!text-[#4c1d95];
+}
+[data-nui-tooltip]:not([data-nui-tooltip-position])::after, [data-nui-tooltip][data-nui-tooltip-position^='up']::after {
+  bottom: calc(100% + 13px);
+}
+[data-nui-tooltip]:not([data-nui-tooltip-position])::before, [data-nui-tooltip][data-nui-tooltip-position^='up']::before, [data-nui-tooltip]:not([data-nui-tooltip-position])::after, [data-nui-tooltip][data-nui-tooltip-position^='up']::after {
+  left: 50%;
+  transform: translate(-50%, -0.5em);
+}
+[data-nui-tooltip][data-nui-tooltip-position^='down']::before {
+  top: 100%;
+  border-top-width: 0;
+  border-bottom-color: currentColor;
+  @apply !text-[#1e293b] dark:!text-[#4c1d95];
+}
+[data-nui-tooltip][data-nui-tooltip-position^='down']::after {
+  top: calc(100% + 5px);
+}
+[data-nui-tooltip][data-nui-tooltip-position^='down']::before, [data-nui-tooltip][data-nui-tooltip-position^='down']::after {
+  left: 50%;
+  transform: translate(-50%, 0.5em);
+}
+[data-nui-tooltip][data-nui-tooltip-position^='start']::before, [data-nui-tooltip][data-nui-tooltip-position^='left']::before {
+  top: 50%;
+  border-right-width: 0;
+  border-left-color: currentColor;
+  inset-inline-start: calc(0em - 5px);
+  transform: translate(-0.5em, -50%);
+  @apply !text-[#1e293b] dark:!text-[#4c1d95];
+}
+[data-nui-tooltip][data-nui-tooltip-position^='start']::after, [data-nui-tooltip][data-nui-tooltip-position^='left']::after {
+  top: 50%;
+  inset-inline-end: calc(100% + 5px);
+  transform: translate(-0.5em, -50%);
+}
+[data-nui-tooltip][data-nui-tooltip-position^='end']::before, [data-nui-tooltip][data-nui-tooltip-position^='right']::before {
+  top: 50%;
+  border-leftt-width: 0;
+  border-right-color: currentColor;
+  inset-inline-end: calc(0em - 5px);
+  transform: translate(0.5em, -50%);
+  @apply !text-[#1e293b] dark:!text-[#4c1d95];
+}
+[data-nui-tooltip][data-nui-tooltip-position^='end']::after, [data-nui-tooltip][data-nui-tooltip-position^='right']::after {
+  top: 50%;
+  inset-inline-start: calc(100% + 5px);
+  transform: translate(0.5em, -50%);
+}
+[data-nui-tooltip]:not([data-nui-tooltip-position]):hover::before,[data-nui-tooltip]:not([data-nui-tooltip-position]):hover::after,[data-nui-tooltip][data-nui-tooltip-position^='up']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='up']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='down']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='down']:hover::after,[data-nui-tooltip]:not([data-nui-tooltip-position]):focus-visible::before,[data-nui-tooltip]:not([data-nui-tooltip-position]):focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='up']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='up']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='down']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='down']:focus-visible::after {
+  @apply animate-nui-tooltip-x;
+}
+[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;
+}

package/src/index.css

@@ -0,0 +1,57 @@
+
+@plugin '@tailwindcss/typography';
+
+@import './css/accordion.css';
+@import './css/autocomplete.css';
+@import './css/avatar.css';
+@import './css/avatar-group.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/card.css';
+@import './css/checkbox.css';
+@import './css/dropdown.css';
+@import './css/dropdown-divider.css';
+@import './css/dropdown-item.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-help-text.css';
+@import './css/input-number.css';
+@import './css/kbd.css';
+@import './css/label.css';
+@import './css/link.css';
+@import './css/listbox.css';
+@import './css/mark.css';
+@import './css/mask.css';
+@import './css/message.css';
+@import './css/message-text.css';
+@import './css/modal.css';
+@import './css/pagination.css';
+@import './css/paragraph.css';
+@import './css/placeholder-page.css';
+@import './css/progress.css';
+@import './css/progress-circle.css';
+/* @import './css/prose.css'; */
+@import './css/radio.css';
+@import './css/select.css';
+@import './css/slimscroll.css';
+@import './css/snack.css';
+@import './css/switch-ball.css';
+@import './css/switch-thin.css';
+@import './css/tab-slider.css';
+@import './css/tabs.css';
+@import './css/tag.css';
+@import './css/text.css';
+@import './css/textarea.css';
+@import './css/theme-switch.css';
+@import './css/theme-toggle.css';
+@import './css/toast.css';
+/* @import './css/tooltip.css'; */

package/dist/colors.cjs

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/colors.d.cts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/colors.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/colors.d.ts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/colors.mjs

@@ -1 +0,0 @@
-

package/dist/config.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-const preset = require('./preset.cjs');
-require('@tailwindcss/typography');
-require('@tailwindcss/container-queries');
-require('./plugins/index.cjs');
-require('tailwindcss/plugin');
-require('defu');
-require('./themes.cjs');
-require('tailwindcss/colors');
-require('tailwindcss/defaultTheme');
-
-const config = {
-  content: [],
-  presets: [preset.preset]
-};
-
-module.exports = config;

package/dist/config.d.cts

@@ -1,6 +0,0 @@
-declare const _default: {
-    content: never[];
-    presets: any[];
-};
-
-export { _default as default };

package/dist/config.d.mts

@@ -1,6 +0,0 @@
-declare const _default: {
-    content: never[];
-    presets: any[];
-};
-
-export { _default as default };

package/dist/config.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    content: never[];
-    presets: any[];
-};
-
-export { _default as default };

package/dist/config.mjs

@@ -1,16 +0,0 @@
-import { preset } from './preset.mjs';
-import '@tailwindcss/typography';
-import '@tailwindcss/container-queries';
-import './plugins/index.mjs';
-import 'tailwindcss/plugin';
-import 'defu';
-import './themes.mjs';
-import 'tailwindcss/colors';
-import 'tailwindcss/defaultTheme';
-
-const config = {
-  content: [],
-  presets: [preset]
-};
-
-export { config as default };

package/dist/index.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-const preset = require('./preset.cjs');
-require('@tailwindcss/typography');
-require('@tailwindcss/container-queries');
-require('./plugins/index.cjs');
-require('tailwindcss/plugin');
-require('defu');
-require('./themes.cjs');
-require('tailwindcss/colors');
-require('tailwindcss/defaultTheme');
-
-function withShurikenUI(config) {
-  if (preset.hasPreset(config)) {
-    return config;
-  }
-  config.presets ?? (config.presets = []);
-  config.presets.push(preset.preset);
-  return config;
-}
-
-exports.createPreset = preset.createPreset;
-exports.hasPreset = preset.hasPreset;
-exports.preset = preset.preset;
-exports.withShurikenUI = withShurikenUI;

package/dist/index.d.cts

@@ -1,11 +0,0 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.6e316a50.cjs';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.6e316a50.cjs';
-import 'tailwindcss/types/config';
-import 'tailwindcss';
-
-/**
- * Inject the shuriken-ui preset into a tailwind config if not already present
- */
-declare function withShurikenUI(config: ShurikenUIConfig): ShurikenUIConfig;
-
-export { withShurikenUI };

package/dist/index.d.mts

@@ -1,11 +0,0 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.6e316a50.mjs';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.6e316a50.mjs';
-import 'tailwindcss/types/config';
-import 'tailwindcss';
-
-/**
- * Inject the shuriken-ui preset into a tailwind config if not already present
- */
-declare function withShurikenUI(config: ShurikenUIConfig): ShurikenUIConfig;
-
-export { withShurikenUI };

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.6e316a50.js';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.6e316a50.js';
-import 'tailwindcss/types/config';
-import 'tailwindcss';
-
-/**
- * Inject the shuriken-ui preset into a tailwind config if not already present
- */
-declare function withShurikenUI(config: ShurikenUIConfig): ShurikenUIConfig;
-
-export { withShurikenUI };

package/dist/index.mjs

@@ -1,21 +0,0 @@
-import { hasPreset, preset } from './preset.mjs';
-export { createPreset } from './preset.mjs';
-import '@tailwindcss/typography';
-import '@tailwindcss/container-queries';
-import './plugins/index.mjs';
-import 'tailwindcss/plugin';
-import 'defu';
-import './themes.mjs';
-import 'tailwindcss/colors';
-import 'tailwindcss/defaultTheme';
-
-function withShurikenUI(config) {
-  if (hasPreset(config)) {
-    return config;
-  }
-  config.presets ?? (config.presets = []);
-  config.presets.push(preset);
-  return config;
-}
-
-export { hasPreset, preset, withShurikenUI };