@una-ui/preset 0.22.0-beta.2 → 0.23.0-beta.1

package/dist/prefixes.cjs

@@ -46,11 +46,22 @@ const prefixes = [
   "link",
   "nav-link",
   "nav-link-group",
+  "pagination",
+  "pagination-ellipsis",
+  "pagination-selected",
+  "pagination-unselected",
+  "pagination-ellipsis",
+  "pagination-first",
+  "pagination-last",
+  "pagination-list-item",
+  "pagination-next",
+  "pagination-prev",
   "popover",
   "popover-content",
   "progress",
   "radio",
   "resize",
+  "rounded",
   "select",
   "select-content",
   "select-group",
@@ -68,6 +79,7 @@ const prefixes = [
   "size",
   "skeleton",
   "slider",
+  "square",
   "switch",
   "table",
   "table-body",

package/dist/prefixes.mjs

@@ -44,11 +44,22 @@ const prefixes = [
   "link",
   "nav-link",
   "nav-link-group",
+  "pagination",
+  "pagination-ellipsis",
+  "pagination-selected",
+  "pagination-unselected",
+  "pagination-ellipsis",
+  "pagination-first",
+  "pagination-last",
+  "pagination-list-item",
+  "pagination-next",
+  "pagination-prev",
   "popover",
   "popover-content",
   "progress",
   "radio",
   "resize",
+  "rounded",
   "select",
   "select-content",
   "select-group",
@@ -66,6 +77,7 @@ const prefixes = [
   "size",
   "skeleton",
   "slider",
+  "square",
   "switch",
   "table",
   "table-body",

package/dist/shortcuts.cjs

@@ -161,19 +161,20 @@ const staticBtn = {
   // config
   "btn-default-variant": "btn-solid",
   "btn-loading-icon": "i-loading",
+  "btn-default-radius": "rounded-md",
   // base
-  "btn": "bg-transparent transition-colors text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
+  "btn": "btn-rectangle px-0.7142857142857143em py-0.42857142857142855em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.42857142857142855em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
   "btn-leading": "-ml-0.14285714285714285em text-1.191em",
   "btn-trailing": "-mr-0.14285714285714285em text-1.191em",
   "btn-loading": "animate-spin text-1.191em",
+  "btn-rectangle": "h-2.5em",
+  "btn-square": "w-2.5em h-2.5em",
   // options
   "btn-block": "w-full",
   "btn-reverse": "flex-row-reverse",
-  "btn-rectangle": "px-0.7142857142857143em py-0.42857142857142855em",
-  "btn-square": "p-0.42857142857142855em",
   // 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",
@@ -368,8 +369,14 @@ const staticGeneral = {
   "transition-base": "transition-all duration-100 ease-out"
 };
 const dynamicGeneral = [
-  // TODO: n-text-<color><-number><-number>
-  // [/^n-text(-(\S+))?$/, ([, , c = 'primary']) => `text-${c}-700 dark:text-${c}-400`],
+  // 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,
@@ -531,6 +538,44 @@ const navLinkGroup = [
   staticNavLinkGroup
 ];
 
+const staticPagination = {
+  // configurations
+  "pagination": "overflow-hidden",
+  "pagination-list": "flex items-center gap-1 overflow-hidden",
+  // components
+  "pagination-root": "",
+  "pagination-list-item": "pagination",
+  "pagination-ellipsis-base": "btn flex items-center justify-center",
+  "pagination-ellipsis-icon-base": "w-1em h-1em",
+  "pagination-ellipsis-icon": "i-lucide-ellipsis",
+  "pagination-first": "pagination",
+  "pagination-first-icon": "i-lucide-chevrons-left",
+  "pagination-prev": "pagination",
+  "pagination-prev-icon": "i-lucide-chevron-left",
+  "pagination-next": "pagination",
+  "pagination-next-icon": "i-lucide-chevron-right",
+  "pagination-last": "pagination",
+  "pagination-last-icon": "i-lucide-chevrons-right"
+};
+const dynamicPagination = [
+  [
+    /^pagination-ellipsis(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "text", color = "black"]) => `btn-${variant}-${color}`
+  ],
+  [
+    /^pagination-selected(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "solid", color = "primary"]) => `data-[selected=true]:btn-${variant}-${color}`
+  ],
+  [
+    /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "solid", color = "white"]) => `data-[selected=false]:btn-${variant}-${color}`
+  ]
+];
+const pagination = [
+  ...dynamicPagination,
+  staticPagination
+];
+
 const staticPopover = {
   "popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover 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"
 };
@@ -601,7 +646,7 @@ const staticSelect = {
   "select-trigger-warning-icon": "i-warning",
   // components
   "select-root": "",
-  "select-trigger": "min-h-2.5em w-full",
+  "select-trigger": "w-full",
   // [&>span]:line-clamp-1
   "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
   "select-trigger-trailing": "ml-auto n-disabled",
@@ -682,7 +727,7 @@ const skeleton = [
 
 const staticSlider = {
   // configurations
-  "slider": "slider-primary size-base",
+  "slider": "slider-primary",
   "slider-disabled": "n-disabled",
   "slider-root-vertical": "flex-col w-1em h-full",
   "slider-track-vertical": "w-0.5em h-full",
@@ -849,7 +894,8 @@ const shortcuts = [
   ...dropdowMenu,
   ...label,
   ...popover,
-  ...tooltip
+  ...tooltip,
+  ...pagination
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -159,19 +159,20 @@ const staticBtn = {
   // config
   "btn-default-variant": "btn-solid",
   "btn-loading-icon": "i-loading",
+  "btn-default-radius": "rounded-md",
   // base
-  "btn": "bg-transparent transition-colors text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
+  "btn": "btn-rectangle px-0.7142857142857143em py-0.42857142857142855em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.42857142857142855em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
   "btn-leading": "-ml-0.14285714285714285em text-1.191em",
   "btn-trailing": "-mr-0.14285714285714285em text-1.191em",
   "btn-loading": "animate-spin text-1.191em",
+  "btn-rectangle": "h-2.5em",
+  "btn-square": "w-2.5em h-2.5em",
   // options
   "btn-block": "w-full",
   "btn-reverse": "flex-row-reverse",
-  "btn-rectangle": "px-0.7142857142857143em py-0.42857142857142855em",
-  "btn-square": "p-0.42857142857142855em",
   // 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",
@@ -366,8 +367,14 @@ const staticGeneral = {
   "transition-base": "transition-all duration-100 ease-out"
 };
 const dynamicGeneral = [
-  // TODO: n-text-<color><-number><-number>
-  // [/^n-text(-(\S+))?$/, ([, , c = 'primary']) => `text-${c}-700 dark:text-${c}-400`],
+  // 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,
@@ -529,6 +536,44 @@ const navLinkGroup = [
   staticNavLinkGroup
 ];
 
+const staticPagination = {
+  // configurations
+  "pagination": "overflow-hidden",
+  "pagination-list": "flex items-center gap-1 overflow-hidden",
+  // components
+  "pagination-root": "",
+  "pagination-list-item": "pagination",
+  "pagination-ellipsis-base": "btn flex items-center justify-center",
+  "pagination-ellipsis-icon-base": "w-1em h-1em",
+  "pagination-ellipsis-icon": "i-lucide-ellipsis",
+  "pagination-first": "pagination",
+  "pagination-first-icon": "i-lucide-chevrons-left",
+  "pagination-prev": "pagination",
+  "pagination-prev-icon": "i-lucide-chevron-left",
+  "pagination-next": "pagination",
+  "pagination-next-icon": "i-lucide-chevron-right",
+  "pagination-last": "pagination",
+  "pagination-last-icon": "i-lucide-chevrons-right"
+};
+const dynamicPagination = [
+  [
+    /^pagination-ellipsis(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "text", color = "black"]) => `btn-${variant}-${color}`
+  ],
+  [
+    /^pagination-selected(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "solid", color = "primary"]) => `data-[selected=true]:btn-${variant}-${color}`
+  ],
+  [
+    /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "solid", color = "white"]) => `data-[selected=false]:btn-${variant}-${color}`
+  ]
+];
+const pagination = [
+  ...dynamicPagination,
+  staticPagination
+];
+
 const staticPopover = {
   "popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover 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"
 };
@@ -599,7 +644,7 @@ const staticSelect = {
   "select-trigger-warning-icon": "i-warning",
   // components
   "select-root": "",
-  "select-trigger": "min-h-2.5em w-full",
+  "select-trigger": "w-full",
   // [&>span]:line-clamp-1
   "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
   "select-trigger-trailing": "ml-auto n-disabled",
@@ -680,7 +725,7 @@ const skeleton = [
 
 const staticSlider = {
   // configurations
-  "slider": "slider-primary size-base",
+  "slider": "slider-primary",
   "slider-disabled": "n-disabled",
   "slider-root-vertical": "flex-col w-1em h-full",
   "slider-track-vertical": "w-0.5em h-full",
@@ -847,7 +892,8 @@ const shortcuts = [
   ...dropdowMenu,
   ...label,
   ...popover,
-  ...tooltip
+  ...tooltip,
+  ...pagination
 ];
 
 export { shortcuts };

package/package.json

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