@typlog/ui 0.11.8 → 0.12.1

package/addons.css

@@ -1,4 +1,42 @@
 
+.ui-SocialButton:where(.r-variant-classic) {
+  background-color: var(--social-button-background-color);
+  color: var(--social-button-text-color);
+  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
+  --social-button-background-color: black;
+  --social-button-text-color: white;
+  --social-button-hover-filter: brightness(0.92) saturate(1.1);
+}
+@media (hover: hover) {
+.ui-SocialButton:where(:hover) {
+    filter: var(--social-button-hover-filter);
+}
+}
+.ui-SocialButton:where(.r-brand-google) {
+  --social-button-background-color: var(--color-background);
+  --social-button-text-color: var(--gray-12);
+}
+.ui-SocialButton:where(.r-brand-facebook) {
+  --social-button-background-color: #1877F2;
+}
+.ui-SocialButton:where(.r-brand-github) {
+  --social-button-background-color: #333;
+}
+.ui-SocialButton:where(.r-variant-classic):where(.r-brand-slack) {
+  --social-button-background-color: #611f69;
+}
+.ui-SocialButton:where(.r-variant-classic):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-SocialButton:where(.r-variant-classic):where(:active) {
+  box-shadow: var(--shadow-1);
+}
+.ui-SocialButton:where(.r-variant-classic):where([data-disabled]) {
+  color: var(--gray-a10);
+  background-color: var(--gray-a2);
+}
+
 .ui-IconifySample {
   display: flex;
   gap: var(--space-4);
@@ -111,3 +149,15 @@
 .ui-IconifyCollectionIconGrid button:hover {
   background-color: var(--gray-a4);
 }
+
+.ui-Turnstile {
+  background: var(--gray-a3);
+}
+.ui-Turnstile:where(.r-size-normal) {
+  width: 300px;
+  height: 65px;
+}
+.ui-Turnstile:where(.r-size-compact) {
+  width: 150px;
+  height: 140px;
+}

package/addons.d.ts

@@ -1,8 +1,19 @@
+import { AsTag } from 'reka-ui';
+import { Component } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { PrimitiveProps } from 'reka-ui';
 import { PublicProps } from 'vue';
 
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type BrandType = 'google' | 'facebook' | 'x' | 'github' | 'apple' | 'slack' | 'figma';
+
 export declare const IconifyCollection: DefineComponent<IconifyCollectionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 select: (icon: string) => any;
 }, string, PublicProps, Readonly<IconifyCollectionProps> & Readonly<{
@@ -12,13 +23,35 @@ perpage: number;
 iconSize: string | number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare interface IconifyCollectionProps {
+export declare interface IconifyCollectionProps {
     prefix?: string;
     search?: string;
     perpage?: number;
     iconSize?: string | number;
 }
 
+declare type RadiusType = 'none' | 'small' | 'medium' | 'large' | 'full';
+
+export declare const SocialButton: __VLS_WithTemplateSlots<DefineComponent<SocialButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SocialButtonProps> & Readonly<{}>, {
+as: AsTag | Component;
+size: "1" | "2" | "3" | "4";
+variant: "classic" | "solid" | "soft" | "surface" | "outline";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+
+export declare interface SocialButtonProps extends PrimitiveProps {
+    brand: BrandType;
+    variant?: 'classic' | 'solid' | 'soft' | 'surface' | 'outline';
+    radius?: RadiusType;
+    /**
+     * Control the size of the social button.
+     * @default "2"
+     */
+    size?: '1' | '2' | '3' | '4';
+    disabled?: boolean;
+}
+
 export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (args_0: string) => any;
 }, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
@@ -26,8 +59,8 @@ export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {},
 }>, {
 size: "normal" | "compact";
 theme: "light" | "dark" | "auto";
-resetInterval: number;
 action: string;
+resetInterval: number;
 appearance: "always" | "execute" | "interaction-only";
 renderOnMount: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {

package/addons.js

@@ -1,6 +1,53 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode, unref, ref, computed, onMounted, withDirectives, createCommentVNode, withKeys, createBlock, mergeProps, withModifiers, vShow, withCtx, createTextVNode, normalizeStyle, useTemplateRef, onBeforeUnmount } from "vue";
+import { defineComponent, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createCommentVNode, renderSlot, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode, ref, onMounted, withDirectives, withKeys, mergeProps, withModifiers, vShow, createTextVNode, normalizeStyle, useTemplateRef, onBeforeUnmount } from "vue";
+import { Primitive, injectDialogRootContext } from "reka-ui";
 import { Icon } from "@iconify/vue";
-import { TextField, Button, Tooltip, Pagination } from "./components";
+import { buildPropsClass, TextField, Button, Tooltip, Pagination } from "./components";
+const BRAND_ICONS = {
+  google: "logos:google-icon",
+  facebook: "simple-icons:facebook",
+  x: "simple-icons:x",
+  github: "simple-icons:github",
+  apple: "simple-icons:apple",
+  slack: "logos:slack-icon",
+  figma: "logos:figma"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SocialButton",
+  props: {
+    brand: {},
+    variant: { default: "classic" },
+    radius: {},
+    size: { default: "2" },
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  setup(__props) {
+    const props = __props;
+    const resetClass = buildPropsClass(props, ["size", "brand", "variant"]);
+    const brandIcon = computed(() => {
+      return BRAND_ICONS[props.brand];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        class: normalizeClass(["ui-Button ui-SocialButton", unref(resetClass)]),
+        "as-child": props.asChild,
+        as: props.as,
+        "data-radius": props.radius,
+        "data-disabled": props.disabled ? true : void 0
+      }, {
+        default: withCtx(() => [
+          brandIcon.value ? (openBlock(), createBlock(unref(Icon), {
+            key: 0,
+            icon: brandIcon.value
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "as-child", "as", "data-radius", "data-disabled"]);
+    };
+  }
+});
 const _hoisted_1$1 = {
   type: "button",
   class: "ui-IconifySample"
@@ -117,6 +164,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const dialogContext = injectDialogRootContext(null);
     const shouldDisplay = ref("all");
     const groupCollections = ref([]);
     const collectionFilter = ref("");
@@ -137,6 +185,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const onSelectIcon = (icon) => {
       emits("select", icon);
+      if (dialogContext) {
+        dialogContext.onOpenChange(false);
+      }
     };
     const onSearch = async () => {
       if (searchQuery.value) {
@@ -274,7 +325,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               onClick: withModifiers(reset, ["prevent"])
             }, {
               default: withCtx(() => _cache[5] || (_cache[5] = [
-                createTextVNode(" Back ")
+                createTextVNode(" Back ", -1)
               ])),
               _: 1,
               __: [5]
@@ -431,12 +482,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "element",
         ref: element,
-        class: "ui-Turnstile"
-      }, null, 512);
+        class: normalizeClass(["ui-Turnstile", `r-size-${_ctx.size}`])
+      }, null, 2);
     };
   }
 });
 export {
   _sfc_main$1 as IconifyCollection,
+  _sfc_main$3 as SocialButton,
   _sfc_main as Turnstile
 };

package/base.css

@@ -6427,66 +6427,6 @@
   --scaling: 1.2;
 }
 
-html.light {
-  --light-0: white;
-  --light-a1: var(--white-a1);
-  --light-a2: var(--white-a2);
-  --light-a3: var(--white-a3);
-  --light-a4: var(--white-a4);
-  --light-a5: var(--white-a5);
-  --light-a6: var(--white-a6);
-  --light-a7: var(--white-a7);
-  --light-a8: var(--white-a8);
-  --light-a9: var(--white-a9);
-  --light-a10: var(--white-a10);
-  --light-a11: var(--white-a11);
-  --light-a12: var(--white-a12);
-  --dark-0: black;
-  --dark-a1: var(--black-a1);
-  --dark-a2: var(--black-a2);
-  --dark-a3: var(--black-a3);
-  --dark-a4: var(--black-a4);
-  --dark-a5: var(--black-a5);
-  --dark-a6: var(--black-a6);
-  --dark-a7: var(--black-a7);
-  --dark-a8: var(--black-a8);
-  --dark-a9: var(--black-a9);
-  --dark-a10: var(--black-a10);
-  --dark-a11: var(--black-a11);
-  --dark-a12: var(--black-a12);
-  --light-surface: white;
-}
-
-html.dark {
-  --light-0: black;
-  --light-a1: var(--black-a1);
-  --light-a2: var(--black-a2);
-  --light-a3: var(--black-a3);
-  --light-a4: var(--black-a4);
-  --light-a5: var(--black-a5);
-  --light-a6: var(--black-a6);
-  --light-a7: var(--black-a7);
-  --light-a8: var(--black-a8);
-  --light-a9: var(--black-a9);
-  --light-a10: var(--black-a10);
-  --light-a11: var(--black-a11);
-  --light-a12: var(--black-a12);
-  --dark-0: white;
-  --dark-a1: var(--white-a1);
-  --dark-a2: var(--white-a2);
-  --dark-a3: var(--white-a3);
-  --dark-a4: var(--white-a4);
-  --dark-a5: var(--white-a5);
-  --dark-a6: var(--white-a6);
-  --dark-a7: var(--white-a7);
-  --dark-a8: var(--white-a8);
-  --dark-a9: var(--white-a9);
-  --dark-a10: var(--white-a10);
-  --dark-a11: var(--white-a11);
-  --dark-a12: var(--white-a12);
-  --light-surface: var(--slate-a1);
-}
-
 [data-radius] {
   --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
@@ -6790,6 +6730,15 @@ html.dark {
   }
 }
 
+@keyframes ui-spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .ui-root {
   --font-size-1: calc(12px * var(--scaling));
   --font-size-2: calc(14px * var(--scaling));
@@ -6836,3 +6785,10 @@ html.dark {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.ui-root {
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+}

package/components/badge.css

@@ -9,6 +9,8 @@
   line-height: 1;
   height: -moz-fit-content;
   height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .ui-Badge:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -18,6 +20,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-1), var(--radius-full));
 }
+.ui-Badge:where(.r-size-1):where([data-radius="full"]) {
+  padding: calc(var(--space-1) * 0.5) var(--space-2);
+}
 .ui-Badge:where(.r-size-2) {
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
@@ -26,6 +31,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-2):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.25);
+}
 .ui-Badge:where(.r-size-3) {
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
@@ -34,6 +42,9 @@
   gap: var(--space-2);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-3):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.5);
+}
 .ui-Badge:where(.r-variant-solid) {
   background-color: var(--accent-9);
   color: var(--accent-contrast);

package/components/button.css

@@ -1,4 +1,3 @@
-
 .ui-Button {
   display: inline-flex;
   align-items: center;
@@ -258,41 +257,3 @@
   width: var(--button-height);
   padding: 0;
 }
-
-.ui-SocialButton {
-  background-color: var(--social-button-background-color);
-  color: var(--social-button-text-color);
-  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
-  --social-button-background-color: black;
-  --social-button-text-color: white;
-  --social-button-hover-filter: brightness(0.92) saturate(1.1);
-}
-@media (hover: hover) {
-.ui-SocialButton:where(:hover) {
-    filter: var(--social-button-hover-filter);
-}
-}
-.ui-SocialButton:where(.r-brand-google) {
-  background-color: var(--color-background);
-  --social-button-text-color: var(--gray-12);
-}
-.ui-SocialButton:where(.r-brand-facebook) {
-  --social-button-background-color: #1877F2;
-}
-.ui-SocialButton:where(.r-brand-github) {
-  --social-button-background-color: #333;
-}
-.ui-SocialButton:where(.r-brand-slack) {
-  --social-button-background-color: #611f69;
-}
-.ui-SocialButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-SocialButton:where(:active) {
-  box-shadow: var(--shadow-1);
-}
-.ui-SocialButton:where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
-}

package/components/card.css

@@ -1,35 +1,4 @@
 
-.ui-Card {
-  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;
-  --inset-padding-top: var(--card-padding);
-  --inset-padding-right: var(--card-padding);
-  --inset-padding-bottom: var(--card-padding);
-  --inset-padding-left: var(--card-padding);
-}
-.ui-Card:where(:-moz-any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-Card:where(:any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-Card:where(:-moz-any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.ui-Card:where(:any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
 .ui-Card:where(.r-size-1) {
   --card-padding: var(--space-3);
   --card-border-radius: max(var(--radius-4), var(--radius-full));
@@ -60,27 +29,3 @@
 .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
   border-color: var(--gray-a5);
 }
-
-.ui-CardHead {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: calc(0px - var(--card-padding));
-  margin-right: calc(0px - var(--card-padding));
-  margin-top: calc(0px - var(--card-padding));
-  padding: var(--card-padding);
-  --card-head-border-color: var(--card-border-color, var(--gray-a5));
-  border-bottom: 1px solid var(--card-head-border-color);
-}
-.ui-CardHead:where(:-moz-any-link, button, label):where(:hover) {
-  background-color: var(--accent-a3);
-}
-.ui-CardHead:where(:any-link, button, label):where(:hover) {
-  background-color: var(--accent-a3);
-}
-.ui-CardHead:where(:-moz-any-link, button, label):where(:focus-visible) {
-  background-color: var(--accent-a4);
-}
-.ui-CardHead:where(:any-link, button, label):where(:focus-visible) {
-  background-color: var(--accent-a4);
-}