@una-ui/preset 0.63.0 → 0.64.0

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { colors } from '@unocss/preset-mini/colors';
 import { fonts } from '@unocss/preset-mini/rules';
 import { handler, parseColor } from '@unocss/preset-mini/utils';
 import { mergeDeep } from 'unocss';
-import { s as shortcuts } from './shared/preset.DyKk7HOF.mjs';
+import { s as shortcuts } from './shared/preset.P-f9H-jq.mjs';
 
 function presetUna(options = {
   // TODO: add options

package/dist/prefixes.mjs

@@ -187,6 +187,16 @@ const prefixes = [
   "skeleton",
   "slider",
   "square",
+  "stepper",
+  "stepper-container",
+  "stepper-description",
+  "stepper-header",
+  "stepper-indicator",
+  "stepper-item",
+  "stepper-separator",
+  "stepper-title",
+  "stepper-trigger",
+  "stepper-wrapper",
   "switch",
   "switch-checked",
   "switch-unchecked",
@@ -219,6 +229,8 @@ const prefixes = [
   "toggle",
   "toggle-off",
   "toggle-on",
+  "toggle-group",
+  "toggle-group-item",
   "tooltip",
   "tooltip-content",
   "tooltip-provider",

package/dist/shared/{preset.DyKk7HOF.mjs → preset.P-f9H-jq.mjs}

@@ -295,7 +295,7 @@ const checkbox = [
 ];
 
 const staticCollapsible = {
-  "collapsible-content": "overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+  "collapsible-content": "overflow-hidden transition-all"
 };
 const dynamicCollapsible = [
   // dynamic preset
@@ -325,7 +325,7 @@ const staticCombobox = {
   "combobox-empty": "py-1.7142857142857142em text-center text-1em leading-1.4285714285714286em",
   "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
   "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted font-medium px-2",
-  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover overflow-hidden 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",
+  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover overflow-hidden shadow-md outline-none  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",
   "combobox-separator": "bg-border -mx-1 h-px",
   "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
 };
@@ -362,7 +362,7 @@ const dialog = [
 const staticDrawer = {
   // base
   "drawer": "",
-  "drawer-overlay": "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+  "drawer-overlay": "fixed inset-0 z-50 bg-black/80",
   "drawer-content": "bg-background fixed z-50 flex h-auto flex-col",
   "drawer-content-top": "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
   "drawer-content-bottom": "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
@@ -391,7 +391,7 @@ 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",
+  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md 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-item
   "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0 select-none",
   "dropdown-menu-item-leading": "",
@@ -410,7 +410,7 @@ const staticDropdownMenu = {
   "dropdown-menu-sub-trigger-leading": "",
   "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75",
   "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"
+  "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-[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 dynamicDropdownMenu = [
   [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
@@ -543,7 +543,7 @@ const staticHoverCard = {
   "hover-card-default-variant": "outline-gray",
   // components
   "hover-card-trigger": "",
-  "hover-card-content": "bg-base text-popover animate-in fade-in-0 zoom-in-95 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 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
+  "hover-card-content": "bg-base text-popover zoom-in-95 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden 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",
   "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-base stroke-base",
   // static variants
   "hover-card-soft-gray": "bg-muted border border-base",
@@ -683,7 +683,7 @@ const staticNavigationMenu = {
   "navigation-menu": "relative z-10 flex max-w-max flex-1 items-center justify-center",
   "navigation-menu-disabled": "n-disabled",
   // components
-  "navigation-menu-indicator": "absolute data-[state=hidden]:opacity-0 duration-200 top-full data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt--3px z-100 flex h-10px items-end justify-center overflow-hidden transition-all",
+  "navigation-menu-indicator": "absolute data-[state=hidden]:opacity-0 duration-200 top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt--3px z-100 flex h-10px items-end justify-center overflow-hidden transition-all",
   "navigation-menu-indicator-arrow": "relative top-70% h-12px w-12px rotate-45deg border bg-base",
   "navigation-menu-content": "left-0 top-0 w-full md:absolute md:w-auto",
   "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover shadow md:w-[--reka-navigation-menu-viewport-width]",
@@ -787,7 +787,7 @@ const pinInput = [
 ];
 
 const staticPopover = {
-  "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"
+  "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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
@@ -911,7 +911,7 @@ const staticSelect = {
   "select-trigger-trailing": "size-1.1428571428571428em 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) rtl:mr-auto ltr:ml-auto",
   "select-trigger-leading": "size-1.1428571428571428em",
   "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",
-  "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",
+  "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-[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",
   "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",
   "select-group": "w-full",
   "select-separator": "-mx-1 my-1 h-px bg-muted",
@@ -982,9 +982,9 @@ const staticSheet = {
   // base
   "sheet": "",
   // sub components
-  "sheet-content": "fixed z-50 gap-4 bg-base p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "sheet-content": "fixed z-50 gap-4 bg-base p-6 shadow-lg transition animate-in fade-in-0 ease-in-out ",
   "sheet-portal": "",
-  "sheet-overlay": "fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+  "sheet-overlay": "fixed inset-0 z-50 bg-black/80",
   "sheet-close": "absolute right-4 top-4",
   "sheet-description": "text-sm text-muted",
   "sheet-footer": "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
@@ -1102,6 +1102,38 @@ const slider = [
   staticSlider
 ];
 
+const staticStepper = {
+  // configurations
+  "stepper": "flex gap-4",
+  "stepper-horizontal": "flex-col",
+  // components
+  "stepper-wrapper": "flex",
+  "stepper-wrapper-vertical": "flex-col gap-6",
+  "stepper-item": "text-center relative w-full data-[disabled]:pointer-events-none",
+  "stepper-item-vertical": "flex text-start gap-2.5",
+  "stepper-trigger": "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "stepper-header": "flex flex-col",
+  "stepper-header-horizontal": "mt-2.5",
+  "stepper-indicator": "inline-flex items-center justify-center rounded-full square-2.25em text-foreground/50 bg-muted group-data-[state=active]:text-inverted group-data-[state=completed]:text-inverted",
+  "stepper-separator": "bg-muted group-data-[disabled]:bg-muted group-data-[state=active]:!bg-muted group-data-[disabled]:opacity-50 absolute rounded-full group-data-[disabled]:opacity-75",
+  "stepper-separator-horizontal": "top-[calc(50%-2px)] h-0.5 start-[calc(50%+1.5em)] end-[calc(-50%+1.5em)]",
+  "stepper-separator-vertical": "start-[calc(50%-1px)] bottom-[calc(50%-2.8em)] w-0.5 top-[calc(50%+1em)]",
+  "stepper-title": "text-md font-semibold whitespace-nowrap",
+  "stepper-description": "text-muted text-wrap text-sm",
+  "stepper-container": "relative",
+  "stepper-container-horizontal": "flex justify-center",
+  // static variants
+  "stepper-solid-black": "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted focus-visible:ring-$c-foreground"
+};
+const dynamicStepper = [
+  // dynamic presets
+  [/^stepper-solid(-(\S+))?$/, ([, , c = "primary"]) => `group-data-[state=completed]:bg-${c}-600 group-data-[state=active]:bg-${c}-600 focus-visible:ring-${c}-600 dark:(group-data-[state=completed]:bg-${c}-500 group-data-[state=active]:bg-${c}-500 focus-visible:ring-${c}-500)`]
+];
+const stepper = [
+  ...dynamicStepper,
+  staticStepper
+];
+
 const staticSwitch = {
   // base
   "switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm transition-colors",
@@ -1240,8 +1272,22 @@ const toggle = [
   staticToggle
 ];
 
+const staticToggleGroup = {
+  // configurations
+  "toggle-group": "flex gap-1 flex-wrap w-fit rounded-md",
+  "toggle-group-horizontal": "flex-row items-center",
+  "toggle-group-vertical": "flex-col items-start",
+  // components
+  "toggle-group-item": ""
+};
+const dynamicToggleGroup = [];
+const toggleGroup = [
+  staticToggleGroup,
+  ...dynamicToggleGroup
+];
+
 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-content": "z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md 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",
   "tooltip-black": "border border-foreground bg-popover-foreground text-popover-foreground"
 };
@@ -1304,7 +1350,9 @@ const shortcuts = [
   ...alertDialog,
   ...combobox,
   ...drawer,
-  ...hoverCard
+  ...hoverCard,
+  ...stepper,
+  ...toggleGroup
 ];
 
 export { shortcuts as s };

package/dist/shortcuts.mjs

@@ -1,3 +1,3 @@
-export { s as shortcuts } from './shared/preset.DyKk7HOF.mjs';
+export { s as shortcuts } from './shared/preset.P-f9H-jq.mjs';
 import '@unocss/preset-mini/utils';
 import '@unocss/preset-mini';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "The default preset for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -45,9 +45,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/core": "^66.0.0",
-    "@unocss/preset-mini": "^66.0.0",
-    "unocss": "^66.0.0"
+    "@unocss/core": "^66.4.2",
+    "@unocss/preset-mini": "^66.4.2",
+    "unocss": "^66.4.2"
   },
   "scripts": {
     "build": "unbuild",