@una-ui/preset 0.25.0-beta.1 → 0.27.0-beta.1

package/dist/prefixes.cjs

@@ -25,6 +25,15 @@ const prefixes = [
   "card-header",
   "card-title",
   "checkbox",
+  "dialog",
+  "dialog-close",
+  "dialog-content",
+  "dialog-description",
+  "dialog-footer",
+  "dialog-header",
+  "dialog-overlay",
+  "dialog-scroll-content",
+  "dialog-title",
   "dropdown-menu",
   "dropdown-menu-content",
   "dropdown-menu-group",
@@ -100,6 +109,9 @@ const prefixes = [
   "tabs-root",
   "tabs-trigger",
   "theme-switcher",
+  "toggle",
+  "toggle-off",
+  "toggle-on",
   "tooltip",
   "tooltip-content",
   "tooltip-provider",

package/dist/prefixes.mjs

@@ -23,6 +23,15 @@ const prefixes = [
   "card-header",
   "card-title",
   "checkbox",
+  "dialog",
+  "dialog-close",
+  "dialog-content",
+  "dialog-description",
+  "dialog-footer",
+  "dialog-header",
+  "dialog-overlay",
+  "dialog-scroll-content",
+  "dialog-title",
   "dropdown-menu",
   "dropdown-menu-content",
   "dropdown-menu-group",
@@ -98,6 +107,9 @@ const prefixes = [
   "tabs-root",
   "tabs-trigger",
   "theme-switcher",
+  "toggle",
+  "toggle-off",
+  "toggle-on",
   "tooltip",
   "tooltip-content",
   "tooltip-provider",

package/dist/shortcuts.cjs

@@ -190,7 +190,10 @@ const staticBtn = {
   "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
   "btn-text-black": "text-base btn-focus",
   "btn-soft-black": "text-base bg-base btn-focus shadow-sm",
-  "btn-text-muted": "text-muted btn-focus hover:text-accent"
+  "btn-text-muted": "text-muted btn-focus hover:text-accent",
+  "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
+  "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
+  "btn-soft-accent": "text-accent bg-accent btn-focus"
 };
 const dynamicBtn = [
   // base
@@ -201,7 +204,7 @@ const dynamicBtn = [
   [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
   [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
   [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
-  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 hover:underline underline-offset-4`]
+  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:underline underline-offset-4`]
 ];
 const btn = [
   ...dynamicBtn,
@@ -259,6 +262,28 @@ const checkbox = [
   staticCheckbox
 ];
 
+const staticDialog = {
+  // base
+  "dialog": "",
+  // sub-components
+  "dialog-overlay": "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "dialog-content": "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-base bg-base p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
+  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "dialog-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-base bg-base p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+  "dialog-header": "flex flex-col gap-y-1.5 text-center sm:text-left",
+  "dialog-title": "text-lg font-semibold leading-none tracking-tight",
+  "dialog-description": "text-sm text-muted",
+  "dialog-close": "absolute right-4 top-4",
+  "dialog-footer": "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2"
+};
+const dynamicDialog = [
+  // dynamic preset
+];
+const dialog = [
+  ...dynamicDialog,
+  staticDialog
+];
+
 const staticDropdownMenu = {
   // configurations
   "dropdown-menu": "",
@@ -335,10 +360,10 @@ const staticGeneral = {
   "text-accent-foreground": "text-$c-accent",
   "text-popover": "text-$c-popover-foreground",
   "text-popover-foreground": "text-$c-popover",
-  "text-info": "text-info-500 dark:text-info-400",
-  "text-error": "text-error-500 dark:text-error-400",
-  "text-success": "text-success-500 dark:text-success-400",
-  "text-warning": "text-warning-500 dark:text-warning-400",
+  "text-info": "text-info-600 dark:text-info-500",
+  "text-error": "text-error-600 dark:text-error-500",
+  "text-success": "text-success-600 dark:text-success-500",
+  "text-warning": "text-warning-600 dark:text-warning-500",
   // ring
   "ring-base": "ring-$c-ring",
   "ring-inverted": "ring-$c-ring-foreground",
@@ -580,7 +605,7 @@ const pagination = [
 ];
 
 const staticPopover = {
-  "popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
+  "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
 };
 const dynamicPopover = [
   // dynamic preset
@@ -591,12 +616,11 @@ const popover = [
 ];
 
 const staticProgress = {
-  // configurations
-  "progress": "progress-primary",
+  // base
+  "progress-indeterminate": "absolute bg-brand h-full",
   // components
-  "progress-root": "progress relative h-0.5em w-full overflow-hidden rounded-full bg-muted",
-  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
-  "progress-indeterminate": "absolute bg-brand h-full"
+  "progress-root": "relative h-0.5em w-full overflow-hidden rounded-full bg-brand/20",
+  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all"
 };
 const dynamicProgress = [
   [/^progress-(.*)$/, ([, body], { theme }) => {
@@ -799,31 +823,34 @@ const staticTable = {
   "table-default-variant": "table-solid-gray",
   "table": "",
   // table-root
-  "table-root": "w-full caption-bottom text-sm",
   "table-root-wrapper": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
-  "table-body": "[&_tr:last-child]:border-0 border-base",
+  "table-root": "w-full caption-bottom text-sm",
+  "table-body": "[&_tr:last-child]:border-0",
   "table-caption": "mt-4 text-sm text-muted",
   // table-head
-  "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0",
+  "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
   "table-head-pinned": "sticky bg-base",
   "table-head-pinned-left": "left-0",
   "table-head-pinned-right": "right-0",
   // table-header
-  "table-header": "[&_tr]:border-b border-base",
+  "table-header": "[&_tr]:border-b [&_tr]:border-base",
   // table-row
-  "table-row": "border-b border-base hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
+  "table-row": "border-b border-base transition-colors hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
   // table-cell
-  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
   "table-cell-pinned": "sticky bg-base",
   "table-cell-pinned-left": "left-0",
   "table-cell-pinned-right": "right-0",
   // table-empty
   "table-empty-row": "",
-  "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted hover:bg-base",
+  "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted bg-base",
   "table-empty": "flex items-center justify-center py-10",
   // table-loading
-  "table-loading-icon": "i-lucide-refresh-ccw animate-spin text-lg",
-  "table-loading-row": "data-[loading=true]:border-0",
+  "table-loading-icon": "animate-spin text-lg",
+  // TODO: to add
+  "table-loading-icon-name": "i-lucide-refresh-ccw",
+  // TODO: to add
+  "table-loading-row": "data-[loading=true]:border-0 absolute inset-x-0 -mt-1.5px",
   "table-loading-cell": "",
   "table-loading": "absolute inset-x-0 overflow-hidden p-0",
   // table-footer
@@ -854,6 +881,25 @@ const tabs = [
   staticTabs
 ];
 
+const staticToggle = {
+  // configurations
+  toggle: ""
+};
+const dynamicToggle = [
+  [
+    /^toggle-on(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "soft", color = "accent"]) => `data-[state=on]:btn-${variant}-${color}`
+  ],
+  [
+    /^toggle-off(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "ghost", color = "muted"]) => `data-[state=off]:btn-${variant}-${color}`
+  ]
+];
+const toggle = [
+  ...dynamicToggle,
+  staticToggle
+];
+
 const staticTooltip = {
   "tooltip-content": "z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
   "tooltip-white": "border border-base bg-popover text-popover",
@@ -876,6 +922,7 @@ const shortcuts = [
   ...breadcrumb,
   ...accordion,
   ...btn,
+  ...dialog,
   ...formGroup,
   ...input,
   ...icon,
@@ -903,7 +950,8 @@ const shortcuts = [
   ...label,
   ...popover,
   ...tooltip,
-  ...pagination
+  ...pagination,
+  ...toggle
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -188,7 +188,10 @@ const staticBtn = {
   "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
   "btn-text-black": "text-base btn-focus",
   "btn-soft-black": "text-base bg-base btn-focus shadow-sm",
-  "btn-text-muted": "text-muted btn-focus hover:text-accent"
+  "btn-text-muted": "text-muted btn-focus hover:text-accent",
+  "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
+  "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
+  "btn-soft-accent": "text-accent bg-accent btn-focus"
 };
 const dynamicBtn = [
   // base
@@ -199,7 +202,7 @@ const dynamicBtn = [
   [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
   [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
   [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
-  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 hover:underline underline-offset-4`]
+  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:underline underline-offset-4`]
 ];
 const btn = [
   ...dynamicBtn,
@@ -257,6 +260,28 @@ const checkbox = [
   staticCheckbox
 ];
 
+const staticDialog = {
+  // base
+  "dialog": "",
+  // sub-components
+  "dialog-overlay": "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "dialog-content": "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-base bg-base p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
+  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "dialog-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-base bg-base p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+  "dialog-header": "flex flex-col gap-y-1.5 text-center sm:text-left",
+  "dialog-title": "text-lg font-semibold leading-none tracking-tight",
+  "dialog-description": "text-sm text-muted",
+  "dialog-close": "absolute right-4 top-4",
+  "dialog-footer": "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2"
+};
+const dynamicDialog = [
+  // dynamic preset
+];
+const dialog = [
+  ...dynamicDialog,
+  staticDialog
+];
+
 const staticDropdownMenu = {
   // configurations
   "dropdown-menu": "",
@@ -333,10 +358,10 @@ const staticGeneral = {
   "text-accent-foreground": "text-$c-accent",
   "text-popover": "text-$c-popover-foreground",
   "text-popover-foreground": "text-$c-popover",
-  "text-info": "text-info-500 dark:text-info-400",
-  "text-error": "text-error-500 dark:text-error-400",
-  "text-success": "text-success-500 dark:text-success-400",
-  "text-warning": "text-warning-500 dark:text-warning-400",
+  "text-info": "text-info-600 dark:text-info-500",
+  "text-error": "text-error-600 dark:text-error-500",
+  "text-success": "text-success-600 dark:text-success-500",
+  "text-warning": "text-warning-600 dark:text-warning-500",
   // ring
   "ring-base": "ring-$c-ring",
   "ring-inverted": "ring-$c-ring-foreground",
@@ -578,7 +603,7 @@ const pagination = [
 ];
 
 const staticPopover = {
-  "popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
+  "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
 };
 const dynamicPopover = [
   // dynamic preset
@@ -589,12 +614,11 @@ const popover = [
 ];
 
 const staticProgress = {
-  // configurations
-  "progress": "progress-primary",
+  // base
+  "progress-indeterminate": "absolute bg-brand h-full",
   // components
-  "progress-root": "progress relative h-0.5em w-full overflow-hidden rounded-full bg-muted",
-  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
-  "progress-indeterminate": "absolute bg-brand h-full"
+  "progress-root": "relative h-0.5em w-full overflow-hidden rounded-full bg-brand/20",
+  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all"
 };
 const dynamicProgress = [
   [/^progress-(.*)$/, ([, body], { theme }) => {
@@ -797,31 +821,34 @@ const staticTable = {
   "table-default-variant": "table-solid-gray",
   "table": "",
   // table-root
-  "table-root": "w-full caption-bottom text-sm",
   "table-root-wrapper": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
-  "table-body": "[&_tr:last-child]:border-0 border-base",
+  "table-root": "w-full caption-bottom text-sm",
+  "table-body": "[&_tr:last-child]:border-0",
   "table-caption": "mt-4 text-sm text-muted",
   // table-head
-  "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0",
+  "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
   "table-head-pinned": "sticky bg-base",
   "table-head-pinned-left": "left-0",
   "table-head-pinned-right": "right-0",
   // table-header
-  "table-header": "[&_tr]:border-b border-base",
+  "table-header": "[&_tr]:border-b [&_tr]:border-base",
   // table-row
-  "table-row": "border-b border-base hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
+  "table-row": "border-b border-base transition-colors hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
   // table-cell
-  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
   "table-cell-pinned": "sticky bg-base",
   "table-cell-pinned-left": "left-0",
   "table-cell-pinned-right": "right-0",
   // table-empty
   "table-empty-row": "",
-  "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted hover:bg-base",
+  "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted bg-base",
   "table-empty": "flex items-center justify-center py-10",
   // table-loading
-  "table-loading-icon": "i-lucide-refresh-ccw animate-spin text-lg",
-  "table-loading-row": "data-[loading=true]:border-0",
+  "table-loading-icon": "animate-spin text-lg",
+  // TODO: to add
+  "table-loading-icon-name": "i-lucide-refresh-ccw",
+  // TODO: to add
+  "table-loading-row": "data-[loading=true]:border-0 absolute inset-x-0 -mt-1.5px",
   "table-loading-cell": "",
   "table-loading": "absolute inset-x-0 overflow-hidden p-0",
   // table-footer
@@ -852,6 +879,25 @@ const tabs = [
   staticTabs
 ];
 
+const staticToggle = {
+  // configurations
+  toggle: ""
+};
+const dynamicToggle = [
+  [
+    /^toggle-on(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "soft", color = "accent"]) => `data-[state=on]:btn-${variant}-${color}`
+  ],
+  [
+    /^toggle-off(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "ghost", color = "muted"]) => `data-[state=off]:btn-${variant}-${color}`
+  ]
+];
+const toggle = [
+  ...dynamicToggle,
+  staticToggle
+];
+
 const staticTooltip = {
   "tooltip-content": "z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
   "tooltip-white": "border border-base bg-popover text-popover",
@@ -874,6 +920,7 @@ const shortcuts = [
   ...breadcrumb,
   ...accordion,
   ...btn,
+  ...dialog,
   ...formGroup,
   ...input,
   ...icon,
@@ -901,7 +948,8 @@ const shortcuts = [
   ...label,
   ...popover,
   ...tooltip,
-  ...pagination
+  ...pagination,
+  ...toggle
 ];
 
 export { shortcuts };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.25.0-beta.1",
+  "version": "0.27.0-beta.1",
   "description": "The default preset for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -49,9 +49,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/core": "^0.63.1",
-    "@unocss/preset-mini": "^0.63.1",
-    "unocss": "^0.63.1"
+    "@unocss/core": "^0.63.3",
+    "@unocss/preset-mini": "^0.63.3",
+    "unocss": "^0.63.3"
   },
   "scripts": {
     "build": "unbuild",