@una-ui/preset 0.31.0-beta.1 → 0.32.0-beta.1

package/dist/prefixes.cjs

@@ -51,7 +51,13 @@ const prefixes = [
   "dropdown-menu-sub-content",
   "dropdown-menu-sub-trigger",
   "dropdown-menu-trigger",
+  "form-control",
+  "form-description",
+  "form-field",
   "form-group",
+  "form-item",
+  "form-label",
+  "form-message",
   "icon",
   "indicator",
   "input",
@@ -116,6 +122,15 @@ const prefixes = [
   "tabs-root",
   "tabs-trigger",
   "theme-switcher",
+  "toast",
+  "toast-action",
+  "toast-close",
+  "toast-description",
+  "toaster",
+  "toast-info",
+  "toast-provider",
+  "toast-title",
+  "toast-viewport",
   "toggle",
   "toggle-off",
   "toggle-on",

package/dist/prefixes.mjs

@@ -49,7 +49,13 @@ const prefixes = [
   "dropdown-menu-sub-content",
   "dropdown-menu-sub-trigger",
   "dropdown-menu-trigger",
+  "form-control",
+  "form-description",
+  "form-field",
   "form-group",
+  "form-item",
+  "form-label",
+  "form-message",
   "icon",
   "indicator",
   "input",
@@ -114,6 +120,15 @@ const prefixes = [
   "tabs-root",
   "tabs-trigger",
   "theme-switcher",
+  "toast",
+  "toast-action",
+  "toast-close",
+  "toast-description",
+  "toaster",
+  "toast-info",
+  "toast-provider",
+  "toast-title",
+  "toast-viewport",
   "toggle",
   "toggle-off",
   "toggle-on",

package/dist/shortcuts.cjs

@@ -51,10 +51,14 @@ const staticAlert = {
   "alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
   "alert-icon-wrapper": "-mt-0.2em",
   "alert-close-wrapper": "ml-auto pl-0.2em",
-  "alert-close-inner-wrapper": "-mx-1.1 -my-1.1"
+  "alert-close-inner-wrapper": "-mx-1.1 -my-1.1",
+  // static variants
+  "alert-solid-white": "rounded-md text-brand bg-base n-gray-950 dark:n-white border",
+  "alert-solid-black": "rounded-md text-brand bg-inverted n-white dark:n-gray-950 border border-foreground"
 };
 const dynamicAlert = [
   // variants
+  [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md text-white bg-${c}-500 dark:bg-${c}-800 n-white dark:n-${c}-400`],
   [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
   [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
   [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
@@ -332,11 +336,36 @@ const dropdowMenu = [
   staticDropdownMenu
 ];
 
+const staticForm = {
+  // base
+  "form": "",
+  "form-field": "",
+  "form-field-description": "text-muted",
+  "form-field-hint": "text-sm leading-none text-muted",
+  "form-field-message": "",
+  // wrappers
+  "form-field-top-wrapper": "flex flex-col space-y-1.5 pb-0.5",
+  "form-field-top-wrapper-inner": "flex justify-between items-end space-x-1.5",
+  "form-field-bottom-wrapper": "flex space-x-1.5 justify-between items-start",
+  "form-field-message-wrapper": "",
+  // label
+  "form-field-label-wrapper": "flex",
+  "form-field-label": "block",
+  "form-field-label-required": "after:content-['*'] after:ms-0.5 after:text-error",
+  "form-message": "text-0.8rem font-medium transition-all duration-1000 ease-in-out text-error",
+  "form-label": "",
+  "form-description": "text-sm text-muted",
+  "form-item": "space-y-2"
+};
+const form = [
+  staticForm
+];
+
 const staticFormGroup = {
   // base
   "form-group": "space-y-2",
   "form-group-description": "text-0.8rem text-muted",
-  "form-group-hint": "text-sm text-muted",
+  "form-group-hint": "text-sm leading-none text-muted",
   "form-group-message": "text-0.8em transition-all duration-1000 ease-in-out",
   // wrappers
   "form-group-top-wrapper": "flex flex-col space-y-1.5",
@@ -635,7 +664,10 @@ const staticProgress = {
   "progress-indeterminate": "absolute bg-brand h-full",
   // components
   "progress-root": "relative h-0.5em w-full overflow-hidden rounded-full bg-brand/20",
-  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all"
+  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
+  // static
+  "progress-white": "bg-inverted",
+  "progress-black": "bg-base"
 };
 const dynamicProgress = [
   [/^progress-(.*)$/, ([, body], { theme }) => {
@@ -921,6 +953,33 @@ const tabs = [
   staticTabs
 ];
 
+const staticToast = {
+  // config
+  "toast": "pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all ",
+  "toast-viewport": "fixed top-0 z-100 flex max-h-screen gap-y-4 w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-420px",
+  "toast-wrapper": "w-0 flex flex-1 flex-col gap-2",
+  "toast-title": "text-sm font-semibold [&+div]:text-xs",
+  "toast-description": "text-sm opacity-90",
+  "toast-leading": "square-5",
+  "toast-close": "bg-transparent flex items-center justify-center absolute right-1 top-1 rounded-md p-1 text-brand/80 opacity-0 transition-opacity hover:text-brand focus:opacity-100 focus:ring-1 focus:ring-brand/80 focus:outline-none group-hover:opacity-100",
+  "toast-close-icon": "i-close",
+  "toast-close-icon-base": "h-1em w-1em",
+  "toast-info": "grid gap-1",
+  "toast-actions": "flex shrink-0 gap-1.5",
+  "toast-progress": "h-1 rounded-none"
+};
+const dynamicToast = [
+  // dynamic variants
+  [/^toast-solid(-(\S+))?$/, ([, , c = "primary"]) => `alert-solid-${c}`],
+  [/^toast-soft(-(\S+))?$/, ([, , c = "primary"]) => `alert-soft-${c}`],
+  [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c}`],
+  [/^toast-border(-(\S+))?$/, ([, , c = "primary"]) => `alert-border-${c}`]
+];
+const toast = [
+  ...dynamicToast,
+  staticToast
+];
+
 const staticToggle = {
   // configurations
   toggle: ""
@@ -991,9 +1050,11 @@ const shortcuts = [
   ...popover,
   ...tooltip,
   ...pagination,
+  ...toast,
   ...toggle,
   ...collapsible,
-  ...radioGroup
+  ...radioGroup,
+  ...form
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -49,10 +49,14 @@ const staticAlert = {
   "alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
   "alert-icon-wrapper": "-mt-0.2em",
   "alert-close-wrapper": "ml-auto pl-0.2em",
-  "alert-close-inner-wrapper": "-mx-1.1 -my-1.1"
+  "alert-close-inner-wrapper": "-mx-1.1 -my-1.1",
+  // static variants
+  "alert-solid-white": "rounded-md text-brand bg-base n-gray-950 dark:n-white border",
+  "alert-solid-black": "rounded-md text-brand bg-inverted n-white dark:n-gray-950 border border-foreground"
 };
 const dynamicAlert = [
   // variants
+  [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md text-white bg-${c}-500 dark:bg-${c}-800 n-white dark:n-${c}-400`],
   [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
   [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
   [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
@@ -330,11 +334,36 @@ const dropdowMenu = [
   staticDropdownMenu
 ];
 
+const staticForm = {
+  // base
+  "form": "",
+  "form-field": "",
+  "form-field-description": "text-muted",
+  "form-field-hint": "text-sm leading-none text-muted",
+  "form-field-message": "",
+  // wrappers
+  "form-field-top-wrapper": "flex flex-col space-y-1.5 pb-0.5",
+  "form-field-top-wrapper-inner": "flex justify-between items-end space-x-1.5",
+  "form-field-bottom-wrapper": "flex space-x-1.5 justify-between items-start",
+  "form-field-message-wrapper": "",
+  // label
+  "form-field-label-wrapper": "flex",
+  "form-field-label": "block",
+  "form-field-label-required": "after:content-['*'] after:ms-0.5 after:text-error",
+  "form-message": "text-0.8rem font-medium transition-all duration-1000 ease-in-out text-error",
+  "form-label": "",
+  "form-description": "text-sm text-muted",
+  "form-item": "space-y-2"
+};
+const form = [
+  staticForm
+];
+
 const staticFormGroup = {
   // base
   "form-group": "space-y-2",
   "form-group-description": "text-0.8rem text-muted",
-  "form-group-hint": "text-sm text-muted",
+  "form-group-hint": "text-sm leading-none text-muted",
   "form-group-message": "text-0.8em transition-all duration-1000 ease-in-out",
   // wrappers
   "form-group-top-wrapper": "flex flex-col space-y-1.5",
@@ -633,7 +662,10 @@ const staticProgress = {
   "progress-indeterminate": "absolute bg-brand h-full",
   // components
   "progress-root": "relative h-0.5em w-full overflow-hidden rounded-full bg-brand/20",
-  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all"
+  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
+  // static
+  "progress-white": "bg-inverted",
+  "progress-black": "bg-base"
 };
 const dynamicProgress = [
   [/^progress-(.*)$/, ([, body], { theme }) => {
@@ -919,6 +951,33 @@ const tabs = [
   staticTabs
 ];
 
+const staticToast = {
+  // config
+  "toast": "pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all ",
+  "toast-viewport": "fixed top-0 z-100 flex max-h-screen gap-y-4 w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-420px",
+  "toast-wrapper": "w-0 flex flex-1 flex-col gap-2",
+  "toast-title": "text-sm font-semibold [&+div]:text-xs",
+  "toast-description": "text-sm opacity-90",
+  "toast-leading": "square-5",
+  "toast-close": "bg-transparent flex items-center justify-center absolute right-1 top-1 rounded-md p-1 text-brand/80 opacity-0 transition-opacity hover:text-brand focus:opacity-100 focus:ring-1 focus:ring-brand/80 focus:outline-none group-hover:opacity-100",
+  "toast-close-icon": "i-close",
+  "toast-close-icon-base": "h-1em w-1em",
+  "toast-info": "grid gap-1",
+  "toast-actions": "flex shrink-0 gap-1.5",
+  "toast-progress": "h-1 rounded-none"
+};
+const dynamicToast = [
+  // dynamic variants
+  [/^toast-solid(-(\S+))?$/, ([, , c = "primary"]) => `alert-solid-${c}`],
+  [/^toast-soft(-(\S+))?$/, ([, , c = "primary"]) => `alert-soft-${c}`],
+  [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c}`],
+  [/^toast-border(-(\S+))?$/, ([, , c = "primary"]) => `alert-border-${c}`]
+];
+const toast = [
+  ...dynamicToast,
+  staticToast
+];
+
 const staticToggle = {
   // configurations
   toggle: ""
@@ -989,9 +1048,11 @@ const shortcuts = [
   ...popover,
   ...tooltip,
   ...pagination,
+  ...toast,
   ...toggle,
   ...collapsible,
-  ...radioGroup
+  ...radioGroup,
+  ...form
 ];
 
 export { shortcuts };

package/package.json

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