@una-ui/preset 0.26.0-beta.2 → 0.27.1-beta.1

package/dist/prefixes.cjs

@@ -109,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

@@ -107,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

@@ -191,7 +191,9 @@ const staticBtn = {
   "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-link-muted": "text-muted btn-focus hover:underline underline-offset-4"
+  "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
@@ -202,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,
@@ -358,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",
@@ -614,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 }) => {
@@ -822,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
@@ -877,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",
@@ -927,7 +950,8 @@ const shortcuts = [
   ...label,
   ...popover,
   ...tooltip,
-  ...pagination
+  ...pagination,
+  ...toggle
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -189,7 +189,9 @@ const staticBtn = {
   "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-link-muted": "text-muted btn-focus hover:underline underline-offset-4"
+  "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
@@ -200,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,
@@ -356,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",
@@ -612,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 }) => {
@@ -820,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
@@ -875,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",
@@ -925,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.26.0-beta.2",
+  "version": "0.27.1-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.4",
+    "@unocss/preset-mini": "^0.63.4",
+    "unocss": "^0.63.4"
   },
   "scripts": {
     "build": "unbuild",