@una-ui/preset 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { fonts } from '@unocss/preset-mini/rules';
 import { handler, parseColor } from '@unocss/preset-mini/utils';
 import { colors } from '@unocss/preset-wind4/colors';
-import { s as shortcuts } from './shared/preset.CWR84hRp.mjs';
+import { s as shortcuts } from './shared/preset.21f-DOMW.mjs';
 import '@unocss/preset-mini';
 
 function presetUna(options = {

package/dist/prefixes.mjs

@@ -127,6 +127,10 @@ const prefixes = [
   "pagination-list-item",
   "pagination-next",
   "pagination-prev",
+  "pin-input",
+  "pin-input-group",
+  "pin-input-separator",
+  "pin-input-slot",
   "popover",
   "popover-content",
   "progress",
@@ -189,6 +193,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",
@@ -221,6 +235,8 @@ const prefixes = [
   "toggle",
   "toggle-off",
   "toggle-on",
+  "toggle-group",
+  "toggle-group-item",
   "tooltip",
   "tooltip-content",
   "tooltip-provider",

package/dist/shared/{preset.CWR84hRp.mjs → preset.21f-DOMW.mjs}

@@ -232,7 +232,7 @@ const staticBtn = {
   "btn-text": "btn-text-primary",
   "btn-text-gray": "hover:text-secondary-foreground text-secondary-foreground/90 btn-focus",
   "btn-text-black": "hover:text-foreground text-foreground/90 btn-focus",
-  "btn-text-muted": "hover:text-foreground text-foreground/90 btn-focus",
+  "btn-text-muted": "hover:text-muted-foreground text-muted-foreground/90 btn-focus",
   "btn-text-accent": "hover:text-accent-foreground text-accent-foreground/90 btn-focus",
   "btn-soft-primary": "bg-primary/10 text-primary shadow-xs hover:bg-primary/15 btn-focus",
   "btn-soft": "btn-soft-primary",
@@ -323,7 +323,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
@@ -353,7 +353,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-foreground font-medium",
-  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover-foreground 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-foreground 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"
 };
@@ -369,7 +369,7 @@ const staticDialog = {
   // base
   "dialog": "",
   // sub-components
-  "dialog-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",
+  "dialog-overlay": "fixed inset-0 z-50 bg-black/80",
   "dialog-content": "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-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-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
@@ -390,7 +390,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",
@@ -501,13 +501,13 @@ const formGroup = [
 ];
 
 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-warning": "i-lucide-triangle-alert",
+  "i-error": "i-lucide-circle-alert",
+  "i-success": "i-lucide-circle-check-big",
+  "i-info": "i-lucide-info",
+  "i-loading": "i-lucide-loader",
+  "i-close": "i-lucide-x",
+  "i-check": "i-lucide-check",
   "i-dot": "i-tabler-circle-filled"
 };
 
@@ -544,7 +544,7 @@ const staticHoverCard = {
   "hover-card-default-variant": "outline-gray",
   // components
   "hover-card-trigger": "",
-  "hover-card-content": "bg-background text-popover-foreground 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-none",
+  "hover-card-content": "bg-background text-popover-foreground animate-in fade-in-0 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-none",
   "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-background stroke-border",
   // static variants
   "hover-card-soft-gray": "bg-muted border border-border",
@@ -607,7 +607,7 @@ const staticInput = {
   "input-leading-padding": "pl-2.5714285714285716em",
   "input-trailing-padding": "pr-2.5714285714285716em",
   // base
-  "input": "text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground text-0.875em leading-1.4285714285714286em px-0.8571428571428571em bg-transparent w-full focus-visible:outline-none input-disabled placeholder:text-muted-foreground block rounded-md transition-colors file:border-0  file:bg-transparent file:text-0.875em file:font-medium",
+  "input": "text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground text-0.875em leading-1.4285714285714286em px-0.8571428571428571em bg-transparent w-full focus-visible:outline-none input-disabled block rounded-md transition-colors file:text-foreground file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
   "input-input": "h-2.5714285714285716em py-0.2857142857142857em",
   // role='input'
   "input-textarea": "min-h-4.285714285714286em py-0.5714285714em",
@@ -632,7 +632,7 @@ const staticInput = {
 };
 const dynamicInput = [
   // config
-  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-400 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-800/50`],
+  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-400 dark:focus-visible:border-${c}-500 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-500/50`],
   [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder:text-${c}-500 dark:placeholder:text-${c}-400`],
   // variants
   [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs border bg-transparent dark:bg-input/30 border-input input-focus-${c}`],
@@ -690,7 +690,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 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-background",
   "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-foreground shadow md:w-[--reka-navigation-menu-viewport-width]",
@@ -773,8 +773,32 @@ const pagination = [
   staticPagination
 ];
 
+const staticPinInput = {
+  // configurations
+  "pin-input": "flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed",
+  "pin-input-separator-icon": "i-lucide-minus",
+  // components
+  "pin-input-slot": "relative flex square-2.5714285714285716em items-center justify-center shadow-xs border-y border-r first:rounded-l-md first:border-l last:rounded-r-md text-0.875em leading-1.4285714285714286em transition-all outline-none text-center",
+  "pin-input-group": "flex items-center",
+  "pin-input-separator": "grid",
+  "pin-input-solid-primary": "shadow-xs bg-transparent dark:bg-input/30 border border-ring pin-input-focus",
+  "pin-input-solid": "pin-input-solid-primary",
+  "pin-input-focus-primary": "focus:ring-3px focus:border focus:border-ring focus:ring-ring/50",
+  "pin-input-focus": "pin-input-focus-primary"
+};
+const dynamicPinInput = [
+  [/^pin-input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-3px focus:border focus:border-${c}-400 dark:focus:border-${c}-500 focus:ring-${c}-400/50 dark:focus:ring-${c}-500/50 focus:z-10`],
+  // dynamic preset
+  [/^pin-input-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-input pin-input-focus-${c}`],
+  [/^pin-input-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-${c}-500 dark:border-${c}-400 pin-input-focus-${c}`]
+];
+const pinInput = [
+  ...dynamicPinInput,
+  staticPinInput
+];
+
 const staticPopover = {
-  "popover-content": "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground 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-border bg-popover p-4 text-popover-foreground 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
@@ -909,7 +933,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-border bg-popover text-popover-foreground 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-border bg-popover text-popover-foreground 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",
@@ -980,9 +1004,9 @@ const staticSheet = {
   // base
   "sheet": "",
   // sub components
-  "sheet-content": "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "sheet-content": "bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition 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-foreground",
   "sheet-footer": "mt-auto flex flex-col gap-2 p-4",
@@ -1097,6 +1121,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-foreground 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-foreground group-data-[state=completed]:text-foreground",
+  "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-foreground text-wrap text-sm",
+  "stepper-container": "relative",
+  "stepper-container-horizontal": "flex justify-center",
+  // static variants
+  "stepper-solid-black": "group-data-[state=active]:bg-foreground group-data-[state=completed]:bg-foreground focus-visible:ring-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-xs transition-colors",
@@ -1154,7 +1210,9 @@ const staticTable = {
   // table-empty
   "table-empty-row": "",
   "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted-foreground bg-background",
-  "table-empty": "flex items-center justify-center py-10",
+  "table-empty": "flex items-center flex-col justify-center py-10 gap-4",
+  "table-empty-text": "text-center text-wrap",
+  "table-empty-icon-name": "i-tabler-database-x size-2xl",
   // table-loading
   "table-loading-icon": "animate-spin text-lg",
   // TODO: to add
@@ -1236,8 +1294,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-border bg-popover text-popover-foreground",
   "tooltip-black": "border border-foreground bg-popover-foreground text-popover"
 };
@@ -1284,6 +1356,7 @@ const shortcuts = [
   ...popover,
   ...tooltip,
   ...pagination,
+  ...pinInput,
   ...toast,
   ...toggle,
   ...collapsible,
@@ -1299,7 +1372,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.CWR84hRp.mjs';
+export { s as shortcuts } from './shared/preset.21f-DOMW.mjs';
 import '@unocss/preset-mini/utils';
 import '@unocss/preset-mini';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "The default preset for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -45,10 +45,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/core": "^66.2.0",
-    "@unocss/preset-mini": "^66.2.0",
-    "@unocss/preset-wind4": "^66.2.0",
-    "unocss": "^66.2.0"
+    "@unocss/core": "^66.5.1",
+    "@unocss/preset-mini": "^66.5.1",
+    "@unocss/preset-uno": "^66.5.1",
+    "@unocss/preset-wind4": "^66.4.2",
+    "unocss": "^66.5.1"
   },
   "scripts": {
     "build": "unbuild",

package/una.css

@@ -1,7 +1,6 @@
-@import url(@unocss/reset/tailwind.css);
 html {
   font-size: var(--una-font-size, 16px);
-  @apply font-sans antialiased text-foreground bg-background;
+  --at-apply: font-sans antialiased text-foreground bg-background;
 }
 
 * {