@siyahi/ui 0.1.9-next.34 → 0.1.9-next.35

package/DESIGN.md

@@ -88,12 +88,13 @@ mono face and the link colour, so the text can point to one.
   toggles, menus, bars and tracks (data bars, progress, a slider's track and
   thumb, a scrollbar's thumb), heatmap cells, treemap tiles and the colour
   chips of charts and legends alike (`--radius` is 0). Only what is round by
-  nature stays round: an avatar, a status dot, a line's end dot, a spinner,
-  and a signed calendar heatmap's loss day, whose shape carries its sign.
+  nature stays round: an avatar, a radio, a status dot, a line's end dot, a
+  spinner, and a signed calendar heatmap's loss day, whose shape carries its
+  sign. The theme squares every other rounding, on any component.
   Never add a `rounded-*` class to a box.
-- **Floating surfaces lie flat.** A menu, a select's list, a popover, a
-  dialog, a sheet and a chart's tooltip take no drop shadow and the card's
-  hairline for their edge, so they read as a sheet of the page.
+- **Floating surfaces lie flat.** Nothing casts a drop shadow: a menu, a
+  list, a popover, a dialog, a sheet, a hover card and a chart's tooltip take
+  the card's hairline for their edge, so they read as a sheet of the page.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
 - **A code block's copy button sits in a header row** (`CodeBlockHeader`),

package/README.md

@@ -58,8 +58,8 @@ createRoot(root).render(
 
 `preloadFonts()` loads Geist and Geist Mono with the scripts. Add `lucide-react`
 only when your own code imports icons. Next.js compiles the stylesheet through
-`@tailwindcss/postcss` instead of the Vite plugin. Static HTML reports inline the
-package's `report.css` and follow `agents/report-rules.json`.
+`@tailwindcss/postcss` instead of the Vite plugin. To host one page as a single
+HTML file, build it with `siyahi-page` from `@siyahi/tools`.
 
 If npm is unreachable, both package tarballs are attached to
 [GitHub releases](https://github.com/jatinbansal1998/siyahi/releases).
@@ -136,8 +136,8 @@ Set `color-scheme` on `<html>` as well so native controls match.
 ## Tools
 
 `@siyahi/tools` provides theme lint rules, font preload, layout screenshots
-(`siyahi-shots`), loading-shift checks (`siyahi-cls`) and contrast checks
-(`siyahi-contrast`). See the
+(`siyahi-shots`), loading-shift checks (`siyahi-cls`), contrast checks
+(`siyahi-contrast`) and a one-file page build (`siyahi-page`). See the
 [tools guide](https://github.com/jatinbansal1998/siyahi/blob/main/packages/tools/README.md)
 for configuration and commands.
 
@@ -146,7 +146,7 @@ for configuration and commands.
 ```sh
 pnpm install
 pnpm --filter @siyahi/tools exec playwright install chromium
-pnpm check
+pnpm check:static   # the full suite runs on each pull request's CI
 pnpm dev
 ```
 

package/agents/examples/app-sidebar.tsx

@@ -3,7 +3,6 @@ import {
   BlocksIcon,
   ChartAreaIcon,
   CodeIcon,
-  FileTextIcon,
   HouseIcon,
   LayersIcon,
   PaletteIcon,
@@ -18,7 +17,6 @@ const views = [
   { title: "Inputs and overlays", url: "#/inputs", icon: <SlidersHorizontalIcon /> },
   { title: "Data", url: "#/data", icon: <ChartAreaIcon /> },
   { title: "Blocks", url: "#/blocks", icon: <BlocksIcon />, isActive: true },
-  { title: "Reports", url: "#/reports", icon: <FileTextIcon /> },
   // linkProps go onto the anchor: here a new tab, in an app often onMouseEnter to prefetch the view's data.
   {
     title: "Source",

package/agents/manifest.json

@@ -4,8 +4,6 @@
   "props": "dist/index.d.ts",
   "setup": "README.md#install",
   "layout": "README.md#surfaces",
-  "report": "report.css",
-  "reportRules": "agents/report-rules.json",
   "recipes": {
     "dashboard": "agents/examples/surfaces.tsx",
     "table": "agents/examples/data-table.tsx",

package/dist/components/registry/niko-table/core/data-table-error-boundary.js

@@ -1,6 +1,6 @@
 "use client";
-import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { Button } from "../../../ui/button.js";
+import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { AlertCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/components/registry/niko-table/filters/table-faceted-filter.js

@@ -1,8 +1,8 @@
 "use client";
-import { Badge } from "../../../ui/badge.js";
 import { Button } from "../../../ui/button.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
+import { Badge } from "../../../ui/badge.js";
 import { Separator } from "../../../ui/separator.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";

package/dist/components/siyahi/scatter-chart.js

@@ -245,7 +245,7 @@ function PointTooltip({ active, payload, details }) {
 	const point = active ? payload?.[0]?.payload : void 0;
 	if (!point) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "grid min-w-32 gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+		className: "grid min-w-32 gap-1.5 border border-border bg-background px-2.5 py-1.5 text-xs",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "font-medium",
 			children: point.name

package/dist/components/siyahi/status-badge.js

@@ -16,6 +16,7 @@ function StatusBadge({ tone = "neutral", className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
+			"data-slot": "status-dot",
 			className: cn("size-1.5 rounded-full", TONES[tone].dot)
 		}), children]
 	});

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.d.ts
+declare function AlertDialog({ ...props }: AlertDialog$1.Root.Props): React$1.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React$1.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React$1.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React$1.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Title>): React$1.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Description>): React$1.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): React$1.JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,94 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.tsx
+function AlertDialog({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,6 @@
+//#region src/components/ui/aspect-ratio.d.ts
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+  ratio: number;
+}): import("react").JSX.Element;
+//#endregion
+export { AspectRatio };

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,13 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/aspect-ratio.tsx
+function AspectRatio({ ratio, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": ratio },
+		className: cn("relative aspect-(--ratio)", className),
+		...props
+	});
+}
+//#endregion
+export { AspectRatio };

package/dist/components/ui/attachment.d.ts

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

package/dist/components/ui/attachment.js

@@ -0,0 +1,104 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/attachment.tsx
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl 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-lg 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-lg 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-md 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-20 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-10 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
+	});
+}
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/components/ui/bubble.d.ts

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

package/dist/components/ui/bubble.js

@@ -0,0 +1,73 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/bubble.tsx
+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-xl border border-transparent px-3 py-2 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-3 [button,a]:focus-visible:ring-ring/50", className) }, props),
+		render,
+		state: { slot: "bubble-content" }
+	});
+}
+const bubbleReactionsVariants = cva("absolute z-10 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
+	});
+}
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

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

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

package/dist/components/ui/button-group.js

@@ -0,0 +1,41 @@
+import { Separator } from "./separator.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/button-group.tsx
+const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[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-lg! [&>[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-lg! [&>[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-lg 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
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/ui/button.d.ts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import { Button as Button$1 } from "@base-ui/react/button";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/ui/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;

package/dist/components/ui/button.js

@@ -1,7 +1,7 @@
 import { cn } from "cn";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 import { Button as Button$1 } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
 //#region src/components/ui/button.tsx
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 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-3 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: {

package/dist/components/ui/carousel.d.ts

@@ -0,0 +1,30 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+//#region src/components/ui/carousel.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+declare function useCarousel(): CarouselContextProps;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps): React$1.JSX.Element;
+declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+//#endregion
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };