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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +20 -74
  2. package/lib/css/dark.css +64 -0
  3. package/lib/css/focus.css +4 -0
  4. package/{src → lib}/css/mark.css +0 -3
  5. package/{src → lib}/css/mask.css +0 -3
  6. package/{src → lib}/css/slimscroll.css +8 -8
  7. package/lib/index.css +16 -0
  8. package/lib/theme.css +189 -0
  9. package/package.json +13 -53
  10. package/LICENSE.md +0 -21
  11. package/src/css/accordion.css +0 -175
  12. package/src/css/autocomplete.css +0 -511
  13. package/src/css/avatar-group.css +0 -138
  14. package/src/css/avatar.css +0 -738
  15. package/src/css/breadcrumb.css +0 -63
  16. package/src/css/button-action.css +0 -108
  17. package/src/css/button-close.css +0 -117
  18. package/src/css/button-group.css +0 -236
  19. package/src/css/button-icon.css +0 -97
  20. package/src/css/button.css +0 -565
  21. package/src/css/card.css +0 -69
  22. package/src/css/checkbox.css +0 -99
  23. package/src/css/dropdown-divider.css +0 -6
  24. package/src/css/dropdown-item.css +0 -62
  25. package/src/css/dropdown.css +0 -102
  26. package/src/css/focus.css +0 -12
  27. package/src/css/fullscreen-dropfile.css +0 -63
  28. package/src/css/heading.css +0 -78
  29. package/src/css/icon-box.css +0 -305
  30. package/src/css/input-file-regular.css +0 -255
  31. package/src/css/input-file.css +0 -224
  32. package/src/css/input-help-text.css +0 -7
  33. package/src/css/input-number.css +0 -469
  34. package/src/css/input.css +0 -402
  35. package/src/css/kbd.css +0 -94
  36. package/src/css/label.css +0 -6
  37. package/src/css/link.css +0 -8
  38. package/src/css/list.css +0 -23
  39. package/src/css/listbox.css +0 -511
  40. package/src/css/message-text.css +0 -72
  41. package/src/css/message.css +0 -245
  42. package/src/css/modal.css +0 -51
  43. package/src/css/pagination.css +0 -93
  44. package/src/css/paragraph.css +0 -78
  45. package/src/css/placeholder-page.css +0 -44
  46. package/src/css/placeload.css +0 -13
  47. package/src/css/progress-circle.css +0 -18
  48. package/src/css/progress.css +0 -90
  49. package/src/css/prose.css +0 -22
  50. package/src/css/radio.css +0 -73
  51. package/src/css/select.css +0 -404
  52. package/src/css/snack.css +0 -101
  53. package/src/css/switch-ball.css +0 -94
  54. package/src/css/switch-thin.css +0 -76
  55. package/src/css/tab-slider.css +0 -190
  56. package/src/css/tabs.css +0 -175
  57. package/src/css/tag.css +0 -312
  58. package/src/css/text.css +0 -78
  59. package/src/css/textarea.css +0 -228
  60. package/src/css/theme-switch.css +0 -65
  61. package/src/css/theme-toggle.css +0 -62
  62. package/src/css/toast.css +0 -132
  63. package/src/css/tooltip.css +0 -99
  64. package/src/index.css +0 -58
  65. package/src/theme.css +0 -80
@@ -1,62 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-theme-toggle */
3
-
4
- @utility nui-theme-toggle {
5
- @apply nui-focus relative block shrink-0 overflow-hidden rounded-full;
6
- @apply h-9 w-9;
7
- @apply focus-visible:outline-2 ring-2 ring-transparent ring-offset-muted-200 dark:ring-offset-muted-900;
8
- @apply transition-all duration-300;
9
-
10
- .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-sun {
11
- @apply -translate-y-1/2 opacity-100;
12
- }
13
-
14
- .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-sun {
15
- @apply translate-y-[-150%] opacity-0;
16
- }
17
-
18
- .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-moon {
19
- @apply translate-y-[-150%] opacity-0;
20
- }
21
-
22
- .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-moon {
23
- @apply -translate-y-1/2 opacity-100;
24
- }
25
-
26
- &:not(nui-theme-toggle-inverted) {
27
- @apply ring-offset-muted-500 dark:ring-offset-muted-900;
28
-
29
- .nui-toggle-inner {
30
- @apply border border-white dark:border-muted-800;
31
- @apply bg-white dark:bg-muted-800;
32
- }
33
- }
34
- }
35
- @utility nui-theme-toggle-inner {
36
- @apply relative block rounded-full;
37
- @apply h-9 w-9;
38
- @apply bg-white dark:bg-muted-800;
39
- @apply border border-muted-300 dark:border-muted-700;
40
- }
41
- @utility nui-theme-toggle-input {
42
- @apply absolute start-0 top-0 z-[2] h-full w-full cursor-pointer opacity-0;
43
- }
44
- @utility nui-sun {
45
- @apply pointer-events-none absolute start-1/2 top-1/2 block -translate-y-1/2 translate-x-[-50%] rtl:translate-x-[50%];
46
- @apply h-5 w-5;
47
- @apply text-yellow-400 dark:text-yellow-400;
48
- @apply transition-all duration-300;
49
- }
50
- @utility nui-moon {
51
- @apply pointer-events-none absolute start-1/2 top-1/2 block translate-x-[-50%] rtl:translate-x-[45%];
52
- @apply h-5 w-5;
53
- @apply text-yellow-400 dark:text-yellow-400;
54
- @apply transition-all duration-300;
55
- }
56
- @utility nui-theme-toggle-inverted {
57
- @apply ring-offset-muted-500 dark:ring-offset-muted-400;
58
-
59
- .nui-toggle-inner {
60
- @apply !bg-primary-700 dark:!bg-primary-700;
61
- }
62
- }
package/src/css/toast.css DELETED
@@ -1,132 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-toast */
3
-
4
- @utility nui-toast {
5
- @apply relative flex font-sans overflow-hidden;
6
- }
7
- @utility nui-toast-inner {
8
- @apply flex items-center grow gap-2 px-4 py-3;
9
- }
10
- @utility nui-toast-title {
11
- @apply nui-heading nui-heading-sm nui-weight-medium;
12
- @apply text-muted-800 dark:text-muted-100;
13
- }
14
- @utility nui-toast-subtitle {
15
- @apply nui-paragraph text-xs;
16
- @apply text-muted-400 dark:text-muted-500;
17
- }
18
- @utility nui-toast-icon {
19
- @apply w-6 h-6;
20
- }
21
- @utility nui-toast-icon-block {
22
- @apply h-16 w-16 flex items-center justify-center;
23
- }
24
- @utility nui-button-close {
25
- @apply ms-auto;
26
- }
27
- @utility nui-toast-low-contrast {
28
- @apply bg-white dark:bg-muted-800;
29
- @apply border-2 border-muted-300 dark:border-muted-700;
30
- }
31
- @utility nui-toast-high-contrast {
32
- @apply bg-white dark:bg-muted-950;
33
- @apply border-2 border-muted-300 dark:border-muted-800;
34
- }
35
- @utility nui-toast-default {
36
- .nui-toast-icon {
37
- @apply text-muted-500 dark:text-muted-500;
38
- }
39
-
40
- .nui-toast-icon-block {
41
- @apply bg-muted-100 dark:bg-muted-700;
42
- }
43
- }
44
- @utility nui-toast-primary {
45
- @apply border-2 border-primary-500 dark:border-primary-500;
46
-
47
- .nui-toast-icon {
48
- @apply text-primary-500 dark:text-primary-500;
49
- }
50
-
51
- .nui-toast-icon-block {
52
- @apply bg-primary-500/10 dark:bg-primary-500/10;
53
- }
54
- }
55
- @utility nui-toast-info {
56
- @apply border-2 border-info-500 dark:border-info-500;
57
-
58
- .nui-toast-icon {
59
- @apply text-info-500 dark:text-info-500;
60
- }
61
-
62
- .nui-toast-icon-block {
63
- @apply bg-info-500/10 dark:bg-info-500/10;
64
- }
65
- }
66
- @utility nui-toast-success {
67
- @apply border-2 border-success-500 dark:border-success-500;
68
-
69
- .nui-toast-icon {
70
- @apply text-success-500 dark:text-success-500;
71
- }
72
-
73
- .nui-toast-icon-block {
74
- @apply bg-success-500/10 dark:bg-success-500/10;
75
- }
76
- }
77
- @utility nui-toast-warning {
78
- @apply border-2 border-warning-500 dark:border-warning-500;
79
-
80
- .nui-toast-icon {
81
- @apply text-warning-500 dark:text-warning-500;
82
- }
83
-
84
- .nui-toast-icon-block {
85
- @apply bg-warning-500/10 dark:bg-warning-500/10;
86
- }
87
- }
88
- @utility nui-toast-danger {
89
- @apply border-2 border-danger-500 dark:border-danger-500;
90
-
91
- .nui-toast-icon {
92
- @apply text-danger-500 dark:text-danger-500;
93
- }
94
-
95
- .nui-toast-icon-block {
96
- @apply bg-danger-500/10 dark:bg-danger-500/10;
97
- }
98
- }
99
- @utility nui-toast-dark {
100
- @apply border-2 border-muted-900 dark:border-muted-100;
101
-
102
- .nui-toast-icon {
103
- @apply text-muted-900 dark:text-muted-100;
104
- }
105
-
106
- .nui-toast-icon-block {
107
- @apply bg-muted-900/10 dark:bg-muted-100/10;
108
- }
109
- }
110
- @utility nui-toast-black {
111
- @apply border-2 border-black dark:border-white;
112
-
113
- .nui-toast-icon {
114
- @apply text-black dark:text-white;
115
- }
116
-
117
- .nui-toast-icon-block {
118
- @apply bg-black/10 dark:bg-white/10;
119
- }
120
- }
121
- @utility nui-toast-rounded-sm {
122
- @apply rounded-md;
123
- }
124
- @utility nui-toast-rounded-md {
125
- @apply rounded-lg;
126
- }
127
- @utility nui-toast-rounded-lg {
128
- @apply rounded-xl;
129
- }
130
- @utility nui-toast-borderless {
131
- @apply !border-0 shadow-muted-300/30 dark:shadow-muted-800/30 shadow-xl;
132
- }
@@ -1,99 +0,0 @@
1
- /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
- /* @utility nui-tooltip */
3
-
4
- [data-nui-tooltip] {
5
- position: relative;
6
- }
7
- [data-nui-tooltip]::before, [data-nui-tooltip]::after {
8
- text-transform: none;
9
- font-size: 0.9em;
10
- line-height: 1;
11
- user-select: none;
12
- pointer-events: none;
13
- position: absolute;
14
- display: none;
15
- opacity: 0;
16
- }
17
- [data-nui-tooltip]::before {
18
- content: '';
19
- border: 5px solid transparent;
20
- z-index: 1001;
21
- }
22
- [data-nui-tooltip]::after {
23
- content: attr(data-nui-tooltip);
24
- text-align: center;
25
- min-width: 3rem;
26
- max-width: 21rem;
27
- white-space: pre;
28
- overflow: hidden;
29
- padding: 1ch 1.5ch;
30
- border-radius: 0.5ch;
31
- z-index: 1000;
32
- @apply font-sans text-xs shadow-lg;
33
- @apply text-[#fff] dark:text-[#fff];
34
- @apply !bg-[#1e293b] dark:!bg-[#4c1d95];
35
- }
36
- [data-nui-tooltip]:hover::before, [data-nui-tooltip]:hover::after, [data-nui-tooltip]:focus-visible::before, [data-nui-tooltip]:focus-visible::after {
37
- display: block;
38
- }
39
- [data-nui-tooltip='']::before, [data-nui-tooltip='']::after {
40
- display: none !important;
41
- }
42
- [data-nui-tooltip]:not([data-nui-tooltip-position])::before, [data-nui-tooltip][data-nui-tooltip-position^='up']::before {
43
- bottom: calc(100% + 8px);
44
- border-bottom-width: 0;
45
- border-top-color: currentColor;
46
- @apply !text-[#1e293b] dark:!text-[#4c1d95];
47
- }
48
- [data-nui-tooltip]:not([data-nui-tooltip-position])::after, [data-nui-tooltip][data-nui-tooltip-position^='up']::after {
49
- bottom: calc(100% + 13px);
50
- }
51
- [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 {
52
- left: 50%;
53
- transform: translate(-50%, -0.5em);
54
- }
55
- [data-nui-tooltip][data-nui-tooltip-position^='down']::before {
56
- top: 100%;
57
- border-top-width: 0;
58
- border-bottom-color: currentColor;
59
- @apply !text-[#1e293b] dark:!text-[#4c1d95];
60
- }
61
- [data-nui-tooltip][data-nui-tooltip-position^='down']::after {
62
- top: calc(100% + 5px);
63
- }
64
- [data-nui-tooltip][data-nui-tooltip-position^='down']::before, [data-nui-tooltip][data-nui-tooltip-position^='down']::after {
65
- left: 50%;
66
- transform: translate(-50%, 0.5em);
67
- }
68
- [data-nui-tooltip][data-nui-tooltip-position^='start']::before, [data-nui-tooltip][data-nui-tooltip-position^='left']::before {
69
- top: 50%;
70
- border-right-width: 0;
71
- border-left-color: currentColor;
72
- inset-inline-start: calc(0em - 5px);
73
- transform: translate(-0.5em, -50%);
74
- @apply !text-[#1e293b] dark:!text-[#4c1d95];
75
- }
76
- [data-nui-tooltip][data-nui-tooltip-position^='start']::after, [data-nui-tooltip][data-nui-tooltip-position^='left']::after {
77
- top: 50%;
78
- inset-inline-end: calc(100% + 5px);
79
- transform: translate(-0.5em, -50%);
80
- }
81
- [data-nui-tooltip][data-nui-tooltip-position^='end']::before, [data-nui-tooltip][data-nui-tooltip-position^='right']::before {
82
- top: 50%;
83
- border-leftt-width: 0;
84
- border-right-color: currentColor;
85
- inset-inline-end: calc(0em - 5px);
86
- transform: translate(0.5em, -50%);
87
- @apply !text-[#1e293b] dark:!text-[#4c1d95];
88
- }
89
- [data-nui-tooltip][data-nui-tooltip-position^='end']::after, [data-nui-tooltip][data-nui-tooltip-position^='right']::after {
90
- top: 50%;
91
- inset-inline-start: calc(100% + 5px);
92
- transform: translate(0.5em, -50%);
93
- }
94
- [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 {
95
- @apply animate-nui-tooltip-x;
96
- }
97
- [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 {
98
- @apply animate-nui-tooltip-y;
99
- }
package/src/index.css DELETED
@@ -1,58 +0,0 @@
1
- @plugin '@tailwindcss/typography';
2
-
3
- @import './theme.css';
4
-
5
- @import './css/accordion.css';
6
- @import './css/autocomplete.css';
7
- @import './css/avatar.css';
8
- @import './css/avatar-group.css';
9
- @import './css/breadcrumb.css';
10
- @import './css/button.css';
11
- @import './css/button-action.css';
12
- @import './css/button-close.css';
13
- @import './css/button-group.css';
14
- @import './css/button-icon.css';
15
- @import './css/card.css';
16
- @import './css/checkbox.css';
17
- @import './css/dropdown.css';
18
- @import './css/dropdown-divider.css';
19
- @import './css/dropdown-item.css';
20
- @import './css/focus.css';
21
- @import './css/fullscreen-dropfile.css';
22
- @import './css/heading.css';
23
- @import './css/icon-box.css';
24
- @import './css/input.css';
25
- @import './css/input-file.css';
26
- @import './css/input-file-regular.css';
27
- @import './css/input-help-text.css';
28
- @import './css/input-number.css';
29
- @import './css/kbd.css';
30
- @import './css/label.css';
31
- @import './css/link.css';
32
- @import './css/listbox.css';
33
- @import './css/mark.css';
34
- @import './css/mask.css';
35
- @import './css/message.css';
36
- @import './css/message-text.css';
37
- @import './css/modal.css';
38
- @import './css/pagination.css';
39
- @import './css/paragraph.css';
40
- @import './css/placeholder-page.css';
41
- @import './css/progress.css';
42
- @import './css/progress-circle.css';
43
- /* @import './css/prose.css'; */
44
- @import './css/radio.css';
45
- @import './css/select.css';
46
- @import './css/slimscroll.css';
47
- @import './css/snack.css';
48
- @import './css/switch-ball.css';
49
- @import './css/switch-thin.css';
50
- @import './css/tab-slider.css';
51
- @import './css/tabs.css';
52
- @import './css/tag.css';
53
- @import './css/text.css';
54
- @import './css/textarea.css';
55
- @import './css/theme-switch.css';
56
- @import './css/theme-toggle.css';
57
- @import './css/toast.css';
58
- /* @import './css/tooltip.css'; */
package/src/theme.css DELETED
@@ -1,80 +0,0 @@
1
- @theme {
2
- /* --font-family-sans: 'Titillium Web', sans-serif; */
3
- /* --font-family-mono: 'Titillium Web', sans-serif; */
4
- --font-family-alt: var(--font-family-sans);
5
- --font-family-heading: var(--font-family-sans);
6
-
7
- /** Colors */
8
- --color-muted-50: var(--color-gray-50);
9
- --color-muted-100: var(--color-gray-100);
10
- --color-muted-200: var(--color-gray-200);
11
- --color-muted-300: var(--color-gray-300);
12
- --color-muted-400: var(--color-gray-400);
13
- --color-muted-500: var(--color-gray-500);
14
- --color-muted-600: var(--color-gray-600);
15
- --color-muted-700: var(--color-gray-700);
16
- --color-muted-800: var(--color-gray-800);
17
- --color-muted-900: var(--color-gray-900);
18
- --color-muted-950: var(--color-gray-950);
19
-
20
- --color-primary-invert: var(--color-white);
21
- --color-primary-50: var(--color-purple-50);
22
- --color-primary-100: var(--color-purple-100);
23
- --color-primary-200: var(--color-purple-200);
24
- --color-primary-300: var(--color-purple-300);
25
- --color-primary-400: var(--color-purple-400);
26
- --color-primary-500: var(--color-purple-500);
27
- --color-primary-600: var(--color-purple-600);
28
- --color-primary-700: var(--color-purple-700);
29
- --color-primary-800: var(--color-purple-800);
30
- --color-primary-900: var(--color-purple-900);
31
- --color-primary-950: var(--color-purple-950);
32
-
33
- --color-info-50: var(--color-sky-50);
34
- --color-info-100: var(--color-sky-100);
35
- --color-info-200: var(--color-sky-200);
36
- --color-info-300: var(--color-sky-300);
37
- --color-info-400: var(--color-sky-400);
38
- --color-info-500: var(--color-sky-500);
39
- --color-info-600: var(--color-sky-600);
40
- --color-info-700: var(--color-sky-700);
41
- --color-info-800: var(--color-sky-800);
42
- --color-info-900: var(--color-sky-900);
43
- --color-info-950: var(--color-sky-950);
44
-
45
- --color-success-50: var(--color-teal-50);
46
- --color-success-100: var(--color-teal-100);
47
- --color-success-200: var(--color-teal-200);
48
- --color-success-300: var(--color-teal-300);
49
- --color-success-400: var(--color-teal-400);
50
- --color-success-500: var(--color-teal-500);
51
- --color-success-600: var(--color-teal-600);
52
- --color-success-700: var(--color-teal-700);
53
- --color-success-800: var(--color-teal-800);
54
- --color-success-900: var(--color-teal-900);
55
- --color-success-950: var(--color-teal-950);
56
-
57
- --color-warning-50: var(--color-amber-50);
58
- --color-warning-100: var(--color-amber-100);
59
- --color-warning-200: var(--color-amber-200);
60
- --color-warning-300: var(--color-amber-300);
61
- --color-warning-400: var(--color-amber-400);
62
- --color-warning-500: var(--color-amber-500);
63
- --color-warning-600: var(--color-amber-600);
64
- --color-warning-700: var(--color-amber-700);
65
- --color-warning-800: var(--color-amber-800);
66
- --color-warning-900: var(--color-amber-900);
67
- --color-warning-950: var(--color-amber-950);
68
-
69
- --color-danger-50: var(--color-rose-50);
70
- --color-danger-100: var(--color-rose-100);
71
- --color-danger-200: var(--color-rose-200);
72
- --color-danger-300: var(--color-rose-300);
73
- --color-danger-400: var(--color-rose-400);
74
- --color-danger-500: var(--color-rose-500);
75
- --color-danger-600: var(--color-rose-600);
76
- --color-danger-700: var(--color-rose-700);
77
- --color-danger-800: var(--color-rose-800);
78
- --color-danger-900: var(--color-rose-900);
79
- --color-danger-950: var(--color-rose-950);
80
- }