ropav 0.3.1 → 0.5.0

package/dist/components/range-calendar/index.d.ts

@@ -13,7 +13,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
     slots: {
         default?: (props: import("./range-calendar.types.js").RangeCalendarRootSlotProps) => unknown;
     };
-    emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("../../index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
+    emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("./index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
         class?: string;
@@ -22,15 +22,15 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         ariaLabelledby?: string;
         ariaDescribedby?: string;
         ariaDetails?: string;
-        value?: import("../../index.js").DateRange | null;
-        defaultValue?: import("../../index.js").DateRange | null;
+        value?: import("./index.js").DateRange | null;
+        defaultValue?: import("./index.js").DateRange | null;
         focusedValue?: import("@internationalized/date").DateValue | null;
         defaultFocusedValue?: import("@internationalized/date").DateValue | null;
         minValue?: import("@internationalized/date").DateValue | null;
         maxValue?: import("@internationalized/date").DateValue | null;
         isDateUnavailable?: (date: import("@internationalized/date").DateValue, anchorDate: import("@internationalized/date").CalendarDate | null) => boolean;
         allowsNonContiguousRanges?: boolean;
-        commitBehavior?: import("../../index.js").RangeCalendarCommitBehavior;
+        commitBehavior?: import("./index.js").RangeCalendarCommitBehavior;
         isDisabled?: boolean;
         isReadOnly?: boolean;
         isInvalid?: boolean;
@@ -43,7 +43,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         isYearPickerOpen?: boolean;
         defaultYearPickerOpen?: boolean;
         "onUpdate:focusedValue"?: ((value: import("@internationalized/date").CalendarDate) => any) | undefined;
-        "onUpdate:value"?: ((value: import("../../index.js").DateRange | null) => any) | undefined;
+        "onUpdate:value"?: ((value: import("./index.js").DateRange | null) => any) | undefined;
         "onUpdate:yearPickerOpen"?: ((isOpen: boolean) => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -53,7 +53,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
     slots: {
         default?: (props: import("./range-calendar.types.js").RangeCalendarRootSlotProps) => unknown;
     };
-    emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("../../index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
+    emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("./index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 }) & {
@@ -215,7 +215,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         props: import('vue').PublicProps & {
             class?: string;
             offset?: import("@internationalized/date").DateDuration;
-            format?: import("../../index.js").CalendarHeadingFormatOptions;
+            format?: import("./index.js").CalendarHeadingFormatOptions;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
@@ -253,7 +253,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         slots: {
             default?: (props: import("./range-calendar.types.js").RangeCalendarRootSlotProps) => unknown;
         };
-        emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("../../index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
+        emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("./index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             class?: string;
@@ -262,15 +262,15 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
             ariaLabelledby?: string;
             ariaDescribedby?: string;
             ariaDetails?: string;
-            value?: import("../../index.js").DateRange | null;
-            defaultValue?: import("../../index.js").DateRange | null;
+            value?: import("./index.js").DateRange | null;
+            defaultValue?: import("./index.js").DateRange | null;
             focusedValue?: import("@internationalized/date").DateValue | null;
             defaultFocusedValue?: import("@internationalized/date").DateValue | null;
             minValue?: import("@internationalized/date").DateValue | null;
             maxValue?: import("@internationalized/date").DateValue | null;
             isDateUnavailable?: (date: import("@internationalized/date").DateValue, anchorDate: import("@internationalized/date").CalendarDate | null) => boolean;
             allowsNonContiguousRanges?: boolean;
-            commitBehavior?: import("../../index.js").RangeCalendarCommitBehavior;
+            commitBehavior?: import("./index.js").RangeCalendarCommitBehavior;
             isDisabled?: boolean;
             isReadOnly?: boolean;
             isInvalid?: boolean;
@@ -283,7 +283,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
             isYearPickerOpen?: boolean;
             defaultYearPickerOpen?: boolean;
             "onUpdate:focusedValue"?: ((value: import("@internationalized/date").CalendarDate) => any) | undefined;
-            "onUpdate:value"?: ((value: import("../../index.js").DateRange | null) => any) | undefined;
+            "onUpdate:value"?: ((value: import("./index.js").DateRange | null) => any) | undefined;
             "onUpdate:yearPickerOpen"?: ((isOpen: boolean) => any) | undefined;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
@@ -293,7 +293,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         slots: {
             default?: (props: import("./range-calendar.types.js").RangeCalendarRootSlotProps) => unknown;
         };
-        emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("../../index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
+        emit: ((evt: "update:focusedValue", value: import("@internationalized/date").CalendarDate) => void) & ((evt: "update:value", value: import("./index.js").DateRange | null) => void) & ((evt: "update:yearPickerOpen", isOpen: boolean) => void);
     }>) => import('vue').VNode & {
         __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
     };
@@ -330,7 +330,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         props: import('vue').PublicProps & {
             class?: string;
             visibleYears?: number;
-            format?: import("../../index.js").CalendarYearPickerFormatOptions;
+            format?: import("../index.js").CalendarYearPickerFormatOptions;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
@@ -395,7 +395,7 @@ export declare const RangeCalendar: ((__VLS_props: NonNullable<Awaited<typeof __
         props: import('vue').PublicProps & {
             class?: string;
             offset?: import("@internationalized/date").DateDuration;
-            format?: import("../../index.js").CalendarHeadingFormatOptions;
+            format?: import("./index.js").CalendarHeadingFormatOptions;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
@@ -434,5 +434,8 @@ export { RangeCalendarCell, RangeCalendarCellIndicator, RangeCalendarGrid, Range
 export type { RangeCalendarCellIndicatorProps, RangeCalendarCellProps, RangeCalendarCellSlotProps, RangeCalendarGridBodyProps, RangeCalendarGridBodySlotProps, RangeCalendarGridHeaderProps, RangeCalendarGridHeaderSlotProps, RangeCalendarGridProps, RangeCalendarHeaderCellProps, RangeCalendarHeaderProps, RangeCalendarHeadingProps, RangeCalendarNavButtonProps, RangeCalendarRootProps, RangeCalendarRootProps as RangeCalendarProps, RangeCalendarRootSlotProps, } from "./range-calendar.types.js";
 export { provideRangeCalendarContext, provideRangeCalendarOwnerContext, useRangeCalendarContext, useRangeCalendarOwnerContext, } from "./range-calendar.context.js";
 export type { RangeCalendarContext, RangeCalendarOwnedProps, RangeCalendarOwnerContext, } from "./range-calendar.context.js";
+export type { AnyCalendarState, DateRange } from "../../composables/use-calendar.js";
+export type { CalendarHeadingFormatOptions } from "../../composables/use-calendar-heading.js";
+export type { RangeCalendarCommitBehavior } from "../../composables/use-range-calendar.js";
 export { rangeCalendarVariants } from "@ropav/styles";
 export type { RangeCalendarVariants } from "@ropav/styles";

package/dist/components/range-calendar/range-calendar-header.js

@@ -1,7 +1,7 @@
 import { useRangeCalendarContext } from "./range-calendar.context.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
 //#region src/components/range-calendar/range-calendar-header.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<header data-slot=range-calendar-header>", 1);
+var t0 = template("<div data-slot=range-calendar-header>", 1);
 var range_calendar_header_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "range-calendar-header",
 	props: { class: {} },

package/dist/components/router-provider/index.d.ts

@@ -0,0 +1,5 @@
+import RouterProviderRoot from "./router-provider.js";
+export { RouterProviderRoot, RouterProviderRoot as RouterProvider };
+export type { RouterProviderRootProps, RouterProviderRootProps as RouterProviderProps, } from "./router-provider.types.js";
+export { useRouterContext } from "./router-provider.context.js";
+export type { RouterContext } from "./router-provider.context.js";

package/dist/components/router-provider/index.js

@@ -0,0 +1,3 @@
+import { useRouterContext } from "./router-provider.context.js";
+import router_provider_default from "./router-provider.js";
+export { router_provider_default as RouterProvider, router_provider_default as RouterProviderRoot, useRouterContext };

package/dist/components/router-provider/router-provider.context.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The application's router, reduced to the three questions a link has to ask it.
+ *
+ * Ported from React Aria's `packages/react-aria/src/utils/RouterProvider.tsx`
+ * (react-aria 3.51.0), minus its `isNative` branch — this package has no native target.
+ *
+ * `resolveHref` is React's `useHref` renamed: in Vue a `use*` name promises a composable that
+ * may only be called during `setup()`, and this one is a plain function called from a `computed`.
+ */
+export interface RouterContext {
+    /**
+     * Hands a same-origin, unmodified activation to the application's router.
+     *
+     * Receives the href as the link declared it, not as the anchor renders it — `resolveHref` is
+     * for the DOM, and a router wants back the path it was given.
+     */
+    navigate: (href: string, options?: unknown) => void;
+    /**
+     * Whether this href addresses the route showing now.
+     *
+     * The matching rule lives entirely here, in the application's own predicate: exact against
+     * prefix, trailing slashes and query handling all differ per route and per link, and a library
+     * that guessed would be wrong for half of them.
+     */
+    isCurrent: (href: string) => boolean;
+    /**
+     * Turns an app-relative href into the URL the anchor should carry, for a router mounted under
+     * a base path or running in hash mode. The rendered href is what a middle-click opens and what
+     * "copy link address" yields, so it has to be the real one.
+     */
+    resolveHref: (href: string) => string;
+}
+/**
+ * The router an ancestor has supplied, or `null` when nobody has and the browser's own navigation
+ * is what should happen.
+ *
+ * Loose, because most of the tree runs without a router — a documentation page, a test, an app
+ * that never routes — and following the href is the right answer there, not an error.
+ */
+export declare const useRouterContext: () => RouterContext | null, provideRouterContext: (value: RouterContext | null) => RouterContext | null;

package/dist/components/router-provider/router-provider.context.js

@@ -0,0 +1,16 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/router-provider/router-provider.context.ts
+/**
+* The router an ancestor has supplied, or `null` when nobody has and the browser's own navigation
+* is what should happen.
+*
+* Loose, because most of the tree runs without a router — a documentation page, a test, an app
+* that never routes — and following the href is the right answer there, not an error.
+*/
+var [useRouterContext, provideRouterContext] = createContext({
+	defaultValue: null,
+	name: "RouterContext",
+	strict: false
+});
+//#endregion
+export { provideRouterContext, useRouterContext };

package/dist/components/router-provider/router-provider.d.ts

@@ -0,0 +1,21 @@
+import type { RouterProviderRootProps } from "./router-provider.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<RouterProviderRootProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/router-provider/router-provider.js

@@ -0,0 +1,22 @@
+import { provideRouterContext } from "./router-provider.context.js";
+import { createSlot, defineVaporComponent } from "vue";
+//#region src/components/router-provider/router-provider.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var router_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "router-provider",
+	props: {
+		navigate: { type: Function },
+		isCurrent: { type: Function },
+		resolveHref: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		provideRouterContext({
+			isCurrent: (href) => props.isCurrent?.(href) ?? false,
+			navigate: (href, options) => props.navigate(href, options),
+			resolveHref: (href) => props.resolveHref?.(href) ?? href
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { router_provider_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/router-provider/router-provider.types.d.ts

@@ -0,0 +1,23 @@
+export interface RouterProviderRootProps {
+    /**
+     * Performs a client-side navigation to `href`. In a vue-router application this is
+     * `(href, options) => router.push({path: href, ...options})`.
+     *
+     * Receives the href as the link declared it, so a router gets back the path it was given
+     * rather than the one `resolveHref` produced for the DOM.
+     */
+    navigate: (href: string, options?: unknown) => void;
+    /**
+     * Whether an href addresses the route showing now, for links that ask with `aria-current="auto"`.
+     *
+     * The matching rule is yours: `(href) => route.path === href` for an exact match,
+     * `(href) => route.path.startsWith(href)` for a section. Omitted, no link resolves as current.
+     */
+    isCurrent?: (href: string) => boolean;
+    /**
+     * Rewrites an app-relative href into the URL the anchor should carry, for a router mounted
+     * under a base path or running in hash mode — `(href) => router.resolve(href).href`.
+     * Omitted, the href renders as written.
+     */
+    resolveHref?: (href: string) => string;
+}

package/dist/components/scroll-shadow/scroll-shadow-root.js

@@ -1,5 +1,6 @@
+import { focusableIn } from "../../utils/focus.js";
 import { useScrollShadow } from "./use-scroll-shadow.js";
-import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
 import { scrollShadowVariants } from "@ropav/styles";
 //#region src/components/scroll-shadow/scroll-shadow-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=scroll-shadow>", 1);
@@ -32,6 +33,10 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const element = shallowRef(null);
+		const needsTabStop = shallowRef(false);
+		watch(element, (host) => {
+			needsTabStop.value = Boolean(host) && focusableIn(host).length === 0;
+		}, { flush: "post" });
 		const styles = computed(() => scrollShadowVariants({
 			hideScrollBar: props.hideScrollBar,
 			orientation: props.orientation,
@@ -78,6 +83,7 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			setAttr(n1, "data-orientation", _props.orientation);
 			setAttr(n1, "data-scroll-shadow-size", _props.size);
 			setStyle(n1, style.value);
+			setProp(n1, "tabindex", needsTabStop.value ? 0 : void 0);
 		});
 		setInsertionState(n1);
 		createSlot();

package/dist/components/scroll-shadow/use-scroll-shadow.js

@@ -77,10 +77,34 @@ var useScrollShadow = (options) => {
 		checkOverflow();
 		current.addEventListener("scroll", checkOverflow, { passive: true });
 		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(checkOverflow);
-		observer?.observe(current);
+		/**
+		* The container **and** everything directly inside it.
+		*
+		* Watching the container alone sees only half of what makes a region scrollable: the other
+		* half is the content growing while the region keeps its size, which is what an accordion or
+		* a disclosure opening inside one does. Nothing scrolls and nothing resizes, so a check that
+		* waits for either turns up only once the reader scrolls — by which point the shadow has
+		* stopped being the hint it exists to be.
+		*
+		* Direct children are enough. In normal flow nothing can grow the scrollable area without
+		* growing one of them, so watching deeper would cost an entry per row and report the same
+		* thing.
+		*/
+		const observe = () => {
+			observer?.disconnect();
+			observer?.observe(current);
+			for (const child of Array.from(current.children)) observer?.observe(child);
+		};
+		observe();
+		const mutations = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(() => {
+			observe();
+			checkOverflow();
+		});
+		mutations?.observe(current, { childList: true });
 		onCleanup(() => {
 			current.removeEventListener("scroll", checkOverflow);
 			observer?.disconnect();
+			mutations?.disconnect();
 			cancelPendingFrame();
 			previous = null;
 		});

package/dist/components/search-field/index.d.ts

@@ -13,6 +13,7 @@ export declare const SearchField: ((__VLS_props: NonNullable<Awaited<typeof __VL
     props: import('vue').PublicProps & {
         class?: string;
         variant?: import("@ropav/styles").SearchFieldVariants["variant"];
+        size?: import("@ropav/styles").SearchFieldVariants["size"];
         fullWidth?: boolean;
         value?: string;
         defaultValue?: string;
@@ -129,6 +130,7 @@ export declare const SearchField: ((__VLS_props: NonNullable<Awaited<typeof __VL
         props: import('vue').PublicProps & {
             class?: string;
             variant?: import("@ropav/styles").SearchFieldVariants["variant"];
+            size?: import("@ropav/styles").SearchFieldVariants["size"];
             fullWidth?: boolean;
             value?: string;
             defaultValue?: string;

package/dist/components/search-field/search-field-root.js

@@ -5,7 +5,7 @@ import { useAutocompleteInputContext } from "../../composables/use-autocomplete.
 import { provideFieldErrorContext } from "../field-error/field-error.context.js";
 import { provideTextFieldControlContext } from "../../composables/use-text-field.js";
 import { provideSearchFieldContext } from "./search-field.context.js";
-import { useSearchField } from "../../composables/use-search-field.js";
+import { useSearchField } from "./use-search-field.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref, watch } from "vue";
 import { searchFieldVariants } from "@ropav/styles";
 //#region src/components/search-field/search-field-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -15,6 +15,7 @@ var search_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 	props: {
 		class: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -128,6 +129,7 @@ var search_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		});
 		const slots = computed(() => searchFieldVariants({
 			fullWidth: props.fullWidth,
+			size: props.size,
 			variant: props.variant
 		}));
 		provideFieldIdsContext(field.fieldIds);

package/dist/components/search-field/search-field.types.d.ts

@@ -4,6 +4,8 @@ export interface SearchFieldRootProps {
     class?: string;
     /** Visual variant. @default "primary" */
     variant?: SearchFieldVariants["variant"];
+    /** How tall the field stands, matching a button of the same size. @default "md" */
+    size?: SearchFieldVariants["size"];
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** Text in the field. Makes it controlled. */

package/dist/{composables → components/search-field}/use-search-field.d.ts

@@ -1,5 +1,5 @@
-import type { PressResponder } from "./press-responder.js";
-import type { UseTextFieldOptions, UseTextFieldReturn } from "./use-text-field.js";
+import type { PressResponder } from "../../composables/press-responder.js";
+import type { UseTextFieldOptions, UseTextFieldReturn } from "../../composables/use-text-field.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface UseSearchFieldOptions extends Omit<UseTextFieldOptions, "type"> {
     /** Kind of control the browser should offer. @default "search" */

package/dist/{composables → components/search-field}/use-search-field.js

@@ -1,7 +1,7 @@
-import { usePress } from "./use-press.js";
-import { useTextField } from "./use-text-field.js";
+import { usePress } from "../../composables/use-press.js";
+import { useTextField } from "../../composables/use-text-field.js";
 import { computed, toValue } from "vue";
-//#region src/composables/use-search-field.ts
+//#region src/components/search-field/use-search-field.ts
 /**
 * Behaviour and accessibility for a search field, ported from React Aria's
 * `packages/react-aria/src/searchfield/useSearchField.ts` (react-aria 3.51.0).

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,134 @@
+import SegmentedControlIndicator from "./segmented-control-indicator.js";
+import SegmentedControlItem from "./segmented-control-item.js";
+import SegmentedControlRoot from "./segmented-control-root.js";
+import SegmentedControlSeparator from "./segmented-control-separator.js";
+export declare const SegmentedControl: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./segmented-control.types.js").SegmentedControlRootSlotProps) => unknown;
+    };
+    emit: ((evt: "selectionChange", key: import("../../index.js").CollectionKey) => void) & ((evt: "update:selectedKey", key: import("../../index.js").CollectionKey) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        size?: import("@ropav/styles").SegmentedControlVariants["size"];
+        fullWidth?: boolean;
+        selectedKey?: import("../../index.js").CollectionKey;
+        defaultSelectedKey?: import("../../index.js").CollectionKey;
+        disabledKeys?: import("../../index.js").CollectionKey[];
+        isDisabled?: boolean;
+        ariaLabel?: string;
+        ariaLabelledby?: string;
+        ariaDescribedby?: string;
+        onSelectionChange?: (((key: import("../../index.js").CollectionKey) => void) & ((key: import("../../index.js").CollectionKey) => any)) | undefined;
+        "onUpdate:selectedKey"?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./segmented-control.types.js").SegmentedControlRootSlotProps) => unknown;
+    };
+    emit: ((evt: "selectionChange", key: import("../../index.js").CollectionKey) => void) & ((evt: "update:selectedKey", key: import("../../index.js").CollectionKey) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Indicator: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {};
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {};
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Item: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./segmented-control.types.js").SegmentedControlItemSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            id: import("../../index.js").CollectionKey;
+            isDisabled?: boolean;
+            textValue?: string;
+            ariaLabel?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./segmented-control.types.js").SegmentedControlItemSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./segmented-control.types.js").SegmentedControlRootSlotProps) => unknown;
+        };
+        emit: ((evt: "selectionChange", key: import("../../index.js").CollectionKey) => void) & ((evt: "update:selectedKey", key: import("../../index.js").CollectionKey) => void);
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            size?: import("@ropav/styles").SegmentedControlVariants["size"];
+            fullWidth?: boolean;
+            selectedKey?: import("../../index.js").CollectionKey;
+            defaultSelectedKey?: import("../../index.js").CollectionKey;
+            disabledKeys?: import("../../index.js").CollectionKey[];
+            isDisabled?: boolean;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            ariaDescribedby?: string;
+            onSelectionChange?: (((key: import("../../index.js").CollectionKey) => void) & ((key: import("../../index.js").CollectionKey) => any)) | undefined;
+            "onUpdate:selectedKey"?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./segmented-control.types.js").SegmentedControlRootSlotProps) => unknown;
+        };
+        emit: ((evt: "selectionChange", key: import("../../index.js").CollectionKey) => void) & ((evt: "update:selectedKey", key: import("../../index.js").CollectionKey) => void);
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Separator: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {};
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {};
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { SegmentedControlRoot, SegmentedControlItem, SegmentedControlIndicator, SegmentedControlSeparator, };
+export type { SegmentedControlRootProps, SegmentedControlRootProps as SegmentedControlProps, SegmentedControlRootSlotProps, SegmentedControlItemProps, SegmentedControlItemSlotProps, SegmentedControlIndicatorProps, SegmentedControlSeparatorProps, SegmentedControlOrientation, } from "./segmented-control.types.js";
+export { useSegmentedControlContext, useSegmentedControlItemContext, } from "./segmented-control.context.js";
+export type { SegmentedControlContext, SegmentedControlItemContext, } from "./segmented-control.context.js";
+export { segmentedControlVariants } from "@ropav/styles";
+export type { SegmentedControlVariants } from "@ropav/styles";

package/dist/components/segmented-control/index.js

@@ -0,0 +1,15 @@
+import { useSegmentedControlContext, useSegmentedControlItemContext } from "./segmented-control.context.js";
+import segmented_control_indicator_default from "./segmented-control-indicator.js";
+import segmented_control_item_default from "./segmented-control-item.js";
+import segmented_control_root_default from "./segmented-control-root.js";
+import segmented_control_separator_default from "./segmented-control-separator.js";
+import { segmentedControlVariants } from "@ropav/styles";
+//#region src/components/segmented-control/index.ts
+var SegmentedControl = Object.assign(segmented_control_root_default, {
+	Indicator: segmented_control_indicator_default,
+	Item: segmented_control_item_default,
+	Root: segmented_control_root_default,
+	Separator: segmented_control_separator_default
+});
+//#endregion
+export { SegmentedControl, segmented_control_indicator_default as SegmentedControlIndicator, segmented_control_item_default as SegmentedControlItem, segmented_control_root_default as SegmentedControlRoot, segmented_control_separator_default as SegmentedControlSeparator, segmentedControlVariants, useSegmentedControlContext, useSegmentedControlItemContext };

package/dist/components/segmented-control/segmented-control-indicator.d.ts

@@ -0,0 +1,19 @@
+import type { SegmentedControlIndicatorProps } from "./segmented-control.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SegmentedControlIndicatorProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/segmented-control/segmented-control-indicator.js

@@ -0,0 +1,36 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useSharedElement, useSharedElementScope } from "../../composables/use-shared-element.js";
+import { useSegmentedControlContext, useSegmentedControlItemContext } from "./segmented-control.context.js";
+import { createIf, defineVaporComponent, renderEffect, setAttr, setClass, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+//#region src/components/segmented-control/segmented-control-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=segmented-control-indicator>", 1);
+var segmented_control_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "segmented-control-indicator",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useSegmentedControlContext();
+		const { isSelected } = useSegmentedControlItemContext();
+		const element = shallowRef(null);
+		const { isEntering, isExiting, isPresent } = useSharedElement({
+			elementRef: element,
+			isVisible: () => isSelected.value,
+			name: "SelectionIndicator",
+			scope: useSharedElementScope()
+		});
+		return createIf(() => unref(isPresent), () => {
+			const n2 = t0();
+			setStaticTemplateRef(n2, element, null, "element");
+			renderEffect(() => {
+				const _dataAttr = unref(dataAttr);
+				setClass(n2, unref(composeSlotClassName)(unref(slots).indicator, props.class));
+				setAttr(n2, "data-entering", _dataAttr(unref(isEntering)));
+				setAttr(n2, "data-exiting", _dataAttr(unref(isExiting)));
+			});
+			return n2;
+		});
+	}
+});
+//#endregion
+export { segmented_control_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default as default };