@scalar/components 0.14.36 → 0.14.38

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ScalarCheckboxType } from './types';
+/**
+ * Scalar checkbox base component
+ *
+ * Provides a styled visual checkbox but not the underlying input element.
+ *
+ * This is used internally by the ScalarCheckboxInput component.
+ *
+ * If you're looking to create an interactive checkbox you
+ * probably want the ScalarCheckboxInput component.
+ *
+ * @example
+ * <ScalarCheckbox :selected="state" type="radio" />
+ */
+declare const _default: import("vue").DefineComponent<{
+    selected?: boolean;
+    type?: ScalarCheckboxType;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    selected?: boolean;
+    type?: ScalarCheckboxType;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarCheckbox.vue.d.ts.map

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckbox.vue"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;;;;GAYG;;eAGU,OAAO;WACX,kBAAkB;;eADd,OAAO;WACX,kBAAkB;;AAH3B,wBAqEC"}

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as o, createElementBlock as c, openBlock as t, normalizeClass as r, createBlock as a, createCommentVNode as n, unref as s } from "vue";
+import { ScalarIconCheck as l } from "@scalar/icons";
+const d = {}, i = /* @__PURE__ */ o({
+  ...d,
+  __name: "ScalarCheckbox",
+  props: {
+    selected: { type: Boolean },
+    type: { default: "checkbox" }
+  },
+  setup(p) {
+    return (e, m) => (t(), c("div", {
+      class: r(["flex size-4 items-center justify-center p-0.75", [
+        e.selected ? "bg-c-accent text-b-1" : "text-transparent shadow-border",
+        e.type === "checkbox" ? "rounded" : "rounded-full"
+      ]])
+    }, [
+      e.selected ? (t(), a(s(l), {
+        key: 0,
+        class: "size-3",
+        weight: "bold"
+      })) : n("", !0)
+    ], 2));
+  }
+});
+export {
+  i as default
+};

package/dist/components/ScalarCheckboxInput/ScalarCheckbox.vue2.js

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

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ScalarCheckboxOption } from './types';
+/**
+ * Scalar Checkbox Group component
+ *
+ * A group of checkbox inputs allowing for multiple selections.
+ */
+declare const _default: import("vue").DefineComponent<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: ScalarCheckboxOption[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption[];
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ScalarCheckboxOption[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarCheckboxGroup.vue.d.ts.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;GAIG;;cAGS,oBAAoB,EAAE;;iBAcrB,oBAAoB,EAAE;;;;cAdvB,oBAAoB,EAAE;;iBAcrB,oBAAoB,EAAE;;;;AAhBnC,wBAqGC"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as c, mergeModels as f, useModel as _, useId as i, createBlock as t, openBlock as u, unref as o, withCtx as m, createElementBlock as p, Fragment as v, renderList as V, createTextVNode as k, toDisplayString as x } from "vue";
+import g from "./ScalarCheckboxInput.vue.js";
+import h from "../ScalarForm/ScalarFormInputGroup.vue.js";
+const B = {}, S = /* @__PURE__ */ c({
+  ...B,
+  __name: "ScalarCheckboxGroup",
+  props: /* @__PURE__ */ f({
+    options: { default: () => [] }
+  }, {
+    modelValue: { default: [] },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const l = _(r, "modelValue"), d = i();
+    return (n, C) => (u(), t(o(h), null, {
+      default: m(() => [
+        (u(!0), p(v, null, V(n.options, (e) => (u(), t(g, {
+          value: e.value,
+          name: o(d),
+          modelValue: l.value?.some(({ value: a }) => a === e.value),
+          "onUpdate:modelValue": (a) => l.value = a ? [...l.value, e] : l.value.filter(({ value: s }) => s !== e.value),
+          key: e.value
+        }, {
+          default: m(() => [
+            k(x(e.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["value", "name", "modelValue", "onUpdate:modelValue"]))), 128))
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  S as default
+};

package/dist/components/ScalarCheckboxInput/ScalarCheckboxGroup.vue2.js

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

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

@@ -0,0 +1,33 @@
+import type { ScalarCheckboxType } from './types';
+/**
+ * Scalar Checkbox Input component
+ *
+ * A wrapper around the HTML input element for either checkboxes or radio buttons.
+ *
+ * @example
+ *  <ScalarCheckboxInput v-model="model" type="checkbox">
+ *    Option Label
+ *  </ScalarCheckboxInput>
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    type?: ScalarCheckboxType;
+} & {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    type?: ScalarCheckboxType;
+} & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarCheckboxInput.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD;;;;;;;;;GASG;;WAGM,kBAAkB;;iBAcd,OAAO;;;;WAdX,kBAAkB;;iBAcd,OAAO;;;;cA6DN,CAAC,KAAK,IAAgB,KAAK,GAAG;;AA7E5C,wBAgHC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.js

@@ -0,0 +1,45 @@
+import { defineComponent as u, mergeModels as c, useModel as m, createBlock as p, openBlock as f, unref as o, mergeProps as s, withCtx as _, createVNode as y, createElementVNode as r, withDirectives as h, renderSlot as v, vModelDynamic as x } from "vue";
+import { useBindCx as V } from "@scalar/use-hooks/useBindCx";
+import b from "./ScalarCheckbox.vue.js";
+import k from "../ScalarForm/ScalarFormInput.vue.js";
+const C = { class: "flex-1 text-left min-w-0 truncate" }, g = ["type"], B = {}, D = /* @__PURE__ */ u({
+  ...B,
+  inheritAttrs: !1,
+  __name: "ScalarCheckboxInput",
+  props: /* @__PURE__ */ c({
+    type: { default: "checkbox" }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = m(a, "modelValue"), { classCx: n, otherAttrs: d } = V();
+    return (t, l) => (f(), p(o(k), s(
+      { is: "label" },
+      o(n)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": e.value })
+    ), {
+      default: _(() => [
+        y(b, {
+          selected: e.value,
+          type: t.type,
+          class: "shrink-0"
+        }, null, 8, ["selected", "type"]),
+        r("div", C, [
+          v(t.$slots, "default")
+        ]),
+        h(r("input", s({
+          type: t.type,
+          "onUpdate:modelValue": l[0] || (l[0] = (i) => e.value = i),
+          class: "sr-only"
+        }, o(d)), null, 16, g), [
+          [x, e.value]
+        ])
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  D as default
+};

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue2.js

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

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ScalarCheckboxOption } from './types';
+/**
+ * Scalar Checkbox Radio Group component
+ *
+ * A group of radio inputs allowing for single selection.
+ */
+declare const _default: import("vue").DefineComponent<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: ScalarCheckboxOption | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ScalarCheckboxOption | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarCheckboxRadioGroup.vue.d.ts.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxRadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;GAIG;;cAGS,oBAAoB,EAAE;;iBAarB,oBAAoB;;;;cAbrB,oBAAoB,EAAE;;iBAarB,oBAAoB;;;;AAfjC,wBAiGC"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as s, mergeModels as c, useModel as i, useId as _, createBlock as o, openBlock as l, unref as t, withCtx as u, createElementBlock as f, Fragment as p, renderList as v, createTextVNode as V, toDisplayString as k } from "vue";
+import x from "./ScalarCheckboxInput.vue.js";
+import g from "../ScalarForm/ScalarFormInputGroup.vue.js";
+const h = {}, b = /* @__PURE__ */ s({
+  ...h,
+  __name: "ScalarCheckboxRadioGroup",
+  props: /* @__PURE__ */ c({
+    options: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const a = i(r, "modelValue"), d = _();
+    return (m, y) => (l(), o(t(g), null, {
+      default: u(() => [
+        (l(!0), f(p, null, v(m.options, (e) => (l(), o(x, {
+          type: "radio",
+          value: e.value,
+          name: t(d),
+          modelValue: a.value?.value === e.value,
+          "onUpdate:modelValue": (n) => a.value = n ? e : void 0,
+          key: e.value
+        }, {
+          default: u(() => [
+            V(k(e.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["value", "name", "modelValue", "onUpdate:modelValue"]))), 128))
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  b as default
+};

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue2.js

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

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

@@ -0,0 +1,6 @@
+export { default as ScalarCheckboxInput } from './ScalarCheckboxInput.vue.js';
+export { default as ScalarCheckboxGroup } from './ScalarCheckboxGroup.vue.js';
+export { default as ScalarCheckboxRadioGroup } from './ScalarCheckboxRadioGroup.vue.js';
+export { default as ScalarCheckbox } from './ScalarCheckbox.vue.js';
+export type { ScalarCheckboxOption, ScalarCheckboxType } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAEhE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,7 @@
+/** The mode for a ScalarCheckboxInput */
+export type ScalarCheckboxType = 'checkbox' | 'radio';
+export type ScalarCheckboxOption = {
+    label: string;
+    value: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCheckboxInput/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,OAAO,CAAA;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA"}

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, mergeModels as m, useModel as y, useSlots as c, ref as k, createBlock as i, openBlock as f, withCtx as t, createCommentVNode as V, createSlots as w, renderSlot as r, normalizeProps as s, guardReactiveProps as d } from "vue";
-import z from "./ScalarComboboxOptions.vue.js";
-import S from "./ScalarComboboxPopover.vue.js";
+import { defineComponent as b, mergeModels as m, useModel as y, ref as c, createBlock as i, openBlock as f, withCtx as t, createCommentVNode as k, createSlots as V, renderSlot as r, normalizeProps as d, guardReactiveProps as s } from "vue";
+import w from "./ScalarComboboxOptions.vue.js";
+import z from "./ScalarComboboxPopover.vue.js";
 const P = /* @__PURE__ */ b({
   __name: "ScalarComboboxMultiselect",
   props: /* @__PURE__ */ m({
@@ -18,10 +18,8 @@ const P = /* @__PURE__ */ b({
   }),
   emits: /* @__PURE__ */ m(["add"], ["update:modelValue"]),
   setup(u, { expose: g, emit: v }) {
-    const n = y(u, "modelValue"), $ = v;
-    c();
-    const p = k(null);
-    return g({ comboboxPopoverRef: p }), (e, l) => (f(), i(S, {
+    const $ = v, n = y(u, "modelValue"), p = c(null);
+    return g({ comboboxPopoverRef: p }), (e, l) => (f(), i(z, {
       ref_key: "comboboxPopoverRef",
       ref: p,
       middleware: e.middleware,
@@ -35,7 +33,7 @@ const P = /* @__PURE__ */ b({
         r(e.$slots, "default", { open: a })
       ]),
       popover: t(({ open: a }) => [
-        e.options?.length ? (f(), i(z, {
+        e.options?.length ? (f(), i(w, {
           key: 0,
           modelValue: n.value,
           "onUpdate:modelValue": l[0] || (l[0] = (o) => n.value = o),
@@ -44,29 +42,29 @@ const P = /* @__PURE__ */ b({
           options: e.options,
           placeholder: e.placeholder,
           onAdd: l[1] || (l[1] = (o) => $("add"))
-        }, w({ _: 2 }, [
+        }, V({ _: 2 }, [
           e.$slots.option ? {
             name: "option",
             fn: t((o) => [
-              r(e.$slots, "option", s(d(o)))
+              r(e.$slots, "option", d(s(o)))
             ]),
             key: "0"
           } : void 0,
           e.$slots.group ? {
             name: "group",
             fn: t((o) => [
-              r(e.$slots, "group", s(d(o)))
+              r(e.$slots, "group", d(s(o)))
             ]),
             key: "1"
           } : void 0,
           e.$slots.add ? {
             name: "add",
             fn: t((o) => [
-              r(e.$slots, "add", s(d(o)))
+              r(e.$slots, "add", d(s(o)))
             ]),
             key: "2"
           } : void 0
-        ]), 1032, ["modelValue", "open", "options", "placeholder"])) : V("", !0)
+        ]), 1032, ["modelValue", "open", "options", "placeholder"])) : k("", !0)
       ]),
       _: 3
     }, 8, ["middleware", "offset", "placement", "resize", "target", "teleport"]));

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

@@ -53,8 +53,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The error message */
     error?: string;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File[] | undefined) => any) | undefined;
     onSelected?: ((value: File[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[] | undefined) => any) | undefined;
     "onUpdate:error"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** Override the entire input */

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

@@ -0,0 +1,28 @@
+import type { Component } from 'vue';
+/**
+ * Scalar form input base component
+ *
+ * Provides a base for styling scalar form inputs and buttons
+ *
+ * This is used internally by the ScalarTextInput component and others
+ * If you want a text input consider using this component
+ *
+ * Renders a button by default can be used to render any kind of input or input wrapper
+ *
+ * @example
+ * <ScalarFormInput  />
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    is?: string | Component;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    is?: string | Component;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarFormInput.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormInput.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;;;;GAYG;;SAGI,MAAM,GAAG,SAAS;;SAAlB,MAAM,GAAG,SAAS;;cAmDX,CAAC,KAAK,IAAgB,KAAK,GAAG;;AArD5C,wBAoFC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

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

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

package/dist/components/ScalarForm/ScalarFormInputGroup.vue.d.ts

@@ -0,0 +1,39 @@
+import type { Component } from 'vue';
+/**
+ * Scalar Form Group component
+ *
+ * Groups a set of ScalarFormInput or their derived components.
+ *
+ * @example
+ * <ScalarFormInputGroup>
+ *     <!-- Inputs... -->
+ * </ScalarFormInputGroup>
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The element to render
+     *
+     * If you want to use the group outside of a ScalarFormField,
+     * you can set this to 'fieldset'.
+     *
+     * @default 'div'
+     */
+    is?: string | Component;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The element to render
+     *
+     * If you want to use the group outside of a ScalarFormField,
+     * you can set this to 'fieldset'.
+     *
+     * @default 'div'
+     */
+    is?: string | Component;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarFormInputGroup.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarFormInputGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/ScalarFormInputGroup.vue"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAKpC;;;;;;;;;GASG;;IAGD;;;;;;OAMG;SACE,MAAM,GAAG,SAAS;;IAPvB;;;;;;OAMG;SACE,MAAM,GAAG,SAAS;;cAiCX,CAAC,KAAK,IAAgB,KAAK,GAAG;;AA1C5C,wBAuEC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,23 @@
+import { defineComponent as r, createBlock as t, openBlock as n, resolveDynamicComponent as s, normalizeProps as a, guardReactiveProps as i, unref as p, withCtx as l, renderSlot as u } from "vue";
+import { useBindCx as d } from "@scalar/use-hooks/useBindCx";
+import { useFormGroup as f } from "./useFormGroups.js";
+const m = {}, h = /* @__PURE__ */ r({
+  ...m,
+  inheritAttrs: !1,
+  __name: "ScalarFormInputGroup",
+  props: {
+    is: { default: "div" }
+  },
+  setup(c) {
+    const { cx: o } = d();
+    return f(), (e, _) => (n(), t(s(e.is), a(i(p(o)("flex flex-col border rounded divide-y"))), {
+      default: l(() => [
+        u(e.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  h as default
+};

package/dist/components/ScalarForm/ScalarFormInputGroup.vue2.js

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

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

@@ -1,9 +1,9 @@
 import s from "./ScalarFormSection.vue2.js";
 import { createElementBlock as n, openBlock as c, createElementVNode as t, renderSlot as o } from "vue";
-import l from "../../_virtual/_plugin-vue_export-helper.js";
-const r = { class: "flex min-w-0 flex-col gap-4" }, a = { class: "contents" }, d = { class: "text-lg font-medium text-c-1" };
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const l = { class: "flex min-w-0 flex-col gap-3" }, a = { class: "contents" }, d = { class: "text-base font-medium text-c-1" };
 function f(e, i, m, p, _, u) {
-  return c(), n("fieldset", r, [
+  return c(), n("fieldset", l, [
     t("legend", a, [
       t("span", d, [
         o(e.$slots, "label")
@@ -12,7 +12,7 @@ function f(e, i, m, p, _, u) {
     o(e.$slots, "default")
   ]);
 }
-const g = /* @__PURE__ */ l(s, [["render", f]]);
+const S = /* @__PURE__ */ r(s, [["render", f]]);
 export {
-  g as default
+  S as default
 };

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

@@ -1,5 +1,7 @@
 export { default as ScalarForm } from './ScalarForm.vue.js';
+export { default as ScalarFormError } from './ScalarFormError.vue.js';
 export { default as ScalarFormField } from './ScalarFormField.vue.js';
+export { default as ScalarFormInput } from './ScalarFormInput.vue.js';
+export { default as ScalarFormInputGroup } from './ScalarFormInputGroup.vue.js';
 export { default as ScalarFormSection } from './ScalarFormSection.vue.js';
-export { default as ScalarFormError } from './ScalarFormError.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/components/ScalarForm/useFormGroups.d.ts

@@ -0,0 +1,18 @@
+import { type InjectionKey } from 'vue';
+/**
+ * Tells a ScalarFormInput component that it is in a form group.
+ */
+export declare const FORM_GROUP_SYMBOL: InjectionKey<boolean>;
+/**
+ * Check if we're in a form group.
+ *
+ * This is called from ScalarFormInput components.
+ */
+export declare const useFormGroupInput: () => boolean;
+/**
+ * Set that this is a form group.
+ *
+ * This is called from ScalarFormInputGroup components.
+ */
+export declare const useFormGroup: () => void;
+//# sourceMappingURL=useFormGroups.d.ts.map

package/dist/components/ScalarForm/useFormGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormGroups.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarForm/useFormGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAmB,MAAM,KAAK,CAAA;AAExD;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAe,YAAY,CAAC,OAAO,CAAC,CAAA;AAElE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,eAE7B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,YAExB,CAAA"}

package/dist/components/ScalarForm/useFormGroups.js

@@ -0,0 +1,9 @@
+import { inject as r, provide as t } from "vue";
+const o = Symbol(), u = () => r(o, !1), n = () => {
+  t(o, !0);
+};
+export {
+  o as FORM_GROUP_SYMBOL,
+  n as useFormGroup,
+  u as useFormGroupInput
+};