@scalar/components 0.19.9 → 0.19.12

package/dist/components/ScalarButton/constants.d.ts

@@ -1,9 +1,9 @@
 /** Styles for the different button variants */
 export declare const BUTTON_VARIANT_STYLES: {
     readonly solid: ["scalar-button-solid", "bg-b-btn text-c-btn focus-visible:border-c-btn active:bg-b-btn hover:bg-h-btn outline-offset-1"];
-    readonly outlined: ["scalar-button-outlined", "active:bg-btn-1 border border-solid border-border bg-b-1 text-c-1 hover:bg-b-2"];
+    readonly outlined: ["scalar-button-outlined", "active:bg-btn-1 shadow-border bg-b-1 text-c-1 hover:bg-b-2"];
     readonly ghost: ["scalar-button-ghost", "bg-transparent text-c-3 active:text-c-1 hover:text-c-1"];
-    readonly gradient: ["scalar-button-gradient", "border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t", "dark:bg-linear-to-t dark:hover:bg-linear-to-b"];
+    readonly gradient: ["scalar-button-gradient", "shadow-border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t", "dark:bg-linear-to-t dark:hover:bg-linear-to-b"];
     readonly danger: ["scalar-button-danger", "bg-c-danger text-white active:brightness-90 hover:brightness-90"];
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/components/ScalarButton/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/constants.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C,eAAO,MAAM,qBAAqB;;;;;;CAiBmB,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/constants.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C,eAAO,MAAM,qBAAqB;;;;;;CAcmB,CAAA"}

package/dist/components/ScalarButton/constants.js

@@ -3,14 +3,11 @@ const t = {
     "scalar-button-solid",
     "bg-b-btn text-c-btn focus-visible:border-c-btn active:bg-b-btn hover:bg-h-btn outline-offset-1"
   ],
-  outlined: [
-    "scalar-button-outlined",
-    "active:bg-btn-1 border border-solid border-border bg-b-1 text-c-1 hover:bg-b-2"
-  ],
+  outlined: ["scalar-button-outlined", "active:bg-btn-1 shadow-border bg-b-1 text-c-1 hover:bg-b-2"],
   ghost: ["scalar-button-ghost", "bg-transparent text-c-3 active:text-c-1 hover:text-c-1"],
   gradient: [
     "scalar-button-gradient",
-    "border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t",
+    "shadow-border bg-b-1.5 bg-linear-to-b from-b-1 to-b-2 hover:bg-linear-to-t",
     // in dark mode we want to reverse the gradient direction
     "dark:bg-linear-to-t dark:hover:bg-linear-to-b"
   ],

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG/D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAuBP,OAAO;;;;aAAP,OAAO;;;oGA0Fd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/ScalarCopy.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG/D;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aA+BP,OAAO;;;;aAAP,OAAO;;;oGA0Fd,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCopy/ScalarCopy.vue.js

@@ -1,30 +1,35 @@
-import { defineComponent as p, mergeModels as s, useModel as r, watch as m, createBlock as u, openBlock as f, unref as c, createSlots as y, withCtx as t, renderSlot as a } from "vue";
-import { useClipboard as b } from "@vueuse/core";
-import k from "./ScalarCopyButton.vue.js";
-const $ = {}, B = /* @__PURE__ */ p({
-  ...$,
+import { defineComponent as p, mergeModels as s, useModel as m, onMounted as r, watch as u, createBlock as f, openBlock as y, unref as c, createSlots as b, withCtx as t, renderSlot as a } from "vue";
+import { useClipboard as k } from "@vueuse/core";
+import $ from "./ScalarCopyButton.vue.js";
+const v = {}, L = /* @__PURE__ */ p({
+  ...v,
   __name: "ScalarCopy",
   props: /* @__PURE__ */ s({
     content: { default: "" },
     placement: {},
     showLabel: { type: Boolean },
-    duration: { default: 1500 }
+    duration: { default: 1500 },
+    immediate: { type: Boolean }
   }, {
     copied: { type: Boolean, default: !1 },
     copiedModifiers: {}
   }),
   emits: ["update:copied"],
   setup(o) {
-    const n = r(o, "copied"), { copy: i, copied: l } = b({
+    const n = m(o, "copied");
+    r(() => {
+      o.immediate && d(o.content);
+    });
+    const { copy: d, copied: i } = k({
       legacy: !0,
       copiedDuring: o.duration
     });
-    return m(l, (e) => n.value = e), (e, d) => (f(), u(k, {
+    return u(i, (e) => n.value = e), (e, l) => (y(), f($, {
+      copied: n.value || c(i),
       placement: o.placement,
       showLabel: o.showLabel,
-      copied: n.value || c(l),
-      onClick: d[0] || (d[0] = (v) => c(i)(o.content))
-    }, y({ _: 2 }, [
+      onClick: l[0] || (l[0] = (w) => c(d)(o.content))
+    }, b({ _: 2 }, [
       e.$slots.copy ? {
         name: "copy",
         fn: t(() => [
@@ -46,9 +51,9 @@ const $ = {}, B = /* @__PURE__ */ p({
         ]),
         key: "2"
       } : void 0
-    ]), 1032, ["placement", "showLabel", "copied"]));
+    ]), 1032, ["copied", "placement", "showLabel"]));
   }
 });
 export {
-  B as default
+  L as default
 };

package/dist/components/ScalarCopy/ScalarCopyButton.vue.js

@@ -1,22 +1,22 @@
-import { defineComponent as y, mergeModels as v, useModel as b, computed as k, createElementBlock as a, openBlock as t, mergeProps as x, unref as C, createVNode as i, createElementVNode as c, Transition as d, withCtx as p, createBlock as h, resolveDynamicComponent as g, normalizeClass as u, renderSlot as l, createTextVNode as r } from "vue";
+import { defineComponent as y, mergeModels as v, useModel as C, computed as b, createElementBlock as a, openBlock as t, mergeProps as k, unref as x, createVNode as i, createElementVNode as c, Transition as d, withCtx as p, createBlock as h, resolveDynamicComponent as g, normalizeClass as u, renderSlot as l, createTextVNode as r } from "vue";
 import { ScalarIconCheck as w, ScalarIconCopy as B } from "@scalar/icons";
-import { useBindCx as $ } from "@scalar/use-hooks/useBindCx";
-import z from "./ScalarCopyBackdrop.vue.js";
-const S = {
+import { useBindCx as T } from "@scalar/use-hooks/useBindCx";
+import $ from "./ScalarCopyBackdrop.vue.js";
+const z = {
   "aria-hidden": "true",
   class: "flex items-center py-1.5 mask-y-from-[calc(100%-8px)] mask-y-to-100%"
-}, M = {
+}, A = {
   key: 0,
   class: "whitespace-nowrap px-1.5"
-}, N = {
+}, F = {
   key: 0,
-  role: "alert",
-  class: "sr-only"
-}, V = {
+  class: "sr-only",
+  role: "alert"
+}, S = {
   key: 1,
   class: "sr-only"
-}, E = {}, A = /* @__PURE__ */ y({
-  ...E,
+}, M = {}, L = /* @__PURE__ */ y({
+  ...M,
   inheritAttrs: !1,
   __name: "ScalarCopyButton",
   props: /* @__PURE__ */ v({
@@ -28,23 +28,23 @@ const S = {
   }),
   emits: ["update:copied"],
   setup(n) {
-    const o = b(n, "copied"), { cx: m } = $(), f = k(() => o.value ? w : B);
-    return (s, e) => (t(), a("button", x(
+    const o = C(n, "copied"), { cx: m } = T(), f = b(() => o.value ? w : B);
+    return (s, e) => (t(), a("button", k(
       { type: "button" },
-      C(m)(
+      x(m)(
         "group/copy-button relative z-0 flex items-center justify-center",
         "size-6 p-1.25 -m-1 rounded text-xs bg-b-2",
         o.value ? "text-c-1" : "text-c-2 hover:text-c-1"
       )
     ), [
       i(d, {
-        mode: "out-in",
-        "enter-active-class": "transition-transform",
-        "enter-from-class": "scale-0",
-        "enter-to-class": "scale-100",
-        "leave-active-class": "transition-transform",
-        "leave-from-class": "scale-100",
-        "leave-to-class": "scale-0"
+        enterActiveClass: "transition-transform",
+        enterFromClass: "scale-0",
+        enterToClass: "scale-100",
+        leaveActiveClass: "transition-transform",
+        leaveFromClass: "scale-100",
+        leaveToClass: "scale-0",
+        mode: "out-in"
       }, {
         default: p(() => [
           (t(), h(g(f.value), { class: "size-full" }))
@@ -58,18 +58,18 @@ const S = {
           "right-0 pr-[100%]": n.placement === "left"
         }])
       }, [
-        c("div", S, [
+        c("div", z, [
           i(d, {
-            mode: "out-in",
-            "enter-active-class": "transition-transform ease-out",
-            "enter-from-class": "translate-y-1.5",
-            "enter-to-class": "translate-y-0",
-            "leave-active-class": "transition-transform ease-in",
-            "leave-from-class": "translate-y-0",
-            "leave-to-class": "-translate-y-1.5"
+            enterActiveClass: "transition-transform ease-out",
+            enterFromClass: "translate-y-1.5",
+            enterToClass: "translate-y-0",
+            leaveActiveClass: "transition-transform ease-in",
+            leaveFromClass: "translate-y-0",
+            leaveToClass: "-translate-y-1.5",
+            mode: "out-in"
           }, {
             default: p(() => [
-              o.value ? (t(), a("div", M, [
+              o.value ? (t(), a("div", A, [
                 l(s.$slots, "copied", {}, () => [
                   e[0] || (e[0] = r("Copied", -1))
                 ])
@@ -87,22 +87,22 @@ const S = {
             _: 3
           })
         ]),
-        o.value ? (t(), a("div", N, [
+        o.value ? (t(), a("div", F, [
           l(s.$slots, "copied", {}, () => [
             e[2] || (e[2] = r("Copied", -1))
           ])
-        ])) : (t(), a("div", V, [
+        ])) : (t(), a("div", S, [
           l(s.$slots, "copy", {}, () => [
             e[3] || (e[3] = r("Copy", -1))
           ])
         ])),
         l(s.$slots, "backdrop", {}, () => [
-          i(z)
+          i($)
         ])
       ], 2)
     ], 16));
   }
 });
 export {
-  A as default
+  L as default
 };

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

@@ -1,3 +1,4 @@
 export { default as ScalarCopy } from './ScalarCopy.vue.js';
+export { default as ScalarCopyBackdrop } from './ScalarCopyBackdrop.vue.js';
 export { default as ScalarCopyButton } from './ScalarCopyButton.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}

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

@@ -14,6 +14,8 @@ export type ScalarCopyProps = {
      * @default 1500
      */
     duration?: number;
+    /** Whether to copy the content immediately on mount */
+    immediate?: boolean;
 };
 export type ScalarCopySlots = {
     /** The label shown next to the copy button before it is clicked */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAA;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,OAAO,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,OAAO,CAAA;CACrB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCopy/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAA;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,OAAO,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,OAAO,CAAA;CACrB,CAAA"}

package/dist/components/ScalarForm/ScalarFormInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarFormInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;;SAAlB,MAAM,GAAG,SAAS;;cAiEX,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarFormInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;SAEX,MAAM,GAAG,SAAS;;SAAlB,MAAM,GAAG,SAAS;;cAkEX,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarForm/ScalarFormInput.vue.js

@@ -1,39 +1,40 @@
-import { defineComponent as s, createBlock as i, openBlock as a, resolveDynamicComponent as p, mergeProps as c, unref as e, withCtx as d, renderSlot as f } from "vue";
-import { useBindCx as l, cva as m } from "@scalar/use-hooks/useBindCx";
-import { useFormGroupInput as b } from "./useFormGroups.js";
-const x = {}, y = /* @__PURE__ */ s({
-  ...x,
+import { defineComponent as u, createBlock as i, openBlock as a, resolveDynamicComponent as d, mergeProps as c, unref as e, withCtx as l, renderSlot as p } from "vue";
+import { useBindCx as f, cva as b } from "@scalar/use-hooks/useBindCx";
+import { useFormGroupInput as m } from "./useFormGroups.js";
+const g = {}, C = /* @__PURE__ */ u({
+  ...g,
   inheritAttrs: !1,
   __name: "ScalarFormInput",
   props: {
     is: { default: "button" }
   },
   setup(t) {
-    const { cx: o } = l(), r = b(), n = m({
+    const { cx: o } = f(), r = m(), n = b({
       base: [
         // Layout
-        "bg-b-1.5 flex items-center text-c-2 gap-0.75 px-3 py-2.5 ",
+        "bg-b-1.5 flex items-center text-c-2 gap-0.75 p-3",
+        "text-base leading-5",
         //Focus
         "outline-offset-[-1px] has-[:focus-visible]:outline"
       ],
       variants: {
         grouped: {
           true: "first:rounded-t-[inherit] last:rounded-b-[inherit]",
-          false: "rounded border"
+          false: "rounded shadow-border"
         },
         button: { true: "cursor-pointer hover:bg-b-2" }
       }
     });
-    return (u, g) => (a(), i(p(t.is), c({
+    return (s, h) => (a(), i(d(t.is), c({
       type: t.is === "button" ? "button" : void 0
     }, e(o)(e(n)({ button: t.is === "button", grouped: e(r) }))), {
-      default: d(() => [
-        f(u.$slots, "default")
+      default: l(() => [
+        p(s.$slots, "default")
       ]),
       _: 3
     }, 16, ["type"]));
   }
 });
 export {
-  y as default
+  C as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AA0DA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;iBAmBL,MAAM;;;;iBAAN,MAAM;;;kFAkFf,CAAC"}
+{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AA4DA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;iBAmBL,MAAM;;;;iBAAN,MAAM;;;kFAsFf,CAAC"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as u, useModel as m, onMounted as f, createBlock as d, openBlock as c, unref as t, mergeProps as l, withCtx as p, withDirectives as x, createElementVNode as _, vModelText as v } from "vue";
-import { useBindCx as h } from "@scalar/use-hooks/useBindCx";
-import { useTextareaAutosize as k } from "@vueuse/core";
-import A from "../ScalarForm/ScalarFormInput.vue.js";
-const C = {}, B = /* @__PURE__ */ u({
-  ...C,
+import { useBindCx as g } from "@scalar/use-hooks/useBindCx";
+import { useTextareaAutosize as h } from "@vueuse/core";
+import k from "../ScalarForm/ScalarFormInput.vue.js";
+const A = {}, B = /* @__PURE__ */ u({
+  ...A,
   inheritAttrs: !1,
   __name: "ScalarTextArea",
   props: {
@@ -12,16 +12,18 @@ const C = {}, B = /* @__PURE__ */ u({
   },
   emits: ["update:modelValue"],
   setup(i) {
-    const o = m(i, "modelValue"), { textarea: r } = k({
+    const o = m(i, "modelValue"), { textarea: r } = h({
       // @ts-expect-error - unexpected type mismatch
       input: o,
       styleProp: "minHeight"
-    }), { stylingAttrsCx: a, otherAttrs: n } = h();
+    }), { stylingAttrsCx: a, otherAttrs: n } = g();
     return f(() => {
       "autofocus" in n.value && r.value?.focus();
-    }), (V, e) => (c(), d(t(A), l(
+    }), (C, e) => (c(), d(t(k), l(
       { is: "div" },
-      t(a)("custom-scroll flex text-c-1 min-h-0 shrink cursor-text"),
+      t(a)(
+        "custom-scroll flex text-c-1 min-h-0 shrink cursor-text leading-snug"
+      ),
       {
         onClick: e[1] || (e[1] = (s) => t(r)?.focus())
       }

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

@@ -14,20 +14,19 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
+} & {
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<{
     readonly?: boolean;
 } & {
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    prefix?: (props: {}) => any;
-} & {
-    prefix?: (props: {}) => any;
-} & {
-    suffix?: (props: {}) => any;
-} & {
-    aside?: (props: {}) => any;
+    prefix?: () => unknown;
+    suffix?: () => unknown;
+    aside?: () => unknown;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AA4FA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;;iBA2BP,MAAM;;;;eA3BN,OAAO;;iBA2BP,MAAM;;;;aAoIN,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYvC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AA6GA;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;eAEL,OAAO;;iBA8CP,MAAM;;;;;;eA9CN,OAAO;;iBA8CP,MAAM;;;;;aAjCR,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;EA0KnB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarTextInput/ScalarTextInput.vue.js

@@ -1,69 +1,69 @@
-import { defineComponent as y, mergeModels as x, useModel as v, ref as $, onMounted as k, createBlock as w, openBlock as s, unref as i, mergeProps as f, withCtx as _, createElementVNode as d, renderSlot as n, createElementBlock as l, createCommentVNode as a, withDirectives as C, vModelDynamic as g, toDisplayString as V } from "vue";
-import { useBindCx as b } from "@scalar/use-hooks/useBindCx";
-import B from "../ScalarForm/ScalarFormInput.vue.js";
-const M = { class: "flex flex-1 relative" }, A = {
+import { defineComponent as k, mergeModels as f, useModel as $, ref as w, onMounted as _, createBlock as C, openBlock as o, unref as a, mergeProps as m, withCtx as g, createElementVNode as d, renderSlot as n, createElementBlock as l, createCommentVNode as i, withDirectives as V, vModelDynamic as b, toDisplayString as B } from "vue";
+import { useBindCx as M } from "@scalar/use-hooks/useBindCx";
+import A from "../ScalarForm/ScalarFormInput.vue.js";
+const D = { class: "flex items-center flex-1 relative" }, S = {
   key: 0,
-  class: "select-none whitespace-nowrap text-sm text-transparent"
-}, D = ["aria-readonly", "readonly"], S = {
+  class: "select-none whitespace-nowrap text-transparent"
+}, E = ["aria-readonly", "readonly"], N = {
   key: 1,
-  class: "absolute inset-0 select-none overflow-hidden whitespace-nowrap text-sm"
-}, E = {
+  class: "absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap"
+}, z = {
   key: 0,
   class: "text-c-2"
-}, N = { class: "text-transparent" }, z = {
+}, I = { class: "text-transparent" }, P = {
   key: 1,
   class: "text-c-2"
-}, I = {}, j = /* @__PURE__ */ y({
-  ...I,
+}, T = {}, F = /* @__PURE__ */ k({
+  ...T,
   inheritAttrs: !1,
   __name: "ScalarTextInput",
-  props: /* @__PURE__ */ x({
+  props: /* @__PURE__ */ f({
     readonly: { type: Boolean }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: ["update:modelValue"],
-  setup(t) {
-    const r = v(t, "modelValue"), o = $(), { stylingAttrsCx: m, otherAttrs: u } = b();
-    k(() => {
-      "autofocus" in u.value && o.value?.focus();
+  emits: /* @__PURE__ */ f(["click"], ["update:modelValue"]),
+  setup(t, { emit: p }) {
+    const h = p, r = $(t, "modelValue"), s = w(), { stylingAttrsCx: y, otherAttrs: c } = M();
+    _(() => {
+      "autofocus" in c.value && s.value?.focus();
     });
-    function p() {
-      t.readonly ? o.value?.select() : o.value?.focus();
+    function v(e) {
+      h("click", e), t.readonly ? s.value?.select() : s.value?.focus();
     }
-    return (e, c) => (s(), w(i(B), f(
+    return (e, u) => (o(), C(a(A), m(
       { is: "div" },
-      i(m)(
+      a(y)(
         "cursor-text text-c-1",
         t.readonly ? "" : "focus-within:bg-b-1"
       ),
-      { onClick: p }
+      { onClick: v }
     ), {
-      default: _(() => [
-        d("div", M, [
-          e.$slots.prefix ? (s(), l("span", A, [
+      default: g(() => [
+        d("div", D, [
+          e.$slots.prefix ? (o(), l("div", S, [
             n(e.$slots, "prefix")
-          ])) : a("", !0),
-          C(d("input", f({
+          ])) : i("", !0),
+          V(d("input", m({
             ref_key: "input",
-            ref: o,
-            "onUpdate:modelValue": c[0] || (c[0] = (h) => r.value = h),
+            ref: s,
+            "onUpdate:modelValue": u[0] || (u[0] = (x) => r.value = x),
             "aria-readonly": t.readonly || void 0,
-            class: "z-1 min-w-0 flex-1 border-none bg-transparent text-sm placeholder:font-[inherit] focus-within:outline-none",
+            class: "z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none",
             readonly: t.readonly
-          }, i(u)), null, 16, D), [
-            [g, r.value]
+          }, a(c)), null, 16, E), [
+            [b, r.value]
           ]),
-          e.$slots.prefix || e.$slots.suffix ? (s(), l("div", S, [
-            e.$slots.prefix ? (s(), l("span", E, [
+          e.$slots.prefix || e.$slots.suffix ? (o(), l("div", N, [
+            e.$slots.prefix ? (o(), l("span", z, [
               n(e.$slots, "prefix")
-            ])) : a("", !0),
-            d("span", N, V(r.value || e.$attrs.placeholder), 1),
-            e.$slots.suffix ? (s(), l("span", z, [
+            ])) : i("", !0),
+            d("span", I, B(r.value || e.$attrs.placeholder), 1),
+            e.$slots.suffix ? (o(), l("span", P, [
               n(e.$slots, "suffix")
-            ])) : a("", !0)
-          ])) : a("", !0)
+            ])) : i("", !0)
+          ])) : i("", !0)
         ]),
         n(e.$slots, "aside")
       ]),
@@ -72,5 +72,5 @@ const M = { class: "flex flex-1 relative" }, A = {
   }
 });
 export {
-  j as default
+  F as default
 };

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Scalar Text Input Copy component
+ *
+ * A wrapper around the ScalarTextInput component that provides a
+ * copy button and allows copying of the input content to the clipboard.
+ *
+ * @example
+ *   <ScalarTextInputCopy v-model="model" />
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The placement of the copy button */
+    duration?: number;
+    /** Whether the input is writable */
+    editable?: boolean;
+    /** Whether to copy the model value immediately on mount */
+    immediate?: boolean;
+} & {
+    modelValue?: string;
+    copied?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+    "update:copied": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The placement of the copy button */
+    duration?: number;
+    /** Whether the input is writable */
+    editable?: boolean;
+    /** Whether to copy the model value immediately on mount */
+    immediate?: boolean;
+} & {
+    modelValue?: string;
+    copied?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:copied"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    prefix?: () => unknown;
+    suffix?: () => unknown;
+    aside?: () => unknown;
+    copy?: () => unknown;
+    copied?: () => unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarTextInputCopy.vue.d.ts.map

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInputCopy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"names":[],"mappings":"AAgGA;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;IA/ChB,uCAAuC;eAC5B,MAAM;IACjB,oCAAoC;eACzB,OAAO;IAClB,2DAA2D;gBAC/C,OAAO;;iBAyCR,MAAM;aACR,OAAO;;;;;aAnCP,MAAM,OAAO;aAEb,MAAM,OAAO;YAEd,MAAM,OAAO;WAEd,MAAM,OAAO;aAEX,MAAM,OAAO;EAiKpB,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.js

@@ -0,0 +1,68 @@
+import { defineComponent as c, mergeModels as f, onMounted as v, useModel as p, watch as y, createBlock as $, openBlock as b, unref as d, withCtx as t, createVNode as r, withModifiers as k, createSlots as C, renderSlot as s } from "vue";
+import { useClipboard as V } from "@vueuse/core";
+import M from "./ScalarTextInput.vue.js";
+import B from "../ScalarCopy/ScalarCopyButton.vue.js";
+import g from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+const w = {}, T = /* @__PURE__ */ c({
+  ...w,
+  __name: "ScalarTextInputCopy",
+  props: /* @__PURE__ */ f({
+    duration: { default: 1500 },
+    editable: { type: Boolean },
+    immediate: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {},
+    copied: { type: Boolean, default: !1 },
+    copiedModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:copied"],
+  setup(a) {
+    v(() => {
+      a.immediate && e.value && i(e.value);
+    });
+    const e = p(a, "modelValue"), u = p(a, "copied"), { copy: i, copied: m } = V({
+      legacy: !0,
+      copiedDuring: a.duration
+    });
+    return y(m, (o) => u.value = o), (o, l) => (b(), $(M, {
+      modelValue: e.value,
+      "onUpdate:modelValue": l[1] || (l[1] = (n) => e.value = n),
+      readonly: !a.editable,
+      onClick: l[2] || (l[2] = (n) => e.value && d(i)(e.value))
+    }, {
+      aside: t(() => [
+        r(d(B), {
+          class: "z-1",
+          copied: u.value || d(m),
+          placement: "left",
+          onClick: l[0] || (l[0] = k((n) => e.value && d(i)(e.value), ["stop"]))
+        }, C({
+          backdrop: t(() => [
+            r(d(g), { class: "bg-b-1.5" })
+          ]),
+          _: 2
+        }, [
+          o.$slots.copy ? {
+            name: "copy",
+            fn: t(() => [
+              s(o.$slots, "copy")
+            ]),
+            key: "0"
+          } : void 0,
+          o.$slots.copied ? {
+            name: "copied",
+            fn: t(() => [
+              s(o.$slots, "copied")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["copied"])
+      ]),
+      _: 3
+    }, 8, ["modelValue", "readonly"]));
+  }
+});
+export {
+  T as default
+};

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue2.js

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