@ctrl-ui/react 0.8.0

package/dist/ui/button.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinAdornment } from "../skin.js";
+import { Button as Button$1 } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/button.tsx
+const buttonShapes = ["default", "circle"];
+const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
+function ButtonContent({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "button",
+		"data-control-family": "button",
+		"data-slot": "content",
+		className: buttonContentClasses,
+		children
+	});
+}
+/** The content wrapper only earns its node when a skin layer sits behind it and needs stacking above it. */
+function ButtonBody({ layer, wrap = true, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [layer, wrap && layer ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
+}
+function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
+	const layer = skinAdornment("button", "layer", {
+		variant,
+		tone
+	});
+	return /* @__PURE__ */ jsx(Button$1, {
+		type: nativeButton === false ? void 0 : type,
+		disabled,
+		"data-control-ui": "button",
+		"data-control-family": "button",
+		"data-slot": "root",
+		"data-control": "true",
+		"data-active": active ? "true" : void 0,
+		"data-icon-only": iconOnly ? "true" : void 0,
+		"data-shape": shape,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		className: cn(buttonStructureClasses, className),
+		render,
+		nativeButton,
+		...props,
+		children: /* @__PURE__ */ jsx(ButtonBody, {
+			layer,
+			wrap: !render,
+			children
+		})
+	});
+}
+function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "button",
+			"data-control-family": "button",
+			"data-slot": "root",
+			"data-control": "true",
+			"data-active": active ? "true" : void 0,
+			"data-icon-only": iconOnly ? "true" : void 0,
+			"data-shape": shape,
+			"data-variant": variant,
+			"data-tone": tone,
+			"data-size": size,
+			className: cn(buttonStructureClasses, className),
+			children: /* @__PURE__ */ jsx(ButtonBody, {
+				layer: skinAdornment("button", "layer", {
+					variant,
+					tone
+				}),
+				children
+			})
+		}
+	});
+}
+function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		"data-control-ui": "button",
+		"data-control-family": "button",
+		"data-slot": "root",
+		"data-control": "true",
+		"data-active": active ? "true" : void 0,
+		"data-icon-only": iconOnly ? "true" : void 0,
+		"data-shape": shape,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		className: cn(buttonStructureClasses, className),
+		children: /* @__PURE__ */ jsx(ButtonBody, {
+			layer: skinAdornment("button", "layer", {
+				variant,
+				tone
+			}),
+			children
+		})
+	});
+}
+//#endregion
+export { Button, ButtonLabel, ButtonLink, buttonContentClasses, buttonShapes, buttonStructureClasses };

package/dist/ui/calendar.d.ts

@@ -0,0 +1,11 @@
+import { CalendarKnobStyle } from "../knob-contracts/calendar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { DayPicker } from "react-day-picker";
+//#region src/ui/calendar.d.ts
+type CalendarPropsWithStyle<Props> = Props extends unknown ? Omit<Props, "style"> & {
+  style?: CSSProperties & CalendarKnobStyle;
+} : never;
+type CalendarProps = CalendarPropsWithStyle<ComponentProps<typeof DayPicker>>;
+declare function Calendar({ className, showOutsideDays, style, ...props }: CalendarProps): import("react").JSX.Element;
+//#endregion
+export { Calendar, CalendarProps };

package/dist/ui/calendar.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
+//#region src/ui/calendar.tsx
+const dayButtonClasses = "flex w-full items-center justify-center disabled:pointer-events-none";
+const navButtonClasses = "inline-flex items-center justify-center disabled:pointer-events-none";
+const chevronPathByOrientation = {
+	left: "M10 3 5.5 8 10 13",
+	right: "M6 3 10.5 8 6 13",
+	up: "M3 10 8 5.5 13 10",
+	down: "M3 6 8 10.5 13 6"
+};
+function Calendar({ className, showOutsideDays = true, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "root",
+		className: cn("w-fit", className),
+		style,
+		children: /* @__PURE__ */ jsx(DayPicker, {
+			showOutsideDays,
+			components: {
+				Chevron: CalendarChevron,
+				Months: CalendarMonths,
+				Month: CalendarMonth,
+				MonthCaption: CalendarMonthCaption,
+				CaptionLabel: CalendarCaptionLabel,
+				Nav: CalendarNav,
+				PreviousMonthButton: CalendarNavButton,
+				NextMonthButton: CalendarNavButton,
+				MonthGrid: CalendarMonthGrid,
+				Weekday: CalendarWeekday,
+				Day: CalendarDay,
+				DayButton: CalendarDayButton
+			},
+			...props
+		})
+	});
+}
+function CalendarMonths({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Months, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "months",
+		className: cn("relative flex flex-col sm:flex-row", className),
+		...props
+	});
+}
+function CalendarMonth({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Month, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "month",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function CalendarMonthCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MonthCaption, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "month-caption",
+		className: cn("flex items-center justify-center", className),
+		...props
+	});
+}
+function CalendarCaptionLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CaptionLabel, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "caption-label",
+		className: cn("select-none", className),
+		...props
+	});
+}
+function CalendarNav({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Nav, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "nav",
+		className: cn("absolute inset-x-0 top-0 flex items-center justify-between", className),
+		...props
+	});
+}
+function CalendarNavButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "nav-button",
+		className: cn(navButtonClasses, className),
+		...props
+	});
+}
+function CalendarMonthGrid({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MonthGrid, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "month-grid",
+		className: cn("w-full", className),
+		...props
+	});
+}
+function CalendarWeekday({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Weekday, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "weekday",
+		className: cn(className),
+		...props
+	});
+}
+function CalendarDay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Day, {
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "day-cell",
+		className: cn("p-0 align-middle", className),
+		...props
+	});
+}
+function CalendarDayButton({ day, modifiers, className, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	const isSingleDayRange = Boolean(modifiers.range_start && modifiers.range_end);
+	const isRange = !isSingleDayRange && (modifiers.range_start || modifiers.range_middle || modifiers.range_end);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"data-control-ui": "calendar",
+		"data-control-family": "calendar",
+		"data-slot": "day",
+		"data-today": modifiers.today ? true : void 0,
+		"data-selected-single": modifiers.selected && !isRange ? true : void 0,
+		"data-range-start": modifiers.range_start && !isSingleDayRange ? true : void 0,
+		"data-range-middle": modifiers.range_middle ? true : void 0,
+		"data-range-end": modifiers.range_end && !isSingleDayRange ? true : void 0,
+		className: cn(dayButtonClasses, className),
+		...props
+	});
+}
+function CalendarChevron({ className, orientation }) {
+	const path = chevronPathByOrientation[orientation ?? "down"];
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: cn("size-4", className),
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: path })
+	});
+}
+//#endregion
+export { Calendar };

package/dist/ui/card.d.ts

@@ -0,0 +1,36 @@
+import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/card.d.ts
+type CardVariant = "default" | "sectioned";
+type CardProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & CardKnobStyle;
+} & {
+  variant?: CardVariant;
+};
+type CardHeaderProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+type CardTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+type CardDescriptionProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+type CardActionProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+type CardContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+type CardFooterProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CardKnobStyle;
+};
+declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+//#endregion
+export { Card, CardAction, CardActionProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, CardVariant };

package/dist/ui/card.js

@@ -0,0 +1,70 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/card.tsx
+function Card({ variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "root",
+		"data-surface": "panel",
+		"data-variant": variant,
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "header",
+		className: cn("grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "action",
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "content",
+		className,
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "card",
+		"data-control-family": "card",
+		"data-slot": "footer",
+		className: cn("flex items-center [.border-t]:pt-6", className),
+		...props
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,11 @@
+import { ControlledMultiChoice } from "../control-props.js";
+import { ComponentProps } from "react";
+//#region src/ui/checkbox-group.d.ts
+type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
+  allValues?: string[];
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+};
+declare function CheckboxGroup({ className, orientation, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+export { CheckboxGroup, CheckboxGroupProps };

package/dist/ui/checkbox-group.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/ui/checkbox-group.tsx
+function CheckboxGroup({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		"data-control-ui": "checkbox-group",
+		"data-slot": "root",
+		"data-orientation": orientation,
+		className: cn("flex flex-col gap-2.5 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:gap-4", className),
+		...props
+	});
+}
+//#endregion
+export { CheckboxGroup };

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,23 @@
+import { ChoiceKnobStyle } from "../knob-contracts/choice-knobs.js";
+import { CSSProperties } from "react";
+//#region src/ui/checkbox.d.ts
+type CheckboxProps = Omit<{
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}, "style"> & {
+  style?: CSSProperties & ChoiceKnobStyle;
+};
+declare function Checkbox({ className, checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps };

package/dist/ui/checkbox.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/ui/checkbox.tsx
+function Checkbox({ className, checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-control-ui": "checkbox",
+		"data-choice-kind": "checkbox",
+		"data-control-family": "choice",
+		"data-slot": "root",
+		checked,
+		defaultChecked,
+		onCheckedChange,
+		indeterminate,
+		disabled,
+		readOnly,
+		required,
+		name,
+		value,
+		id,
+		className: cn("group/checkbox relative inline-flex shrink-0 cursor-pointer items-center justify-center", "data-[disabled]:cursor-not-allowed", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+			"data-control-ui": "checkbox",
+			"data-control-family": "choice",
+			"data-choice-kind": "checkbox",
+			"data-slot": "indicator",
+			className: "flex items-center justify-center data-[unchecked]:hidden",
+			children: [/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3 group-data-[indeterminate]/checkbox:hidden",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M2.5 6.5 5 9l4.5-5",
+					stroke: "currentColor",
+					strokeWidth: "1.6",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}), /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "hidden size-3 group-data-[indeterminate]/checkbox:block",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M2.75 6h6.5",
+					stroke: "currentColor",
+					strokeWidth: "1.6",
+					strokeLinecap: "round"
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/ui/code-diff.d.ts

@@ -0,0 +1,28 @@
+import { CodeDiffKnobStyle } from "../knob-contracts/code-diff-knobs.js";
+import { CodeCopyProps, CodeOverflow } from "./code.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/code-diff.d.ts
+type DiffStyle = "unified" | "split";
+type DiffIndicators = "classic" | "bars" | "none";
+type DiffLineKind = "word" | "char" | "none";
+type CodeDiffProps = Omit<ComponentProps<"figure">, "children" | "style"> & {
+  patch?: string;
+  oldText?: string;
+  newText?: string;
+  lang?: string;
+  name?: string;
+  diffStyle?: DiffStyle;
+  diffIndicators?: DiffIndicators;
+  lineDiffType?: DiffLineKind;
+  overflow?: CodeOverflow;
+  maxLineDiffLength?: number;
+  maxHeight?: string;
+  header?: boolean;
+  children?: ReactNode;
+  style?: CSSProperties & CodeDiffKnobStyle;
+};
+declare function CodeDiff({ patch, oldText, newText, lang, name, diffStyle, diffIndicators, lineDiffType, overflow, maxLineDiffLength, maxHeight, header, className, style, ...props }: CodeDiffProps): import("react").JSX.Element;
+type CodeDiffCopyProps = CodeCopyProps;
+declare function CodeDiffCopy(props: CodeDiffCopyProps): import("react").JSX.Element;
+//#endregion
+export { CodeDiff, CodeDiffCopy, CodeDiffCopyProps, CodeDiffProps, DiffIndicators, DiffLineKind, DiffStyle };