@una-ui/preset 0.37.0-beta.1 → 0.38.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.frTThEzw.cjs');
+const index = require('./shared/preset.F4kNR6ES.cjs');
 
 function presetUna(options = {
   // TODO: add options
@@ -92,6 +92,10 @@ function presetUna(options = {
         }
       }],
       [/^size-(.*)$/, rules.fonts[1][1]],
+      [/^square-(min-|max-)?(.+)$/, ([, _m, s]) => ({
+        width: utils.handler.bracket.cssvar.global.auto.fraction.rem(s),
+        height: utils.handler.bracket.cssvar.global.auto.fraction.rem(s)
+      })],
       ["n-disabled", {
         "opacity": 0.5,
         "pointer-events": "none"

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 } from '@unocss/preset-mini/utils';
+import { parseColor, handler } from '@unocss/preset-mini/utils';
 import { mergeDeep } from 'unocss';
-import { s as shortcuts } from './shared/preset.nbSNq5ip.mjs';
+import { s as shortcuts } from './shared/preset.CkLYnPnw.mjs';
 
 function presetUna(options = {
   // TODO: add options
@@ -90,6 +90,10 @@ function presetUna(options = {
         }
       }],
       [/^size-(.*)$/, fonts[1][1]],
+      [/^square-(min-|max-)?(.+)$/, ([, _m, s]) => ({
+        width: handler.bracket.cssvar.global.auto.fraction.rem(s),
+        height: handler.bracket.cssvar.global.auto.fraction.rem(s)
+      })],
       ["n-disabled", {
         "opacity": 0.5,
         "pointer-events": "none"

package/dist/prefixes.cjs

@@ -20,7 +20,6 @@ const prefixes = [
   "btn",
   "button",
   "card",
-  "card-about",
   "card-content",
   "card-description",
   "card-footer",
@@ -64,8 +63,6 @@ const prefixes = [
   "kbd",
   "label",
   "link",
-  "nav-link",
-  "nav-link-group",
   "pagination",
   "pagination-ellipsis",
   "pagination-selected",
@@ -79,7 +76,6 @@ const prefixes = [
   "popover",
   "popover-content",
   "progress",
-  "radio",
   "radio-group",
   "radio-group-item",
   "resize",

package/dist/prefixes.mjs

@@ -18,7 +18,6 @@ const prefixes = [
   "btn",
   "button",
   "card",
-  "card-about",
   "card-content",
   "card-description",
   "card-footer",
@@ -62,8 +61,6 @@ const prefixes = [
   "kbd",
   "label",
   "link",
-  "nav-link",
-  "nav-link-group",
   "pagination",
   "pagination-ellipsis",
   "pagination-selected",
@@ -77,7 +74,6 @@ const prefixes = [
   "popover",
   "popover-content",
   "progress",
-  "radio",
   "radio-group",
   "radio-group-item",
   "resize",

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

@@ -214,21 +214,19 @@ const btn = [
 
 const staticCard = {
   // base
-  "card": "relative flex flex-col rounded-lg overflow-hidden shadow-sm",
+  "card": "rounded-xl shadow text-base",
   "card-default-variant": "card-outline-gray",
   // components
-  "card-header": "",
-  "card-title": "text-2xl font-semibold leading-none tracking-tight",
+  "card-header": "flex flex-col gap-y-1.5 p-6",
+  "card-title": "font-semibold leading-none tracking-tight",
   "card-description": "text-sm text-muted",
-  "card-content": "px-4 py-5 pt-0 sm:p-6 sm:pt-0",
+  "card-content": "p-6 pt-0",
   "card-footer": "flex items-center p-6 pt-0",
-  "card-about": "flex flex-col gap-y-1.5 px-4 py-5 sm:p-6",
   // static variants
   "card-soft-gray": "bg-muted border border-base",
   "card-outline-gray": "bg-base border border-base"
 };
 const dynamicCard = [
-  // dynamic variants
   [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
   [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
 ];
@@ -311,7 +309,7 @@ const staticDropdownMenu = {
   "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-label": "px-2 py-1.5 text-0.875em font-semibold",
   // dropdown-menu-separator
   "dropdown-menu-separator-root": "relative -mx-1",
   "dropdown-menu-separator": "",
@@ -437,12 +435,6 @@ const staticGeneral = {
 const dynamicGeneral = [
   // TODO: una-text-<color><-number><-number>
   // [/^una-text(-(\S+))?$/, ([, , c = 'primary']) => `text-${c}-700 dark:text-${c}-400`],
-  /**
-   * Since we override the default `size` utility, we need to provide an alternative for it.
-   * @refer https://tailwindcss.com/docs/size
-   * @example area-100 -> w-100 h-100
-   */
-  [/^square-([^-]+)$/, ([, size]) => `w-${size} h-${size}`]
 ];
 const general = [
   ...dynamicGeneral,
@@ -570,45 +562,6 @@ const link = [
   staticLink
 ];
 
-const staticNavLink = {
-  // config
-  "nav-link-default-variant": "nav-link-text-primary",
-  // base
-  "nav-link": "transition-base leading-6 justify-start gap-x-3 rounded-md",
-  // badge
-  "nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5",
-  // text-variant
-  "nav-link-text-gray": "hover:bg-$c-gray-100 hover:text-$c-gray-950",
-  "nav-link-active-text-gray": "bg-$c-gray-100 text-$c-gray-950",
-  "nav-link-inactive-text-gray": "text-$c-gray-950"
-};
-const dynamicNavLink = [
-  // text-variant
-  [/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-$c-gray-100 text-${c}-600 dark:text-${c}-500`],
-  [/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "gray"]) => `text-${c}-800 dark:text-${c}-100`],
-  [/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-text-${c}`],
-  // solid-variant
-  [/^nav-link-active-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-700 dark:bg-${c}-400 text-white dark:text-${c}-950`],
-  [/^nav-link-inactive-solid(-(\S+))?$/, ([, , c = "primary"]) => `text-white dark:text-${c}-950`],
-  [/^nav-link-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-solid-${c}`]
-];
-const navLink = [
-  ...dynamicNavLink,
-  staticNavLink
-];
-
-const staticNavLinkGroup = {
-  // base
-  "nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
-  // panel
-  "nav-link-group-panel": "mt-1 px-2 space-y-1"
-};
-const dynamicNavLinkGroup = [];
-const navLinkGroup = [
-  ...dynamicNavLinkGroup,
-  staticNavLinkGroup
-];
-
 const staticPagination = {
   // configurations
   "pagination": "overflow-hidden",
@@ -680,33 +633,6 @@ const progress = [
   staticProgress
 ];
 
-const staticRadio = {
-  // base
-  "radio": "radio-primary flex items-center transition-base border border-$c-ring rounded-full p-0.12em h-1em w-1em n-checked:border-brand n-checked:bg-brand",
-  "radio-disabled": "n-disabled",
-  "radio-label": "block text-sm font-medium leading-6",
-  "radio-input": "absolute w-full opacity-0",
-  "radio-reverse": "flex-row-reverse",
-  "radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
-  // wrappers
-  "radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
-  // icon
-  "radio-icon-base": "m-auto opacity-0 text-inverted w-full h-full transition-base n-checked:opacity-100",
-  "radio-icon": "i-dot"
-  // refer to general.ts
-};
-const dynamicRadio = [
-  [/^radio-(.*)$/, ([, 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 radio = [
-  ...dynamicRadio,
-  staticRadio
-];
-
 const staticRadioGroup = {
   // configurations
   "radio-group": "gap-2 flex flex-wrap",
@@ -1058,10 +984,7 @@ const shortcuts = [
   ...avatar,
   ...indicator,
   ...kbd,
-  ...navLink,
-  ...navLinkGroup,
   ...link,
-  ...radio,
   ...checkbox,
   ...slider,
   ...progress,

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

@@ -216,21 +216,19 @@ const btn = [
 
 const staticCard = {
   // base
-  "card": "relative flex flex-col rounded-lg overflow-hidden shadow-sm",
+  "card": "rounded-xl shadow text-base",
   "card-default-variant": "card-outline-gray",
   // components
-  "card-header": "",
-  "card-title": "text-2xl font-semibold leading-none tracking-tight",
+  "card-header": "flex flex-col gap-y-1.5 p-6",
+  "card-title": "font-semibold leading-none tracking-tight",
   "card-description": "text-sm text-muted",
-  "card-content": "px-4 py-5 pt-0 sm:p-6 sm:pt-0",
+  "card-content": "p-6 pt-0",
   "card-footer": "flex items-center p-6 pt-0",
-  "card-about": "flex flex-col gap-y-1.5 px-4 py-5 sm:p-6",
   // static variants
   "card-soft-gray": "bg-muted border border-base",
   "card-outline-gray": "bg-base border border-base"
 };
 const dynamicCard = [
-  // dynamic variants
   [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
   [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
 ];
@@ -313,7 +311,7 @@ const staticDropdownMenu = {
   "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-label": "px-2 py-1.5 text-0.875em font-semibold",
   // dropdown-menu-separator
   "dropdown-menu-separator-root": "relative -mx-1",
   "dropdown-menu-separator": "",
@@ -439,12 +437,6 @@ const staticGeneral = {
 const dynamicGeneral = [
   // TODO: una-text-<color><-number><-number>
   // [/^una-text(-(\S+))?$/, ([, , c = 'primary']) => `text-${c}-700 dark:text-${c}-400`],
-  /**
-   * Since we override the default `size` utility, we need to provide an alternative for it.
-   * @refer https://tailwindcss.com/docs/size
-   * @example area-100 -> w-100 h-100
-   */
-  [/^square-([^-]+)$/, ([, size]) => `w-${size} h-${size}`]
 ];
 const general = [
   ...dynamicGeneral,
@@ -572,45 +564,6 @@ const link = [
   staticLink
 ];
 
-const staticNavLink = {
-  // config
-  "nav-link-default-variant": "nav-link-text-primary",
-  // base
-  "nav-link": "transition-base leading-6 justify-start gap-x-3 rounded-md",
-  // badge
-  "nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5",
-  // text-variant
-  "nav-link-text-gray": "hover:bg-$c-gray-100 hover:text-$c-gray-950",
-  "nav-link-active-text-gray": "bg-$c-gray-100 text-$c-gray-950",
-  "nav-link-inactive-text-gray": "text-$c-gray-950"
-};
-const dynamicNavLink = [
-  // text-variant
-  [/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-$c-gray-100 text-${c}-600 dark:text-${c}-500`],
-  [/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "gray"]) => `text-${c}-800 dark:text-${c}-100`],
-  [/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-text-${c}`],
-  // solid-variant
-  [/^nav-link-active-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-700 dark:bg-${c}-400 text-white dark:text-${c}-950`],
-  [/^nav-link-inactive-solid(-(\S+))?$/, ([, , c = "primary"]) => `text-white dark:text-${c}-950`],
-  [/^nav-link-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-solid-${c}`]
-];
-const navLink = [
-  ...dynamicNavLink,
-  staticNavLink
-];
-
-const staticNavLinkGroup = {
-  // base
-  "nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
-  // panel
-  "nav-link-group-panel": "mt-1 px-2 space-y-1"
-};
-const dynamicNavLinkGroup = [];
-const navLinkGroup = [
-  ...dynamicNavLinkGroup,
-  staticNavLinkGroup
-];
-
 const staticPagination = {
   // configurations
   "pagination": "overflow-hidden",
@@ -682,33 +635,6 @@ const progress = [
   staticProgress
 ];
 
-const staticRadio = {
-  // base
-  "radio": "radio-primary flex items-center transition-base border border-$c-ring rounded-full p-0.12em h-1em w-1em n-checked:border-brand n-checked:bg-brand",
-  "radio-disabled": "n-disabled",
-  "radio-label": "block text-sm font-medium leading-6",
-  "radio-input": "absolute w-full opacity-0",
-  "radio-reverse": "flex-row-reverse",
-  "radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
-  // wrappers
-  "radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
-  // icon
-  "radio-icon-base": "m-auto opacity-0 text-inverted w-full h-full transition-base n-checked:opacity-100",
-  "radio-icon": "i-dot"
-  // refer to general.ts
-};
-const dynamicRadio = [
-  [/^radio-(.*)$/, ([, 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 radio = [
-  ...dynamicRadio,
-  staticRadio
-];
-
 const staticRadioGroup = {
   // configurations
   "radio-group": "gap-2 flex flex-wrap",
@@ -1060,10 +986,7 @@ const shortcuts = [
   ...avatar,
   ...indicator,
   ...kbd,
-  ...navLink,
-  ...navLinkGroup,
   ...link,
-  ...radio,
   ...checkbox,
   ...slider,
   ...progress,

package/dist/shortcuts.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./shared/preset.frTThEzw.cjs');
+const index = require('./shared/preset.F4kNR6ES.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.nbSNq5ip.mjs';
+export { s as shortcuts } from './shared/preset.CkLYnPnw.mjs';
 import '@unocss/preset-mini/utils';
 import '@unocss/preset-mini';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.37.0-beta.1",
+  "version": "0.38.0-beta.1",
   "description": "The default preset for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",