npm - @scalar/components - Versions diffs - 0.13.16 → 0.13.17 - Mend

@scalar/components 0.13.16 → 0.13.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,24 @@
 # Scalar Components
-This library is designed to work seamlessly with our theming system, but it’s also flexible enough for standalone use by setting CSS variables manually. For a list of available variables, please refer to the variable legend below.
+<!-- Hide badges on Storybook -->
+<div class="sb-hide">
+[![Storybook](https://img.shields.io/badge/storybook-%23e1618c?logo=storybook&logoColor=%23fff)](https://scalar-components.netlify.app/)
+[![Version](https://img.shields.io/npm/v/%40scalar/components)](https://www.npmjs.com/package/@scalar/components)
+[![Downloads](https://img.shields.io/npm/dm/%40scalar/components)](https://www.npmjs.com/package/@scalar/components)
+[![License](https://img.shields.io/npm/l/%40scalar%2Fcomponents)](https://www.npmjs.com/package/@scalar/components)
+[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)
+</div>
+Scalar Components provides a library of components used across Scalar products. The library is designed to work seamlessly with our [theming system](https://github.com/scalar/scalar/tree/main/packages/themes) and includes a scoped copy of the themes reset, base variables and colors.
+<!-- Hide the storybook link on Storybook -->
+<div class="sb-hide">
+Want to explore the components? Check out the [Storybook](https://scalar-components.netlify.app/) for a live demo.
+</div>
 ## Installation
@@ -8,6 +26,16 @@ This library is designed to work seamlessly with our theming system, but it’s
 pnpm i @scalar/components
 ```
+## Scoping
+Because many Scalar applications are embedded into other websites the components reset and styles are scoped to the `scalar-app` class. This means you need to add this class to the root element of your application where you want the to use the components. If you are using the components in a standalone application, you can just add this class to the `body` element.
+```html
+<body class="scalar-app">
+  <!-- Use components in here -->
+</body>
+```
 ## Usage
 To get started, import the CSS styles in your main setup file (e.g., main.ts, index.ts, or App.vue):
@@ -16,35 +44,72 @@ To get started, import the CSS styles in your main setup file (e.g., main.ts, in
 import '@scalar/components/style.css'
 ```
-Then, you can use the components in your Vue components. Here’s an example:
+Then, you can use the components in your Vue components. For example:
-```vue
-<script setup lang="ts">
-import { ScalarButton, ScalarTextField } from '@scalar/components'
+```html
+<script
+  setup
+  lang="ts">
+  import { ScalarIcon } from '@scalar/components'
 </script>
 <template>
-  <main class="col-1 items-center justify-center">
-    <div
-      class="col w-full max-w-md items-center gap-4 rounded-lg bg-b-3 p-8 shadow">
-      <h1 className="text-lg font-bold">Sign in to your account</h1>
-      <ScalarTextField
-        class="w-full"
-        label="Email Address" />
-      <ScalarButton fullWidth>Login</ScalarButton>
-    </div>
-  </main>
+  <ScalarIcon
+    icon="Logo"
+    size="lg" />
 </template>
 ```
-## CSS Layers
+## Customizing Components
+Most components can be customized using props. For example, the `ScalarIcon` component can be customized with the `size` prop to change the size of the icon.
+```html
+<ScalarIcon
+  icon="Logo"
+  size="lg" />
+```
+However, sometimes you need to override the default styles. Most components (soon to be all) use the `useBindCx` function to apply the Tailwind classes to the component. The function intelligently merges the component's classes with the provided classes allowing you to override preset classes.
+```html
+<!-- An icon you need to be really big -->
+<ScalarIcon
+  icon="Logo"
+  class="size-24" />
+```
+This will apply the `size-24` class to the icon and remove the `size-full` class that would normally be applied by default. For more information see the [useBindCx](https://github.com/scalar/scalar/blob/main/packages/components/src/hooks/useBindCx.ts) function.
+## Floating Components
+The component library includes a number of floating components including the `ScalarPopover`, `ScalarDropdown`, and `ScalarListbox` as well as a `ScalarFloating` primitive. All of the components use [Floating UI](https://floating-ui.com/docs/vue) under the hood and provide the same for interacting with the Floating UI API.
-This package exports its Tailwind styles using CSS cascade layers to avoid any conflicts with existing CSS. The layers are organized as follows:
+When using the floating components the default slot renders reference / target element (e.g. a button) and a named slot renders the floating element (e.g. a menu). For example:
+```html
+<ScalarPopover>
+  <!-- Reference element -->
+  <ScalarButton>Open</ScalarButton>
+  <template #popover>
+    <!-- Floating element -->
+  </template>
+</ScalarPopover>
+```
+Since you can directly target the reference element with Tailwind classes any classes applied to the base component will be applied to the floating element (using useBindCx under the hood). For example:
+```html
+<!-- Will apply the class `w-48` to the floating element (the popover) -->
+<ScalarPopover class="w-48">
+  <!-- Will apply the class `w-full` to the reference element (the button) -->
+  <ScalarButton class="w-full">Open</ScalarButton>
+  <template #popover> ... </template>
+</ScalarPopover>
+```
+## CSS Layers
-- `scalar-base`: reset and normalize
-- `scalar-components`: complex component styles
-- `scalar-utilities`: utility styles like `flex`
+The components package uses the same [CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) as the themes package to apply the theme styles. For more information see the [themes README](https://github.com/scalar/scalar/tree/main/packages/themes).
 ## Contributing

package/dist/components/ScalarButton/ScalarButton.stories.d.ts CHANGED Viewed

@@ -254,6 +254,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const FullWidth: Story;
 export declare const Ghost: Story;
+export declare const Danger: Story;
 export declare const Disabled: Story;
 export declare const Loading: Story;
 export declare const LoadingFullWidth: Story;

package/dist/components/ScalarButton/ScalarButton.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/ScalarButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,SAAS,EAAE,KAAqC,CAAA;AAE7D,eAAO,MAAM,KAAK,EAAE,KAAsC,CAAA;AAE1D,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAA;AAE3D,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAA"}
1	+ {"version":3,"file":"ScalarButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/ScalarButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,SAAS,EAAE,KAAqC,CAAA;AAE7D,eAAO,MAAM,KAAK,EAAE,KAAsC,CAAA;AAE1D,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAA;AAE3D,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAA"}

package/dist/components/ScalarButton/variants.js CHANGED Viewed

@@ -14,10 +14,10 @@ const e = {
   ],
   danger: [
     "scalar-button-danger",
-    "bg-red text-white active:brightness-90 hocus:brightness-90"
+    "bg-c-danger text-white active:brightness-90 hocus:brightness-90"
   ]
 }, s = t({
-  base: "scalar-button scalar-row cursor-pointer items-center justify-center rounded font-medium",
+  base: "scalar-button scalar-row cursor-pointer items-center justify-center rounded font-medium -outline-offset-1",
   variants: {
     disabled: {
       true: "bg-background-2 text-color-3 shadow-none"

package/dist/components/ScalarCombobox/ScalarCombobox.vue.js CHANGED Viewed

@@ -8,6 +8,7 @@ const h = /* @__PURE__ */ m({
     modelValue: {},
     placeholder: {},
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts CHANGED Viewed

@@ -18,6 +18,7 @@ declare function __VLS_template(): {
             $data: {};
             $props: {
                 readonly placement?: import("@floating-ui/vue").Placement | undefined;
+                readonly offset?: import("@floating-ui/vue").OffsetOptions | undefined;
                 readonly resize?: boolean | undefined;
                 readonly target?: (string | HTMLElement) | undefined;
                 readonly middleware?: import("@floating-ui/vue").Middleware[] | undefined;

package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,qBAAqB,CAAC;AAuB5B,iBAAS,cAAc;WA6FT,OAAO,IAA6B;;yBAVrB,GAAG;yBACF,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~gCAzHjC,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAkM6riB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAxCv0iB;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;4BApJrB,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmBrB,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAgLnB,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"}
1	+ {"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIlD,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,qBAAqB,CAAC;AAuB5B,iBAAS,cAAc;WA6FT,OAAO,IAA6B;;yBAVrB,GAAG;yBACF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAzHjC,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAkM6riB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAxCv0iB;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;4BApJrB,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmBrB,KApBgB,eAoBhB,KApBoC,uBAoBpC,KAnBqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAgLnB,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"}

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

@@ -12,6 +12,7 @@ const v = { class: "divide-1 divide-y" }, y = {
     placeholder: {},
     isDeletable: { type: Boolean },
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js CHANGED Viewed

@@ -7,6 +7,7 @@ const K = /* @__PURE__ */ m({
   __name: "ScalarComboboxPopover",
   props: {
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},

package/dist/components/ScalarDropdown/ScalarDropdown.stories.d.ts CHANGED Viewed

@@ -16,17 +16,17 @@ declare const meta: {
         $slots: Readonly<{
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
             items(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         }> & {
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
             items(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         };
     });
     tags: string[];
@@ -58,17 +58,17 @@ declare const meta: {
         $slots: Readonly<{
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
             items(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         }> & {
             default(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
             items(props: {
                 open: boolean;
-            }): import("vue").Slot;
+            }): any;
         };
     })>) => {
         components: {
@@ -88,17 +88,17 @@ declare const meta: {
                 $slots: Readonly<{
                     default(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                     items(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                 }> & {
                     default(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                     items(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                 };
             });
             ScalarDropdownItem: {
@@ -208,17 +208,17 @@ declare const meta: {
                 $slots: Readonly<{
                     default(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                     items(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                 }> & {
                     default(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                     items(props: {
                         open: boolean;
-                    }): import("vue").Slot;
+                    }): any;
                 };
             })>;
         };

package/dist/components/ScalarDropdown/ScalarDropdown.vue.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Slot } from 'vue';
 import { type ScalarFloatingOptions } from '../ScalarFloating';
 /**
  * Scalar dropdown component
@@ -20,23 +19,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Sc
     default(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
-    }): Slot;
+    }): any;
     /** The list of dropdown items */
     items(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
-    }): Slot;
+    }): any;
 }> & {
     /** The reference element for the element in the #floating slot */
     default(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
-    }): Slot;
+    }): any;
     /** The list of dropdown items */
     items(props: {
         /** Whether or not the dropdown is open */
         open: boolean;
-    }): Slot;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/ScalarDropdown/ScalarDropdown.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"~~AAwEA~~,OAAO,~~KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG/B,OAAO,~~EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAK9E;;;;;;;;;;;;;;GAcG;;IAOD,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,~~IAAI~~;~~IACR~~,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,~~IAAI~~;;~~IATR~~,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,~~IAAI~~;~~IACR~~,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,~~IAAI~~;;~~AAfV~~,wBA+HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdown.vue"],"names":[],"mappings":"AAsEA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAK9E;;;;;;;;;;;;;;GAcG;;IAOD,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG;IACP,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG;;IATP,kEAAkE;mBACnD;QACb,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG;IACP,iCAAiC;iBACpB;QACX,0CAA0C;QAC1C,IAAI,EAAE,OAAO,CAAA;KACd,GAAG,GAAG;;AAfT,wBA+HC;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/ScalarDropdown.vue.js CHANGED Viewed

@@ -1,56 +1,53 @@
-import { defineComponent as m, openBlock as i, createBlock as p, unref as t, withCtx as r, createVNode as o, mergeProps as d, renderSlot as l } from "vue";
-import { Menu as f, MenuItems as u, MenuButton as _ } from "@headlessui/vue";
-import { useBindCx as c } from "../../hooks/useBindCx.js";
-import g from "./ScalarDropdownMenu.vue.js";
-import w from "../ScalarFloating/ScalarFloating.vue.js";
-const B = {}, k = /* @__PURE__ */ m({
-  ...B,
+import { defineComponent as p, openBlock as i, createBlock as f, unref as e, withCtx as t, createVNode as r, mergeProps as n, renderSlot as s } from "vue";
+import { Menu as u, MenuItems as _, MenuButton as c } from "@headlessui/vue";
+import { useBindCx as d } from "../../hooks/useBindCx.js";
+import B from "./ScalarDropdownMenu.vue.js";
+import h from "../ScalarFloating/ScalarFloating.vue.js";
+const $ = {}, x = /* @__PURE__ */ p({
+  ...$,
   inheritAttrs: !1,
   __name: "ScalarDropdown",
   props: {
     placement: {},
+    offset: {},
     resize: { type: Boolean },
     target: {},
     middleware: {},
     teleport: { type: [Boolean, String] }
   },
-  setup(h) {
-    const { cx: n } = c();
-    return (e, y) => (i(), p(t(f), null, {
-      default: r(({ open: a }) => [
-        o(t(w), {
-          middleware: e.middleware,
-          placement: e.placement ?? "bottom-start",
-          resize: e.resize,
-          target: e.target,
-          teleport: e.teleport
-        }, {
-          floating: r(({ width: s }) => [
-            o(g, d({
-              is: t(u),
-              style: { width: s }
-            }, t(n)("max-h-[inherit]")), {
-              default: r(() => [
-                l(e.$slots, "items", { open: a })
+  setup(g) {
+    const { cx: l } = d();
+    return (o, y) => (i(), f(e(u), null, {
+      default: t(({ open: a }) => [
+        r(e(h), n(o.$props, {
+          placement: o.placement ?? "bottom-start"
+        }), {
+          floating: t(({ width: m }) => [
+            r(B, n({
+              is: e(_),
+              style: { width: m }
+            }, e(l)("max-h-[inherit]")), {
+              default: t(() => [
+                s(o.$slots, "items", { open: a })
               ]),
               _: 2
             }, 1040, ["is", "style"])
           ]),
-          default: r(() => [
-            o(t(_), { as: "template" }, {
-              default: r(() => [
-                l(e.$slots, "default", { open: a })
+          default: t(() => [
+            r(e(c), { as: "template" }, {
+              default: t(() => [
+                s(o.$slots, "default", { open: a })
               ]),
               _: 2
             }, 1024)
           ]),
           _: 2
-        }, 1032, ["middleware", "placement", "resize", "target", "teleport"])
+        }, 1040, ["placement"])
       ]),
       _: 3
     }));
   }
 });
 export {
-  k as default
+  x as default
 };

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts CHANGED Viewed

@@ -20,8 +20,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The component to render */
     is?: string | Component;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<{
+    /** The menu contents */
+    default(): any;
+    /** Overrides the backdrop for the dropdown */
+    backdrop?(): any;
+}> & {
+    /** The menu contents */
+    default(): any;
+    /** Overrides the backdrop for the dropdown */
+    backdrop?(): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/ScalarDropdown/ScalarDropdownMenu.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"~~AA8CA~~,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;;;;;;;;GAcG;;IAID,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;~~qBA6DI~~,GAAG;;~~AAjEhC~~,~~wBAgGC~~;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ScalarDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarDropdown/ScalarDropdownMenu.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;;;;;;;;GAcG;;IAID,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IADvB,8BAA8B;SACzB,MAAM,GAAG,SAAS;;IAKvB,wBAAwB;eACb,GAAG;IACd,8CAA8C;iBACjC,GAAG;;IAHhB,wBAAwB;eACb,GAAG;IACd,8CAA8C;iBACjC,GAAG;;AAZlB,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/ScalarDropdownMenu.vue.js CHANGED Viewed

@@ -1,28 +1,33 @@
-import { defineComponent as t, openBlock as l, createBlock as n, resolveDynamicComponent as r, withCtx as d, createElementVNode as e, renderSlot as a } from "vue";
-const i = { class: "custom-scroll min-h-0 flex-1" }, c = { class: "flex flex-col p-0.75" }, u = {}, p = /* @__PURE__ */ t({
-  ...u,
+import { defineComponent as n, openBlock as l, createBlock as a, resolveDynamicComponent as c, mergeProps as i, unref as o, withCtx as d, createElementVNode as t, renderSlot as r, createVNode as m } from "vue";
+import { useBindCx as f } from "../../hooks/useBindCx.js";
+import p from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const _ = { class: "custom-scroll min-h-0 flex-1" }, u = { class: "flex flex-col p-0.75" }, x = {}, B = /* @__PURE__ */ n({
+  ...x,
+  inheritAttrs: !1,
   __name: "ScalarDropdownMenu",
   props: {
     is: {}
   },
-  setup(_) {
-    return (o, s) => (l(), n(r(o.is ?? "div"), {
-      class: "relative flex w-56 rounded border",
+  setup(h) {
+    const { cx: s } = f();
+    return (e, v) => (l(), a(c(e.is ?? "div"), i({
       role: "menu",
       tabindex: "0"
-    }, {
+    }, o(s)("relative flex w-56")), {
       default: d(() => [
-        e("div", i, [
-          e("div", c, [
-            a(o.$slots, "default")
+        t("div", _, [
+          t("div", u, [
+            r(e.$slots, "default")
           ]),
-          s[0] || (s[0] = e("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-lg brightness-lifted" }, null, -1))
+          r(e.$slots, "backdrop", {}, () => [
+            m(o(p))
+          ])
         ])
       ]),
       _: 3
-    }));
+    }, 16));
   }
 });
 export {
-  p as default
+  B as default
 };

package/dist/components/ScalarFloating/ScalarFloating.stories.d.ts CHANGED Viewed

@@ -3,8 +3,4 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
-/**
- * You can override the offset (or other middleware) by passing a custom middleware array
- */
-export declare const CustomOffset: Story;
 //# sourceMappingURL=ScalarFloating.stories.d.ts.map

package/dist/components/ScalarFloating/ScalarFloating.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFloating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.stories.ts"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIrD,QAAA,MAAM,IAAI,EAAE,~~IA6B2B~~,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA~~;AAE7B;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAA~~"}
1	+ {"version":3,"file":"ScalarFloating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIrD,QAAA,MAAM,IAAI,EAAE,IA8B2B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA"}

package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ declare function __VLS_template(): {
         /** The reference element for the element in the #floating slot */
         default(): Slot;
         /** The floating element */
-        floating(props: {
+        floating?(props: {
             /** The width of the reference element if `resize` is true and placement is on the y axis */
             width?: string;
             /** The height of the reference element if `resize` is true and placement is on the x axis */
@@ -19,7 +19,7 @@ declare function __VLS_template(): {
         /** The reference element for the element in the #floating slot */
         default(): Slot;
         /** The floating element */
-        floating(props: {
+        floating?(props: {
             /** The width of the reference element if `resize` is true and placement is on the y axis */
             width?: string;
             /** The height of the reference element if `resize` is true and placement is on the x axis */

package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"~~AAyHA~~,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAY,KAAK,IAAI,EAAiB,MAAM,KAAK,CAAA;AAGxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;~~AA0F9C~~,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;~~QAtIhD~~,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;~~wBACX~~;~~YACd~~,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;QAVR,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;~~wBACX~~;~~YACd~~,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;;;;;;~~EAiIT~~;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAMnB,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"}
1	+ {"version":3,"file":"ScalarFloating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarFloating/ScalarFloating.vue"],"names":[],"mappings":"AAuHA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAY,KAAK,IAAI,EAAiB,MAAM,KAAK,CAAA;AAGxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAyF9C,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;QA7HhD,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;yBACV;YACf,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;QAVR,kEAAkE;mBACvD,IAAI;QACf,2BAA2B;yBACV;YACf,4FAA4F;YAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,6FAA6F;YAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,gDAAgD;YAChD,IAAI,CAAC,EAAE,cAAc,CAAA;SACtB,GAAG,IAAI;;;;;;;EAwHT;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAMnB,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"}