orbital-ds 0.1.1 → 0.2.0

package/dist/ui/alert.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("absolute top-2.5 right-3", className),
+      ...props
+    }
+  );
+}
+export {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle
+};

package/dist/ui/aspect-ratio.d.ts

@@ -0,0 +1,7 @@
+import * as React$1 from 'react';
+
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+    ratio: number;
+}): React$1.JSX.Element;
+
+export { AspectRatio };

package/dist/ui/aspect-ratio.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "aspect-ratio",
+      style: {
+        "--ratio": ratio
+      },
+      className: cn("relative aspect-(--ratio)", className),
+      ...props
+    }
+  );
+}
+export {
+  AspectRatio
+};

package/dist/ui/attachment.d.ts

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+
+declare const attachmentVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "image" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/ui/attachment.js

@@ -0,0 +1,197 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-2xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-xl text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+      }
+    }
+  }
+);
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-lg group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "icon"
+    }
+  }
+);
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "attachment-content",
+      className: cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "attachment-title",
+      className: cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "attachment-description",
+      className: cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "attachment-actions",
+      className: cn(
+        "relative z-(--ds-z-sticky) flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "attachment-action",
+      variant: variant ?? "ghost",
+      size,
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AttachmentTrigger({
+  className,
+  render,
+  type,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps(
+      {
+        type: render ? type : type ?? "button",
+        className: cn("absolute inset-0 z-(--ds-z-raised) outline-none", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "attachment-trigger"
+    }
+  });
+}
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "attachment-group",
+      className: cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger
+};

package/dist/ui/avatar.js

@@ -54,7 +54,7 @@ function AvatarBadge({ className, ...props }) {
     {
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-(--z-raised) inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "absolute right-0 bottom-0 z-(--ds-z-raised) inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",

package/dist/ui/badge.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 

package/dist/ui/badge.js

@@ -3,7 +3,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 const badgeVariants = cva(
-  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2.5 py-1 text-xs font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-(--ds-badge-px) py-1 text-xs font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

package/dist/ui/bubble.d.ts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const bubbleVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "muted" | "tinted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end";
+}): React.JSX.Element;
+declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
+    align?: "start" | "end";
+    side?: "top" | "bottom";
+}): React.JSX.Element;
+
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

package/dist/ui/bubble.js

@@ -0,0 +1,115 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "w-fit max-w-full min-w-0 overflow-hidden rounded-overlay border border-transparent px-3.5 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-(length:--ds-ring-width) [button,a]:focus-visible:ring-ring/50",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "bubble-content"
+    }
+  });
+}
+const bubbleReactionsVariants = cva(
+  "absolute z-(--ds-z-raised) flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+export {
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions
+};

package/dist/ui/button-group.d.ts

@@ -0,0 +1,15 @@
+import * as React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+import '@base-ui/react/separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React$1.JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/ui/button-group.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-(--ds-z-raised) has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-control border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text"
+    }
+  });
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants
+};

package/dist/ui/button.d.ts

@@ -4,9 +4,11 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, render, ...props }: useRender.ComponentProps<"button"> & VariantProps<typeof buttonVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function Button({ className, variant, size, render, nativeButton: _nativeButton, ...props }: useRender.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    nativeButton?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 
 export { Button, buttonVariants };

package/dist/ui/button.js

@@ -3,7 +3,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -15,13 +15,13 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-(--control-h-md) gap-1.5 px-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        default: "h-(--ds-control-h-md) gap-1.5 px-(--ds-button-px-md) has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
         xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-(--control-h-sm) gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-(--control-h-lg) gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-(--control-h-md)",
+        sm: "h-(--ds-control-h-sm) gap-1 px-(--ds-button-px-sm) has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-(--ds-control-h-lg) gap-1.5 px-(--ds-button-px-lg) has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-(--ds-control-h-md)",
         "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-(--control-h-sm)",
+        "icon-sm": "size-(--ds-control-h-sm)",
         "icon-lg": "size-10"
       }
     },
@@ -36,6 +36,9 @@ function Button({
   variant = "default",
   size = "default",
   render,
+  // Se acepta por compatibilidad con la API de shadcn (`render` hacia un enlace);
+  // este botón no lo necesita: useRender ya decide la etiqueta.
+  nativeButton: _nativeButton,
   ...props
 }) {
   return useRender({