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

package/dist/index.cjs

@@ -15,6 +15,10 @@ function presetUna(options = {
     options,
     shortcuts: shortcuts.shortcuts,
     theme: unocss.mergeDeep(presetMini.theme, {
+      container: {
+        center: true,
+        padding: "2rem"
+      },
       colors: {
         brand: "rgba(var(--c-brand),%alpha)",
         primary: {
@@ -57,6 +61,20 @@ function presetUna(options = {
         lg: "var(--una-radius)",
         md: "calc(var(--una-radius) - 2px)",
         sm: "calc(var(--una-radius) - 4px)"
+      },
+      animation: {
+        keyframes: {
+          "collapsible-down": "{from{height: 0}to{height:var(--radix-collapsible-content-height)}}",
+          "collapsible-up": "{from{height:var(--radix-collapsible-content-height)}to{height: 0}}"
+        },
+        durations: {
+          "collapsible-down": "0.2s",
+          "collapsible-up": "0.2s"
+        },
+        timingFns: {
+          "collapsible-down": "ease-in-out",
+          "collapsible-up": "ease-in-out"
+        }
       }
     }),
     rules: [

package/dist/index.mjs

@@ -13,6 +13,10 @@ function presetUna(options = {
     options,
     shortcuts,
     theme: mergeDeep(theme, {
+      container: {
+        center: true,
+        padding: "2rem"
+      },
       colors: {
         brand: "rgba(var(--c-brand),%alpha)",
         primary: {
@@ -55,6 +59,20 @@ function presetUna(options = {
         lg: "var(--una-radius)",
         md: "calc(var(--una-radius) - 2px)",
         sm: "calc(var(--una-radius) - 4px)"
+      },
+      animation: {
+        keyframes: {
+          "collapsible-down": "{from{height: 0}to{height:var(--radix-collapsible-content-height)}}",
+          "collapsible-up": "{from{height:var(--radix-collapsible-content-height)}to{height: 0}}"
+        },
+        durations: {
+          "collapsible-down": "0.2s",
+          "collapsible-up": "0.2s"
+        },
+        timingFns: {
+          "collapsible-down": "ease-in-out",
+          "collapsible-up": "ease-in-out"
+        }
       }
     }),
     rules: [

package/dist/prefixes.cjs

@@ -25,6 +25,9 @@ const prefixes = [
   "card-header",
   "card-title",
   "checkbox",
+  "collapsible",
+  "collapsible-content",
+  "collapsible-trigger",
   "dialog",
   "dialog-close",
   "dialog-content",

package/dist/prefixes.mjs

@@ -23,6 +23,9 @@ const prefixes = [
   "card-header",
   "card-title",
   "checkbox",
+  "collapsible",
+  "collapsible-content",
+  "collapsible-trigger",
   "dialog",
   "dialog-close",
   "dialog-content",

package/dist/shortcuts.cjs

@@ -179,11 +179,11 @@ const staticBtn = {
   // variants
   "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
   "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
-  "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus",
+  "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
   "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
   "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
   "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
-  "btn-outline-gray": "text-muted ring-1 ring-base ring-inset btn-focus",
+  "btn-outline-gray": "text-muted hover:text-$c-gray-600 ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
   "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
   "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
   "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
@@ -193,7 +193,9 @@ const staticBtn = {
   "btn-text-muted": "text-muted btn-focus hover:text-accent",
   "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
   "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
-  "btn-soft-accent": "text-accent bg-accent btn-focus"
+  "btn-soft-accent": "text-accent bg-accent btn-focus",
+  "btn-text-accent": "text-accent btn-focus",
+  "btn-link-accent": "text-accent btn-focus hover:underline underline-offset-4"
 };
 const dynamicBtn = [
   // base
@@ -262,6 +264,17 @@ const checkbox = [
   staticCheckbox
 ];
 
+const staticCollapsible = {
+  "collapsible-content": "overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+};
+const dynamicCollapsible = [
+  // dynamic preset
+];
+const collapsible = [
+  ...dynamicCollapsible,
+  staticCollapsible
+];
+
 const staticDialog = {
   // base
   "dialog": "",
@@ -951,7 +964,8 @@ const shortcuts = [
   ...popover,
   ...tooltip,
   ...pagination,
-  ...toggle
+  ...toggle,
+  ...collapsible
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -177,11 +177,11 @@ const staticBtn = {
   // variants
   "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
   "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
-  "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus",
+  "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
   "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
   "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
   "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
-  "btn-outline-gray": "text-muted ring-1 ring-base ring-inset btn-focus",
+  "btn-outline-gray": "text-muted hover:text-$c-gray-600 ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
   "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
   "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
   "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
@@ -191,7 +191,9 @@ const staticBtn = {
   "btn-text-muted": "text-muted btn-focus hover:text-accent",
   "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
   "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
-  "btn-soft-accent": "text-accent bg-accent btn-focus"
+  "btn-soft-accent": "text-accent bg-accent btn-focus",
+  "btn-text-accent": "text-accent btn-focus",
+  "btn-link-accent": "text-accent btn-focus hover:underline underline-offset-4"
 };
 const dynamicBtn = [
   // base
@@ -260,6 +262,17 @@ const checkbox = [
   staticCheckbox
 ];
 
+const staticCollapsible = {
+  "collapsible-content": "overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+};
+const dynamicCollapsible = [
+  // dynamic preset
+];
+const collapsible = [
+  ...dynamicCollapsible,
+  staticCollapsible
+];
+
 const staticDialog = {
   // base
   "dialog": "",
@@ -949,7 +962,8 @@ const shortcuts = [
   ...popover,
   ...tooltip,
   ...pagination,
-  ...toggle
+  ...toggle,
+  ...collapsible
 ];
 
 export { shortcuts };

package/package.json

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

package/una.css

@@ -77,6 +77,7 @@
   --c-ring: rgb(var(--una-gray-200));
   --c-divider: rgb(var(--una-gray-200));
   --c-bg-selection: rgba(var(--una-primary-600), 0.2);
+  --un-default-border-color: var(--c-border);
 }
 
 .dark {
@@ -141,7 +142,7 @@ html.dark {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--muted-foreground);
+  background: var(--c-muted-foreground);
   border-radius: calc(var(--una-radius) - 4px);
 }