@una-ui/preset 0.40.0-beta.1 → 0.41.0-beta.1

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 (10) hide show
  1. package/dist/index.cjs +11 -1
  2. package/dist/index.mjs +11 -1
  3. package/dist/prefixes.cjs +25 -0
  4. package/dist/prefixes.mjs +25 -0
  5. package/dist/shared/{preset.rfZXnCIa.mjs → preset.B14Xxonh.mjs} +82 -21
  6. package/dist/shared/{preset.DPKZgAqu.cjs → preset.CXSX2SwK.cjs} +82 -21
  7. package/dist/shortcuts.cjs +1 -1
  8. package/dist/shortcuts.mjs +1 -1
  9. package/package.json +1 -1
  10. package/una.css +12 -0
package/dist/index.cjs CHANGED
@@ -5,7 +5,7 @@ const colors = require('@unocss/preset-mini/colors');
5
5
  const rules = require('@unocss/preset-mini/rules');
6
6
  const utils = require('@unocss/preset-mini/utils');
7
7
  const unocss = require('unocss');
8
- const index = require('./shared/preset.DPKZgAqu.cjs');
8
+ const index = require('./shared/preset.CXSX2SwK.cjs');
9
9
 
10
10
  function presetUna(options = {
11
11
  // TODO: add options
@@ -56,6 +56,16 @@ function presetUna(options = {
56
56
  900: "rgba(var(--una-gray-900) / <alpha-value>)",
57
57
  950: "rgba(var(--una-gray-950) / <alpha-value>)"
58
58
  },
59
+ sidebar: {
60
+ DEFAULT: "rgba(var(--una-sidebar) / <alpha-value>)",
61
+ foreground: "rgba(var(--una-sidebar-foreground) / <alpha-value>)",
62
+ primary: "rgba(var(--una-sidebar-primary) / <alpha-value>)",
63
+ primaryForeground: "rgba(var(--una-sidebar-primary-foreground) / <alpha-value>)",
64
+ accent: "rgba(var(--una-sidebar-accent) / <alpha-value>)",
65
+ accentForeground: "rgba(var(--una-sidebar-accent-foreground) / <alpha-value>)",
66
+ border: "rgba(var(--una-sidebar-border) / <alpha-value>)",
67
+ ring: "rgba(var(--una-sidebar-ring) / <alpha-value>)"
68
+ },
59
69
  error: colors.colors.red,
60
70
  success: colors.colors.green,
61
71
  warning: colors.colors.amber,
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import { colors } from '@unocss/preset-mini/colors';
3
3
  import { fonts } from '@unocss/preset-mini/rules';
4
4
  import { handler, parseColor } from '@unocss/preset-mini/utils';
5
5
  import { mergeDeep } from 'unocss';
6
- import { s as shortcuts } from './shared/preset.rfZXnCIa.mjs';
6
+ import { s as shortcuts } from './shared/preset.B14Xxonh.mjs';
7
7
 
8
8
  function presetUna(options = {
9
9
  // TODO: add options
@@ -54,6 +54,16 @@ function presetUna(options = {
54
54
  900: "rgba(var(--una-gray-900) / <alpha-value>)",
55
55
  950: "rgba(var(--una-gray-950) / <alpha-value>)"
56
56
  },
57
+ sidebar: {
58
+ DEFAULT: "rgba(var(--una-sidebar) / <alpha-value>)",
59
+ foreground: "rgba(var(--una-sidebar-foreground) / <alpha-value>)",
60
+ primary: "rgba(var(--una-sidebar-primary) / <alpha-value>)",
61
+ primaryForeground: "rgba(var(--una-sidebar-primary-foreground) / <alpha-value>)",
62
+ accent: "rgba(var(--una-sidebar-accent) / <alpha-value>)",
63
+ accentForeground: "rgba(var(--una-sidebar-accent-foreground) / <alpha-value>)",
64
+ border: "rgba(var(--una-sidebar-border) / <alpha-value>)",
65
+ ring: "rgba(var(--una-sidebar-ring) / <alpha-value>)"
66
+ },
57
67
  error: colors.red,
58
68
  success: colors.green,
59
69
  warning: colors.amber,
package/dist/prefixes.cjs CHANGED
@@ -15,6 +15,7 @@ const prefixes = [
15
15
  "breadcrumb-item",
16
16
  "breadcrumb-link",
17
17
  "breadcrumb-list",
18
+ "breadcrumb-page",
18
19
  "breadcrumb-root",
19
20
  "breadcrumb-separator",
20
21
  "btn",
@@ -104,6 +105,30 @@ const prefixes = [
104
105
  "sheet-header",
105
106
  "sheet-title",
106
107
  "sheet-trigger",
108
+ "sidebar",
109
+ "sidebar-content",
110
+ "sidebar-footer",
111
+ "sidebar-group",
112
+ "sidebar-group-action",
113
+ "sidebar-group-content",
114
+ "sidebar-group-label",
115
+ "sidebar-header",
116
+ "sidebar-input",
117
+ "sidebar-inset",
118
+ "sidebar-menu",
119
+ "sidebar-menu-action",
120
+ "sidebar-menu-badge",
121
+ "sidebar-menu-button",
122
+ "sidebar-menu-button-child",
123
+ "sidebar-menu-item",
124
+ "sidebar-menu-skeleton",
125
+ "sidebar-menu-sub",
126
+ "sidebar-menu-sub-button",
127
+ "sidebar-menu-sub-item",
128
+ "sidebar-provider",
129
+ "sidebar-rail",
130
+ "sidebar-separator",
131
+ "sidebar-trigger",
107
132
  "size",
108
133
  "skeleton",
109
134
  "slider",
package/dist/prefixes.mjs CHANGED
@@ -13,6 +13,7 @@ const prefixes = [
13
13
  "breadcrumb-item",
14
14
  "breadcrumb-link",
15
15
  "breadcrumb-list",
16
+ "breadcrumb-page",
16
17
  "breadcrumb-root",
17
18
  "breadcrumb-separator",
18
19
  "btn",
@@ -102,6 +103,30 @@ const prefixes = [
102
103
  "sheet-header",
103
104
  "sheet-title",
104
105
  "sheet-trigger",
106
+ "sidebar",
107
+ "sidebar-content",
108
+ "sidebar-footer",
109
+ "sidebar-group",
110
+ "sidebar-group-action",
111
+ "sidebar-group-content",
112
+ "sidebar-group-label",
113
+ "sidebar-header",
114
+ "sidebar-input",
115
+ "sidebar-inset",
116
+ "sidebar-menu",
117
+ "sidebar-menu-action",
118
+ "sidebar-menu-badge",
119
+ "sidebar-menu-button",
120
+ "sidebar-menu-button-child",
121
+ "sidebar-menu-item",
122
+ "sidebar-menu-skeleton",
123
+ "sidebar-menu-sub",
124
+ "sidebar-menu-sub-button",
125
+ "sidebar-menu-sub-item",
126
+ "sidebar-provider",
127
+ "sidebar-rail",
128
+ "sidebar-separator",
129
+ "sidebar-trigger",
105
130
  "size",
106
131
  "skeleton",
107
132
  "slider",
package/dist/shared/{preset.rfZXnCIa.mjs → preset.B14Xxonh.mjs} RENAMED
@@ -40,7 +40,7 @@ const staticAlert = {
40
40
  // base
41
41
  "alert": "p-1em",
42
42
  "alert-title": "text-0.875em font-medium text-brand",
43
- "alert-description": "text-0.875em leading-1.625em text-brand/90",
43
+ "alert-description": "text-0.875em leading-1.4285714285714286em text-brand/90",
44
44
  "alert-icon-base": "h-1.25em w-1.25em",
45
45
  "alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
46
46
  "alert-close-icon-base": "h-1.2em w-1.2em",
@@ -163,15 +163,15 @@ const staticBtn = {
163
163
  "btn-loading-icon": "i-loading",
164
164
  "btn-default-radius": "rounded-md",
165
165
  // base
166
- "btn": "btn-rectangle px-1em py-0.5em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.5em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium",
166
+ "btn": "btn-rectangle px-1.1428571428571428em py-0.5714285714285714em bg-transparent transition-colors leading-1.4285714285714286em gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium",
167
167
  "btn-disabled": "disabled:n-disabled",
168
168
  "btn-label": "",
169
- "btn-icon-label": "text-1em",
170
- "btn-leading": "-ml-0.14285714285714285em text-1em",
171
- "btn-trailing": "-mr-0.14285714285714285em text-1em",
172
- "btn-loading": "animate-spin text-1em",
173
- "btn-rectangle": "h-2.5em",
174
- "btn-square": "w-2.5em h-2.5em",
169
+ "btn-icon-label": "square-1.1428571428571428em",
170
+ "btn-leading": "size-1.1428571428571428em",
171
+ "btn-trailing": "size-1.1428571428571428em",
172
+ "btn-loading": "animate-spin size-1.1428571428571428em",
173
+ "btn-rectangle": "h-2.5714285714285716em",
174
+ "btn-square": "square-2.5714285714285716em",
175
175
  // options
176
176
  "btn-block": "w-full",
177
177
  "btn-reverse": "flex-row-reverse",
@@ -407,9 +407,13 @@ const staticGeneral = {
407
407
  "text-popover": "text-$c-popover-foreground",
408
408
  "text-popover-foreground": "text-$c-popover",
409
409
  "text-info": "text-info-600 dark:text-info-500",
410
+ "text-info-active": "text-info-500 dark:text-info-400",
410
411
  "text-error": "text-error-600 dark:text-error-500",
412
+ "text-error-active": "text-error-500 dark:text-error-400",
411
413
  "text-success": "text-success-600 dark:text-success-500",
414
+ "text-success-active": "text-success-500 dark:text-success-400",
412
415
  "text-warning": "text-warning-600 dark:text-warning-500",
416
+ "text-warning-active": "text-warning-500 dark:text-warning-400",
413
417
  // ring
414
418
  "ring-base": "ring-$c-ring",
415
419
  "ring-offset-base": "ring-offset-$c-background",
@@ -488,17 +492,17 @@ const staticInput = {
488
492
  "input-leading-padding": "pl-2.9em",
489
493
  "input-trailing-padding": "pr-2.9em",
490
494
  // base
491
- "input": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
492
- "input-input": "h-9",
495
+ "input": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.2857142857142857em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
496
+ "input-input": "h-2.5714285714285716em",
493
497
  // role='input'
494
498
  "input-textarea": "",
495
499
  // role='textarea'
496
500
  "input-disabled": "disabled:(n-disabled)",
497
501
  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
498
- "input-status-icon-base": "text-1.042em",
499
- "input-leading": "text-1.042em",
500
- "input-trailing": "text-1.042em",
501
- "input-loading": "animate-spin text-1.042em",
502
+ "input-status-icon-base": "size-1.25em",
503
+ "input-leading": "size-1.25em",
504
+ "input-trailing": "size-1.25em",
505
+ "input-loading": "animate-spin size-1.25em",
502
506
  // wrappers
503
507
  "input-wrapper": "relative flex items-center",
504
508
  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
@@ -698,17 +702,17 @@ const staticSelect = {
698
702
  "select-trigger-warning-icon": "i-warning",
699
703
  // components
700
704
  "select-root": "",
701
- "select-trigger": "w-full [&>span]:truncate",
702
- "select-trigger-trailing-icon": "i-lucide-chevron-down n-disabled",
703
- "select-trigger-trailing": "ml-auto data-[status]:text-1.2em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info",
704
- "select-trigger-leading": "",
705
- "select-value": "h-1.5em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[placeholder]:n-disabled",
705
+ "select-trigger": "px-0.8571428571428571em w-full [&>span]:truncate",
706
+ "select-trigger-trailing-icon": "i-lucide-chevron-down",
707
+ "select-trigger-trailing": "ml-auto size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em)",
708
+ "select-trigger-leading": "size-1.1428571428571428em",
709
+ "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
706
710
  "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-base bg-popover text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
707
711
  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
708
712
  "select-group": "p-1 w-full",
709
713
  "select-separator": "-mx-1 my-1 h-px bg-muted",
710
714
  "select-item": "select-item-gray relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-1em outline-none data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
711
- "select-item-indicator": "absolute left-2 h-0.75em w-0.75em flex items-center justify-center",
715
+ "select-item-indicator": "absolute left-2 size-1.1428571428571428em flex items-center justify-center",
712
716
  "select-item-indicator-icon": "i-check",
713
717
  "select-viewport": "p-1",
714
718
  "select-viewport-popper": "h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]",
@@ -796,6 +800,62 @@ const sheet = [
796
800
  staticSheet
797
801
  ];
798
802
 
803
+ const staticSidebar = {
804
+ // base
805
+ "sidebar": "",
806
+ // mobile (sheet)
807
+ "sidebar-mobile": "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
808
+ "sidebar-mobile-inner": "h-full w-full flex flex-col",
809
+ // collapsible variants
810
+ "sidebar-collapsible-none": "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
811
+ // desktop container
812
+ "sidebar-desktop": "hidden md:block",
813
+ "sidebar-desktop-inner": "h-full w-full flex flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow",
814
+ // gap handling
815
+ "sidebar-desktop-gap": "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",
816
+ "sidebar-desktop-gap-floating": "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]",
817
+ "sidebar-desktop-gap-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
818
+ // positioning
819
+ "sidebar-desktop-position": "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
820
+ "sidebar-desktop-position-left": "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
821
+ "sidebar-desktop-position-right": "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
822
+ // padding variations
823
+ "sidebar-desktop-padding-floating": "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]",
824
+ "sidebar-desktop-padding-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
825
+ // subcomponents
826
+ "sidebar-provider": "flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
827
+ "sidebar-content": "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
828
+ "sidebar-header": "flex flex-col gap-2 p-2",
829
+ "sidebar-group": "relative flex w-full min-w-0 flex-col p-2",
830
+ "sidebar-group-action": "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden group-data-[collapsible=icon]:hidden",
831
+ "sidebar-group-content": "w-full text-sm",
832
+ "sidebar-group-label": "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>span[icon-base]]:square-4 [&>svg]:shrink-0",
833
+ "sidebar-input": "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
834
+ "sidebar-inset": "relative flex min-h-svh flex-1 flex-col bg-background data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
835
+ "sidebar-menu": "flex w-full min-w-0 flex-col gap-1",
836
+ "sidebar-menu-action": "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu_button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden peer-data-[size=sm]/menu_button:top-1 peer-data-[size=default]/menu_button:top-1.5 peer-data-[size=lg]/menu_button:top-2.5 group-data-[collapsible=icon]:hidden",
837
+ "sidebar-menu-action-show-on-hover": "group-focus-within/menu_item:opacity-100 group-hover/menu_item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu_button:text-sidebar-accent-foreground md:opacity-0",
838
+ "sidebar-menu-skeleton": "rounded-md h-8 flex gap-2 px-2 items-center",
839
+ "sidebar-separator": "mx-2 w-auto bg-sidebar-border",
840
+ "sidebar-menu-item": "relative",
841
+ "sidebar-menu-sub": "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
842
+ "sidebar-menu-sub-item": "",
843
+ "sidebar-rail": "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex [[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
844
+ "sidebar-menu-badge": "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none peer-hover/menu_button:text-sidebar-accent-foreground peer-data-[active=true]/menu_button:text-sidebar-accent-foreground peer-data-[size=sm]/menu_button:top-1 peer-data-[size=default]/menu_button:top-1.5 peer-data-[size=lg]/menu_button:top-2.5 group-data-[collapsible=icon]:hidden",
845
+ "sidebar-footer": "flex flex-col gap-2 p-2",
846
+ // TODO: Add these to the preset
847
+ "sidebar-menu-button": "",
848
+ "sidebar-menu-button-child": "",
849
+ "sidebar-menu-sub-button": ""
850
+ };
851
+ const dynamicSidebar = [
852
+ // dynamic preset
853
+ ];
854
+ const sidebar = [
855
+ ...dynamicSidebar,
856
+ staticSidebar
857
+ ];
858
+
799
859
  const staticSkeleton = {
800
860
  // base
801
861
  skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
@@ -1040,7 +1100,8 @@ const shortcuts = [
1040
1100
  ...radioGroup,
1041
1101
  ...form,
1042
1102
  ...sheet,
1043
- ...scrollArea
1103
+ ...scrollArea,
1104
+ ...sidebar
1044
1105
  ];
1045
1106
 
1046
1107
  export { shortcuts as s };
package/dist/shared/{preset.DPKZgAqu.cjs → preset.CXSX2SwK.cjs} RENAMED
@@ -42,7 +42,7 @@ const staticAlert = {
42
42
  // base
43
43
  "alert": "p-1em",
44
44
  "alert-title": "text-0.875em font-medium text-brand",
45
- "alert-description": "text-0.875em leading-1.625em text-brand/90",
45
+ "alert-description": "text-0.875em leading-1.4285714285714286em text-brand/90",
46
46
  "alert-icon-base": "h-1.25em w-1.25em",
47
47
  "alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
48
48
  "alert-close-icon-base": "h-1.2em w-1.2em",
@@ -165,15 +165,15 @@ const staticBtn = {
165
165
  "btn-loading-icon": "i-loading",
166
166
  "btn-default-radius": "rounded-md",
167
167
  // base
168
- "btn": "btn-rectangle px-1em py-0.5em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.5em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium",
168
+ "btn": "btn-rectangle px-1.1428571428571428em py-0.5714285714285714em bg-transparent transition-colors leading-1.4285714285714286em gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium",
169
169
  "btn-disabled": "disabled:n-disabled",
170
170
  "btn-label": "",
171
- "btn-icon-label": "text-1em",
172
- "btn-leading": "-ml-0.14285714285714285em text-1em",
173
- "btn-trailing": "-mr-0.14285714285714285em text-1em",
174
- "btn-loading": "animate-spin text-1em",
175
- "btn-rectangle": "h-2.5em",
176
- "btn-square": "w-2.5em h-2.5em",
171
+ "btn-icon-label": "square-1.1428571428571428em",
172
+ "btn-leading": "size-1.1428571428571428em",
173
+ "btn-trailing": "size-1.1428571428571428em",
174
+ "btn-loading": "animate-spin size-1.1428571428571428em",
175
+ "btn-rectangle": "h-2.5714285714285716em",
176
+ "btn-square": "square-2.5714285714285716em",
177
177
  // options
178
178
  "btn-block": "w-full",
179
179
  "btn-reverse": "flex-row-reverse",
@@ -409,9 +409,13 @@ const staticGeneral = {
409
409
  "text-popover": "text-$c-popover-foreground",
410
410
  "text-popover-foreground": "text-$c-popover",
411
411
  "text-info": "text-info-600 dark:text-info-500",
412
+ "text-info-active": "text-info-500 dark:text-info-400",
412
413
  "text-error": "text-error-600 dark:text-error-500",
414
+ "text-error-active": "text-error-500 dark:text-error-400",
413
415
  "text-success": "text-success-600 dark:text-success-500",
416
+ "text-success-active": "text-success-500 dark:text-success-400",
414
417
  "text-warning": "text-warning-600 dark:text-warning-500",
418
+ "text-warning-active": "text-warning-500 dark:text-warning-400",
415
419
  // ring
416
420
  "ring-base": "ring-$c-ring",
417
421
  "ring-offset-base": "ring-offset-$c-background",
@@ -490,17 +494,17 @@ const staticInput = {
490
494
  "input-leading-padding": "pl-2.9em",
491
495
  "input-trailing-padding": "pr-2.9em",
492
496
  // base
493
- "input": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
494
- "input-input": "h-9",
497
+ "input": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.2857142857142857em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
498
+ "input-input": "h-2.5714285714285716em",
495
499
  // role='input'
496
500
  "input-textarea": "",
497
501
  // role='textarea'
498
502
  "input-disabled": "disabled:(n-disabled)",
499
503
  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
500
- "input-status-icon-base": "text-1.042em",
501
- "input-leading": "text-1.042em",
502
- "input-trailing": "text-1.042em",
503
- "input-loading": "animate-spin text-1.042em",
504
+ "input-status-icon-base": "size-1.25em",
505
+ "input-leading": "size-1.25em",
506
+ "input-trailing": "size-1.25em",
507
+ "input-loading": "animate-spin size-1.25em",
504
508
  // wrappers
505
509
  "input-wrapper": "relative flex items-center",
506
510
  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
@@ -700,17 +704,17 @@ const staticSelect = {
700
704
  "select-trigger-warning-icon": "i-warning",
701
705
  // components
702
706
  "select-root": "",
703
- "select-trigger": "w-full [&>span]:truncate",
704
- "select-trigger-trailing-icon": "i-lucide-chevron-down n-disabled",
705
- "select-trigger-trailing": "ml-auto data-[status]:text-1.2em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info",
706
- "select-trigger-leading": "",
707
- "select-value": "h-1.5em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[placeholder]:n-disabled",
707
+ "select-trigger": "px-0.8571428571428571em w-full [&>span]:truncate",
708
+ "select-trigger-trailing-icon": "i-lucide-chevron-down",
709
+ "select-trigger-trailing": "ml-auto size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em)",
710
+ "select-trigger-leading": "size-1.1428571428571428em",
711
+ "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
708
712
  "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-base bg-popover text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
709
713
  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
710
714
  "select-group": "p-1 w-full",
711
715
  "select-separator": "-mx-1 my-1 h-px bg-muted",
712
716
  "select-item": "select-item-gray relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-1em outline-none data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
713
- "select-item-indicator": "absolute left-2 h-0.75em w-0.75em flex items-center justify-center",
717
+ "select-item-indicator": "absolute left-2 size-1.1428571428571428em flex items-center justify-center",
714
718
  "select-item-indicator-icon": "i-check",
715
719
  "select-viewport": "p-1",
716
720
  "select-viewport-popper": "h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]",
@@ -798,6 +802,62 @@ const sheet = [
798
802
  staticSheet
799
803
  ];
800
804
 
805
+ const staticSidebar = {
806
+ // base
807
+ "sidebar": "",
808
+ // mobile (sheet)
809
+ "sidebar-mobile": "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
810
+ "sidebar-mobile-inner": "h-full w-full flex flex-col",
811
+ // collapsible variants
812
+ "sidebar-collapsible-none": "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
813
+ // desktop container
814
+ "sidebar-desktop": "hidden md:block",
815
+ "sidebar-desktop-inner": "h-full w-full flex flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow",
816
+ // gap handling
817
+ "sidebar-desktop-gap": "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",
818
+ "sidebar-desktop-gap-floating": "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]",
819
+ "sidebar-desktop-gap-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
820
+ // positioning
821
+ "sidebar-desktop-position": "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
822
+ "sidebar-desktop-position-left": "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
823
+ "sidebar-desktop-position-right": "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
824
+ // padding variations
825
+ "sidebar-desktop-padding-floating": "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]",
826
+ "sidebar-desktop-padding-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
827
+ // subcomponents
828
+ "sidebar-provider": "flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
829
+ "sidebar-content": "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
830
+ "sidebar-header": "flex flex-col gap-2 p-2",
831
+ "sidebar-group": "relative flex w-full min-w-0 flex-col p-2",
832
+ "sidebar-group-action": "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden group-data-[collapsible=icon]:hidden",
833
+ "sidebar-group-content": "w-full text-sm",
834
+ "sidebar-group-label": "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>span[icon-base]]:square-4 [&>svg]:shrink-0",
835
+ "sidebar-input": "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
836
+ "sidebar-inset": "relative flex min-h-svh flex-1 flex-col bg-background data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
837
+ "sidebar-menu": "flex w-full min-w-0 flex-col gap-1",
838
+ "sidebar-menu-action": "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu_button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden peer-data-[size=sm]/menu_button:top-1 peer-data-[size=default]/menu_button:top-1.5 peer-data-[size=lg]/menu_button:top-2.5 group-data-[collapsible=icon]:hidden",
839
+ "sidebar-menu-action-show-on-hover": "group-focus-within/menu_item:opacity-100 group-hover/menu_item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu_button:text-sidebar-accent-foreground md:opacity-0",
840
+ "sidebar-menu-skeleton": "rounded-md h-8 flex gap-2 px-2 items-center",
841
+ "sidebar-separator": "mx-2 w-auto bg-sidebar-border",
842
+ "sidebar-menu-item": "relative",
843
+ "sidebar-menu-sub": "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
844
+ "sidebar-menu-sub-item": "",
845
+ "sidebar-rail": "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex [[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
846
+ "sidebar-menu-badge": "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none peer-hover/menu_button:text-sidebar-accent-foreground peer-data-[active=true]/menu_button:text-sidebar-accent-foreground peer-data-[size=sm]/menu_button:top-1 peer-data-[size=default]/menu_button:top-1.5 peer-data-[size=lg]/menu_button:top-2.5 group-data-[collapsible=icon]:hidden",
847
+ "sidebar-footer": "flex flex-col gap-2 p-2",
848
+ // TODO: Add these to the preset
849
+ "sidebar-menu-button": "",
850
+ "sidebar-menu-button-child": "",
851
+ "sidebar-menu-sub-button": ""
852
+ };
853
+ const dynamicSidebar = [
854
+ // dynamic preset
855
+ ];
856
+ const sidebar = [
857
+ ...dynamicSidebar,
858
+ staticSidebar
859
+ ];
860
+
801
861
  const staticSkeleton = {
802
862
  // base
803
863
  skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
@@ -1042,7 +1102,8 @@ const shortcuts = [
1042
1102
  ...radioGroup,
1043
1103
  ...form,
1044
1104
  ...sheet,
1045
- ...scrollArea
1105
+ ...scrollArea,
1106
+ ...sidebar
1046
1107
  ];
1047
1108
 
1048
1109
  exports.shortcuts = shortcuts;
package/dist/shortcuts.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./shared/preset.DPKZgAqu.cjs');
3
+ const index = require('./shared/preset.CXSX2SwK.cjs');
4
4
  require('@unocss/preset-mini/utils');
5
5
  require('@unocss/preset-mini');
6
6
 
package/dist/shortcuts.mjs CHANGED
@@ -1,3 +1,3 @@
1
- export { s as shortcuts } from './shared/preset.rfZXnCIa.mjs';
1
+ export { s as shortcuts } from './shared/preset.B14Xxonh.mjs';
2
2
  import '@unocss/preset-mini/utils';
3
3
  import '@unocss/preset-mini';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@una-ui/preset",
3
- "version": "0.40.0-beta.1",
3
+ "version": "0.41.0-beta.1",
4
4
  "description": "The default preset for @una-ui",
5
5
  "author": "Phojie Rengel <phojrengel@gmail.com>",
6
6
  "license": "MIT",
package/una.css CHANGED
@@ -80,6 +80,14 @@
80
80
  --c-divider: rgb(var(--una-gray-200));
81
81
  --c-bg-selection: rgba(var(--una-primary-600), 0.2);
82
82
  --un-default-border-color: var(--c-border);
83
+ --una-sidebar: var(--una-background);
84
+ --una-sidebar-foreground: var(--una-foreground);
85
+ --una-sidebar-primary: var(--una-primary);
86
+ --una-sidebar-primary-foreground: var(--una-background);
87
+ --una-sidebar-accent: var(--una-gray-100);
88
+ --una-sidebar-accent-foreground: var(--una-gray-800);
89
+ --una-sidebar-border: var(--una-gray-200);
90
+ --una-sidebar-ring: var(--una-gray-200);
83
91
  }
84
92
 
85
93
  .dark {
@@ -103,6 +111,10 @@
103
111
  --c-ring: rgba(var(--una-gray-700), 0.58);
104
112
  --c-divider: rgba(var(--una-gray-700), 0.58);
105
113
  --c-bg-selection: rgba(var(--una-primary-500), 0.2);
114
+ --una-sidebar-accent: var(--una-gray-800);
115
+ --una-sidebar-accent-foreground: var(--una-gray-100);
116
+ --una-sidebar-border: var(--una-gray-700);
117
+ --una-sidebar-ring: var(--una-gray-700);
106
118
  }
107
119
 
108
120
  html {