@scalar/components 0.13.12 → 0.13.14

package/README.md

@@ -45,3 +45,23 @@ This package exports its Tailwind styles using CSS cascade layers to avoid any c
 - `scalar-base`: reset and normalize
 - `scalar-components`: complex component styles
 - `scalar-utilities`: utility styles like `flex`
+
+## Contributing
+
+All pull requests should include the following checklist:
+
+```md
+## Component Checklist
+
+- [ ] Exported from `@scalar/components`
+- [ ] Has JSDocs for all:
+  - [ ] Components (with examples)
+  - [ ] Props
+  - [ ] Slots
+  - [ ] Emits
+  - [ ] Functions
+  - [ ] Types
+- [ ] Allows overriding of Tailwind classes where applicable (see useBindCx)
+- [ ] Has stories showcasing any applicable variants
+- [ ] Has unit tests covering any applicable interactions
+```

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import ScalarColorModeToggle from './ScalarColorModeToggle.vue.js';
+declare const meta: Meta<typeof ScalarColorModeToggle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const ButtonOnly: Story;
+export declare const IconOnly: Story;
+//# sourceMappingURL=ScalarColorModeToggle.stories.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAGrD,OAAO,qBAAqB,MAAM,6BAA6B,CAAA;AAI/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAU5C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScalarColorModeToggle.test.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggle.test.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.test.ts"],"names":[],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Scalar Color Mode Toggle component
+ *
+ * A toggle that toggles between light and dark mode
+ * using the {@link useColorMode} hook.
+ *
+ * @example
+ *   <ScalarColorModeToggle />
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The style of the toggle.
+     * @default 'switch'
+     */
+    variant?: "switch" | "icon";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The style of the toggle.
+     * @default 'switch'
+     */
+    variant?: "switch" | "icon";
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarColorModeToggle.vue.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"names":[],"mappings":"AAsDA;;;;;;;;GAQG;;IAID;;;OAGG;cACO,QAAQ,GAAG,MAAM;;IAJ3B;;;OAGG;cACO,QAAQ,GAAG,MAAM;;AAP7B,wBAgHC"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as u, computed as c, openBlock as r, createBlock as t, unref as o, isRef as s } from "vue";
+import { useColorMode as p } from "@scalar/use-hooks/useColorMode";
+import f from "./ScalarColorModeToggleButton.vue.js";
+import _ from "./ScalarColorModeToggleIcon.vue.js";
+const k = {}, S = /* @__PURE__ */ u({
+  ...k,
+  __name: "ScalarColorModeToggle",
+  props: {
+    variant: { default: "switch" }
+  },
+  setup(g) {
+    const { isDarkMode: e, toggleColorMode: n, darkLightMode: i } = p(), l = c(
+      () => e.value ? "Set light mode" : "Set dark mode"
+    );
+    return (d, a) => d.variant === "switch" ? (r(), t(f, {
+      key: 0,
+      modelValue: o(e),
+      "onUpdate:modelValue": a[0] || (a[0] = (m) => s(e) ? e.value = m : null),
+      "aria-label": l.value
+    }, null, 8, ["modelValue", "aria-label"])) : (r(), t(_, {
+      key: 1,
+      "aria-label": l.value,
+      mode: o(i),
+      onClick: o(n)
+    }, null, 8, ["aria-label", "mode", "onClick"]));
+  }
+});
+export {
+  S as default
+};

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue2.js

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

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Scalar Color Mode Toggle Button component
+ *
+ * A dumb button that toggles between a sun and moon icon.
+ *
+ * If you need a toggle that is aware of and sets color mode,
+ * you want {@link ScalarColorModeToggle} instead.
+ *
+ * @example
+ *   <ScalarColorModeToggleButton v-model="isDarkMode" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarColorModeToggleButton.vue.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"names":[],"mappings":"AAyDA;;;;;;;;;;GAUG;;iBAiBU,OAAO;;;;iBAAP,OAAO;;;;AAhBpB,wBAoHC"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as n, useModel as s, openBlock as i, createElementBlock as u, mergeProps as a, unref as d, createElementVNode as t, normalizeClass as m, createVNode as f } from "vue";
+import { useBindCx as p } from "../../hooks/useBindCx.js";
+import c from "./ScalarColorModeToggleIcon.vue.js";
+const g = ["aria-pressed"], x = {}, B = /* @__PURE__ */ n({
+  ...x,
+  inheritAttrs: !1,
+  __name: "ScalarColorModeToggleButton",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const { cx: r } = p(), e = s(l, "modelValue");
+    return (b, o) => (i(), u("button", a(
+      {
+        "aria-pressed": e.value,
+        type: "button"
+      },
+      d(r)(
+        "group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none"
+      ),
+      {
+        onClick: o[0] || (o[0] = (v) => e.value = !e.value)
+      }
+    ), [
+      o[1] || (o[1] = t("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)),
+      t("div", {
+        class: m(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": e.value }])
+      }, [
+        f(c, {
+          is: "div",
+          mode: e.value ? "dark" : "light"
+        }, null, 8, ["mode"])
+      ], 2)
+    ], 16, g));
+  }
+});
+export {
+  B as default
+};

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue2.js

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

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.d.ts

@@ -0,0 +1,25 @@
+import type { Component } from 'vue';
+/**
+ * Scalar Color Mode Toggle Icon component
+ *
+ * An icon that toggles between a sun and moon.
+ *
+ * If you need a toggle that is aware of and sets color mode,
+ * you want {@link ScalarColorModeToggle} instead.
+ *
+ * @example
+ *   <ScalarColorModeToggleIcon v-model="isDarkMode" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    /** The element or component this component should render as. */
+    is?: string | Component;
+    /** Whether the toggle is a sun or moon icon */
+    mode?: "light" | "dark";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The element or component this component should render as. */
+    is?: string | Component;
+    /** Whether the toggle is a sun or moon icon */
+    mode?: "light" | "dark";
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarColorModeToggleIcon.vue.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;GAUG;;IAID,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;IAHvB,gEAAgE;SAC3D,MAAM,GAAG,SAAS;IACvB,+CAA+C;WACxC,OAAO,GAAG,MAAM;;AANzB,wBAwGC"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.js

@@ -0,0 +1,7 @@
+import o from "./ScalarColorModeToggleIcon.vue2.js";
+/* empty css                               */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-8bd002b1"]]);
+export {
+  e as default
+};

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue2.js

@@ -0,0 +1,32 @@
+import { defineComponent as t, openBlock as l, createBlock as a, resolveDynamicComponent as r, mergeProps as c, unref as i, withCtx as u, createElementVNode as e } from "vue";
+import { useBindCx as p } from "../../hooks/useBindCx.js";
+const g = {}, y = /* @__PURE__ */ t({
+  ...g,
+  inheritAttrs: !1,
+  __name: "ScalarColorModeToggleIcon",
+  props: {
+    is: { default: "button" },
+    mode: { default: "light" }
+  },
+  setup(m) {
+    const { cx: n } = p();
+    return (o, s) => (l(), a(r(o.is), c({
+      class: `toggle-icon-${o.mode}`,
+      type: o.is === "button" ? "button" : void 0
+    }, i(n)("size-3 flex items-center justify-center text-c-1")), {
+      default: u(() => s[0] || (s[0] = [
+        e("span", { class: "toggle-icon-sun-ray" }, null, -1),
+        e("span", { class: "toggle-icon-sun-ray" }, null, -1),
+        e("span", { class: "toggle-icon-sun-ray" }, null, -1),
+        e("span", { class: "toggle-icon-sun-ray" }, null, -1),
+        e("span", { class: "toggle-icon-ellipse" }, [
+          e("span", { class: "toggle-icon-moon-mask" })
+        ], -1)
+      ])),
+      _: 1
+    }, 16, ["class", "type"]));
+  }
+});
+export {
+  y as default
+};

package/dist/components/ScalarColorModeToggle/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ScalarColorModeToggle } from './ScalarColorModeToggle.vue.js';
+export { default as ScalarColorModeToggleButton } from './ScalarColorModeToggleButton.vue.js';
+export { default as ScalarColorModeToggleIcon } from './ScalarColorModeToggleIcon.vue.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarColorModeToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarColorModeToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAC1F,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'vue';
 /**
  * Scalar dropdown button base component
  *
@@ -14,16 +15,14 @@
  * </ScalarDropdownButton>
  */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    is?: string | Component;
     active?: boolean;
     disabled?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    is?: string | Component;
     active?: boolean;
     disabled?: boolean;
-}> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>, {
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;GAcG;;aAIQ,OAAO;eACL,OAAO;;;;aADT,OAAO;eACL,OAAO;;;;qBA6DS,GAAG;;AAjEhC,wBAqGC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarDropdownButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownButton.vue"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;;;GAcG;;SAII,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;SAFb,MAAM,GAAG,SAAS;aACd,OAAO;eACL,OAAO;;qBA8DS,GAAG;;AAnEhC,wBAqGC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -1,7 +1,7 @@
 import o from "./ScalarDropdownButton.vue2.js";
 /* empty css                          */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4082ccb6"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7c1ea430"]]);
 export {
-  p as default
+  c as default
 };

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

@@ -1,20 +1,20 @@
-import { defineComponent as a, openBlock as i, createElementBlock as s, normalizeClass as c, unref as o, renderSlot as l } from "vue";
-import { cva as p, cx as d } from "../../cva.js";
-const m = {}, f = /* @__PURE__ */ a({
-  ...m,
+import { defineComponent as n, openBlock as a, createBlock as r, resolveDynamicComponent as s, normalizeClass as i, unref as t, withCtx as l, renderSlot as c } from "vue";
+import { cva as d, cx as p } from "../../cva.js";
+const u = {}, _ = /* @__PURE__ */ n({
+  ...u,
   __name: "ScalarDropdownButton",
   props: {
+    is: { default: "button" },
     active: { type: Boolean },
     disabled: { type: Boolean }
   },
-  emits: ["click"],
-  setup(u) {
-    const n = p({
+  setup(m) {
+    const o = d({
       base: [
         // Layout
-        "h-8 min-w-0 items-center gap-1.5 rounded px-2.5 py-1.5 text-left",
+        "flex h-8 min-w-0 items-center gap-1.5 rounded px-2.5 py-1.5 text-left",
         // Text / background style
-        "truncate text-sm text-c-1",
+        "truncate  no-underline text-sm text-c-1",
         // Interaction
         "cursor-pointer hover:bg-b-2 hover:text-c-1"
       ],
@@ -23,15 +23,17 @@ const m = {}, f = /* @__PURE__ */ a({
         active: { true: "bg-b-2 text-c-1" }
       }
     });
-    return (e, t) => (i(), s("button", {
-      class: c(["item", o(d)("scalar-dropdown-item", o(n)({ active: e.active, disabled: e.disabled }))]),
-      type: "button",
-      onClick: t[0] || (t[0] = (r) => e.$emit("click", r))
-    }, [
-      l(e.$slots, "default", {}, void 0, !0)
-    ], 2));
+    return (e, v) => (a(), r(s(e.is), {
+      class: i(["item", t(p)("scalar-dropdown-item", t(o)({ active: e.active, disabled: e.disabled }))]),
+      type: e.is === "button" ? "button" : void 0
+    }, {
+      default: l(() => [
+        c(e.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class", "type"]));
   }
 });
 export {
-  f as default
+  _ as default
 };

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

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

package/dist/components/ScalarIcon/ScalarIcon.stories.d.ts

@@ -17,7 +17,7 @@ declare const meta: {
     argTypes: {
         icon: {
             control: "select";
-            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Globe", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
+            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Globe", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "UserSwitch", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-dart", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
         };
         size: {
             control: "select";

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

@@ -0,0 +1,20 @@
+import { openBlock as t, createElementBlock as n, createElementVNode as o } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 24 24"
+};
+function l(s, e) {
+  return t(), n("svg", r, e[0] || (e[0] = [
+    o("path", { d: "M11.101 1.488H4.83a1 1 0 0 0-1 1v6.614m9.069 13.41h6.272a1 1 0 0 0 1-1v-6.614" }, null, -1),
+    o("path", { d: "m1.23 6.5 2.6 2.6 2.601-2.6m16.339 11-2.6-2.6-2.601 2.6M5.505 18.546a2.551 2.551 0 1 0 0-5.103 2.551 2.551 0 0 0 0 5.103m4.277 3.965c-.559-1.83-2.29-3.202-4.276-3.202-1.988 0-3.718 1.372-4.277 3.202m17.264-15.92a2.551 2.551 0 1 0 0-5.103 2.551 2.551 0 0 0 0 5.103m4.277 3.965c-.559-1.83-2.289-3.202-4.276-3.202s-3.718 1.372-4.276 3.202" }, null, -1)
+  ]));
+}
+const m = { render: l };
+export {
+  m as default,
+  l as render
+};

package/dist/components/ScalarIcon/icons/index.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Globe", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
+export declare const ICONS: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Globe", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "UserSwitch", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-dart", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarIcon/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/icons/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,+3DAqHR,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/icons/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,06DAuHR,CAAA"}

package/dist/components/ScalarIcon/icons/programming-language-dart.svg.js

@@ -0,0 +1,16 @@
+import { openBlock as r, createElementBlock as t, createElementVNode as l } from "vue";
+const o = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  viewBox: "0 0 50 50"
+};
+function n(c, e) {
+  return r(), t("svg", o, e[0] || (e[0] = [
+    l("path", { d: "m7.91 9.32.09.09V35.3l-5.09-5.09a6.22 6.22 0 0 1-1.27-6.92zM35.3 8H9.41l-.09-.09 13.97-6.27a6.22 6.22 0 0 1 6.92 1.27zm2.29 31H11.71l-.54-.54A4 4 0 0 1 10 35.63V11.41zm-23.88 2H39v6c0 .55-.45 1-1 1H21.1c-.27 0-.52-.11-.71-.29l-4.7-4.7.02-.02zM48 21.1V38c0 .55-.45 1-1 1h-6.58L11.41 10h24.22c1.07 0 2.07.42 2.83 1.17l4.53 4.54.02-.02 4.7 4.7c.18.19.29.44.29.71" }, null, -1)
+  ]));
+}
+const m = { render: n };
+export {
+  m as default,
+  n as render
+};