veryfront 0.1.1238 → 0.1.1239

package/esm/src/react/components/ui/popover.d.ts

@@ -1,39 +1,68 @@
 /**
- * Dependency-free anchored popover with the Studio part API used by Veryfront.
- * It provides stable trigger/content ARIA wiring, initial focus, trigger focus
- * restoration, collision-aware positioning, and outside/Escape dismissal.
+ * Popover - BASIC fork of @radix-ui/react-popover with the same API shape
+ * (Root / Trigger / Content + Title / Body / Footer / Actions section parts).
+ * Classes are ported 1:1 from Studio's `Popover` (tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary). Anchored below the trigger;
+ * dismisses on outside-click and `Escape`. A11y work tracked in
+ * anchored-surface.tsx.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "veryfront/ui";
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger>
+ *   <PopoverContent><PopoverTitle>Filters</PopoverTitle></PopoverContent>
+ * </Popover>;
+ * ```
  *
  * @module react/components/ui/popover
  */
 import * as React from "react";
-import { type AnchoredSlottedTriggerProps, type AnchoredTriggerPublicProps } from "./anchored-surface.js";
 /** Props accepted by `<Popover>`. */
 export interface PopoverProps {
+    /** The trigger and content parts to compose. */
     children: React.ReactNode;
+    /** Controlled open state (pair with `onOpenChange`). */
     open?: boolean;
+    /** Initial open state when uncontrolled. */
     defaultOpen?: boolean;
+    /** Fires when the open state changes. */
     onOpenChange?: (open: boolean) => void;
 }
-/** Popover root — owns open state and the positioning anchor. */
+/** Popover root - owns open state and the positioning anchor. */
 export declare function Popover(props: PopoverProps): React.ReactElement;
+/** Props accepted by `<PopoverTrigger>`. */
+export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Merge trigger behaviour onto the child element instead of a `<button>`. @default false */
+    asChild?: boolean;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLButtonElement>;
+}
 /**
- * Trigger — toggles the popover; the positioning anchor. `asChild` merges onto
- * the child element, which must forward `ref` to its DOM node.
+ * Literal slotted trigger contract with an element-specific `ref` - for
+ * `asChild` triggers whose child is not a `<button>` (e.g. an `<a>`), so the
+ * consumer's ref keeps its precise element type.
+ */
+export type PopoverSlottedTriggerProps<T extends HTMLElement = HTMLElement> = Omit<PopoverTriggerProps, "ref"> & {
+    ref?: React.Ref<T>;
+};
+/**
+ * Trigger - toggles the popover; the positioning anchor. `asChild` merges onto
+ * the child element, which must forward `ref` to its DOM node. The generic
+ * overload lets an `asChild` trigger carry an element-specific ref (e.g. an
+ * `<a>`); `aria-haspopup` is supplied by the adapter's trigger.
  */
-export interface PopoverTriggerProps extends AnchoredTriggerPublicProps {
-}
-/** Literal slotted trigger contract with an element-specific ref. */
-export type PopoverSlottedTriggerProps<T extends HTMLElement = HTMLElement> = AnchoredSlottedTriggerProps<T>;
 export declare function PopoverTrigger<T extends HTMLElement = HTMLElement>(props: PopoverSlottedTriggerProps<T>): React.ReactElement;
 export declare function PopoverTrigger(props: PopoverTriggerProps): React.ReactElement;
 /** Props accepted by `<PopoverContent>`. */
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Horizontal alignment relative to the trigger. */
     align?: "start" | "end";
-    /** Consumer ref for the rendered popover surface. */
+    /** Consumer ref for the surface node (forwarded through the adapter). */
     ref?: React.Ref<HTMLDivElement>;
 }
-/** Popover surface — rendered below the trigger while open. */
+/** Popover surface - rendered below the trigger while open. */
 export declare function PopoverContent({ children, className, align, ...props }: PopoverContentProps): React.ReactElement | null;
 /** Primary heading slot at the top of a popover (Studio: Heading level 4). */
 export declare function PopoverTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;

package/esm/src/react/components/ui/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,EAEhC,MAAM,uBAAuB,CAAC;AAO/B,qCAAqC;AACrC,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAE/D;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,0BAA0B;CAAG;AAE1E,qEAAqE;AACrE,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IACxE,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAEjC,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAChE,KAAK,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC;AACtB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC;AAO/E,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAYjD;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAWpF;AAED,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,qCAAqC;AACrC,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAG/D;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF,6FAA6F;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED;;;;GAIG;AACH,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IACtE,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAChC;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE3B;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAChE,KAAK,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC;AACtB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC;AAQ/E,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAajD;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAWpF;AAED,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D"}

package/esm/src/react/components/ui/popover.js

@@ -1,26 +1,39 @@
 /**
- * Dependency-free anchored popover with the Studio part API used by Veryfront.
- * It provides stable trigger/content ARIA wiring, initial focus, trigger focus
- * restoration, collision-aware positioning, and outside/Escape dismissal.
+ * Popover - BASIC fork of @radix-ui/react-popover with the same API shape
+ * (Root / Trigger / Content + Title / Body / Footer / Actions section parts).
+ * Classes are ported 1:1 from Studio's `Popover` (tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary). Anchored below the trigger;
+ * dismisses on outside-click and `Escape`. A11y work tracked in
+ * anchored-surface.tsx.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "veryfront/ui";
+ *
+ * <Popover>
+ *   <PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger>
+ *   <PopoverContent><PopoverTitle>Filters</PopoverTitle></PopoverContent>
+ * </Popover>;
+ * ```
  *
  * @module react/components/ui/popover
  */
 import * as React from "react";
 import { cx as cn } from "./cva.js";
-import { createAnchoredSurfaceParts, } from "./anchored-surface.js";
-// Per-skin context + machinery -- distinct from DropdownMenu's instance so
-// a DropdownMenu nested inside a Popover cannot accidentally close the Popover.
-const { AnchoredRoot: _Root, AnchoredTrigger: _Trigger, AnchoredContent: _Content } = createAnchoredSurfaceParts();
-/** Popover root — owns open state and the positioning anchor. */
+import { useAdapter } from "./adapter/context.js";
+/** Popover root - owns open state and the positioning anchor. */
 export function Popover(props) {
-    return React.createElement(_Root, { ...props });
+    const { popover } = useAdapter();
+    return React.createElement(popover.Root, { ...props });
 }
 export function PopoverTrigger(props) {
-    return React.createElement(_Trigger, { ...props, haspopup: "dialog" });
+    const { popover } = useAdapter();
+    return React.createElement(popover.Trigger, { ...props });
 }
-/** Popover surface — rendered below the trigger while open. */
+/** Popover surface - rendered below the trigger while open. */
 export function PopoverContent({ children, className, align = "end", ...props }) {
-    return (React.createElement(_Content, { ...props, role: "dialog", align: align, initialFocus: true, className: cn("min-w-[220px]", className) }, children));
+    const { popover } = useAdapter();
+    return (React.createElement(popover.Content, { role: "dialog", align: align, initialFocus: true, className: cn("min-w-[220px]", className), ...props }, children));
 }
 /** Primary heading slot at the top of a popover (Studio: Heading level 4). */
 export function PopoverTitle({ className, children, ...props }) {

package/esm/src/react/components/ui/scroll-area.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ScrollArea: a styled native-overflow scroll container. The builtin engine uses
+ * the platform's own scrolling (no custom scrollbar JS): a single `<div>` that
+ * clips and scrolls its `children`, dressed with a tasteful thin scrollbar drawn
+ * from the veryfront theme tokens. Pick the scroll axis with `orientation`.
+ *
+ * @example
+ * <ScrollArea orientation="vertical" className="h-48 w-64">
+ *   <p>…a lot of tall content…</p>
+ * </ScrollArea>
+ *
+ * @module react/components/ui/scroll-area
+ */
+import * as React from "react";
+import { type VariantProps } from "./cva.js";
+declare const scrollAreaVariants: (props?: ({
+    orientation?: "both" | "horizontal" | "vertical" | null | undefined;
+} & {
+    class?: import("../../../utils/clsx.js").ClassValue;
+    className?: import("../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<ScrollArea>`. */
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof scrollAreaVariants> {
+    /**
+     * Which axis scrolls: `vertical` clips the x-axis and scrolls y, `horizontal`
+     * clips y and scrolls x, `both` scrolls either way.
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** The scrollable content. */
+    children?: React.ReactNode;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A styled, native-overflow scroll container. */
+export declare function ScrollArea({ orientation, className, children, ref, ...props }: ScrollAreaProps): React.ReactElement;
+export { scrollAreaVariants };
+//# sourceMappingURL=scroll-area.d.ts.map

package/esm/src/react/components/ui/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAGlD,QAAA,MAAM,kBAAkB;;;;;yBAqBvB,CAAC;AAEF,wCAAwC;AACxC,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACrF;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EACzB,WAAwB,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAWtC;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/esm/src/react/components/ui/scroll-area.js

@@ -0,0 +1,35 @@
+/**
+ * ScrollArea: a styled native-overflow scroll container. The builtin engine uses
+ * the platform's own scrolling (no custom scrollbar JS): a single `<div>` that
+ * clips and scrolls its `children`, dressed with a tasteful thin scrollbar drawn
+ * from the veryfront theme tokens. Pick the scroll axis with `orientation`.
+ *
+ * @example
+ * <ScrollArea orientation="vertical" className="h-48 w-64">
+ *   <p>…a lot of tall content…</p>
+ * </ScrollArea>
+ *
+ * @module react/components/ui/scroll-area
+ */
+import * as React from "react";
+import { cva } from "./cva.js";
+import { cx as cn } from "./cva.js";
+const scrollAreaVariants = cva(
+// Thin, unobtrusive scrollbar drawn with theme tokens; native overflow does the work.
+cn("relative rounded-md [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent]", "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border)]", "[&::-webkit-scrollbar-thumb:hover]:bg-[var(--muted-foreground)]"), {
+    variants: {
+        orientation: {
+            vertical: "overflow-y-auto overflow-x-hidden",
+            horizontal: "overflow-x-auto overflow-y-hidden",
+            both: "overflow-auto",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+/** A styled, native-overflow scroll container. */
+export function ScrollArea({ orientation = "vertical", className, children, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, "data-orientation": orientation, className: cn(scrollAreaVariants({ orientation }), className), ...props }, children));
+}
+export { scrollAreaVariants };

package/esm/src/react/components/ui/separator.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Separator - a thin divider rule. Pure-visual/CSS primitive (no engine needed):
+ * decorative by default (`role="none"`, hidden from a11y); pass `decorative={false}`
+ * for a semantic `role="separator"` with `aria-orientation`.
+ *
+ * @module react/components/ui/separator
+ */
+import * as React from "react";
+/** Props accepted by `<Separator>`. */
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Rule direction. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Decorative (hidden from a11y). Set `false` for a semantic `role="separator"`. @default true */
+    decorative?: boolean;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A horizontal (default) or vertical divider rule. */
+export declare function Separator({ className, orientation, decorative, ref, ...props }: SeparatorProps): React.ReactElement;
+//# sourceMappingURL=separator.d.ts.map

package/esm/src/react/components/ui/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/separator.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,uCAAuC;AACvC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,4CAA4C;IAC5C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,uDAAuD;AACvD,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAerC"}

package/esm/src/react/components/ui/separator.js

@@ -0,0 +1,13 @@
+/**
+ * Separator - a thin divider rule. Pure-visual/CSS primitive (no engine needed):
+ * decorative by default (`role="none"`, hidden from a11y); pass `decorative={false}`
+ * for a semantic `role="separator"` with `aria-orientation`.
+ *
+ * @module react/components/ui/separator
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+/** A horizontal (default) or vertical divider rule. */
+export function Separator({ className, orientation = "horizontal", decorative = true, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, role: decorative ? "none" : "separator", "aria-orientation": decorative ? undefined : orientation, "data-orientation": orientation, className: cn("shrink-0 bg-[var(--separator)]", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className), ...props }));
+}

package/esm/src/react/components/ui/slider.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Slider - pick a number from a range by dragging a thumb along a track.
+ *
+ * A single native `<input type="range">` (so keyboard, focus, and ARIA come for
+ * free) restyled with the veryfront theme tokens. Controlled via
+ * `value`/`onValueChange` or uncontrolled via `defaultValue`; `min`/`max`/`step`
+ * behave as on the native element. No adapter or engine required.
+ *
+ * @example Uncontrolled, 0-100
+ * ```tsx
+ * import { Slider } from "veryfront/ui";
+ *
+ * <Slider defaultValue={50} aria-label="Volume" />;
+ * ```
+ *
+ * @example Controlled with a step
+ * ```tsx
+ * const [temp, setTemp] = React.useState(20);
+ * <Slider value={temp} onValueChange={setTemp} min={16} max={30} step={0.5} />;
+ * ```
+ *
+ * @module react/components/ui/slider
+ */
+import * as React from "react";
+/** Props accepted by `<Slider>`. */
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
+    /** Controlled value (pair with `onValueChange`). */
+    value?: number;
+    /** Initial value when uncontrolled. */
+    defaultValue?: number;
+    /** Fires with the next value as the thumb moves. */
+    onValueChange?: (value: number) => void;
+    /** Lowest selectable value. @default 0 */
+    min?: number;
+    /** Highest selectable value. @default 100 */
+    max?: number;
+    /** Granularity the value snaps to. @default 1 */
+    step?: number;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Render a range slider. */
+export declare function Slider({ value, defaultValue, onValueChange, min, max, step, className, disabled, ref, ...props }: SliderProps): React.ReactElement;
+//# sourceMappingURL=slider.d.ts.map

package/esm/src/react/components/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/slider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,oCAAoC;AACpC,MAAM,WAAW,WAAY,SAC3B,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC/C;IACD,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAYD,6BAA6B;AAC7B,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAmClC"}

package/esm/src/react/components/ui/slider.js

@@ -0,0 +1,46 @@
+/**
+ * Slider - pick a number from a range by dragging a thumb along a track.
+ *
+ * A single native `<input type="range">` (so keyboard, focus, and ARIA come for
+ * free) restyled with the veryfront theme tokens. Controlled via
+ * `value`/`onValueChange` or uncontrolled via `defaultValue`; `min`/`max`/`step`
+ * behave as on the native element. No adapter or engine required.
+ *
+ * @example Uncontrolled, 0-100
+ * ```tsx
+ * import { Slider } from "veryfront/ui";
+ *
+ * <Slider defaultValue={50} aria-label="Volume" />;
+ * ```
+ *
+ * @example Controlled with a step
+ * ```tsx
+ * const [temp, setTemp] = React.useState(20);
+ * <Slider value={temp} onValueChange={setTemp} min={16} max={30} step={0.5} />;
+ * ```
+ *
+ * @module react/components/ui/slider
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+// Native range thumbs must be styled per-vendor, and each Tailwind utility needs
+// its own pseudo-element variant prefix (a prefix applies to one class only).
+const WEBKIT_THUMB = "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 " +
+    "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full " +
+    "[&::-webkit-slider-thumb]:bg-[var(--primary)] [&::-webkit-slider-thumb]:cursor-pointer";
+const MOZ_THUMB = "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-0 " +
+    "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-[var(--primary)] " +
+    "[&::-moz-range-thumb]:cursor-pointer";
+/** Render a range slider. */
+export function Slider({ value, defaultValue, onValueChange, min = 0, max = 100, step = 1, className, disabled, ref, ...props }) {
+    const handleChange = (event) => {
+        onValueChange?.(Number(event.target.value));
+    };
+    return (React.createElement("input", { ref: ref, type: "range", min: min, max: max, step: step, value: value, defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, onChange: handleChange, "data-disabled": disabled ? "" : undefined, className: cn("w-full cursor-pointer appearance-none bg-transparent", 
+        // WebKit track + thumb
+        "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[var(--edge)]", WEBKIT_THUMB, 
+        // Firefox track + thumb
+        "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--edge)]", MOZ_THUMB, 
+        // Focus ring on the thumb
+        "focus-visible:outline-none", "[&:focus-visible::-webkit-slider-thumb]:ring-2 [&:focus-visible::-webkit-slider-thumb]:ring-[var(--edge-medium)]", "[&:focus-visible::-moz-range-thumb]:ring-2 [&:focus-visible::-moz-range-thumb]:ring-[var(--edge-medium)]", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}

package/esm/src/react/components/ui/status.d.ts

@@ -1,7 +1,7 @@
 /**
- * Status — ported 1:1 from Veryfront Studio. A coloured status dot with a
+ * Status - ported 1:1 from Veryfront Studio. A coloured status dot with a
  * label (optionally pulsing / responsively hidden). Semantic classes remapped
- * to veryfront's `[var(--token)]` vocabulary — the `--status-*` dot tokens all
+ * to veryfront's `[var(--token)]` vocabulary - the `--status-*` dot tokens all
  * exist in `theme.ts`. Private to the chat module.
  *
  * @module react/components/ui/status
@@ -10,7 +10,7 @@ import * as React from "react";
 /** Dot colour, keyed to the `--status-*` palette. */
 export type StatusColor = "gray" | "blue" | "green" | "red" | "yellow";
 /** Props accepted by `<Status>`. */
-export interface StatusProps {
+export interface StatusProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     color: StatusColor;
     /** Pulse the dot (e.g. an in-progress run). */
@@ -21,8 +21,9 @@ export interface StatusProps {
     responsive?: boolean;
     /** `'sm'` (14px, default) or `'inherit'` to inherit the parent's size. */
     size?: "sm" | "inherit";
-    className?: string;
+    /** React 19: ref is a regular prop, forwarded to the root node. */
+    ref?: React.Ref<HTMLDivElement>;
 }
 /** Render a status dot + label. */
-export declare function Status({ label, color, pulse, showLabel, responsive, size, className, }: StatusProps): React.ReactElement;
+export declare function Status({ label, color, pulse, showLabel, responsive, size, className, ref, ...props }: StatusProps): React.ReactElement;
 //# sourceMappingURL=status.d.ts.map

package/esm/src/react/components/ui/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/status.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvE,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,mCAAmC;AACnC,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,UAAU,EACV,IAAW,EACX,SAAS,GACV,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA4BlC"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/status.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvE,oCAAoC;AACpC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,mEAAmE;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAUD,mCAAmC;AACnC,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,UAAU,EACV,IAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA8BlC"}

package/esm/src/react/components/ui/status.js

@@ -1,7 +1,7 @@
 /**
- * Status — ported 1:1 from Veryfront Studio. A coloured status dot with a
+ * Status - ported 1:1 from Veryfront Studio. A coloured status dot with a
  * label (optionally pulsing / responsively hidden). Semantic classes remapped
- * to veryfront's `[var(--token)]` vocabulary — the `--status-*` dot tokens all
+ * to veryfront's `[var(--token)]` vocabulary - the `--status-*` dot tokens all
  * exist in `theme.ts`. Private to the chat module.
  *
  * @module react/components/ui/status
@@ -16,8 +16,8 @@ const dotColorMap = {
     yellow: "bg-[var(--status-warning)]",
 };
 /** Render a status dot + label. */
-export function Status({ label, color, pulse, showLabel = true, responsive, size = "sm", className, }) {
-    return (React.createElement("div", { className: cn("flex items-center gap-1.5", responsive && "@container", className) },
+export function Status({ label, color, pulse, showLabel = true, responsive, size = "sm", className, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, ...props, className: cn("flex items-center gap-1.5", responsive && "@container", className) },
         React.createElement("span", { className: cn("size-2 rounded-full shrink-0", dotColorMap[color], pulse && "animate-pulse") }),
         React.createElement("span", { className: cn(size === "sm" && "text-sm", "font-normal text-[var(--foreground)] truncate", !showLabel && "sr-only", showLabel && responsive && "hidden @[5rem]:inline") }, label)));
 }

package/esm/src/react/components/ui/tabs.d.ts

@@ -1,9 +1,16 @@
 /**
- * Tabs — ported from Veryfront Studio `components/Tabs/Tabs.tsx`, with the
+ * Tabs - ported from Veryfront Studio `components/Tabs/Tabs.tsx`, with the
  * `motion/react` spring-slide forked out: the active pill is a static
  * background (no dependency, no layout animation), only the `transition-colors`
  * CSS that Studio already ships. Semantic classes remapped to veryfront's
- * `[var(--token)]` vocabulary. Private to the chat module.
+ * `[var(--token)]` vocabulary.
+ *
+ * The selection MECHANICS (`role="tablist"` / `role="tab"`, `aria-selected`,
+ * select-on-click) come from the active adapter's `tabs` slot
+ * (`useAdapter().tabs`) - with no provider that is the zero-dependency builtin,
+ * so behaviour and markup are unchanged. This skin owns only the API shape, the
+ * `size` variant, and the visual look (including the active pill), which it
+ * drives from the controlled `value` prop.
  *
  * Flat, prefixed exports (`Tabs` + `TabsItem`) to match the other `ui/`
  * primitives (`SelectItem`, `DialogTrigger`, …). Note: `cn` is clsx-only (no
@@ -11,8 +18,23 @@
  * suffix (e.g. `px-8!`).
  *
  * Two sizes:
- * - `default` — filled track (`--input-bg`), 34/38px, accent pill.
- * - `sm` — flat, outlined, 32px, for panel headers.
+ * - `default` - filled track (`--input-bg`), 34/38px, accent pill.
+ * - `sm` - flat, outlined, 32px, for panel headers.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabsItem } from "veryfront/ui";
+ *
+ * function Example() {
+ *   const [tab, setTab] = React.useState("overview");
+ *   return (
+ *     <Tabs value={tab} onValueChange={setTab}>
+ *       <TabsItem value="overview">Overview</TabsItem>
+ *       <TabsItem value="activity">Activity</TabsItem>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
  *
  * @module react/components/ui/tabs
  */
@@ -25,7 +47,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
     size?: TabsSize;
     children: React.ReactNode;
 }
-/** Tablist container — manages active state and passes context to items. */
+/** Tablist container - delegates selection to the adapter, owns the size + look. */
 export declare const Tabs: any;
 /** Props accepted by `<TabsItem>`. */
 export interface TabsItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
@@ -34,10 +56,11 @@ export interface TabsItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     children: React.ReactNode;
 }
 /**
- * Individual tab — renders as a button, or an anchor when `href` is set.
- * Forwards native props/ref and composes the caller's `onClick` with the
- * internal selection (caller's runs first, then the tab activates), so a
- * consumer-supplied handler adds to — never overrides — selection.
+ * Individual tab - renders as a button, or an anchor when `href` is set. The
+ * adapter's `tabs.Tab` supplies the `role="tab"` / `aria-selected` / `data-state`
+ * mechanics and composes selection onto the caller's `onClick` (caller's runs
+ * first, then the tab activates); this skin renders the visual pill and forwards
+ * native props/ref.
  */
 export declare const TabsItem: any;
 export {};

package/esm/src/react/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;AAUjC,0DAA0D;AAC1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,4EAA4E;AAC5E,eAAO,MAAM,IAAI,KAsBf,CAAC;AAGH,sCAAsC;AACtC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,KA6CpB,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;AAWjC,0DAA0D;AAC1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,oFAAoF;AACpF,eAAO,MAAM,IAAI,KAwBf,CAAC;AAGH,sCAAsC;AACtC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,KAyCpB,CAAC"}

package/esm/src/react/components/ui/tabs.js

@@ -1,9 +1,16 @@
 /**
- * Tabs — ported from Veryfront Studio `components/Tabs/Tabs.tsx`, with the
+ * Tabs - ported from Veryfront Studio `components/Tabs/Tabs.tsx`, with the
  * `motion/react` spring-slide forked out: the active pill is a static
  * background (no dependency, no layout animation), only the `transition-colors`
  * CSS that Studio already ships. Semantic classes remapped to veryfront's
- * `[var(--token)]` vocabulary. Private to the chat module.
+ * `[var(--token)]` vocabulary.
+ *
+ * The selection MECHANICS (`role="tablist"` / `role="tab"`, `aria-selected`,
+ * select-on-click) come from the active adapter's `tabs` slot
+ * (`useAdapter().tabs`) - with no provider that is the zero-dependency builtin,
+ * so behaviour and markup are unchanged. This skin owns only the API shape, the
+ * `size` variant, and the visual look (including the active pill), which it
+ * drives from the controlled `value` prop.
  *
  * Flat, prefixed exports (`Tabs` + `TabsItem`) to match the other `ui/`
  * primitives (`SelectItem`, `DialogTrigger`, …). Note: `cn` is clsx-only (no
@@ -11,40 +18,57 @@
  * suffix (e.g. `px-8!`).
  *
  * Two sizes:
- * - `default` — filled track (`--input-bg`), 34/38px, accent pill.
- * - `sm` — flat, outlined, 32px, for panel headers.
+ * - `default` - filled track (`--input-bg`), 34/38px, accent pill.
+ * - `sm` - flat, outlined, 32px, for panel headers.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabsItem } from "veryfront/ui";
+ *
+ * function Example() {
+ *   const [tab, setTab] = React.useState("overview");
+ *   return (
+ *     <Tabs value={tab} onValueChange={setTab}>
+ *       <TabsItem value="overview">Overview</TabsItem>
+ *       <TabsItem value="activity">Activity</TabsItem>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
  *
  * @module react/components/ui/tabs
  */
 import * as React from "react";
 import { createStrictContext } from "../create-strict-context.js";
 import { cx as cn } from "./cva.js";
-const [TabsContext, useTabs] = createStrictContext("TabsItem", "Tabs");
-/** Tablist container — manages active state and passes context to items. */
+import { useAdapter } from "./adapter/context.js";
+const [TabsSkinContext, useTabsSkin] = createStrictContext("TabsItem", "Tabs");
+/** Tablist container - delegates selection to the adapter, owns the size + look. */
 export const Tabs = React.forwardRef(function Tabs({ value, onValueChange, size = "default", className, children, ...props }, ref) {
-    return (React.createElement(TabsContext.Provider, { value: { value, onValueChange, size } },
-        React.createElement("div", { ref: ref, ...props, role: "tablist", className: cn("inline-flex w-fit items-center rounded-full", size === "sm"
+    const { tabs } = useAdapter();
+    return (React.createElement(TabsSkinContext.Provider, { value: { value, size } },
+        React.createElement(tabs.Root, { ref: ref, value: value, onValueChange: onValueChange, ...props, className: cn("inline-flex w-fit items-center rounded-full", size === "sm"
                 ? "h-[32px] gap-0 border border-[var(--edge)] bg-transparent p-0.5"
                 : "h-[34px] gap-2 bg-[var(--input-bg)] p-1 md:h-[38px]", className) }, children)));
 });
 Tabs.displayName = "Tabs";
 /**
- * Individual tab — renders as a button, or an anchor when `href` is set.
- * Forwards native props/ref and composes the caller's `onClick` with the
- * internal selection (caller's runs first, then the tab activates), so a
- * consumer-supplied handler adds to — never overrides — selection.
+ * Individual tab - renders as a button, or an anchor when `href` is set. The
+ * adapter's `tabs.Tab` supplies the `role="tab"` / `aria-selected` / `data-state`
+ * mechanics and composes selection onto the caller's `onClick` (caller's runs
+ * first, then the tab activates); this skin renders the visual pill and forwards
+ * native props/ref.
  */
 export const TabsItem = React.forwardRef(function TabsItem({ value, href, children, className, onClick, ...props }, ref) {
-    const ctx = useTabs();
-    const isActive = ctx.value === value;
+    const { tabs } = useAdapter();
+    const { value: selected, size } = useTabsSkin();
+    const isActive = selected === value;
     const Comp = (href ? "a" : "button");
-    return (React.createElement(Comp, { ref: ref, ...(href ? { href } : { type: "button" }), ...props, role: "tab", "aria-selected": isActive, onClick: (e) => {
-            onClick?.(e);
-            ctx.onValueChange(value);
-        }, className: cn("relative inline-flex items-center h-full rounded-full font-normal transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)]", ctx.size === "sm" ? "px-3 text-sm" : "px-5 md:px-6 text-sm md:text-base", isActive
-            ? cn("text-[var(--foreground)]", ctx.size === "default" && "dark:text-[var(--background)]")
-            : "text-[var(--foreground)] opacity-50 hover:opacity-100", className) },
-        isActive && (React.createElement("div", { className: cn("absolute inset-0 rounded-full bg-[var(--accent)]", ctx.size === "default" && "dark:bg-[var(--foreground)]") })),
-        React.createElement("span", { className: "relative z-10" }, children)));
+    return (React.createElement(tabs.Tab, { value: value, asChild: true, ref: ref, onClick: onClick },
+        React.createElement(Comp, { ...(href ? { href } : { type: "button" }), ...props, className: cn("relative inline-flex items-center h-full rounded-full font-normal transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)]", size === "sm" ? "px-3 text-sm" : "px-5 md:px-6 text-sm md:text-base", isActive
+                ? cn("text-[var(--foreground)]", size === "default" && "dark:text-[var(--background)]")
+                : "text-[var(--foreground)] opacity-50 hover:opacity-100", className) },
+            isActive && (React.createElement("div", { className: cn("absolute inset-0 rounded-full bg-[var(--accent)]", size === "default" && "dark:bg-[var(--foreground)]") })),
+            React.createElement("span", { className: "relative z-10" }, children))));
 });
 TabsItem.displayName = "TabsItem";