@typlog/ui 0.12.0 → 0.12.2

package/addons.css

@@ -150,19 +150,6 @@
   background-color: var(--gray-a4);
 }
 
-.ui-SpinnerIcon {
-  color: var(--gray-10);
-}
-.ui-SpinnerIcon:where(.r-size-1) {
-  font-size: var(--space-3);
-}
-.ui-SpinnerIcon:where(.r-size-2) {
-  font-size: var(--space-4);
-}
-.ui-SpinnerIcon:where(.r-size-3) {
-  font-size: calc(1.25 * var(--space-4));
-}
-
 .ui-Turnstile {
   background: var(--gray-a3);
 }

package/addons.d.ts

@@ -52,26 +52,6 @@ export declare interface SocialButtonProps extends PrimitiveProps {
     disabled?: boolean;
 }
 
-export declare const SpinnerIcon: DefineComponent<SpinnerIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SpinnerIconProps> & Readonly<{}>, {
-size: "1" | "2" | "3";
-icon: SpinnerIcon_2;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
-declare type SpinnerIcon_2 = '12-dots-scale-rotate' | '180-ring' | '180-ring-with-bg' | '270-ring' | '270-ring-with-bg' | '3-dots-bounce' | '3-dots-fade' | '3-dots-move' | '3-dots-rotate' | '3-dots-scale' | '3-dots-scale-middle' | '6-dots-rotate' | '6-dots-scale' | '6-dots-scale-middle' | '8-dots-rotate' | '90-ring' | '90-ring-with-bg' | 'bars-fade' | 'bars-rotate-fade' | 'bars-scale' | 'bars-scale-fade' | 'bars-scale-middle' | 'blocks-scale' | 'blocks-shuffle-2' | 'blocks-shuffle-3' | 'blocks-wave' | 'bouncing-ball' | 'clock' | 'dot-revolve' | 'eclipse' | 'eclipse-half' | 'gooey-balls-1' | 'gooey-balls-2' | 'pulse' | 'pulse-2' | 'pulse-3' | 'pulse-multiple' | 'pulse-ring' | 'pulse-rings-2' | 'pulse-rings-3' | 'pulse-rings-multiple' | 'ring-resize' | 'tadpole' | 'wifi' | 'wifi-fade' | 'wind-toy';
-
-export declare interface SpinnerIconProps {
-    /**
-     * Icon name of the spinner.
-     * @default "180-ring"
-     */
-    icon?: SpinnerIcon_2;
-    /**
-     * Control size of the spinner.
-     * @default "2"
-     */
-    size?: '1' | '2' | '3';
-}
-
 export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (args_0: string) => any;
 }, string, PublicProps, Readonly<TurnstileProps> & Readonly<{

package/addons.js

@@ -11,7 +11,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -54,7 +54,7 @@ const _hoisted_1$1 = {
 };
 const _hoisted_2$1 = { class: "ui-IconifySampleInfo" };
 const _hoisted_3$1 = { class: "ui-IconifySampleIcons" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "IconifySample",
   props: {
     prefix: {},
@@ -152,7 +152,7 @@ const filterIcons = (names, query, suffix) => {
     return match;
   });
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "IconifyCollection",
   props: {
     prefix: {},
@@ -304,7 +304,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_8, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(collection.items, (item) => {
-                  return openBlock(), createBlock(_sfc_main$3, mergeProps({
+                  return openBlock(), createBlock(_sfc_main$2, mergeProps({
                     key: item.prefix
                   }, { ref_for: true }, item, {
                     onClick: withModifiers(($event) => onSelectPrefix(item.prefix), ["prevent"])
@@ -395,25 +395,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "SpinnerIcon",
-  props: {
-    icon: { default: "180-ring" },
-    size: { default: "2" }
-  },
-  setup(__props) {
-    const props = __props;
-    const iconName = computed(() => {
-      return `svg-spinners:${props.icon}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Icon), {
-        class: normalizeClass(["ui-SpinnerIcon", `r-size-${_ctx.size}`]),
-        icon: iconName.value
-      }, null, 8, ["class", "icon"]);
-    };
-  }
-});
 const turnstileSrc = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 const turnstileLoadFunction = "cfTurnstileOnLoad";
 let turnstileState = typeof window !== "undefined" ? window.turnstile !== void 0 ? "ready" : "unloaded" : "unloaded";
@@ -507,8 +488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$2 as IconifyCollection,
-  _sfc_main$4 as SocialButton,
-  _sfc_main$1 as SpinnerIcon,
+  _sfc_main$1 as IconifyCollection,
+  _sfc_main$3 as SocialButton,
   _sfc_main as Turnstile
 };

package/components/dialog.css

@@ -39,24 +39,31 @@
   box-sizing: border-box;
   padding-top: var(--space-6);
 }
+@layer components {
 .ui-DialogPopup {
-  width: 100%;
-  max-height: calc(100vh - var(--space-6) * 2);
-  position: relative;
-  box-sizing: border-box;
-  overflow: auto;
-  text-align: left;
-  box-sizing: border-box;
-  background-color: var(--color-panel-solid);
-  outline: none;
-  border-top-left-radius: var(--dialog-popup-radius);
-  border-top-right-radius: var(--dialog-popup-radius);
-  max-width: var(--dialog-popup-max-width);
-  max-height: var(--dialog-popup-max-height);
-  padding: var(--dialog-popup-padding);
+    width: 100%;
+    max-height: calc(100vh - var(--space-6) * 2);
+    position: relative;
+    box-sizing: border-box;
+    overflow: auto;
+    text-align: left;
+    box-sizing: border-box;
+    background-color: var(--color-panel-solid);
+    outline: none;
+    border-top-left-radius: var(--dialog-popup-radius);
+    border-top-right-radius: var(--dialog-popup-radius);
+    max-width: var(--dialog-popup-max-width);
+    max-height: var(--dialog-popup-max-height);
+    padding: var(--dialog-popup-padding);
+}
+:where(.ui-DialogPopup) .ui-CloseButton {
+    position: absolute;
+    top: calc(var(--dialog-popup-padding) / 2);
+    right: calc(var(--dialog-popup-padding) / 2);
+}
 }
 .ui-DialogPopup:where(.r-size-1) {
-  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-padding: var(--space-4);
   --dialog-popup-radius: var(--radius-4);
   --dialog-popup-max-width: 450px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -74,7 +81,7 @@
   --dialog-popup-max-height: calc(100vh - 100px);
 }
 .ui-DialogPopup:where(.r-size-4) {
-  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-padding: var(--space-5);
   --dialog-popup-radius: var(--radius-5);
   --dialog-popup-max-width: 1200px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -85,11 +92,6 @@
   --dialog-popup-max-width: none;
   --dialog-popup-max-height: calc(100vh - 64px);
 }
-
-/* special handle for tailwindcss p-0, when css priority doesn't work */
-.ui-DialogPopup:where(.p-0) {
-  --dialog-popup-padding: 0;
-}
 @media (min-width: 450px) {
 .ui-DialogContainer {
     justify-content: center;
@@ -97,10 +99,12 @@
     padding-left: var(--space-4);
     padding-right: var(--space-4);
 }
+@layer components {
 .ui-DialogPopup {
-    box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-popup-radius);
-    border-bottom-right-radius: var(--dialog-popup-radius);
+      box-shadow: var(--shadow-6);
+      border-bottom-left-radius: var(--dialog-popup-radius);
+      border-bottom-right-radius: var(--dialog-popup-radius);
+}
 }
 }
 @media (prefers-reduced-motion: no-preference) {

package/components/dropdown.css

@@ -152,7 +152,6 @@
   box-sizing: border-box;
   overflow: hidden;
   border-radius: var(--menu-content-border-radius);
-
   box-shadow: var(--shadow-5);
   background-color: var(--color-panel-solid);
 }

package/components/popover.css

@@ -34,17 +34,19 @@
 }
 }
 
+@layer components {
 .ui-PopoverPopup {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-  min-width: var(--reka-popover-trigger-width);
-  max-width: var(--reka-popover-content-available-width);
-  outline: 0;
-  overflow: auto;
-  position: relative;
-  box-sizing: border-box;
-  transform-origin: var(--reka-popover-content-transform-origin);
-  padding: var(--popover-popup-padding);
+    background-color: var(--color-panel-solid);
+    box-shadow: var(--shadow-5);
+    min-width: var(--reka-popover-trigger-width);
+    max-width: var(--reka-popover-content-available-width);
+    outline: 0;
+    overflow: auto;
+    position: relative;
+    box-sizing: border-box;
+    transform-origin: var(--reka-popover-content-transform-origin);
+    padding: var(--popover-popup-padding);
+}
 }
 .ui-PopoverPopup:where(.r-size-1) {
   border-radius: var(--radius-4);
@@ -54,6 +56,3 @@
   border-radius: var(--radius-5);
   --popover-popup-padding: var(--space-4);
 }
-.ui-PopoverPopup:where(.p-0) {
-  --popover-popup-padding: 0;
-}

package/components/radio.css

@@ -128,12 +128,14 @@
   --radio-size: calc(var(--space-4) * 1.25);
 }
 
+@layer components {
 .ui-RadioGroupItem {
-  display: inline-flex;
-  align-items: center;
-  gap: .5em;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 
 .ui-RadioCardsRoot:where(.r-size-1) {
@@ -148,19 +150,21 @@
   --card-padding: var(--space-5);
   --card-border-radius: max(var(--radius-5), var(--radius-full));
 }
+@layer components {
 .ui-BaseCard {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  font-style: normal;
-  text-align: start;
-  box-sizing: border-box;
-  border-radius: var(--card-border-radius);
-  padding: var(--card-padding);
-  border-color: var(--card-border-color, var(--gray-a5));
-  border-width: var(--card-border-width, 1px);
-  border-style: solid;
-  width: 100%;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    font-style: normal;
+    text-align: start;
+    box-sizing: border-box;
+    border-radius: var(--card-border-radius);
+    padding: var(--card-padding);
+    border-color: var(--card-border-color, var(--gray-a5));
+    border-width: var(--card-border-width, 1px);
+    border-style: solid;
+    width: 100%;
+}
 }
 .ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
   --card-border-color: var(--gray-a7);
@@ -177,11 +181,6 @@
   box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-/** special enhancement for tailwindcss */
-.ui-BaseCard:where(.p-0) {
-  --card-padding: 0;
-}
-
 .ui-RadioCardsItem {
   height: 100%;
 }
@@ -190,15 +189,17 @@
   box-shadow: 0 0 0 1px var(--accent-10);
 }
 
+@layer components {
 .ui-RadioTabsRoot {
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  box-sizing: border-box;
-  padding: var(--radio-tabs-list-padding);
-  border-radius: var(--radio-tabs-list-radius);
-  font-size: var(--radio-tabs-font-size);
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--radio-tabs-list-padding);
+    border-radius: var(--radio-tabs-list-radius);
+    font-size: var(--radio-tabs-font-size);
+}
 }
 .ui-RadioTabsRoot:where(.r-size-1) {
   --radio-tabs-font-size: var(--font-size-1);

package/components/tabs.css

@@ -1,66 +1,85 @@
 
-.ui-TabList {
-  justify-content: flex-start;
-  position: relative;
-  overflow-x: auto;
-  white-space: nowrap;
-  font-style: normal;
-  scrollbar-width: none;
-}
 .ui-TabList::-webkit-scrollbar {
   display: none;
 }
 .ui-TabList:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
+  --tab-font-size: var(--font-size-1);
+  --tab-line-height: var(--line-height-1);
+  --tab-letter-spacing: var(--letter-spacing-1);
   --tab-height: var(--space-6);
   --tab-padding-x: var(--space-1);
   --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: var(--radius-1);
+  --tab-item-radius: max(var(--radius-1), var(--radius-full));
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
 .ui-TabList:where(.r-size-2) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
+  --tab-font-size: var(--font-size-2);
+  --tab-line-height: var(--line-height-2);
+  --tab-letter-spacing: var(--letter-spacing-2);
   --tab-height: var(--space-7);
   --tab-padding-x: var(--space-2);
   --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: var(--radius-2);
+  --tab-item-radius: max(var(--radius-2), var(--radius-full));
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
+.ui-TabList:where(.r-variant-surface.r-size-1),
+.ui-TabList:where(.r-variant-soft.r-size-1) {
+  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
+}
+@layer components {
+.ui-TabList {
+    justify-content: flex-start;
+    position: relative;
+    overflow-x: auto;
+    white-space: nowrap;
+    font-style: normal;
+    scrollbar-width: none;
+    font-size: var(--tab-font-size);
+    line-height: var(--tab-line-height);
+    letter-spacing: var(--tab-letter-spacing);
 }
 
-/** classic & surface */
+  /** classic & surface */
 .ui-TabList:where(.r-variant-surface, .r-variant-classic) {
-  position: relative;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  border-radius: var(--tab-radius);
+    position: relative;
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--tab-radius);
 }
 .ui-TabList:where(.r-variant-classic) {
-  background-color: var(--accent-a3);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
+    background-color: var(--accent-a3);
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
 }
 .ui-TabList:where(.r-variant-surface) {
-  --tab-item-radius: 0;
-  --tab-inner-height: var(--tab-height);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
+    --tab-item-radius: 0;
+    --tab-inner-height: var(--tab-height);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+
+  /** soft & outline */
+.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+    display: flex;
+    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+}
+.ui-TabList:where(.r-variant-soft) {
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
+}
+}
+.ui-TabsIndicator {
+  position: absolute;
+  left: 0;
+  transition-property: width, transform;
+  transform: translateX(var(--reka-tabs-indicator-position));
+  width: var(--reka-tabs-indicator-size);
 }
 .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
@@ -80,20 +99,6 @@
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
-  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
-}
-
-/** soft & outline */
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
-  display: flex;
-  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
-}
-.ui-TabList:where(.r-variant-soft) {
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
-}
 .ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
   top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
   height: var(--tab-inner-height);