@typlog/ui 0.11.1 → 0.11.3

package/dist/components.js

@@ -1,6 +1,6 @@
 import { computed, defineComponent, createBlock, openBlock, unref, normalizeClass, withCtx, createVNode, createTextVNode, toDisplayString, renderSlot, createElementBlock, mergeProps, createCommentVNode, createElementVNode, toRefs, mergeModels, ref, useModel, onMounted, onBeforeUnmount, useTemplateRef, withDirectives, isRef, vModelDynamic, vModelText, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, watch, renderList, withModifiers, vModelRadio } from "vue";
-import { useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, Primitive, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogClose, useForwardExpose, createContext, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, useForwardPropsEmits as useForwardPropsEmits$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleContent, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
-import { AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, CollapsibleRoot, CollapsibleTrigger, ComboboxEmpty, ComboboxGroup, DialogClose as DialogClose2, DialogDescription, DialogRoot, DialogTitle as DialogTitle2, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, RadioGroupItem as RadioGroupItem2, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
+import { useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, Primitive, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DialogTitle, DialogClose, DialogPortal, DialogOverlay, DialogContent, useForwardExpose, createContext, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, useForwardPropsEmits as useForwardPropsEmits$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleContent, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, CollapsibleRoot, CollapsibleTrigger, ComboboxEmpty, ComboboxGroup, DialogClose as DialogClose2, DialogDescription, DialogRoot, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, RadioGroupItem as RadioGroupItem2, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
 import { Icon } from "@iconify/vue";
 import { Icon as Icon2 } from "@iconify/vue";
 function useForwardPropsEmits(props, emit, exclude) {
@@ -60,7 +60,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -112,7 +112,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -144,32 +144,16 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Inset",
   props: {
     side: { default: "all" },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
     clip: { default: "border-box" }
   },
   setup(__props) {
     const props = __props;
     const resetClass = computed(() => {
-      const rv = [];
-      if (props.top || ["all", "y", "top"].includes(props.side)) {
-        rv.push("inset-top");
-      }
-      if (props.bottom || ["all", "y", "bottom"].includes(props.side)) {
-        rv.push("inset-bottom");
-      }
-      if (props.left || ["all", "x", "left"].includes(props.side)) {
-        rv.push("inset-left");
-      }
-      if (props.right || ["all", "x", "right"].includes(props.side)) {
-        rv.push("inset-right");
-      }
+      const rv = [`r-side-${props.side}`];
       if (props.clip) {
         rv.push(`r-clip-${props.clip}`);
       }
@@ -184,7 +168,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -213,7 +197,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "CardHead",
   props: {
     color: {},
@@ -236,7 +220,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -270,7 +254,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: {},
@@ -286,7 +270,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const props = __props;
     const forwarded = useForwardProps(props);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$S, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
+      return openBlock(), createBlock(_sfc_main$T, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -304,7 +288,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -342,7 +326,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -408,7 +392,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$j = { class: "ui-DialogScroll" };
 const _hoisted_2$7 = ["data-align"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -425,7 +409,6 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     minHeight: {},
     maxHeight: {},
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}
@@ -490,8 +473,60 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "ui-DialogScroll" };
-const _hoisted_2$6 = ["data-align"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
+  __name: "DialogTitle",
+  props: {
+    variant: { default: "ghost" },
+    close: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "h2" }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$W, {
+        class: normalizeClass(["ui-DialogTitle", `r-variant-${_ctx.variant}`]),
+        side: "all"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(DialogTitle), {
+            class: "ui-DialogTitleText",
+            as: props.as
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["as"]),
+          _ctx.close ? (openBlock(), createBlock(unref(DialogClose), {
+            key: 0,
+            class: "ui-DialogTitleClose",
+            type: "button",
+            "aria-label": "Close",
+            "as-child": ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$S, {
+                color: "gray",
+                variant: "soft",
+                size: "1"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Icon), { icon: "lucide:x" })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+const _hoisted_1$i = { class: "ui-DialogWrapper" };
+const _hoisted_2$6 = { class: "ui-DialogContainer" };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -499,8 +534,6 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "DialogContent",
   props: {
     to: {},
-    align: { default: "center" },
-    class: {},
     size: { default: "3" },
     width: {},
     minWidth: {},
@@ -509,7 +542,6 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     minHeight: {},
     maxHeight: {},
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}
@@ -538,13 +570,9 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1$i, [
-                createElementVNode("div", {
-                  class: "ui-DialogScrollPadding",
-                  "data-align": props.align
-                }, [
+                createElementVNode("div", _hoisted_2$6, [
                   createVNode(unref(DialogContent), mergeProps({
-                    class: ["ui-DialogContent", props.class],
-                    "data-size": props.size
+                    class: ["ui-DialogContent", `r-size-${props.size}`]
                   }, {
                     ..._ctx.$attrs,
                     ...unref(forwarded)
@@ -562,8 +590,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ]),
                     _: 3
-                  }, 16, ["class", "data-size", "style"])
-                ], 8, _hoisted_2$6)
+                  }, 16, ["class", "style"])
+                ])
               ])
             ]),
             _: 3
@@ -582,23 +610,22 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$V, {
+      return openBlock(), createBlock(_sfc_main$W, {
         class: "ui-DialogHead",
         side: "x"
       }, {
         default: withCtx(() => [
-          createVNode(unref(DialogTitle), { class: "font-semibold" }, {
+          createVNode(unref(DialogTitle), null, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(props.title), 1)
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$R, {
+          createVNode(_sfc_main$S, {
             as: unref(DialogClose),
             type: "button",
             variant: "ghost",
             color: "gray",
-            radius: "full",
             "aria-label": "Close"
           }, {
             default: withCtx(() => [
@@ -674,7 +701,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             "data-size": props.size
           }), {
             default: withCtx(() => [
-              createVNode(_sfc_main$P, { type: "auto" }, {
+              createVNode(_sfc_main$Q, { type: "auto" }, {
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_1$h, [
                     renderSlot(_ctx.$slots, "default")
@@ -1739,7 +1766,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     };
     watch(values, () => {
-      context.filterState.search = "";
+      context.filterSearch.value = "";
+      emits("update:modelValue", "");
     }, { deep: true });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxAnchor), {
@@ -2091,7 +2119,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         "data-high-contrast": unref(rootContext).highContrast?.value
       }, { ...unref(forwarded), asChild: false }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$U, {
+          createVNode(_sfc_main$V, {
             "as-child": unref(forwarded).asChild
           }, {
             default: withCtx(() => [
@@ -2490,7 +2518,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-Pagination", resetClass.value])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2503,7 +2531,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$S, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$T, mergeProps(buttonProps.value, {
           disabled: page.value === 1,
           "aria-current": "page",
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
@@ -2515,7 +2543,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2528,7 +2556,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           _: 3
         }, 16)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(pagination.value.pageList, (p) => {
-          return openBlock(), createBlock(_sfc_main$S, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$T, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2541,7 +2569,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2553,7 +2581,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$T, mergeProps({ key: 3 }, buttonProps.value, {
           disabled: pagination.value.totalPages === page.value,
           "aria-current": "page",
           onClick: _cache[2] || (_cache[2] = withModifiers(($event) => selectPage(pagination.value.totalPages), ["prevent"]))
@@ -2567,7 +2595,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2601,7 +2629,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$P, null, {
+        createVNode(_sfc_main$Q, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2859,16 +2887,16 @@ export {
   _sfc_main$9 as AccordionTrigger,
   AlertDialogAction,
   AlertDialogCancel,
-  _sfc_main$O as AlertDialogContent,
+  _sfc_main$P as AlertDialogContent,
   AlertDialogDescription,
   AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$X as Avatar,
-  _sfc_main$W as Badge,
-  _sfc_main$S as Button,
-  _sfc_main$U as Card,
-  _sfc_main$T as CardHead,
+  _sfc_main$Y as Avatar,
+  _sfc_main$X as Badge,
+  _sfc_main$T as Button,
+  _sfc_main$V as Card,
+  _sfc_main$U as CardHead,
   _sfc_main$H as Checkbox,
   _sfc_main$E as CheckboxGroupControl,
   _sfc_main$F as CheckboxGroupItem,
@@ -2890,7 +2918,7 @@ export {
   DialogDescription,
   _sfc_main$M as DialogHead,
   DialogRoot,
-  DialogTitle2 as DialogTitle,
+  _sfc_main$O as DialogTitle,
   DialogTrigger,
   _sfc_main$L as DropdownMenuContent,
   _sfc_main$K as DropdownMenuItem,
@@ -2898,9 +2926,9 @@ export {
   DropdownMenuTrigger,
   _sfc_main$f as Editable,
   Icon2 as Icon,
-  _sfc_main$R as IconButton,
+  _sfc_main$S as IconButton,
   _sfc_main as IconCircle,
-  _sfc_main$V as Inset,
+  _sfc_main$W as Inset,
   _sfc_main$7 as Pagination,
   _sfc_main$b as PlusMinusIcon,
   PopoverClose,
@@ -2916,7 +2944,7 @@ export {
   RadioGroupItem2 as RadioTabsItem,
   _sfc_main$i as RadioTabsList,
   _sfc_main$1 as SavingIndicator,
-  _sfc_main$P as ScrollArea,
+  _sfc_main$Q as ScrollArea,
   _sfc_main$w as SelectContent,
   SelectGroup,
   _sfc_main$u as SelectItem,
@@ -2925,7 +2953,7 @@ export {
   SelectSeparator,
   _sfc_main$v as SelectTrigger,
   _sfc_main$5 as Separator,
-  _sfc_main$Q as SocialButton,
+  _sfc_main$R as SocialButton,
   _sfc_main$2 as Spinner,
   _sfc_main$I as Switch,
   _sfc_main$6 as Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typlog/ui",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "license": "MIT",
   "type": "module",
   "description": "Themed components for Reka UI.",

package/tailwind/index.css

@@ -1,3 +1,4 @@
 @import "./space.css";
 @import "./colors.css";
+@import "./shadow.css";
 @import "./breakpoints.css";

package/tailwind/shadow.css

@@ -0,0 +1,8 @@
+@theme {
+  --shadow-1: var(--shadow-1);
+  --shadow-2: var(--shadow-2);
+  --shadow-3: var(--shadow-3);
+  --shadow-4: var(--shadow-4);
+  --shadow-5: var(--shadow-5);
+  --shadow-6: var(--shadow-6);
+}