@una-ui/preset 0.28.0-beta.1 → 0.30.0-beta.1

package/dist/index.cjs

@@ -17,10 +17,15 @@ function presetUna(options = {
     theme: unocss.mergeDeep(presetMini.theme, {
       container: {
         center: true,
-        padding: "2rem"
+        padding: "2rem",
+        maxWidth: {
+          "2xl": "1400px"
+        }
       },
       colors: {
-        brand: "rgba(var(--c-brand),%alpha)",
+        background: "rgba(var(--una-background) / <alpha-value>)",
+        foreground: "rgba(var(--una-foreground) / <alpha-value>)",
+        brand: "rgba(var(--una-brand) / <alpha-value>)",
         primary: {
           DEFAULT: "rgba(var(--una-primary) / <alpha-value>)",
           active: "rgba(var(--una-primary-active) / <alpha-value>)",
@@ -82,7 +87,7 @@ function presetUna(options = {
         const color = utils.parseColor(body, theme);
         if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components) {
           return {
-            "--c-brand": `${color.cssColor.components.join(",")}`
+            "--una-brand": `${color.cssColor.components.join(",")}`
           };
         }
       }],
@@ -120,6 +125,9 @@ function presetUna(options = {
             border-radius: 0.25rem; /* 1 */
             outline-offset: 0.10rem; /* 1 */
           }
+          button, input, optgroup, select, textarea  {
+            background-color: transparent; /* 1 */
+          }
         `
       }
     ]

package/dist/index.mjs

@@ -15,10 +15,15 @@ function presetUna(options = {
     theme: mergeDeep(theme, {
       container: {
         center: true,
-        padding: "2rem"
+        padding: "2rem",
+        maxWidth: {
+          "2xl": "1400px"
+        }
       },
       colors: {
-        brand: "rgba(var(--c-brand),%alpha)",
+        background: "rgba(var(--una-background) / <alpha-value>)",
+        foreground: "rgba(var(--una-foreground) / <alpha-value>)",
+        brand: "rgba(var(--una-brand) / <alpha-value>)",
         primary: {
           DEFAULT: "rgba(var(--una-primary) / <alpha-value>)",
           active: "rgba(var(--una-primary-active) / <alpha-value>)",
@@ -80,7 +85,7 @@ function presetUna(options = {
         const color = parseColor(body, theme);
         if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components) {
           return {
-            "--c-brand": `${color.cssColor.components.join(",")}`
+            "--una-brand": `${color.cssColor.components.join(",")}`
           };
         }
       }],
@@ -118,6 +123,9 @@ function presetUna(options = {
             border-radius: 0.25rem; /* 1 */
             outline-offset: 0.10rem; /* 1 */
           }
+          button, input, optgroup, select, textarea  {
+            background-color: transparent; /* 1 */
+          }
         `
       }
     ]

package/dist/prefixes.cjs

@@ -4,7 +4,9 @@ const prefixes = [
   "accordion",
   "alert",
   "avatar",
+  "avatar-fallback",
   "avatar-group",
+  "avatar-image",
   "badge",
   "breadcrumb",
   "breadcrumb-active",
@@ -72,6 +74,8 @@ const prefixes = [
   "popover-content",
   "progress",
   "radio",
+  "radio-group",
+  "radio-group-item",
   "resize",
   "rounded",
   "select",

package/dist/prefixes.mjs

@@ -2,7 +2,9 @@ const prefixes = [
   "accordion",
   "alert",
   "avatar",
+  "avatar-fallback",
   "avatar-group",
+  "avatar-image",
   "badge",
   "breadcrumb",
   "breadcrumb-active",
@@ -70,6 +72,8 @@ const prefixes = [
   "popover-content",
   "progress",
   "radio",
+  "radio-group",
+  "radio-group-item",
   "resize",
   "rounded",
   "select",

package/dist/shortcuts.cjs

@@ -65,16 +65,12 @@ const alert = [
 ];
 
 const staticAvatar = {
-  // config
-  "avatar-default-variant": "avatar-solid",
-  "avatar-fallback-icon": "i-heroicons-user-20-solid",
   // base
-  "avatar": "relative font-medium leading-none h-2.5em w-2.5em inline-flex items-center justify-center rounded-full overflow-hidden",
+  "avatar": "relative flex shrink-0 overflow-hidden leading-1.5em",
+  "avatar-image": "aspect-square h-full w-full",
+  "avatar-fallback": "flex h-full w-full items-center justify-center",
   "avatar-label": "",
-  "avatar-fallback": "",
-  "avatar-fallback-icon-base": "text-1.5em",
-  "avatar-src": "w-full h-full",
-  "avatar-icon-base": "text-1.2em",
+  "avatar-icon": "text-1em",
   // variants
   "avatar-solid-white": "bg-base text-base ring-1 ring-base",
   "avatar-solid-black": "bg-inverted text-inverted"
@@ -109,7 +105,7 @@ const staticBadge = {
   // base
   "badge": "text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand",
   "badge-icon-base": "text-1em",
-  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20",
+  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20 bg-transparent",
   "badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
   // variants
   "badge-soft-gray": "bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
@@ -167,10 +163,10 @@ const staticBtn = {
   "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",
-  "btn-leading": "-ml-0.14285714285714285em text-1.191em",
-  "btn-trailing": "-mr-0.14285714285714285em text-1.191em",
-  "btn-loading": "animate-spin text-1.191em",
+  "btn-icon-label": "text-1em",
+  "btn-leading": "-ml-0.14285714285714285em text-1em",
+  "btn-trailing": "-mr-0.14285714285714285em text-1em",
+  "btn-loading": "animate-spin text-1em",
   "btn-rectangle": "h-2.5em",
   "btn-square": "w-2.5em h-2.5em",
   // options
@@ -279,9 +275,9 @@ 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-overlay": "fixed inset-0 z-50 bg-black/80",
+  "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 sm:rounded-lg",
+  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80",
   "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",
@@ -306,11 +302,11 @@ const staticDropdownMenu = {
   "dropdown-menu-trigger-leading": "",
   "dropdown-menu-trigger-trailing": "ml-auto",
   // dropdown-menu-content
-  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 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",
+  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md",
   // dropdown-menu-item
   "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0",
-  "dropdown-menu-item-leading": "opacity-75 text-1.1em",
-  "dropdown-menu-item-trailing": "ml-auto opacity-75 text-1.1em",
+  "dropdown-menu-item-leading": "text-1em",
+  "dropdown-menu-item-trailing": "ml-auto opacity-75 text-1em",
   // dropdown-menu-label
   "dropdown-menu-label": "px-2 py-1.5 text-1em font-semibold",
   // dropdown-menu-separator
@@ -322,9 +318,10 @@ const staticDropdownMenu = {
   "dropdown-menu-group": "",
   // dropdown-menu-sub
   "dropdown-menu-sub-trigger": "transition-color focus-visible:outline-0",
-  "dropdown-menu-sub-trigger-leading": "opacity-75 text-1.1em",
-  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1.1em",
-  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg 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"
+  "dropdown-menu-sub-trigger-leading": "text-1em",
+  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1em",
+  "dropdown-menu-sub-trigger-trailing-icon": "i-lucide-chevron-right",
+  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg"
 };
 const dynamicDropdownMenu = [
   [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
@@ -361,6 +358,17 @@ const formGroup = [
   staticFormGroup
 ];
 
+const staticIcons = {
+  "i-loading": "i-tabler-loader-2",
+  "i-warning": "i-tabler-alert-triangle-filled",
+  "i-error": "i-tabler-exclamation-circle-filled",
+  "i-success": "i-tabler-circle-check-filled",
+  "i-info": "i-tabler-info-circle-filled",
+  "i-close": "i-tabler-x",
+  "i-check": "i-tabler-check",
+  "i-dot": "i-tabler-circle-filled"
+};
+
 const staticGeneral = {
   // text-size
   "text-md": "text-1rem leading-1.5rem",
@@ -379,9 +387,7 @@ const staticGeneral = {
   "text-warning": "text-warning-600 dark:text-warning-500",
   // ring
   "ring-base": "ring-$c-ring",
-  "ring-inverted": "ring-$c-ring-foreground",
   "ring-offset-base": "ring-offset-$c-background",
-  "ring-offset-inverted": "ring-offset-$c-bg-foreground",
   // border
   "border-base": "border-$c-border",
   "border-foreground": "border-$c-border-foreground",
@@ -395,15 +401,6 @@ const staticGeneral = {
   "bg-accent-foreground": "bg-$c-accent-foreground",
   "bg-popover": "bg-$c-popover",
   "bg-popover-foreground": "bg-$c-popover-foreground",
-  // icon
-  "i-loading": "i-tabler-loader-2",
-  "i-warning": "i-heroicons-exclamation-triangle-20-solid",
-  "i-error": "i-heroicons-exclamation-circle-20-solid",
-  "i-success": "i-heroicons-check-circle-20-solid",
-  "i-info": "i-heroicons-information-circle-20-solid",
-  "i-close": "i-heroicons-x-mark-20-solid",
-  "i-dot": "i-tabler-circle-filled",
-  "i-check": "i-lucide-check",
   // transition
   "transition-base": "transition-all duration-100 ease-out",
   // overrides
@@ -421,7 +418,8 @@ const dynamicGeneral = [
 ];
 const general = [
   ...dynamicGeneral,
-  staticGeneral
+  staticGeneral,
+  staticIcons
 ];
 
 const staticIcon = {
@@ -471,6 +469,10 @@ const staticInput = {
   "input-trailing-padding": "pr-2.9em",
   // base
   "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-input": "h-9",
+  // role='input'
+  "input-textarea": "",
+  // role='textarea'
   "input-disabled": "disabled:(n-disabled)",
   "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
   "input-status-icon-base": "text-1.042em",
@@ -674,6 +676,31 @@ const radio = [
   staticRadio
 ];
 
+const staticRadioGroup = {
+  // configurations
+  "radio-group": "gap-2 flex flex-nowrap",
+  "radio-group-orientation-vertical": "flex-col",
+  "radio-group-orientation-horizontal": "flex-row",
+  // components
+  "radio-group-item-wrapper": "flex items-center space-x-2",
+  "radio-group-item": "aspect-square rounded-full border border-brand text-brand shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-base disabled:n-disabled",
+  "radio-group-indicator": "flex items-center justify-center",
+  "radio-group-indicator-icon-base": "h-0.875em w-0.875em fill-brand",
+  "radio-group-indicator-icon": "i-dot",
+  "radio-group-item-label": ""
+};
+const dynamicRadioGroup = [
+  [/^radio-group-(.*)$/, ([, 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`;
+  }]
+];
+const radioGroup = [
+  ...dynamicRadioGroup,
+  staticRadioGroup
+];
+
 const staticSelect = {
   // configurations
   "select": "",
@@ -689,7 +716,7 @@ const staticSelect = {
   "select-trigger": "w-full",
   // [&>span]:line-clamp-1
   "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
-  "select-trigger-trailing": "ml-auto n-disabled",
+  "select-trigger-trailing": "ml-auto",
   "select-trigger-leading": "",
   "select-value": "h-1.5em",
   "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",
@@ -767,17 +794,17 @@ const skeleton = [
 
 const staticSlider = {
   // configurations
-  "slider": "slider-primary",
   "slider-disabled": "n-disabled",
   "slider-root-vertical": "flex-col w-1em h-full",
   "slider-track-vertical": "w-0.5em h-full",
   "slider-range-vertical": "w-full",
   "slider-thumb-vertical": "w-1.25em h-1.25em",
   // components
-  "slider-root": "slider relative flex w-full touch-none select-none items-center",
+  "slider-root": "relative flex w-full touch-none select-none items-center",
   "slider-track": "h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted",
   "slider-range": "absolute h-full bg-brand",
-  "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+  "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:slider-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "slider-accent": "n-gray-300 dark:n-gray-800"
 };
 const dynamicSlider = [
   [/^slider-(.*)$/, ([, body], { theme }) => {
@@ -819,7 +846,7 @@ const dynamicSwitch = [
   ],
   [
     /^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
-    ([, color = "primary"], { theme }) => {
+    ([, color = "gray"], { 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`;
@@ -965,7 +992,8 @@ const shortcuts = [
   ...tooltip,
   ...pagination,
   ...toggle,
-  ...collapsible
+  ...collapsible,
+  ...radioGroup
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -63,16 +63,12 @@ const alert = [
 ];
 
 const staticAvatar = {
-  // config
-  "avatar-default-variant": "avatar-solid",
-  "avatar-fallback-icon": "i-heroicons-user-20-solid",
   // base
-  "avatar": "relative font-medium leading-none h-2.5em w-2.5em inline-flex items-center justify-center rounded-full overflow-hidden",
+  "avatar": "relative flex shrink-0 overflow-hidden leading-1.5em",
+  "avatar-image": "aspect-square h-full w-full",
+  "avatar-fallback": "flex h-full w-full items-center justify-center",
   "avatar-label": "",
-  "avatar-fallback": "",
-  "avatar-fallback-icon-base": "text-1.5em",
-  "avatar-src": "w-full h-full",
-  "avatar-icon-base": "text-1.2em",
+  "avatar-icon": "text-1em",
   // variants
   "avatar-solid-white": "bg-base text-base ring-1 ring-base",
   "avatar-solid-black": "bg-inverted text-inverted"
@@ -107,7 +103,7 @@ const staticBadge = {
   // base
   "badge": "text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand",
   "badge-icon-base": "text-1em",
-  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20",
+  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20 bg-transparent",
   "badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
   // variants
   "badge-soft-gray": "bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
@@ -165,10 +161,10 @@ const staticBtn = {
   "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",
-  "btn-leading": "-ml-0.14285714285714285em text-1.191em",
-  "btn-trailing": "-mr-0.14285714285714285em text-1.191em",
-  "btn-loading": "animate-spin text-1.191em",
+  "btn-icon-label": "text-1em",
+  "btn-leading": "-ml-0.14285714285714285em text-1em",
+  "btn-trailing": "-mr-0.14285714285714285em text-1em",
+  "btn-loading": "animate-spin text-1em",
   "btn-rectangle": "h-2.5em",
   "btn-square": "w-2.5em h-2.5em",
   // options
@@ -277,9 +273,9 @@ 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-overlay": "fixed inset-0 z-50 bg-black/80",
+  "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 sm:rounded-lg",
+  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80",
   "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",
@@ -304,11 +300,11 @@ const staticDropdownMenu = {
   "dropdown-menu-trigger-leading": "",
   "dropdown-menu-trigger-trailing": "ml-auto",
   // dropdown-menu-content
-  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 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",
+  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md",
   // dropdown-menu-item
   "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0",
-  "dropdown-menu-item-leading": "opacity-75 text-1.1em",
-  "dropdown-menu-item-trailing": "ml-auto opacity-75 text-1.1em",
+  "dropdown-menu-item-leading": "text-1em",
+  "dropdown-menu-item-trailing": "ml-auto opacity-75 text-1em",
   // dropdown-menu-label
   "dropdown-menu-label": "px-2 py-1.5 text-1em font-semibold",
   // dropdown-menu-separator
@@ -320,9 +316,10 @@ const staticDropdownMenu = {
   "dropdown-menu-group": "",
   // dropdown-menu-sub
   "dropdown-menu-sub-trigger": "transition-color focus-visible:outline-0",
-  "dropdown-menu-sub-trigger-leading": "opacity-75 text-1.1em",
-  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1.1em",
-  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg 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"
+  "dropdown-menu-sub-trigger-leading": "text-1em",
+  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1em",
+  "dropdown-menu-sub-trigger-trailing-icon": "i-lucide-chevron-right",
+  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg"
 };
 const dynamicDropdownMenu = [
   [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
@@ -359,6 +356,17 @@ const formGroup = [
   staticFormGroup
 ];
 
+const staticIcons = {
+  "i-loading": "i-tabler-loader-2",
+  "i-warning": "i-tabler-alert-triangle-filled",
+  "i-error": "i-tabler-exclamation-circle-filled",
+  "i-success": "i-tabler-circle-check-filled",
+  "i-info": "i-tabler-info-circle-filled",
+  "i-close": "i-tabler-x",
+  "i-check": "i-tabler-check",
+  "i-dot": "i-tabler-circle-filled"
+};
+
 const staticGeneral = {
   // text-size
   "text-md": "text-1rem leading-1.5rem",
@@ -377,9 +385,7 @@ const staticGeneral = {
   "text-warning": "text-warning-600 dark:text-warning-500",
   // ring
   "ring-base": "ring-$c-ring",
-  "ring-inverted": "ring-$c-ring-foreground",
   "ring-offset-base": "ring-offset-$c-background",
-  "ring-offset-inverted": "ring-offset-$c-bg-foreground",
   // border
   "border-base": "border-$c-border",
   "border-foreground": "border-$c-border-foreground",
@@ -393,15 +399,6 @@ const staticGeneral = {
   "bg-accent-foreground": "bg-$c-accent-foreground",
   "bg-popover": "bg-$c-popover",
   "bg-popover-foreground": "bg-$c-popover-foreground",
-  // icon
-  "i-loading": "i-tabler-loader-2",
-  "i-warning": "i-heroicons-exclamation-triangle-20-solid",
-  "i-error": "i-heroicons-exclamation-circle-20-solid",
-  "i-success": "i-heroicons-check-circle-20-solid",
-  "i-info": "i-heroicons-information-circle-20-solid",
-  "i-close": "i-heroicons-x-mark-20-solid",
-  "i-dot": "i-tabler-circle-filled",
-  "i-check": "i-lucide-check",
   // transition
   "transition-base": "transition-all duration-100 ease-out",
   // overrides
@@ -419,7 +416,8 @@ const dynamicGeneral = [
 ];
 const general = [
   ...dynamicGeneral,
-  staticGeneral
+  staticGeneral,
+  staticIcons
 ];
 
 const staticIcon = {
@@ -469,6 +467,10 @@ const staticInput = {
   "input-trailing-padding": "pr-2.9em",
   // base
   "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-input": "h-9",
+  // role='input'
+  "input-textarea": "",
+  // role='textarea'
   "input-disabled": "disabled:(n-disabled)",
   "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
   "input-status-icon-base": "text-1.042em",
@@ -672,6 +674,31 @@ const radio = [
   staticRadio
 ];
 
+const staticRadioGroup = {
+  // configurations
+  "radio-group": "gap-2 flex flex-nowrap",
+  "radio-group-orientation-vertical": "flex-col",
+  "radio-group-orientation-horizontal": "flex-row",
+  // components
+  "radio-group-item-wrapper": "flex items-center space-x-2",
+  "radio-group-item": "aspect-square rounded-full border border-brand text-brand shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-base disabled:n-disabled",
+  "radio-group-indicator": "flex items-center justify-center",
+  "radio-group-indicator-icon-base": "h-0.875em w-0.875em fill-brand",
+  "radio-group-indicator-icon": "i-dot",
+  "radio-group-item-label": ""
+};
+const dynamicRadioGroup = [
+  [/^radio-group-(.*)$/, ([, 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`;
+  }]
+];
+const radioGroup = [
+  ...dynamicRadioGroup,
+  staticRadioGroup
+];
+
 const staticSelect = {
   // configurations
   "select": "",
@@ -687,7 +714,7 @@ const staticSelect = {
   "select-trigger": "w-full",
   // [&>span]:line-clamp-1
   "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
-  "select-trigger-trailing": "ml-auto n-disabled",
+  "select-trigger-trailing": "ml-auto",
   "select-trigger-leading": "",
   "select-value": "h-1.5em",
   "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",
@@ -765,17 +792,17 @@ const skeleton = [
 
 const staticSlider = {
   // configurations
-  "slider": "slider-primary",
   "slider-disabled": "n-disabled",
   "slider-root-vertical": "flex-col w-1em h-full",
   "slider-track-vertical": "w-0.5em h-full",
   "slider-range-vertical": "w-full",
   "slider-thumb-vertical": "w-1.25em h-1.25em",
   // components
-  "slider-root": "slider relative flex w-full touch-none select-none items-center",
+  "slider-root": "relative flex w-full touch-none select-none items-center",
   "slider-track": "h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted",
   "slider-range": "absolute h-full bg-brand",
-  "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+  "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:slider-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "slider-accent": "n-gray-300 dark:n-gray-800"
 };
 const dynamicSlider = [
   [/^slider-(.*)$/, ([, body], { theme }) => {
@@ -817,7 +844,7 @@ const dynamicSwitch = [
   ],
   [
     /^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
-    ([, color = "primary"], { theme }) => {
+    ([, color = "gray"], { 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`;
@@ -963,7 +990,8 @@ const shortcuts = [
   ...tooltip,
   ...pagination,
   ...toggle,
-  ...collapsible
+  ...collapsible,
+  ...radioGroup
 ];
 
 export { shortcuts };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.28.0-beta.1",
+  "version": "0.30.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.4",
-    "@unocss/preset-mini": "^0.63.4",
-    "unocss": "^0.63.4"
+    "@unocss/core": "^0.64.1",
+    "@unocss/preset-mini": "^0.64.1",
+    "unocss": "^0.64.1"
   },
   "scripts": {
     "build": "unbuild",

package/una.css

@@ -59,18 +59,20 @@
 :root {
   --una-font-size: 16px;
   --una-radius: 0.5rem;
-  --c-brand: rgb(var(--una-primary-600));
+  --una-brand: var(--una-primary-600);
   --una-primary: var(--una-primary-600);
   --una-primary-active: var(--una-primary-500);
   --una-gray: var(--una-gray-600);
   --una-gray-active: var(--una-gray-500);
-  --c-background: rgb(255 255 255);
-  --c-foreground: rgb(var(--una-gray-950));
+  --una-background: 255, 255, 255;
+  --una-foreground: var(--una-gray-950);
+  --c-background: rgb(var(--una-background));
+  --c-foreground: rgb(var(--una-foreground));
   --c-muted: rgb(var(--una-gray-50));
   --c-muted-foreground: rgb(var(--una-gray-500));
   --c-accent: rgb(var(--una-gray-100));
   --c-accent-foreground: rgb(var(--una-gray-800));
-  --c-popover: rgb(255 255 255);
+  --c-popover: rgb(255, 255, 255);
   --c-popover-foreground: rgb(var(--una-gray-950));
   --c-border: rgb(var(--una-gray-200));
   --c-border-foreground: rgba(var(--una-gray-700), .58);
@@ -81,19 +83,21 @@
 }
 
 .dark {
-  --c-brand: rgb(var(--una-primary-500));
+  --una-brand: var(--una-primary-500);
   --una-primary: var(--una-primary-500);
   --una-primary-active: var(--una-primary-400);
   --una-gray: var(--una-gray-500);
   --una-gray-active: var(--una-gray-400);
-  --c-background: rgb(var(--una-gray-950));
-  --c-foreground: rgb(255 255 255);
+  --una-background: var(--una-gray-950);
+  --una-foreground: 255, 255, 255;
+  --c-background: rgb(var(--una-background));
+  --c-foreground: rgb(var(--una-foreground));
   --c-muted: rgb(var(--una-gray-900));
   --c-muted-foreground: rgb(var(--una-gray-400));
   --c-accent: rgb(var(--una-gray-800));
   --c-accent-foreground: rgb(var(--una-gray-100));
   --c-popover: rgb(var(--una-gray-950));
-  --c-popover-foreground: rgb(255 255 255);
+  --c-popover-foreground: rgb(255,255,255);
   --c-border: rgba(var(--una-gray-700), .58);
   --c-border-foreground: rgb(var(--una-gray-200));
   --c-ring: rgba(var(--una-gray-700), .58);