@jfrader/ui 0.1.1 → 0.2.0

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

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
 export interface SelectProps {
     value?: string;
@@ -14,25 +14,29 @@ export interface SelectProps {
     name?: string;
     children?: ReactNode;
 }
-export interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SelectTriggerProps extends ComponentPropsWithRef<'button'> {
     id?: string;
 }
-export interface SelectValueProps extends HTMLAttributes<HTMLSpanElement> {
+export interface SelectValueProps extends ComponentPropsWithRef<'span'> {
     /** Shown when no option matches the selected value. */
     placeholder?: ReactNode;
 }
-export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectContentProps extends ComponentPropsWithRef<'div'> {
 }
-export interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectItemProps extends ComponentPropsWithRef<'div'> {
     /** Unique within the select. */
     value: string;
     disabled?: boolean;
 }
 declare function SelectRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, placement, disabled, name, children, }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ ref, id: idProp, disabled: disabledProp, onKeyDown, ...rest }: SelectTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ref, placeholder, ...rest }: SelectValueProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectContent({ ref, style, onMouseDown, children, ...rest }: SelectContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectItem({ ref, value, disabled, onClick, children, ...rest }: SelectItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Select: typeof SelectRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Value: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Content: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
 };
 export {};

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

@@ -1,11 +1,14 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 type Length = number | string;
-export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
     width?: Length;
     height?: Length;
     /** Round placeholder; height follows width unless `height` is given. */
     circle?: boolean;
     radius?: Length;
 }
-export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Skeleton({ ref, width, height, circle, radius, style, ...rest }: SkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var displayName: string;
+}
 export {};

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

@@ -1,8 +1,11 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 export type SpinnerSize = 'sm' | 'md' | 'lg';
-export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+export interface SpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
     size?: SpinnerSize;
     /** Accessible text announced for the status region. */
     label?: string;
 }
-export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Spinner({ ref, size, label, ...rest }: SpinnerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}

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

@@ -4,4 +4,7 @@ export type StackAlign = Exclude<FlexAlign, 'baseline'>;
 export interface StackProps extends Omit<FlexProps, 'direction' | 'inline' | 'align'> {
     align?: StackAlign;
 }
-export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Stack({ ref, gap, align, justify, wrap, ...rest }: StackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}

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

@@ -1,11 +1,11 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export type SwitchSize = 'sm' | 'md';
 export interface SwitchPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'> {
     label?: ReactNode;
     description?: ReactNode;
     size?: SwitchSize;
@@ -17,4 +17,7 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
         description?: SwitchPartProps;
     };
 }
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Switch({ ref, label, description, size, onChange, onCheckedChange, slotProps, className, dir, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Switch {
+    var displayName: string;
+}

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

@@ -1,22 +1,27 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type TabsActivation = 'auto' | 'manual';
-export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: TabsOrientation;
     activation?: TabsActivation;
 }
-export type TabsListProps = HTMLAttributes<HTMLDivElement>;
-export interface TabsTabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type TabsListProps = ComponentPropsWithRef<'div'>;
+export interface TabsTabProps extends ComponentPropsWithRef<'button'> {
     value: string;
 }
-export interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabsPanelProps extends ComponentPropsWithRef<'div'> {
     value: string;
 }
-export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
-    List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Tab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Panel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare function TabsRoot({ ref, value: valueProp, defaultValue, onValueChange, orientation, activation, ...rest }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsList({ ref, onKeyDown, ...rest }: TabsListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsTab({ ref, value, disabled, onClick, onFocus, ...rest }: TabsTabProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsPanel({ ref, value, tabIndex, 'aria-labelledby': ariaLabelledByProp, ...rest }: TabsPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Panel: typeof TabsPanel;
 };
+export {};

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

@@ -1,9 +1,9 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type FieldPartProps, type FieldSlotProps } from '../field/field-anatomy';
 export type TextFieldSize = 'sm' | 'md' | 'lg';
 export interface TextFieldPartProps extends FieldPartProps {
 }
-export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -11,4 +11,7 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextFieldPartProps>;
 }
-export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function TextField({ ref, label, description, error, size, onChange, onValueChange, slotProps, className, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace TextField {
+    var displayName: string;
+}

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

@@ -1,10 +1,10 @@
-import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type FieldPartProps, type FieldSlotProps } from '../field/field-anatomy';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export type TextareaResize = 'none' | 'vertical';
 export interface TextareaPartProps extends FieldPartProps {
 }
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -14,4 +14,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextareaPartProps>;
 }
-export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare function Textarea({ ref, label, description, error, size, resize, autoResize, rows, onChange, onValueChange, slotProps, className, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Textarea {
+    var displayName: string;
+}

package/dist/types/components/theme-root/theme-root.d.ts

@@ -1,7 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type ThemeName = 'dark' | 'light';
-export interface ThemeRootProps extends HTMLAttributes<HTMLDivElement> {
+export interface ThemeRootProps extends ComponentPropsWithRef<'div'> {
     theme?: ThemeName;
     children?: ReactNode;
 }
-export declare const ThemeRoot: import("react").ForwardRefExoticComponent<ThemeRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ThemeRoot({ ref, theme, ...rest }: ThemeRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ThemeRoot {
+    var displayName: string;
+}

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type MouseEvent, type ReactNode } from 'react';
 export type ToastTone = 'neutral' | 'success' | 'danger';
 export interface ToastAction {
     label: string;
@@ -22,7 +22,7 @@ export interface ToastProviderProps {
     /** Accessible label for each toast's close button. */
     dismissLabel?: string;
 }
-export interface ToastViewportProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastViewportProps extends ComponentPropsWithRef<'div'> {
 }
 export interface ToastApi {
     toast: (options: ToastOptions) => string;
@@ -30,8 +30,10 @@ export interface ToastApi {
 }
 export declare function useToast(): ToastApi;
 declare function ToastProvider({ children, max, duration, dismissLabel, }: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Toast: typeof ToastProvider & {
+declare function ToastViewport({ ref, ...props }: ToastViewportProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToastRoot(props: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Toast: typeof ToastRoot & {
     Provider: typeof ToastProvider;
-    Viewport: import("react").ForwardRefExoticComponent<ToastViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: typeof ToastViewport;
 };
 export {};

package/dist/types/components/toggle-group/toggle-group.d.ts

@@ -1,7 +1,7 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 export type ToggleGroupType = 'single' | 'multiple';
 export type ToggleGroupOrientation = 'horizontal' | 'vertical';
-interface ToggleGroupBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+interface ToggleGroupBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
     orientation?: ToggleGroupOrientation;
     disabled?: boolean;
     allowEmpty?: boolean;
@@ -20,10 +20,12 @@ export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
-export interface ToggleGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+export interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
     value: string;
 }
-export declare const ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare function ToggleGroupRoot({ ref, type, value: valueProp, defaultValue, onValueChange, orientation, disabled, allowEmpty, label, 'aria-label': ariaLabelProp, onKeyDown, ...rest }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ ref, value, disabled: disabledProp, onClick, onFocus, ...rest }: ToggleGroupItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
 };
 export {};

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

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
 export interface TooltipProps {
     open?: boolean;
@@ -11,13 +11,15 @@ export interface TooltipProps {
     closeDelay?: number;
     children?: ReactNode;
 }
-export interface TooltipTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TooltipTriggerProps extends ComponentPropsWithRef<'button'> {
 }
-export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface TooltipContentProps extends ComponentPropsWithRef<'div'> {
 }
 declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, placement, openDelay, closeDelay, children, }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ref, 'aria-describedby': ariaDescribedByProp, ...rest }: TooltipTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ ref, style, ...rest }: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Tooltip: typeof TooltipRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
 };
 export {};

package/dist/types/overlay/use-native-dialog.d.ts

@@ -1,4 +1,4 @@
-import { type ForwardedRef, type MouseEvent, type MouseEventHandler, type MutableRefObject, type ReactEventHandler, type SyntheticEvent } from 'react';
+import { type MouseEvent, type MouseEventHandler, type MutableRefObject, type ReactEventHandler, type Ref, type SyntheticEvent } from 'react';
 /** What Content needs from its Root; both Roots expose it through their context. */
 export interface NativeDialogController {
     open: boolean;
@@ -31,7 +31,7 @@ export declare function omitNativeOpen<P extends object>(props: P & {
  * Content half: syncs the native dialog to the logical `open`, and returns the `ref` and
  * event handlers to spread on the <dialog> (after the consumer's props).
  */
-export declare function useNativeDialog({ open, setOpen, requestClose, repairToken, setDialogElement }: NativeDialogController, { onCancel, onClick, onClose }: NativeDialogHandlers, forwardedRef: ForwardedRef<HTMLDialogElement>, contentRef?: MutableRefObject<HTMLDialogElement | null>): {
+export declare function useNativeDialog({ open, setOpen, requestClose, repairToken, setDialogElement }: NativeDialogController, { onCancel, onClick, onClose }: NativeDialogHandlers, forwardedRef: Ref<HTMLDialogElement> | undefined, contentRef?: MutableRefObject<HTMLDialogElement | null>): {
     ref: (element: HTMLDialogElement | null) => void;
     onCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
     onClick: (event: MouseEvent<HTMLDialogElement>) => void;

package/dist/{use-controlled-state-DQXkiTQI.js → use-controlled-state-CVXDa-qM.js}

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 //#region src/utils/use-latest-callback.ts
 function i(r) {

package/dist/{use-native-dialog-BCp1chwO.js → use-native-dialog-DWpIUVO1.js}

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback as e, useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
 //#region src/overlay/use-scroll-lock.ts
 var a = /* @__PURE__ */ new Map();

package/dist/{use-overlay-floating-CsZd3qxa.js → use-overlay-floating-efeqppiw.js}

@@ -1,3 +1,4 @@
+'use client';
 import { autoUpdate as e, flip as t, offset as n, shift as r, useFloating as i } from "@floating-ui/react";
 //#region src/overlay/use-overlay-floating.ts
 var a = 8, o = 8;

package/dist/{visually-hidden-BXVyhj0y.js → visually-hidden-DCWhf0Cb.js}

@@ -1,4 +1,5 @@
-import { t as e } from "./css-CW_HG55W.js";
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
 //#region src/styling/visually-hidden.ts
 var t = e({
 	position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -177,11 +177,11 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
-    "@jfrader/tokens": "0.1.1"
+    "@jfrader/tokens": "0.2.0"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",

package/dist/accordion-Dl-kvgPQ.js

@@ -1,168 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { t } from "./disclosure-caret-BC6P8AsM.js";
-import { t as n } from "./focus-ring-qOS3rPlM.js";
-import { n as r } from "./media-8K3xDAxM.js";
-import { n as i } from "./roving-focus-DeEZ55-T.js";
-import { t as a } from "./use-controlled-state-DQXkiTQI.js";
-import { createContext as o, forwardRef as s, useContext as c, useId as l, useMemo as u } from "react";
-import { vars as d } from "@jfrader/tokens/vars";
-import { jsx as f } from "@emotion/react/jsx-runtime";
-//#region src/components/accordion/accordion.tsx
-var p = o(null), m = o(null);
-function h(e) {
-	let t = c(p);
-	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
-	return t;
-}
-function g(e) {
-	let t = c(m);
-	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
-	return t;
-}
-var _ = "", v = {
-	itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
-	ownerSelector: "[data-ui=\"accordion\"]"
-}, y = (e, t) => {
-	if (t === "multiple" && Array.isArray(e)) return e;
-	let n = Array.isArray(e) ? e[0] : e;
-	return n === void 0 || n === _ ? [] : [n];
-}, b = e({
-	borderBlockEnd: `1px solid ${d.color.border}`,
-	"&:first-of-type": { borderBlockStart: `1px solid ${d.color.border}` }
-}), x = e({
-	margin: 0,
-	font: "inherit"
-}), S = e({
-	appearance: "none",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	gap: d.space[3],
-	inlineSize: "100%",
-	border: 0,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: d.space[3],
-	paddingInline: d.space[4],
-	font: "inherit",
-	fontSize: d.textSize.sm,
-	fontWeight: d.fontWeight.medium,
-	color: d.color.text,
-	textAlign: "start",
-	transitionProperty: "background-color",
-	transitionDuration: d.motion.duration.fast,
-	transitionTimingFunction: d.motion.easeStandard,
-	"&::after": { ...t },
-	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
-	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
-	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: d.color.surfaceHover },
-	"&[aria-disabled=\"true\"]": { cursor: "default" },
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...n },
-	[r]: {
-		transitionDuration: "0s",
-		"&::after": { transitionDuration: "0s" }
-	}
-}), C = e({
-	paddingBlock: d.space[3],
-	paddingInline: d.space[4],
-	color: d.color.textMuted,
-	lineHeight: d.lineHeight.relaxed,
-	"&[hidden]": { display: "none" }
-}), w = s(function({ value: e, defaultValue: t, onValueChange: n, type: r = "single", collapsible: o = !0, onKeyDown: s, ...c }, l) {
-	let [d, m] = a(e, t, n), h = u(() => {
-		let e = y(d, r), t = o || e.length > 1;
-		return {
-			openValues: e,
-			toggle: (n) => {
-				let i = e.includes(n);
-				(!i || t) && m(r === "multiple" ? i ? e.filter((e) => e !== n) : [...e, n] : i ? _ : n);
-			},
-			canCollapse: t
-		};
-	}, [
-		d,
-		m,
-		r,
-		o
-	]), g = (e) => {
-		s?.(e), !e.defaultPrevented && i(e, e.currentTarget, "vertical", v);
-	};
-	return /* @__PURE__ */ f(p.Provider, {
-		value: h,
-		children: /* @__PURE__ */ f("div", {
-			...c,
-			ref: l,
-			"data-ui": "accordion",
-			onKeyDown: g
-		})
-	});
-}), T = s(function({ value: e, disabled: t = !1, ...n }, r) {
-	let { openValues: i } = h("Item"), a = l(), o = i.includes(e), s = u(() => ({
-		value: e,
-		disabled: t,
-		expanded: o,
-		triggerId: `${a}-trigger`,
-		panelId: `${a}-panel`
-	}), [
-		e,
-		t,
-		o,
-		a
-	]);
-	return /* @__PURE__ */ f(m.Provider, {
-		value: s,
-		children: /* @__PURE__ */ f("div", {
-			...n,
-			ref: r,
-			"data-ui": "accordion-item",
-			"data-state": o ? "open" : "closed",
-			"data-disabled": t ? "" : void 0,
-			css: b
-		})
-	});
-}), E = s(function({ onClick: e, disabled: t, ...n }, r) {
-	let { toggle: i, canCollapse: a } = h("Trigger"), { value: o, disabled: s, expanded: c, triggerId: l, panelId: u } = g("Trigger"), d = c && !a, p = (t) => {
-		e?.(t), !t.defaultPrevented && i(o);
-	};
-	return /* @__PURE__ */ f("h3", {
-		"data-ui": "accordion-heading",
-		css: x,
-		children: /* @__PURE__ */ f("button", {
-			...n,
-			ref: r,
-			type: "button",
-			id: l,
-			"data-ui": "accordion-trigger",
-			"data-state": c ? "open" : "closed",
-			"aria-expanded": c,
-			"aria-controls": u,
-			"aria-disabled": d || void 0,
-			disabled: s || t,
-			onClick: p,
-			css: S
-		})
-	});
-}), D = s(function({ "aria-labelledby": e, ...t }, n) {
-	let { expanded: r, triggerId: i, panelId: a } = g("Panel"), o = [e, i].filter(Boolean).join(" ");
-	return /* @__PURE__ */ f("div", {
-		...t,
-		ref: n,
-		role: "region",
-		id: a,
-		"aria-labelledby": o,
-		hidden: !r,
-		"data-ui": "accordion-panel",
-		"data-state": r ? "open" : "closed",
-		css: C
-	});
-}), O = Object.assign(w, {
-	Item: T,
-	Trigger: E,
-	Panel: D
-});
-//#endregion
-export { O as t };