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

package/dist/prefixes.cjs

@@ -81,6 +81,8 @@ const prefixes = [
   "slider",
   "square",
   "switch",
+  "switch-checked",
+  "switch-unchecked",
   "table",
   "table-body",
   "table-caption",

package/dist/prefixes.mjs

@@ -79,6 +79,8 @@ const prefixes = [
   "slider",
   "square",
   "switch",
+  "switch-checked",
+  "switch-unchecked",
   "table",
   "table-body",
   "table-caption",

package/dist/shortcuts.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const utils = require('@unocss/preset-mini/utils');
+const presetMini = require('@unocss/preset-mini');
 
 const staticAccordion = {
   // config
@@ -135,11 +136,11 @@ const staticBreadcrumb = {
   "breadcrumb-elipsis-icon": "i-radix-icons-dots-horizontal",
   // components
   "breadcrumb-root": "",
-  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted gap-0.5",
-  "breadcrumb-link": "transition-colors font-normal btn-square",
-  "breadcrumb-item": "inline-flex items-center",
+  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted",
+  "breadcrumb-link": "transition-colors font-normal",
+  "breadcrumb-item": "inline-flex items-center gap-1.5",
   // TODO
-  "breadcrumb-ellipsis": "flex h-9 w-9 items-center justify-center"
+  "breadcrumb-ellipsis": "flex items-center justify-center"
 };
 const dynamicBreadcrumb = [
   // states
@@ -163,7 +164,7 @@ const staticBtn = {
   "btn-loading-icon": "i-loading",
   "btn-default-radius": "rounded-md",
   // base
-  "btn": "btn-rectangle px-0.7142857142857143em py-0.42857142857142855em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.42857142857142855em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
+  "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 cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
@@ -331,7 +332,7 @@ const staticGeneral = {
   "text-inverted": "text-$c-background",
   "text-muted": "text-$c-muted-foreground",
   "text-accent": "text-$c-accent-foreground",
-  "text-accent-forground": "text-$c-accent",
+  "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",
@@ -366,7 +367,9 @@ const staticGeneral = {
   "i-dot": "i-tabler-circle-filled",
   "i-check": "i-lucide-check",
   // transition
-  "transition-base": "transition-all duration-100 ease-out"
+  "transition-base": "transition-all duration-100 ease-out",
+  // overrides
+  "square-false": ""
 };
 const dynamicGeneral = [
   // TODO: una-text-<color><-number><-number>
@@ -429,7 +432,7 @@ const staticInput = {
   "input-leading-padding": "pl-2.9em",
   "input-trailing-padding": "pr-2.9em",
   // base
-  "input": "text-0.875em leading-6 px-0.8571428571428571em py-0.42857142857142855em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
+  "input": "text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
   "input-disabled": "disabled:(n-disabled)",
   "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
   "input-status-icon-base": "text-1.042em",
@@ -753,37 +756,38 @@ const slider = [
 
 const staticSwitch = {
   // base
-  "switch": "switch-primary bg-transparent relative inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-full",
-  "switch-disabled": "n-disabled",
-  "switch-focus": "focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-base focus:ring-brand",
-  // inset
-  "switch-inset": "h-1.5em w-2.75em",
-  "switch-track-inset": "h-1.5em w-2.75em",
-  // outset
-  "switch-outset": "h-1.25em w-2.5em",
-  "switch-track-outset": "h-1em w-2.25em",
+  "switch": "bg-brand switch-focus h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm",
+  "switch-disabled": "data-[disabled]:n-disabled",
+  "switch-focus": "focus-visible:ring-brand focus-visible:ring-offset-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
   // thumb
-  "switch-thumb": "flex items-center justify-center h-1.25em w-1.25em absolute bg-base pointer-events-none inline-block transform rounded-full shadow transition-base",
-  "switch-thumb-on": "translate-x-1.25em",
-  "switch-thumb-off": "translate-x-0",
-  // track
-  "switch-track": "pointer-events-none absolute mx-auto rounded-full transition-base",
-  "switch-track-on": "bg-brand",
-  "switch-track-off": "bg-$c-gray-200",
+  "switch-thumb": "square-1em flex items-center justify-center absolute pointer-events-none block border border-base rounded-full bg-base shadow-lg ring-0 transition-transform",
+  "switch-thumb-checked": "translate-x-1.01em",
+  "switch-thumb-unchecked": "translate-x-0.03em",
   // icon
-  "switch-icon-base": "text-0.8em",
-  "switch-icon-off": "text-muted",
-  "switch-icon-on": "text-muted",
+  "switch-icon": "text-0.7em",
+  "switch-icon-unchecked": "text-muted",
+  "switch-icon-checked": "text-muted",
   // loading
-  "switch-loading-icon": "i-loading",
-  "switch-loading": "text-gray animate-spin text-0.8em"
+  "switch-loading-icon": "text-gray animate-spin text-0.8em",
+  "switch-loading-icon-name": "i-loading"
 };
 const dynamicSwitch = [
-  [/^switch-(.*)$/, ([, body], { theme }) => {
-    const color = utils.parseColor(body, theme);
-    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
-      return `n-${body}-600 dark:n-${body}-500`;
-  }]
+  [
+    /^switch-checked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "primary"], { theme }) => {
+      const parsedColor = presetMini.parseColor(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=checked]:n-${color}-600 dark:data-[state=checked]:n-${color}-500`;
+    }
+  ],
+  [
+    /^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "primary"], { theme }) => {
+      const parsedColor = presetMini.parseColor(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=unchecked]:n-${color}-200 dark:data-[state=unchecked]:n-${color}-700/58`;
+    }
+  ]
 ];
 const _switch = [
   ...dynamicSwitch,
@@ -856,7 +860,11 @@ const staticTooltip = {
   "tooltip-black": "border border-foreground bg-popover-foreground text-popover-foreground"
 };
 const dynamicTooltip = [
-  [/^tooltip(?:-(\S+))?$/, ([, c = "gray"]) => `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`]
+  [/^tooltip-(.*)$/, ([, c], { theme }) => {
+    const color = utils.parseColor(c, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`;
+  }]
 ];
 const tooltip = [
   ...dynamicTooltip,

package/dist/shortcuts.mjs

@@ -1,4 +1,5 @@
 import { parseColor } from '@unocss/preset-mini/utils';
+import { parseColor as parseColor$1 } from '@unocss/preset-mini';
 
 const staticAccordion = {
   // config
@@ -133,11 +134,11 @@ const staticBreadcrumb = {
   "breadcrumb-elipsis-icon": "i-radix-icons-dots-horizontal",
   // components
   "breadcrumb-root": "",
-  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted gap-0.5",
-  "breadcrumb-link": "transition-colors font-normal btn-square",
-  "breadcrumb-item": "inline-flex items-center",
+  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted",
+  "breadcrumb-link": "transition-colors font-normal",
+  "breadcrumb-item": "inline-flex items-center gap-1.5",
   // TODO
-  "breadcrumb-ellipsis": "flex h-9 w-9 items-center justify-center"
+  "breadcrumb-ellipsis": "flex items-center justify-center"
 };
 const dynamicBreadcrumb = [
   // states
@@ -161,7 +162,7 @@ const staticBtn = {
   "btn-loading-icon": "i-loading",
   "btn-default-radius": "rounded-md",
   // base
-  "btn": "btn-rectangle px-0.7142857142857143em py-0.42857142857142855em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.42857142857142855em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
+  "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 cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
@@ -329,7 +330,7 @@ const staticGeneral = {
   "text-inverted": "text-$c-background",
   "text-muted": "text-$c-muted-foreground",
   "text-accent": "text-$c-accent-foreground",
-  "text-accent-forground": "text-$c-accent",
+  "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",
@@ -364,7 +365,9 @@ const staticGeneral = {
   "i-dot": "i-tabler-circle-filled",
   "i-check": "i-lucide-check",
   // transition
-  "transition-base": "transition-all duration-100 ease-out"
+  "transition-base": "transition-all duration-100 ease-out",
+  // overrides
+  "square-false": ""
 };
 const dynamicGeneral = [
   // TODO: una-text-<color><-number><-number>
@@ -427,7 +430,7 @@ const staticInput = {
   "input-leading-padding": "pl-2.9em",
   "input-trailing-padding": "pr-2.9em",
   // base
-  "input": "text-0.875em leading-6 px-0.8571428571428571em py-0.42857142857142855em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
+  "input": "text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
   "input-disabled": "disabled:(n-disabled)",
   "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
   "input-status-icon-base": "text-1.042em",
@@ -751,37 +754,38 @@ const slider = [
 
 const staticSwitch = {
   // base
-  "switch": "switch-primary bg-transparent relative inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-full",
-  "switch-disabled": "n-disabled",
-  "switch-focus": "focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-base focus:ring-brand",
-  // inset
-  "switch-inset": "h-1.5em w-2.75em",
-  "switch-track-inset": "h-1.5em w-2.75em",
-  // outset
-  "switch-outset": "h-1.25em w-2.5em",
-  "switch-track-outset": "h-1em w-2.25em",
+  "switch": "bg-brand switch-focus h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm",
+  "switch-disabled": "data-[disabled]:n-disabled",
+  "switch-focus": "focus-visible:ring-brand focus-visible:ring-offset-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
   // thumb
-  "switch-thumb": "flex items-center justify-center h-1.25em w-1.25em absolute bg-base pointer-events-none inline-block transform rounded-full shadow transition-base",
-  "switch-thumb-on": "translate-x-1.25em",
-  "switch-thumb-off": "translate-x-0",
-  // track
-  "switch-track": "pointer-events-none absolute mx-auto rounded-full transition-base",
-  "switch-track-on": "bg-brand",
-  "switch-track-off": "bg-$c-gray-200",
+  "switch-thumb": "square-1em flex items-center justify-center absolute pointer-events-none block border border-base rounded-full bg-base shadow-lg ring-0 transition-transform",
+  "switch-thumb-checked": "translate-x-1.01em",
+  "switch-thumb-unchecked": "translate-x-0.03em",
   // icon
-  "switch-icon-base": "text-0.8em",
-  "switch-icon-off": "text-muted",
-  "switch-icon-on": "text-muted",
+  "switch-icon": "text-0.7em",
+  "switch-icon-unchecked": "text-muted",
+  "switch-icon-checked": "text-muted",
   // loading
-  "switch-loading-icon": "i-loading",
-  "switch-loading": "text-gray animate-spin text-0.8em"
+  "switch-loading-icon": "text-gray animate-spin text-0.8em",
+  "switch-loading-icon-name": "i-loading"
 };
 const dynamicSwitch = [
-  [/^switch-(.*)$/, ([, body], { theme }) => {
-    const color = parseColor(body, theme);
-    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
-      return `n-${body}-600 dark:n-${body}-500`;
-  }]
+  [
+    /^switch-checked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "primary"], { theme }) => {
+      const parsedColor = parseColor$1(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=checked]:n-${color}-600 dark:data-[state=checked]:n-${color}-500`;
+    }
+  ],
+  [
+    /^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "primary"], { theme }) => {
+      const parsedColor = parseColor$1(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=unchecked]:n-${color}-200 dark:data-[state=unchecked]:n-${color}-700/58`;
+    }
+  ]
 ];
 const _switch = [
   ...dynamicSwitch,
@@ -854,7 +858,11 @@ const staticTooltip = {
   "tooltip-black": "border border-foreground bg-popover-foreground text-popover-foreground"
 };
 const dynamicTooltip = [
-  [/^tooltip(?:-(\S+))?$/, ([, c = "gray"]) => `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`]
+  [/^tooltip-(.*)$/, ([, c], { theme }) => {
+    const color = parseColor(c, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`;
+  }]
 ];
 const tooltip = [
   ...dynamicTooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.23.0-beta.1",
+  "version": "0.25.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.62.4",
-    "@unocss/preset-mini": "^0.62.4",
-    "unocss": "^0.62.4"
+    "@unocss/core": "^0.63.1",
+    "@unocss/preset-mini": "^0.63.1",
+    "unocss": "^0.63.1"
   },
   "scripts": {
     "build": "unbuild",