@una-ui/preset 0.38.0-beta.1 → 0.40.0-beta.1

package/dist/index.cjs

@@ -5,7 +5,7 @@ const colors = require('@unocss/preset-mini/colors');
 const rules = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
 const unocss = require('unocss');
-const index = require('./shared/preset.F4kNR6ES.cjs');
+const index = require('./shared/preset.DPKZgAqu.cjs');
 
 function presetUna(options = {
   // TODO: add options

package/dist/index.d.ts

@@ -6,4 +6,4 @@ interface unaUIOptions {
 
 declare function presetUna(options?: unaUIOptions): Preset;
 
-export { presetUna as default };
+export = presetUna;

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { theme } from '@unocss/preset-mini';
 import { colors } from '@unocss/preset-mini/colors';
 import { fonts } from '@unocss/preset-mini/rules';
-import { parseColor, handler } from '@unocss/preset-mini/utils';
+import { handler, parseColor } from '@unocss/preset-mini/utils';
 import { mergeDeep } from 'unocss';
-import { s as shortcuts } from './shared/preset.CkLYnPnw.mjs';
+import { s as shortcuts } from './shared/preset.rfZXnCIa.mjs';
 
 function presetUna(options = {
   // TODO: add options

package/dist/prefixes.cjs

@@ -80,6 +80,8 @@ const prefixes = [
   "radio-group-item",
   "resize",
   "rounded",
+  "scroll-area",
+  "scroll-bar",
   "select",
   "select-content",
   "select-group",
@@ -118,7 +120,6 @@ const prefixes = [
   "table-head",
   "table-header",
   "table-loading",
-  "table-root",
   "table-row",
   "tabs",
   "tabs-content",

package/dist/prefixes.d.ts

@@ -1,3 +1,3 @@
 declare const _default: string[];
 
-export { _default as default };
+export = _default;

package/dist/prefixes.mjs

@@ -78,6 +78,8 @@ const prefixes = [
   "radio-group-item",
   "resize",
   "rounded",
+  "scroll-area",
+  "scroll-bar",
   "select",
   "select-content",
   "select-group",
@@ -116,7 +118,6 @@ const prefixes = [
   "table-head",
   "table-header",
   "table-loading",
-  "table-root",
   "table-row",
   "tabs",
   "tabs-content",

package/dist/shared/{preset.F4kNR6ES.cjs → preset.DPKZgAqu.cjs}

@@ -70,20 +70,20 @@ const alert = [
 
 const staticAvatar = {
   // base
-  "avatar": "relative flex shrink-0 overflow-hidden leading-1.5em",
-  "avatar-image": "aspect-square h-full w-full",
+  "avatar": "relative inline-flex items-center font-normal select-none shrink-0 overflow-hidden",
+  "avatar-image": "h-full w-full object-cover",
   "avatar-fallback": "flex h-full w-full items-center justify-center",
-  "avatar-label": "",
+  "avatar-label": "uppercase",
   "avatar-icon": "text-1em",
   // variants
-  "avatar-solid-white": "bg-base text-base ring-1 ring-base",
+  "avatar-solid-white": "bg-base text-base border border-base",
   "avatar-solid-black": "bg-inverted text-inverted"
 };
 const dynamicAvatar = [
   // variants
   [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
   [/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
-  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 ring-1 ring-${c}-500 dark:ring-${c}-400`]
+  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 border border-${c}-500 dark:border-${c}-400`]
 ];
 const avatar = [
   ...dynamicAvatar,
@@ -217,7 +217,6 @@ const btn = [
 const staticCard = {
   // base
   "card": "rounded-xl shadow text-base",
-  "card-default-variant": "card-outline-gray",
   // components
   "card-header": "flex flex-col gap-y-1.5 p-6",
   "card-title": "font-semibold leading-none tracking-tight",
@@ -425,6 +424,7 @@ const staticGeneral = {
   "bg-base": "bg-$c-background",
   "bg-inverted": "bg-$c-foreground",
   "bg-muted": "bg-$c-muted",
+  "bg-border": "bg-$c-border",
   "bg-accent": "bg-$c-accent",
   "bg-accent-foreground": "bg-$c-accent-foreground",
   "bg-popover": "bg-$c-popover",
@@ -481,7 +481,7 @@ const indicator = [
 
 const staticInput = {
   // config
-  "input-default-variant": "input-outline",
+  "input-default-variant": "input-outline-primary",
   "input-loading-icon": "i-loading",
   "input-info-icon": "i-info",
   "input-error-icon": "i-error",
@@ -490,7 +490,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.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": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
   "input-input": "h-9",
   // role='input'
   "input-textarea": "",
@@ -503,8 +503,8 @@ const staticInput = {
   "input-loading": "animate-spin text-1.042em",
   // wrappers
   "input-wrapper": "relative flex items-center",
-  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
-  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
+  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
+  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-muted",
   // variants
   "input-outline-gray": "focus:ring-2 ring-1",
   "input-outline-black": "ring-1 focus:ring-$c-foreground"
@@ -512,7 +512,7 @@ const staticInput = {
 const dynamicInput = [
   // config
   [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
-  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
+  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-500 dark:placeholder-${c}-400`],
   // variants
   [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
   [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => ` ring-1 input-focus-${c} ring-${c}-500 dark:ring-${c}-400`]
@@ -662,6 +662,32 @@ const radioGroup = [
   staticRadioGroup
 ];
 
+const staticScrollArea = {
+  // configurations
+  "scroll-area": "",
+  "scroll-area-scrollbar-vertical": "h-full w-0.625em border-l border-l-transparent p-0.0625em",
+  "scroll-area-scrollbar-horizontal": "h-0.625em flex-col border-t border-t-transparent p-0.0625em",
+  // components
+  "scroll-area-root": "relative overflow-hidden",
+  "scroll-area-scrollbar": "flex touch-none select-none transition-colors",
+  "scroll-area-viewport": "h-full w-full rounded-inherit",
+  "scroll-area-scrollbar-thumb": "relative flex-1",
+  "scroll-area-gray": "bg-border"
+};
+const dynamicScrollArea = [
+  // dynamic preset
+  [/^scroll-area(-(\S+))?$/, ([, , c], { theme }) => {
+    const parsedColor = presetMini.parseColor(c, theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `bg-${c}-200 dark:bg-${c}-700/58`;
+    return void 0;
+  }]
+];
+const scrollArea = [
+  ...dynamicScrollArea,
+  staticScrollArea
+];
+
 const staticSelect = {
   // configurations
   "select": "",
@@ -697,8 +723,18 @@ const staticSelect = {
   "select-item-selectItem": ""
 };
 const dynamicSelect = [
-  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"]) => `btn-${v}-${c}`],
-  [/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
+  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"], { theme }) => {
+    const parsedColor = presetMini.parseColor(c, theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `btn-${v}-${c}`;
+    return void 0;
+  }],
+  [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
+    const parsedColor = presetMini.parseColor(c || "gray", theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `focus:bg-${c || "gray"}-100 focus:text-${c || "gray"}-800 dark:focus:bg-${c || "gray"}-800 dark:focus:text-${c || "gray"}-100`;
+    return void 0;
+  }]
 ];
 const select = [
   ...dynamicSelect,
@@ -847,10 +883,9 @@ const _switch = [
 const staticTable = {
   // config
   "table-default-variant": "table-solid-gray",
-  "table": "",
   // table-root
-  "table-root-wrapper": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
-  "table-root": "w-full caption-bottom text-sm",
+  "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
+  "table": "w-full caption-bottom text-sm",
   "table-body": "[&_tr:last-child]:border-0",
   "table-caption": "mt-4 text-sm text-muted",
   // table-head
@@ -1006,7 +1041,8 @@ const shortcuts = [
   ...collapsible,
   ...radioGroup,
   ...form,
-  ...sheet
+  ...sheet,
+  ...scrollArea
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shared/{preset.CkLYnPnw.mjs → preset.rfZXnCIa.mjs}

@@ -68,20 +68,20 @@ const alert = [
 
 const staticAvatar = {
   // base
-  "avatar": "relative flex shrink-0 overflow-hidden leading-1.5em",
-  "avatar-image": "aspect-square h-full w-full",
+  "avatar": "relative inline-flex items-center font-normal select-none shrink-0 overflow-hidden",
+  "avatar-image": "h-full w-full object-cover",
   "avatar-fallback": "flex h-full w-full items-center justify-center",
-  "avatar-label": "",
+  "avatar-label": "uppercase",
   "avatar-icon": "text-1em",
   // variants
-  "avatar-solid-white": "bg-base text-base ring-1 ring-base",
+  "avatar-solid-white": "bg-base text-base border border-base",
   "avatar-solid-black": "bg-inverted text-inverted"
 };
 const dynamicAvatar = [
   // variants
   [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
   [/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
-  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 ring-1 ring-${c}-500 dark:ring-${c}-400`]
+  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 border border-${c}-500 dark:border-${c}-400`]
 ];
 const avatar = [
   ...dynamicAvatar,
@@ -215,7 +215,6 @@ const btn = [
 const staticCard = {
   // base
   "card": "rounded-xl shadow text-base",
-  "card-default-variant": "card-outline-gray",
   // components
   "card-header": "flex flex-col gap-y-1.5 p-6",
   "card-title": "font-semibold leading-none tracking-tight",
@@ -423,6 +422,7 @@ const staticGeneral = {
   "bg-base": "bg-$c-background",
   "bg-inverted": "bg-$c-foreground",
   "bg-muted": "bg-$c-muted",
+  "bg-border": "bg-$c-border",
   "bg-accent": "bg-$c-accent",
   "bg-accent-foreground": "bg-$c-accent-foreground",
   "bg-popover": "bg-$c-popover",
@@ -479,7 +479,7 @@ const indicator = [
 
 const staticInput = {
   // config
-  "input-default-variant": "input-outline",
+  "input-default-variant": "input-outline-primary",
   "input-loading-icon": "i-loading",
   "input-info-icon": "i-info",
   "input-error-icon": "i-error",
@@ -488,7 +488,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.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": "text-base text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-muted block outline-none rounded-md border-0 shadow-sm bg-transparent",
   "input-input": "h-9",
   // role='input'
   "input-textarea": "",
@@ -501,8 +501,8 @@ const staticInput = {
   "input-loading": "animate-spin text-1.042em",
   // wrappers
   "input-wrapper": "relative flex items-center",
-  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
-  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
+  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
+  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-muted",
   // variants
   "input-outline-gray": "focus:ring-2 ring-1",
   "input-outline-black": "ring-1 focus:ring-$c-foreground"
@@ -510,7 +510,7 @@ const staticInput = {
 const dynamicInput = [
   // config
   [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
-  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
+  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-500 dark:placeholder-${c}-400`],
   // variants
   [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
   [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => ` ring-1 input-focus-${c} ring-${c}-500 dark:ring-${c}-400`]
@@ -660,6 +660,32 @@ const radioGroup = [
   staticRadioGroup
 ];
 
+const staticScrollArea = {
+  // configurations
+  "scroll-area": "",
+  "scroll-area-scrollbar-vertical": "h-full w-0.625em border-l border-l-transparent p-0.0625em",
+  "scroll-area-scrollbar-horizontal": "h-0.625em flex-col border-t border-t-transparent p-0.0625em",
+  // components
+  "scroll-area-root": "relative overflow-hidden",
+  "scroll-area-scrollbar": "flex touch-none select-none transition-colors",
+  "scroll-area-viewport": "h-full w-full rounded-inherit",
+  "scroll-area-scrollbar-thumb": "relative flex-1",
+  "scroll-area-gray": "bg-border"
+};
+const dynamicScrollArea = [
+  // dynamic preset
+  [/^scroll-area(-(\S+))?$/, ([, , c], { theme }) => {
+    const parsedColor = parseColor$1(c, theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `bg-${c}-200 dark:bg-${c}-700/58`;
+    return void 0;
+  }]
+];
+const scrollArea = [
+  ...dynamicScrollArea,
+  staticScrollArea
+];
+
 const staticSelect = {
   // configurations
   "select": "",
@@ -695,8 +721,18 @@ const staticSelect = {
   "select-item-selectItem": ""
 };
 const dynamicSelect = [
-  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"]) => `btn-${v}-${c}`],
-  [/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
+  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"], { theme }) => {
+    const parsedColor = parseColor$1(c, theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `btn-${v}-${c}`;
+    return void 0;
+  }],
+  [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
+    const parsedColor = parseColor$1(c || "gray", theme);
+    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+      return `focus:bg-${c || "gray"}-100 focus:text-${c || "gray"}-800 dark:focus:bg-${c || "gray"}-800 dark:focus:text-${c || "gray"}-100`;
+    return void 0;
+  }]
 ];
 const select = [
   ...dynamicSelect,
@@ -845,10 +881,9 @@ const _switch = [
 const staticTable = {
   // config
   "table-default-variant": "table-solid-gray",
-  "table": "",
   // table-root
-  "table-root-wrapper": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
-  "table-root": "w-full caption-bottom text-sm",
+  "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
+  "table": "w-full caption-bottom text-sm",
   "table-body": "[&_tr:last-child]:border-0",
   "table-caption": "mt-4 text-sm text-muted",
   // table-head
@@ -1004,7 +1039,8 @@ const shortcuts = [
   ...collapsible,
   ...radioGroup,
   ...form,
-  ...sheet
+  ...sheet,
+  ...scrollArea
 ];
 
 export { shortcuts as s };

package/dist/shortcuts.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./shared/preset.F4kNR6ES.cjs');
+const index = require('./shared/preset.DPKZgAqu.cjs');
 require('@unocss/preset-mini/utils');
 require('@unocss/preset-mini');
 

package/dist/shortcuts.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.38.0-beta.1",
+  "version": "0.40.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": "^65.4.3",
-    "@unocss/preset-mini": "^65.4.3",
-    "unocss": "^65.4.3"
+    "@unocss/core": "^66.0.0",
+    "@unocss/preset-mini": "^66.0.0",
+    "unocss": "^66.0.0"
   },
   "scripts": {
     "build": "unbuild",