@scalar/components 0.14.13 → 0.14.16

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

@@ -25,8 +25,8 @@ import * as A from "../icons/Delete.svg.js";
 import * as E from "../icons/Discord.svg.js";
 import * as F from "../icons/DocsPage.svg.js";
 import * as H from "../icons/Download.svg.js";
-import * as T from "../icons/Duplicate.svg.js";
-import * as R from "../icons/Edit.svg.js";
+import * as R from "../icons/Duplicate.svg.js";
+import * as T from "../icons/Edit.svg.js";
 import * as U from "../icons/Ellipses.svg.js";
 import * as x from "../icons/Email.svg.js";
 import * as P from "../icons/Error.svg.js";
@@ -78,8 +78,8 @@ import * as Ao from "../icons/Versions.svg.js";
 import * as Eo from "../icons/Wallet.svg.js";
 import * as Fo from "../icons/Watch.svg.js";
 import * as Ho from "../icons/Workspace.svg.js";
-import * as To from "../icons/programming-framework-angular.svg.js";
-import * as Ro from "../icons/programming-framework-astro.svg.js";
+import * as Ro from "../icons/programming-framework-angular.svg.js";
+import * as To from "../icons/programming-framework-astro.svg.js";
 import * as Uo from "../icons/programming-framework-laravel.svg.js";
 import * as xo from "../icons/programming-framework-nextdotjs.svg.js";
 import * as Po from "../icons/programming-framework-react.svg.js";
@@ -104,34 +104,35 @@ import * as _o from "../icons/programming-language-powershell.svg.js";
 import * as or from "../icons/programming-language-python.svg.js";
 import * as rr from "../icons/programming-language-r.svg.js";
 import * as sr from "../icons/programming-language-ruby.svg.js";
-import * as mr from "../icons/programming-language-scala.svg.js";
-import * as ar from "../icons/programming-language-shell.svg.js";
-import * as gr from "../icons/programming-language-swift.svg.js";
-import * as ir from "../icons/programming-language-typescript.svg.js";
-import * as nr from "../icons/programming-script-code.svg.js";
-import * as tr from "../icons/programming-tool-git.svg.js";
-import * as pr from "../icons/programming-tool-tailwindcss.svg.js";
-import * as er from "../logos/Adonisjs.svg.js";
-import * as cr from "../logos/Docusaurus.svg.js";
-import * as lr from "../logos/Dotnet.svg.js";
-import * as fr from "../logos/Elysiajs.svg.js";
-import * as vr from "../logos/Express.svg.js";
-import * as ur from "../logos/Fastapi.svg.js";
-import * as dr from "../logos/Fastify.svg.js";
-import * as Lr from "../logos/Go.svg.js";
-import * as hr from "../logos/Hono.svg.js";
-import * as wr from "../logos/Laravel.svg.js";
-import * as kr from "../logos/Litestar.svg.js";
-import * as Cr from "../logos/Nestjs.svg.js";
-import * as br from "../logos/Nextjs.svg.js";
-import * as jr from "../logos/Nitro.svg.js";
-import * as Dr from "../logos/Nuxt.svg.js";
-import * as Sr from "../logos/Openapi.svg.js";
-import * as yr from "../logos/Platformatic.svg.js";
-import * as Ar from "../logos/React.svg.js";
-import * as Er from "../logos/Rust.svg.js";
-import * as Fr from "../logos/Svelte.svg.js";
-import * as Hr from "../logos/Vue.svg.js";
+import * as mr from "../icons/programming-language-rust.svg.js";
+import * as ar from "../icons/programming-language-scala.svg.js";
+import * as gr from "../icons/programming-language-shell.svg.js";
+import * as ir from "../icons/programming-language-swift.svg.js";
+import * as nr from "../icons/programming-language-typescript.svg.js";
+import * as tr from "../icons/programming-script-code.svg.js";
+import * as pr from "../icons/programming-tool-git.svg.js";
+import * as er from "../icons/programming-tool-tailwindcss.svg.js";
+import * as cr from "../logos/Adonisjs.svg.js";
+import * as lr from "../logos/Docusaurus.svg.js";
+import * as fr from "../logos/Dotnet.svg.js";
+import * as vr from "../logos/Elysiajs.svg.js";
+import * as ur from "../logos/Express.svg.js";
+import * as dr from "../logos/Fastapi.svg.js";
+import * as Lr from "../logos/Fastify.svg.js";
+import * as hr from "../logos/Go.svg.js";
+import * as wr from "../logos/Hono.svg.js";
+import * as kr from "../logos/Laravel.svg.js";
+import * as Cr from "../logos/Litestar.svg.js";
+import * as br from "../logos/Nestjs.svg.js";
+import * as jr from "../logos/Nextjs.svg.js";
+import * as Dr from "../logos/Nitro.svg.js";
+import * as Sr from "../logos/Nuxt.svg.js";
+import * as yr from "../logos/Openapi.svg.js";
+import * as Ar from "../logos/Platformatic.svg.js";
+import * as Er from "../logos/React.svg.js";
+import * as Fr from "../logos/Rust.svg.js";
+import * as Hr from "../logos/Svelte.svg.js";
+import * as Rr from "../logos/Vue.svg.js";
 const s = /* @__PURE__ */ Object.assign({
   "../icons/Add.svg": a,
   "../icons/AddTab.svg": g,
@@ -160,8 +161,8 @@ const s = /* @__PURE__ */ Object.assign({
   "../icons/Discord.svg": E,
   "../icons/DocsPage.svg": F,
   "../icons/Download.svg": H,
-  "../icons/Duplicate.svg": T,
-  "../icons/Edit.svg": R,
+  "../icons/Duplicate.svg": R,
+  "../icons/Edit.svg": T,
   "../icons/Ellipses.svg": U,
   "../icons/Email.svg": x,
   "../icons/Error.svg": P,
@@ -213,8 +214,8 @@ const s = /* @__PURE__ */ Object.assign({
   "../icons/Wallet.svg": Eo,
   "../icons/Watch.svg": Fo,
   "../icons/Workspace.svg": Ho,
-  "../icons/programming-framework-angular.svg": To,
-  "../icons/programming-framework-astro.svg": Ro,
+  "../icons/programming-framework-angular.svg": Ro,
+  "../icons/programming-framework-astro.svg": To,
   "../icons/programming-framework-laravel.svg": Uo,
   "../icons/programming-framework-nextdotjs.svg": xo,
   "../icons/programming-framework-react.svg": Po,
@@ -239,43 +240,44 @@ const s = /* @__PURE__ */ Object.assign({
   "../icons/programming-language-python.svg": or,
   "../icons/programming-language-r.svg": rr,
   "../icons/programming-language-ruby.svg": sr,
-  "../icons/programming-language-scala.svg": mr,
-  "../icons/programming-language-shell.svg": ar,
-  "../icons/programming-language-swift.svg": gr,
-  "../icons/programming-language-typescript.svg": ir,
-  "../icons/programming-script-code.svg": nr,
-  "../icons/programming-tool-git.svg": tr,
-  "../icons/programming-tool-tailwindcss.svg": pr
+  "../icons/programming-language-rust.svg": mr,
+  "../icons/programming-language-scala.svg": ar,
+  "../icons/programming-language-shell.svg": gr,
+  "../icons/programming-language-swift.svg": ir,
+  "../icons/programming-language-typescript.svg": nr,
+  "../icons/programming-script-code.svg": tr,
+  "../icons/programming-tool-git.svg": pr,
+  "../icons/programming-tool-tailwindcss.svg": er
 }), m = /* @__PURE__ */ Object.assign({
-  "../logos/Adonisjs.svg": er,
-  "../logos/Docusaurus.svg": cr,
-  "../logos/Dotnet.svg": lr,
-  "../logos/Elysiajs.svg": fr,
-  "../logos/Express.svg": vr,
-  "../logos/Fastapi.svg": ur,
-  "../logos/Fastify.svg": dr,
-  "../logos/Go.svg": Lr,
-  "../logos/Hono.svg": hr,
-  "../logos/Laravel.svg": wr,
-  "../logos/Litestar.svg": kr,
-  "../logos/Nestjs.svg": Cr,
-  "../logos/Nextjs.svg": br,
-  "../logos/Nitro.svg": jr,
-  "../logos/Nuxt.svg": Dr,
-  "../logos/Openapi.svg": Sr,
-  "../logos/Platformatic.svg": yr,
-  "../logos/React.svg": Ar,
-  "../logos/Rust.svg": Er,
-  "../logos/Svelte.svg": Fr,
-  "../logos/Vue.svg": Hr
+  "../logos/Adonisjs.svg": cr,
+  "../logos/Docusaurus.svg": lr,
+  "../logos/Dotnet.svg": fr,
+  "../logos/Elysiajs.svg": vr,
+  "../logos/Express.svg": ur,
+  "../logos/Fastapi.svg": dr,
+  "../logos/Fastify.svg": Lr,
+  "../logos/Go.svg": hr,
+  "../logos/Hono.svg": wr,
+  "../logos/Laravel.svg": kr,
+  "../logos/Litestar.svg": Cr,
+  "../logos/Nestjs.svg": br,
+  "../logos/Nextjs.svg": jr,
+  "../logos/Nitro.svg": Dr,
+  "../logos/Nuxt.svg": Sr,
+  "../logos/Openapi.svg": yr,
+  "../logos/Platformatic.svg": Ar,
+  "../logos/React.svg": Er,
+  "../logos/Rust.svg": Fr,
+  "../logos/Svelte.svg": Hr,
+  "../logos/Vue.svg": Rr
 }), Tr = (o) => {
   const r = `../icons/${o}.svg`;
   return s[r] ? s[r] : (console.warn(`Could not find icon: ${o}`), null);
-}, Rr = (o) => {
+}, Ur = (o) => {
   const r = `../logos/${o}.svg`;
   return m[r] ? m[r] : (console.warn(`Could not find icon: ${o}`), null);
 };
 export {
   Tr as getIcon,
-  Rr as getLogo
+  Ur as getLogo
 };

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

@@ -3,31 +3,14 @@ import type { StoryObj } from '@storybook/vue3';
  * A helper wrapper around the icon only ScalarButton
  */
 declare const meta: {
-    component: import("vue").DefineComponent<{
-        label: string;
-        icon: import("../ScalarIcon").Icon | import("vue").Component;
-        disabled?: boolean;
-        variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-        thickness?: string;
-        weight?: import("@scalar/icons/types").ScalarIconWeight;
-    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-        label: string;
-        icon: import("../ScalarIcon").Icon | import("vue").Component;
-        disabled?: boolean;
-        variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-        thickness?: string;
-        weight?: import("@scalar/icons/types").ScalarIconWeight;
-    }> & Readonly<{}>, {
-        size: "xs" | "sm" | "md" | "full" | "xxs";
-        variant: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    component: import("vue").DefineComponent<import("./types").ScalarIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./types").ScalarIconButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+        ref: HTMLButtonElement;
+    }, any>;
     tags: string[];
     argTypes: {
         icon: {
             control: "select";
-            options: readonly ["Add", "AddTab", "Alert", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "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", "Magic", "Markdown", "Menu", "NotAllowed", "Page", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "Trash", "Unlock", "Unwatch", "Upload", "User", "UserSwitch", "Users", "Versions", "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"];
+            options: readonly ["Add", "AddTab", "Alert", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "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", "Magic", "Markdown", "Menu", "NotAllowed", "Page", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "Trash", "Unlock", "Unwatch", "Upload", "User", "UserSwitch", "Users", "Versions", "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-rust", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
         };
         size: {
             control: "select";
@@ -43,6 +26,10 @@ declare const meta: {
         disabled: {
             control: "boolean";
         };
+        tooltip: {
+            control: "select";
+            options: import("@floating-ui/utils").Placement[];
+        };
         class: {
             control: "text";
         };
@@ -52,5 +39,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Disabled: Story;
+export declare const WithTooltip: Story;
 export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarIconButton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}
+{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}

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

@@ -1,79 +1,19 @@
-import type { ScalarIconWeight } from '@scalar/icons/types';
-import type { VariantProps } from 'cva';
-import type { Component } from 'vue';
-import { type Icon } from '../ScalarIcon';
-type Variants = VariantProps<typeof variants>;
-type __VLS_Props = {
-    label: string;
-    icon: Icon | Component;
-    disabled?: boolean;
-    variant?: Variants['variant'];
-    size?: Variants['size'];
-    thickness?: string;
-    weight?: ScalarIconWeight;
-};
-declare const variants: (props?: ({
-    size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-    disabled?: boolean | undefined;
-    variant?: string | undefined;
-} & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
-    className?: never;
-} | {
-    class?: never;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
-})) | undefined) => string;
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "full" | "xxs";
-    variant: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { ScalarIconButtonProps } from './types';
+/**
+ * Scalar icon button component
+ *
+ * Should be used in conjunction with an icon from `@scalar/icons`
+ *
+ * @example
+ * import { ScalarIconAcorn } from '@scalar/icons'
+ * ...
+ * <ScalarIconButton
+ *   :icon="ScalarIconAcorn"
+ *   label="It's an acorn"
+ * />
+ */
+declare const _default: import("vue").DefineComponent<ScalarIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarIconButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    ref: HTMLButtonElement;
+}, any>;
 export default _default;
 //# sourceMappingURL=ScalarIconButton.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,GAAG,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}
+{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAKpD;;;;;;;;;;;;GAYG;;;;AACH,wBAoGC"}

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

@@ -1,8 +1,13 @@
-import { defineComponent as a, createElementBlock as o, openBlock as n, mergeProps as r, unref as s, createVNode as l, createElementVNode as d, toDisplayString as c } from "vue";
-import { useBindCx as p, cva as u } from "@scalar/use-hooks/useBindCx";
-import { styles as m } from "../ScalarButton/variants.js";
-import f from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
-const h = ["ariaDisabled"], b = { class: "sr-only" }, y = /* @__PURE__ */ a({
+import { defineComponent as r, useTemplateRef as d, computed as o, createElementBlock as n, openBlock as a, mergeProps as c, unref as i, createVNode as f, createCommentVNode as m, toDisplayString as p } from "vue";
+import { useBindCx as u } from "@scalar/use-hooks/useBindCx";
+import { variants as h } from "./variants.js";
+import { useTooltip as b } from "../ScalarTooltip/useTooltip.js";
+import g from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
+const v = ["aria-disabled"], k = {
+  key: 0,
+  class: "sr-only"
+}, y = {}, S = /* @__PURE__ */ r({
+  ...y,
   inheritAttrs: !1,
   __name: "ScalarIconButton",
   props: {
@@ -10,40 +15,34 @@ const h = ["ariaDisabled"], b = { class: "sr-only" }, y = /* @__PURE__ */ a({
     icon: {},
     disabled: { type: Boolean },
     variant: { default: "ghost" },
-    size: { default: "md" },
+    size: {},
     thickness: {},
-    weight: {}
+    weight: {},
+    tooltip: { type: Boolean }
   },
-  setup(g) {
-    const { cx: i } = p(), t = u({
-      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: m
-      }
-    });
-    return (e, v) => (n(), o("button", r({
-      ariaDisabled: e.disabled || void 0,
+  setup(t) {
+    const { cx: s } = u(), l = d("ref");
+    return b({
+      content: o(() => t.label),
+      offset: o(() => t.variant === "ghost" ? 0 : 4),
+      placement: o(
+        () => typeof t.tooltip == "boolean" ? void 0 : t.tooltip
+      ),
+      targetRef: o(() => t.tooltip ? l.value : void 0)
+    }), (e, B) => (a(), n("button", c({
+      ref: "ref",
+      "aria-disabled": e.disabled,
       type: "button"
-    }, s(i)(s(t)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
-      l(s(f), {
+    }, i(s)(i(h)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
+      f(i(g), {
         icon: e.icon,
         thickness: e.thickness,
         weight: e.weight
       }, null, 8, ["icon", "thickness", "weight"]),
-      d("span", b, c(e.label), 1)
-    ], 16, h));
+      e.tooltip ? m("", !0) : (a(), n("span", k, p(e.label), 1))
+    ], 16, v));
   }
 });
 export {
-  y as default
+  S as default
 };

package/dist/components/ScalarIconButton/types.d.ts

@@ -0,0 +1,50 @@
+import type { ScalarIconComponent, ScalarIconWeight } from '@scalar/icons/types';
+import type { Variants } from './variants.js';
+import type { Icon } from '../ScalarIcon';
+import type { ScalarTooltipPlacement } from '../../components/ScalarTooltip';
+export type ScalarIconButtonProps = {
+    /**
+     * An accessible label for the icon button
+     *
+     * If `tooltip` is true, this will be used as the tooltip content
+     */
+    label: string;
+    /**
+     * The icon to display in the icon button
+     *
+     * Use a component from the `@scalar/icons` package to display
+     * an icon. String values are deprecated.
+     */
+    icon: Icon | ScalarIconComponent;
+    /** Whether the icon button is disabled */
+    disabled?: boolean;
+    /**
+     * The variant of the icon button
+     *
+     * @default 'ghost'
+     * @see <ScalarButton>
+     */
+    variant?: Variants['variant'];
+    /**
+     * The size of the icon button
+     *
+     * @default 'md'
+     */
+    size?: Variants['size'];
+    /**
+     * The thickness of the icon
+     *
+     * @deprecated Use the `weight` prop instead
+     */
+    thickness?: string;
+    /** The weight of the icon. */
+    weight?: ScalarIconWeight;
+    /**
+     * Whether to display a tooltip when hovering over the icon button
+     *
+     * If `true`, the `label` will be displayed when hovering over the
+     * icon button. Can also be a specific placement for the tooltip.
+     */
+    tooltip?: boolean | ScalarTooltipPlacement;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ScalarIconButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAA;AAExE,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,EAAE,IAAI,GAAG,mBAAmB,CAAA;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;CAC3C,CAAA"}

package/dist/components/ScalarIconButton/variants.d.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from 'cva';
+export declare const variants: (props?: ({
+    size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
+    disabled?: boolean | undefined;
+    variant?: "solid" | "outlined" | "ghost" | "danger" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+export type Variants = VariantProps<typeof variants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/ScalarIconButton/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/variants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BnB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/components/ScalarIconButton/variants.js

@@ -0,0 +1,32 @@
+import { cva as s } from "@scalar/use-hooks/useBindCx";
+import { styles as a } from "../ScalarButton/variants.js";
+const o = s({
+  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: "size-full"
+    },
+    disabled: {
+      true: "cursor-not-allowed shadow-none"
+    },
+    variant: a
+  },
+  compoundVariants: [
+    {
+      size: "md",
+      variant: "ghost",
+      class: "size-8 p-2 m-1 -outline-offset-2 rounded-lg"
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "ghost"
+  }
+});
+export {
+  o as variants
+};

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

@@ -38,7 +38,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -57,7 +57,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }>;
@@ -73,7 +73,7 @@ declare const meta: {
                 type?: "button" | "submit" | "reset";
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 size: "sm" | "md";
-                variant: string;
+                variant: "solid" | "outlined" | "ghost" | "danger";
                 fullWidth: boolean;
                 type: "button" | "submit" | "reset";
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts

@@ -1,8 +1,9 @@
+import type { ScalarIconComponent } from '@scalar/icons/types';
 import type { Component } from 'vue';
 import { type Icon } from '../ScalarIcon';
 type __VLS_Props = {
     is?: string | Component;
-    icon?: Icon | Component;
+    icon?: Icon | ScalarIconComponent;
     strong?: boolean;
 };
 declare function __VLS_template(): {

package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WAgET,OAAO,IAA6B;;yBARpB,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,mBAAmB,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WAgET,OAAO,IAA6B;;yBARpB,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}