@una-ui/preset 0.8.0-beta.1 → 0.9.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/prefixes.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "skeleton", "theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
3
+ const prefixes = ["theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "separator", "skeleton", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
4
4
 
5
5
  module.exports = prefixes;
package/dist/prefixes.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "skeleton", "theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
1
+ const prefixes = ["theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "separator", "skeleton", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
2
2
 
3
3
  export { prefixes as default };
@@ -111,16 +111,17 @@ const staticBtn = {
111
111
  // variants
112
112
  "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
113
113
  "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
114
+ "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
114
115
  "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",
115
116
  "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
116
117
  "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
117
118
  "btn-outline-gray": "bg-transparent text-muted ring-1 ring-base ring-inset btn-focus",
118
- "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
119
119
  "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
120
- "btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
121
- "btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
122
- "btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
123
- "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
120
+ "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
121
+ "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
122
+ "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
123
+ "btn-text-black": "text-base btn-focus hover:text-muted",
124
+ "btn-soft-black": "text-base bg-base btn-focus shadow-sm"
124
125
  };
125
126
  const dynamicBtn = [
126
127
  // base
@@ -425,9 +426,9 @@ const staticKbd = {
425
426
  };
426
427
  const dynamicKbd = [
427
428
  // modifiers
428
- [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
429
+ [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
429
430
  // variants
430
- [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
431
+ [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
431
432
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
432
433
  ];
433
434
  const kbd = [
@@ -597,6 +598,37 @@ const select = [
597
598
  staticSelect
598
599
  ];
599
600
 
601
+ const staticSeparator = {
602
+ // base
603
+ "separator": "text-md shrink-0 relative",
604
+ "separator-default-variant": "separator-solid-gray",
605
+ "separator-content": "text-0.75em text-muted bg-base absolute flex justify-center items-center",
606
+ // orientation states
607
+ "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
608
+ "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
609
+ "separator-content-horizontal": "h-1px py-1 px-2",
610
+ "separator-content-vertical": "w-1px px-1 py-2",
611
+ // horizontal positions
612
+ "separator-position-left": "left-6 top-1/2 -translate-y-1/2",
613
+ "separator-position-right": "right-6 top-1/2 -translate-y-1/2",
614
+ "separator-position-center": "left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2",
615
+ // vertical positions
616
+ "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
617
+ "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
618
+ // static variants
619
+ "separator-solid-gray": "border-base"
620
+ };
621
+ const dynamicSeparator = [
622
+ // dynamic variants
623
+ [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
624
+ [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
625
+ [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
626
+ ];
627
+ const separator = [
628
+ ...dynamicSeparator,
629
+ staticSeparator
630
+ ];
631
+
600
632
  const shortcuts = [
601
633
  ...general,
602
634
  ...accordion,
@@ -619,7 +651,8 @@ const shortcuts = [
619
651
  ...slider,
620
652
  ...progress,
621
653
  ...skeleton,
622
- ...select
654
+ ...select,
655
+ ...separator
623
656
  ];
624
657
 
625
658
  exports.shortcuts = shortcuts;
@@ -109,16 +109,17 @@ const staticBtn = {
109
109
  // variants
110
110
  "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
111
111
  "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
112
+ "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
112
113
  "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",
113
114
  "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
114
115
  "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
115
116
  "btn-outline-gray": "bg-transparent text-muted ring-1 ring-base ring-inset btn-focus",
116
- "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
117
117
  "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
118
- "btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
119
- "btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
120
- "btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
121
- "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
118
+ "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
119
+ "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
120
+ "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
121
+ "btn-text-black": "text-base btn-focus hover:text-muted",
122
+ "btn-soft-black": "text-base bg-base btn-focus shadow-sm"
122
123
  };
123
124
  const dynamicBtn = [
124
125
  // base
@@ -423,9 +424,9 @@ const staticKbd = {
423
424
  };
424
425
  const dynamicKbd = [
425
426
  // modifiers
426
- [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
427
+ [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
427
428
  // variants
428
- [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
429
+ [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
429
430
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
430
431
  ];
431
432
  const kbd = [
@@ -595,6 +596,37 @@ const select = [
595
596
  staticSelect
596
597
  ];
597
598
 
599
+ const staticSeparator = {
600
+ // base
601
+ "separator": "text-md shrink-0 relative",
602
+ "separator-default-variant": "separator-solid-gray",
603
+ "separator-content": "text-0.75em text-muted bg-base absolute flex justify-center items-center",
604
+ // orientation states
605
+ "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
606
+ "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
607
+ "separator-content-horizontal": "h-1px py-1 px-2",
608
+ "separator-content-vertical": "w-1px px-1 py-2",
609
+ // horizontal positions
610
+ "separator-position-left": "left-6 top-1/2 -translate-y-1/2",
611
+ "separator-position-right": "right-6 top-1/2 -translate-y-1/2",
612
+ "separator-position-center": "left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2",
613
+ // vertical positions
614
+ "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
615
+ "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
616
+ // static variants
617
+ "separator-solid-gray": "border-base"
618
+ };
619
+ const dynamicSeparator = [
620
+ // dynamic variants
621
+ [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
622
+ [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
623
+ [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
624
+ ];
625
+ const separator = [
626
+ ...dynamicSeparator,
627
+ staticSeparator
628
+ ];
629
+
598
630
  const shortcuts = [
599
631
  ...general,
600
632
  ...accordion,
@@ -617,7 +649,8 @@ const shortcuts = [
617
649
  ...slider,
618
650
  ...progress,
619
651
  ...skeleton,
620
- ...select
652
+ ...select,
653
+ ...separator
621
654
  ];
622
655
 
623
656
  export { shortcuts };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@una-ui/preset",
3
- "version": "0.8.0-beta.1",
3
+ "version": "0.9.0-beta.4",
4
4
  "description": "The default preset for @una-ui",
5
5
  "author": "Phojie Rengel <phojrengel@gmail.com>",
6
6
  "license": "MIT",