@scalar/components 0.10.0 → 0.11.0

package/README.md

@@ -13,8 +13,8 @@ pnpm i @scalar/theme @scalar/components
 In your main setup file (main.ts etc)
 
 ```ts
-import '@scalar/themes/fonts.css'
 import '@scalar/themes/base.css'
+import '@scalar/themes/fonts.css'
 ```
 
 Then to use the components
@@ -27,7 +27,7 @@ import { ScalarButton, ScalarTextField } from '@scalar/components'
 <template>
   <main class="col-1 items-center justify-center">
     <div
-      class="col w-full max-w-md items-center gap-4 rounded-lg bg-back-3 p-8 shadow">
+      class="col w-full max-w-md items-center gap-4 rounded-lg bg-b-3 p-8 shadow">
       <h1 className="text-lg font-bold">Sign in to your account</h1>
 
       <ScalarTextField
@@ -39,80 +39,6 @@ import { ScalarButton, ScalarTextField } from '@scalar/components'
 </template>
 ```
 
-## Theme variables
-
-To override the theme, feel free to set the `--scalar-x` versions of these variables.
-
-```ts
-export const theme = {
-  boxShadow: {
-    label:
-      '0 0 2px 2px var(--scalar-background-1)',
-    DEFAULT: 'var(--scalar-shadow-1)',
-    md: 'var(--scalar-shadow-2)',
-    sm: 'rgba(0, 0, 0, 0.09) 0px 1px 4px',
-    none: '0 0 #0000',
-  },
-  colors: {
-    'fore-1': 'var(--scalar-color-1)',
-    'fore-2': 'var(--scalar-color-2)',
-    'fore-3': 'var(--scalar-color-3)',
-    'accent': 'var(--scalar-color-accent)',
-    'back-1': 'var(--scalar-background-1)',
-    'back-2': 'var(--scalar-background-2)',
-    'back-3': 'var(--scalar-background-3)',
-    'back-accent':
-      'var(--scalar-background-accent)',
-
-    'backdrop': 'rgba(0, 0, 0, 0.44)',
-    'border': 'var(--scalar-border-color)',
-
-    'back-btn-1': 'var(--scalar-button-1)',
-    'fore-btn-1':
-      'var(--scalar-button-1-color)',
-    'hover-btn-1':
-      'var(--scalar-button-1-hover)',
-
-    'white': '#FFF',
-    'green': 'var(--scalar-color-green)',
-    'red': 'var(--scalar-color-red)',
-    'yellow': 'var(--scalar-color-yellow)',
-    'blue': 'var(--scalar-color-blue)',
-    'orange': 'var(--scalar-color-orange)',
-    'purple': 'var(--scalar-color-purple)',
-    'error': 'var(--scalar-error-color)',
-    'ghost': 'var(--scalar-color-ghost)',
-    'transparent': 'transparent',
-  },
-  fontSize: {
-    xxs: 'var(--scalar-micro, var(--scalar-font-size-5))',
-    xs: 'var(--scalar-mini, var(--scalar-font-size-4))',
-    sm: 'var(--scalar-small, var(--scalar-font-size-3))',
-    base: 'var(--scalar-paragraph, var(--scalar-font-size-2))',
-    lg: 'var(--scalar-font-size-1)',
-  },
-} as const
-
-export const extend = {
-  borderRadius: {
-    DEFAULT: 'var(--scalar-radius)',
-    md: 'var(--scalar-radius)',
-    lg: 'var(--scalar-radius-lg)',
-    xl: 'var(--scalar-radius-xl)',
-  },
-  fontWeight: {
-    medium: 'var(--scalar-font-medium)',
-    bold: 'var(-scalar-font-bold)',
-  },
-  maxWidth: {
-    'screen-xs': '480px',
-    'screen-sm': '540px',
-    'screen-md': '640px',
-    'screen-lg': '800px',
-  },
-} as const
-```
-
 ## CSS Layers
 
 This package exports its' tailwind styles in the following CSS cascade layers to make them easy to overwrite.

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/ScalarButton/ScalarButton.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as d, computed as n, useAttrs as u, openBlock as a, createElementBlock as t, mergeProps as p, unref as s, renderSlot as i, createCommentVNode as r, createVNode as m } from "vue";
+import { cx as f } from "../../cva.js";
+import { variants as c } from "./variants.js";
+import h from "../ScalarLoading/ScalarLoading.vue.js";
+const v = ["ariaDisabled", "type"], b = {
+  key: 0,
+  class: "mr-2 h-4 w-4"
+}, g = {
+  key: 1,
+  class: "ml-2"
+}, $ = /* @__PURE__ */ d({
+  inheritAttrs: !1,
+  __name: "ScalarButton",
+  props: {
+    disabled: { type: Boolean },
+    fullWidth: { type: Boolean, default: !1 },
+    loading: {},
+    size: { default: "md" },
+    variant: { default: "solid" },
+    type: { default: "button" }
+  },
+  setup(y) {
+    const o = n(() => {
+      const { class: e, ...l } = u();
+      return { class: e || "", rest: l };
+    });
+    return (e, l) => (a(), t("button", p(o.value.rest, {
+      ariaDisabled: e.disabled || void 0,
+      class: s(f)(
+        s(c)({ fullWidth: e.fullWidth, disabled: e.disabled, size: e.size, variant: e.variant }),
+        { "pl-9 pr-3": e.loading },
+        `${o.value.class}`
+      ),
+      type: e.type
+    }), [
+      e.$slots.icon ? (a(), t("div", b, [
+        i(e.$slots, "icon")
+      ])) : r("", !0),
+      i(e.$slots, "default"),
+      e.loading ? (a(), t("div", g, [
+        m(s(h), {
+          loadingState: e.loading,
+          size: "20px"
+        }, null, 8, ["loadingState"])
+      ])) : r("", !0)
+    ], 16, v));
+  }
+});
+export {
+  $ as default
+};

package/dist/components/ScalarButton/ScalarButton.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarButton.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarButton/variants.js

@@ -0,0 +1,40 @@
+import { cva as t } from "../../cva.js";
+const r = {
+  solid: [
+    "scalar-button-solid",
+    "bg-b-btn text-c-btn shadow-sm active:bg-b-btn active:shadow-none hocus:bg-h-btn"
+  ],
+  outlined: [
+    "scalar-button-outlined",
+    "active:bg-btn-1 border border-solid border-border bg-transparent text-c-1 hocus:bg-border"
+  ],
+  ghost: [
+    "scalar-button-ghost",
+    "bg-transparent text-c-3 transition-colors active:text-c-1 hocus:text-c-1"
+  ],
+  danger: [
+    "scalar-button-danger",
+    "bg-error text-white active:brightness-90 hocus:brightness-90"
+  ]
+}, o = t({
+  base: "scalar-button row cursor-pointer items-center justify-center rounded font-medium",
+  variants: {
+    disabled: {
+      true: "bg-background-2 text-color-3 cursor-not-allowed shadow-none"
+    },
+    fullWidth: { true: "w-full" },
+    size: { sm: "px-2 py-1 text-xs", md: "h-10 px-6 text-sm" },
+    variant: r
+  },
+  compoundVariants: [
+    {
+      disabled: !0,
+      variant: "ghost",
+      class: "text-ghost bg-transparent"
+    }
+  ]
+});
+export {
+  r as styles,
+  o as variants
+};

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent as a, computed as l, openBlock as o, createElementBlock as s, normalizeClass as i } from "vue";
+import { syntaxHighlight as c, standardLanguages as m } from "@scalar/code-highlight";
+import "@scalar/code-highlight/css/code.css";
+import { prettyPrintString as p } from "./utils/prettyPrintString.js";
+const d = ["innerHTML"], C = /* @__PURE__ */ a({
+  __name: "ScalarCodeBlock",
+  props: {
+    content: {},
+    lang: { default: "plaintext" },
+    lineNumbers: { type: Boolean, default: !1 },
+    hideCredentials: {}
+  },
+  setup(t) {
+    const e = t, n = l(() => c(p(e.content), {
+      lang: e.lang.trim(),
+      languages: m,
+      lineNumbers: e.lineNumbers,
+      maskCredentials: e.hideCredentials
+    }).slice(5, -6));
+    return (r, u) => (o(), s("pre", {
+      class: i("scalar-component scalar-codeblock-pre"),
+      innerHTML: n.value
+    }, null, 8, d));
+  }
+});
+export {
+  C as default
+};

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue2.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue3.js

@@ -0,0 +1,5 @@
+import o from "./ScalarCodeBlock.vue.js";
+import "./ScalarCodeBlock.vue2.js";
+export {
+  o as default
+};

package/dist/components/ScalarCodeBlock/utils/prettyPrintString.js

@@ -0,0 +1,15 @@
+import { replaceCircularDependencies as e } from "./replaceCircularReferences.js";
+function f(r) {
+  if (typeof r == "string")
+    return r;
+  if (typeof r == "object")
+    try {
+      return JSON.stringify(r, null, 2);
+    } catch {
+      return e(r);
+    }
+  return r;
+}
+export {
+  f as prettyPrintString
+};

package/dist/components/ScalarCodeBlock/utils/replaceCircularReferences.js

@@ -0,0 +1,18 @@
+function c(n) {
+  const e = /* @__PURE__ */ new Set();
+  return JSON.stringify(
+    n,
+    (t, r) => {
+      if (typeof r == "object" && r !== null) {
+        if (e.has(r))
+          return "[Circular]";
+        e.add(r);
+      }
+      return r;
+    },
+    2
+  );
+}
+export {
+  c as replaceCircularDependencies
+};

package/dist/components/ScalarDropdown/ScalarDropdown.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as a, openBlock as p, createBlock as i, unref as o, withCtx as t, createVNode as l, mergeProps as m, renderSlot as s, createElementVNode as f } from "vue";
+import { Menu as u, MenuItems as d, MenuButton as c } from "@headlessui/vue";
+import _ from "../ScalarFloating/ScalarFloating.vue.js";
+const h = /* @__PURE__ */ f("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1), w = /* @__PURE__ */ a({
+  inheritAttrs: !1,
+  __name: "ScalarDropdown",
+  props: {
+    placement: {},
+    resize: { type: Boolean },
+    isOpen: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  setup(B) {
+    return (e, b) => (p(), i(o(u), null, {
+      default: t(({ open: r }) => [
+        l(o(_), {
+          isOpen: r ?? e.isOpen,
+          placement: e.placement ?? "bottom-start",
+          resize: e.resize,
+          teleport: e.teleport
+        }, {
+          floating: t(({ width: n }) => [
+            l(o(d), m({
+              class: "relative flex w-56 flex-col p-0.75",
+              style: { width: n }
+            }, e.$attrs), {
+              default: t(() => [
+                s(e.$slots, "items"),
+                h
+              ]),
+              _: 2
+            }, 1040, ["style"])
+          ]),
+          default: t(() => [
+            l(o(c), { as: "template" }, {
+              default: t(() => [
+                s(e.$slots, "default")
+              ]),
+              _: 3
+            })
+          ]),
+          _: 2
+        }, 1032, ["isOpen", "placement", "resize", "teleport"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  w as default
+};

package/dist/components/ScalarDropdown/ScalarDropdown.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarDropdown.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownDivider.vue.js

@@ -0,0 +1,10 @@
+import { openBlock as r, createElementBlock as e } from "vue";
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const c = {}, t = { class: "-mx-0.75 my-0.75 h-px bg-border" };
+function n(s, _) {
+  return r(), e("div", t);
+}
+const i = /* @__PURE__ */ o(c, [["render", n]]);
+export {
+  i as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.js

@@ -0,0 +1,42 @@
+import { defineComponent as s, openBlock as i, createBlock as l, unref as t, withCtx as d, createElementVNode as p, normalizeClass as m, renderSlot as c } from "vue";
+import { MenuItem as b } from "@headlessui/vue";
+import { cva as u, cx as f } from "../../cva.js";
+const g = /* @__PURE__ */ s({
+  __name: "ScalarDropdownItem",
+  props: {
+    disabled: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(x) {
+    const o = u({
+      base: [
+        // Layout
+        "min-w-0 items-center gap-3 rounded px-2.5 py-1.5 text-left",
+        "first-of-type:mt-0.75 last-of-type:mb-0.75",
+        // Text / background style
+        "truncate bg-transparent text-xs text-c-1",
+        // Interaction
+        "cursor-pointer hover:bg-b-2 hover:text-c-1"
+      ],
+      variants: {
+        disabled: { true: "pointer-events-none text-c-3" },
+        active: { true: "bg-b-2 text-c-1" }
+      }
+    });
+    return (e, r) => (i(), l(t(b), { disabled: e.disabled }, {
+      default: d(({ active: a }) => [
+        p("button", {
+          class: m(["item", t(f)("scalar-dropdown-item", t(o)({ active: a, disabled: e.disabled }))]),
+          type: "button",
+          onClick: r[0] || (r[0] = (n) => e.$emit("click", n))
+        }, [
+          c(e.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["disabled"]));
+  }
+});
+export {
+  g as default
+};

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarDropdownItem.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarFloating/ScalarFloating.vue.js

@@ -0,0 +1,68 @@
+import { defineComponent as w, ref as s, computed as t, openBlock as d, createElementBlock as z, Fragment as b, createElementVNode as p, normalizeClass as k, renderSlot as m, createBlock as B, Teleport as R, normalizeStyle as S, unref as f, createCommentVNode as C } from "vue";
+import { getSideAxis as c } from "@floating-ui/utils";
+import { useFloating as E, autoUpdate as F, offset as _, flip as $, shift as A } from "@floating-ui/vue";
+import { useResizeWithTarget as N } from "./useResizeWithTarget.js";
+const D = /* @__PURE__ */ w({
+  inheritAttrs: !1,
+  __name: "ScalarFloating",
+  props: {
+    placement: {},
+    resize: { type: Boolean },
+    middleware: {},
+    isOpen: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  setup(u) {
+    const o = u, r = s(null), l = s(null), n = t(
+      () => {
+        var e, a;
+        return (((a = (e = l.value) == null ? void 0 : e.children) == null ? void 0 : a[0]) || l.value) ?? void 0;
+      }
+    ), i = N(n, {
+      enabled: t(() => o.resize)
+    }), g = t(
+      () => c(o.placement || "bottom") === "y" ? i.width.value : void 0
+    ), h = t(
+      () => c(o.placement || "bottom") === "x" ? i.height.value : void 0
+    ), { floatingStyles: v, middlewareData: y } = E(n, r, {
+      placement: t(() => o.placement),
+      whileElementsMounted: F,
+      middleware: t(() => [
+        _(5),
+        $(),
+        A(),
+        ...o.middleware ?? []
+      ])
+    });
+    return (e, a) => (d(), z(b, null, [
+      p("div", {
+        ref_key: "wrapperRef",
+        ref: l,
+        class: k({ contents: !!e.$slots.default })
+      }, [
+        m(e.$slots, "default")
+      ], 2),
+      e.isOpen ? (d(), B(R, {
+        key: 0,
+        disabled: !e.teleport,
+        to: "body"
+      }, [
+        p("div", {
+          ref_key: "floatingRef",
+          ref: r,
+          class: "relative z-overlay",
+          style: S(f(v))
+        }, [
+          m(e.$slots, "floating", {
+            data: f(y),
+            height: h.value,
+            width: g.value
+          })
+        ], 4)
+      ], 8, ["disabled"])) : C("", !0)
+    ], 64));
+  }
+});
+export {
+  D as default
+};

package/dist/components/ScalarFloating/ScalarFloating.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarFloating.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarFloating/useResizeWithTarget.js

@@ -0,0 +1,24 @@
+import { ref as t, watch as b, toValue as a, computed as l } from "vue";
+function c(v, o = { enabled: t(!0) }) {
+  const u = t(0), n = t(0), r = t();
+  return typeof ResizeObserver < "u" && (r.value = new ResizeObserver(([e]) => {
+    var i, d;
+    e && (u.value = ((i = e.borderBoxSize[0]) == null ? void 0 : i.inlineSize) ?? 0, n.value = ((d = e.borderBoxSize[0]) == null ? void 0 : d.blockSize) ?? 0);
+  })), b(
+    [() => a(o.enabled), () => a(v)],
+    ([e, i]) => {
+      !i || !r.value || (e ? r.value.observe(i) : r.value.disconnect());
+    },
+    { immediate: !0 }
+  ), {
+    width: l(
+      () => a(o.enabled) ? `${u.value}px` : void 0
+    ),
+    height: l(
+      () => a(o.enabled) ? `${n.value}px` : void 0
+    )
+  };
+}
+export {
+  c as useResizeWithTarget
+};

package/dist/components/ScalarIcon/ScalarIcon.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as t, unref as e, openBlock as o, createBlock as a, resolveDynamicComponent as m, normalizeClass as p, createElementBlock as z } from "vue";
+import { cva as f, cx as k } from "../../cva.js";
+import { getIcon as n } from "./icons/index.js";
+const u = ["src"], g = /* @__PURE__ */ t({
+  __name: "ScalarIcon",
+  props: {
+    icon: {},
+    size: {}
+  },
+  setup(i) {
+    const r = i, c = f({
+      variants: {
+        size: {
+          xs: "size-3 stroke-[1.4]",
+          sm: "size-3.5 stroke-[1.2]",
+          md: "size-4 stroke-[1.1]",
+          lg: "size-5",
+          xl: "size-6 stroke-[0.96]",
+          "2xl": "size-8 stroke-[0.92]",
+          "3xl": "size-10 stroke-[0.9]",
+          full: "size-full"
+        }
+      },
+      defaultVariants: {
+        size: "full"
+      }
+    }), l = n(r.icon);
+    return (s, d) => e(l) ? (o(), a(m(e(n)(s.icon)), {
+      key: 0,
+      class: p(e(k)("scalar-icon", e(c)({ size: s.size })))
+    }, null, 8, ["class"])) : (o(), z("img", {
+      key: 1,
+      src: s.icon
+    }, null, 8, u));
+  }
+});
+export {
+  g as default
+};

package/dist/components/ScalarIcon/ScalarIcon.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarIcon.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarIcon/icons/Info.svg.js

@@ -0,0 +1,16 @@
+import { openBlock as t, createElementBlock as e, createStaticVNode as o } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, a = /* @__PURE__ */ o('<g clip-path="url(#a)"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#b)"><path d="M11.94 17.32V11.2a.88.88 0 0 0-.87-.87h-.88m1.31-2.6a.44.44 0 1 1 0-.88m0 .88a.44.44 0 1 0 0-.88"></path><path d="M12 23.23A11.23 11.23 0 1 0 12 .77a11.23 11.23 0 0 0 0 22.46"></path><path stroke-miterlimit="10" d="M10.2 17.32h3.61"></path></g></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"></path></clipPath><clipPath id="b"><path fill="currentColor" d="M0 0h24v24H0z"></path></clipPath></defs>', 2), h = [
+  a
+];
+function i(l, c) {
+  return t(), e("svg", r, [...h]);
+}
+const p = { render: i };
+export {
+  p as default,
+  i as render
+};

package/dist/components/ScalarIcon/icons/index.js

@@ -0,0 +1,8 @@
+import { defineAsyncComponent as m } from "vue";
+const o = /* @__PURE__ */ Object.assign({ "./Add.svg": () => import("./Add.svg.js"), "./ArrowLeft.svg": () => import("./ArrowLeft.svg.js"), "./ArrowRight.svg": () => import("./ArrowRight.svg.js"), "./Background.svg": () => import("./Background.svg.js"), "./Brackets.svg": () => import("./Brackets.svg.js"), "./Branch.svg": () => import("./Branch.svg.js"), "./CallToAction.svg": () => import("./CallToAction.svg.js"), "./Checkmark.svg": () => import("./Checkmark.svg.js"), "./ChevronDown.svg": () => import("./ChevronDown.svg.js"), "./ChevronLeft.svg": () => import("./ChevronLeft.svg.js"), "./ChevronRight.svg": () => import("./ChevronRight.svg.js"), "./ChevronUp.svg": () => import("./ChevronUp.svg.js"), "./Clipboard.svg": () => import("./Clipboard.svg.js"), "./Close.svg": () => import("./Close.svg.js"), "./CodeFolder.svg": () => import("./CodeFolder.svg.js"), "./Cookie.svg": () => import("./Cookie.svg.js"), "./DarkMode.svg": () => import("./DarkMode.svg.js"), "./Delete.svg": () => import("./Delete.svg.js"), "./Discord.svg": () => import("./Discord.svg.js"), "./DocsPage.svg": () => import("./DocsPage.svg.js"), "./Duplicate.svg": () => import("./Duplicate.svg.js"), "./Edit.svg": () => import("./Edit.svg.js"), "./Ellipses.svg": () => import("./Ellipses.svg.js"), "./Error.svg": () => import("./Error.svg.js"), "./ExternalLink.svg": () => import("./ExternalLink.svg.js"), "./FilterList.svg": () => import("./FilterList.svg.js"), "./Folder.svg": () => import("./Folder.svg.js"), "./GitHub.svg": () => import("./GitHub.svg.js"), "./Hide.svg": () => import("./Hide.svg.js"), "./History.svg": () => import("./History.svg.js"), "./Info.svg": () => import("./Info.svg.js"), "./JsonObject.svg": () => import("./JsonObject.svg.js"), "./Key.svg": () => import("./Key.svg.js"), "./Leave.svg": () => import("./Leave.svg.js"), "./LightDarkModeToggle.svg": () => import("./LightDarkModeToggle.svg.js"), "./LightMode.svg": () => import("./LightMode.svg.js"), "./Link.svg": () => import("./Link.svg.js"), "./Lock.svg": () => import("./Lock.svg.js"), "./Logo.svg": () => import("./Logo.svg.js"), "./LogoAPI.svg": () => import("./LogoAPI.svg.js"), "./LogoClient.svg": () => import("./LogoClient.svg.js"), "./LogoMarket.svg": () => import("./LogoMarket.svg.js"), "./LogoSwagger.svg": () => import("./LogoSwagger.svg.js"), "./Magic.svg": () => import("./Magic.svg.js"), "./Menu.svg": () => import("./Menu.svg.js"), "./Page.svg": () => import("./Page.svg.js"), "./PaperAirplane.svg": () => import("./PaperAirplane.svg.js"), "./Payment.svg": () => import("./Payment.svg.js"), "./Play.svg": () => import("./Play.svg.js"), "./Refresh.svg": () => import("./Refresh.svg.js"), "./Response.svg": () => import("./Response.svg.js"), "./Search.svg": () => import("./Search.svg.js"), "./Show.svg": () => import("./Show.svg.js"), "./SideBarClosed.svg": () => import("./SideBarClosed.svg.js"), "./SideBarOpen.svg": () => import("./SideBarOpen.svg.js"), "./Sort.svg": () => import("./Sort.svg.js"), "./Terminal.svg": () => import("./Terminal.svg.js"), "./ThumbsDown.svg": () => import("./ThumbsDown.svg.js"), "./ThumbsUp.svg": () => import("./ThumbsUp.svg.js"), "./Trash.svg": () => import("./Trash.svg.js"), "./Unlock.svg": () => import("./Unlock.svg.js"), "./Upload.svg": () => import("./Upload.svg.js"), "./User.svg": () => import("./User.svg.js"), "./programming-framework-angular.svg": () => import("./programming-framework-angular.svg.js"), "./programming-framework-astro.svg": () => import("./programming-framework-astro.svg.js"), "./programming-framework-laravel.svg": () => import("./programming-framework-laravel.svg.js"), "./programming-framework-nextdotjs.svg": () => import("./programming-framework-nextdotjs.svg.js"), "./programming-framework-react.svg": () => import("./programming-framework-react.svg.js"), "./programming-framework-vuedotjs.svg": () => import("./programming-framework-vuedotjs.svg.js"), "./programming-language-c.svg": () => import("./programming-language-c.svg.js"), "./programming-language-clojure.svg": () => import("./programming-language-clojure.svg.js"), "./programming-language-csharp.svg": () => import("./programming-language-csharp.svg.js"), "./programming-language-css3.svg": () => import("./programming-language-css3.svg.js"), "./programming-language-go.svg": () => import("./programming-language-go.svg.js"), "./programming-language-html5.svg": () => import("./programming-language-html5.svg.js"), "./programming-language-http.svg": () => import("./programming-language-http.svg.js"), "./programming-language-java.svg": () => import("./programming-language-java.svg.js"), "./programming-language-javascript.svg": () => import("./programming-language-javascript.svg.js"), "./programming-language-json.svg": () => import("./programming-language-json.svg.js"), "./programming-language-kotlin.svg": () => import("./programming-language-kotlin.svg.js"), "./programming-language-node.svg": () => import("./programming-language-node.svg.js"), "./programming-language-objc.svg": () => import("./programming-language-objc.svg.js"), "./programming-language-ocaml.svg": () => import("./programming-language-ocaml.svg.js"), "./programming-language-php.svg": () => import("./programming-language-php.svg.js"), "./programming-language-powershell.svg": () => import("./programming-language-powershell.svg.js"), "./programming-language-python.svg": () => import("./programming-language-python.svg.js"), "./programming-language-r.svg": () => import("./programming-language-r.svg.js"), "./programming-language-ruby.svg": () => import("./programming-language-ruby.svg.js"), "./programming-language-scala.svg": () => import("./programming-language-scala.svg.js"), "./programming-language-shell.svg": () => import("./programming-language-shell.svg.js"), "./programming-language-swift.svg": () => import("./programming-language-swift.svg.js"), "./programming-language-typescript.svg": () => import("./programming-language-typescript.svg.js"), "./programming-script-code.svg": () => import("./programming-script-code.svg.js"), "./programming-tool-git.svg": () => import("./programming-tool-git.svg.js"), "./programming-tool-tailwindcss.svg": () => import("./programming-tool-tailwindcss.svg.js") }), p = (g) => {
+  const r = `./${g}.svg`;
+  return o[r] ? m(o[r]) : (console.warn(`Could not find icon: ${g}`), null);
+};
+export {
+  p as getIcon
+};

package/dist/components/ScalarIconButton/ScalarIconButton.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent as r, computed as n, useAttrs as i, openBlock as l, createElementBlock as c, mergeProps as d, unref as s, createVNode as u, createElementVNode as p, toDisplayString as m } from "vue";
+import { cva as f, cx as b } from "../../cva.js";
+import { styles as v } from "../ScalarButton/variants.js";
+import z from "../ScalarIcon/ScalarIcon.vue.js";
+const _ = ["ariaDisabled"], h = { class: "sr-only" }, N = /* @__PURE__ */ r({
+  __name: "ScalarIconButton",
+  props: {
+    label: {},
+    icon: {},
+    disabled: { type: Boolean },
+    variant: { default: "ghost" },
+    size: { default: "md" }
+  },
+  setup(y) {
+    const t = f({
+      base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
+      variants: {
+        size: {
+          xxs: "size-3.5 p-0.5",
+          xs: "size-5 p-1",
+          sm: "size-6 p-1",
+          md: "size-10 p-3",
+          full: "h-full w-full"
+        },
+        disabled: {
+          true: "cursor-not-allowed shadow-none"
+        },
+        variant: v
+      }
+    }), a = n(() => {
+      const { class: e, ...o } = i();
+      return { class: e || "", rest: o };
+    });
+    return (e, o) => (l(), c("button", d(a.value.rest, {
+      ariaDisabled: e.disabled || void 0,
+      class: s(b)(s(t)({ size: e.size, variant: e.variant, disabled: e.disabled }), a.value.class),
+      type: "button"
+    }), [
+      u(s(z), { icon: e.icon }, null, 8, ["icon"]),
+      p("span", h, m(e.label), 1)
+    ], 16, _));
+  }
+});
+export {
+  N as default
+};

package/dist/components/ScalarIconButton/ScalarIconButton.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarIconButton.vue.js";
+export {
+  f as default
+};