@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/src/shadcn/components/ui/toggle.tsx

@@ -4,27 +4,68 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const toggleVariants = cva(
-	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-	{
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-			},
-			size: {
-				default: "h-9 px-2 min-w-9",
-				sm: "h-8 px-1.5 min-w-8",
-				lg: "h-10 px-2.5 min-w-10",
-			},
+// Base toggle styles
+const baseToggleStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"gap-2",
+	"whitespace-nowrap",
+	// Shape
+	"rounded-md",
+	// Typography
+	"text-sm",
+	"font-medium",
+	// Interaction
+	"outline-none",
+	"transition-[color,box-shadow]",
+	// Hover
+	"hover:bg-bg-tertiary",
+	"hover:text-text-secondary",
+	// Pressed/On state
+	"data-[state=on]:bg-bg-secondary",
+	"data-[state=on]:text-text-primary",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	// SVG icons
+	"[&_svg]:pointer-events-none",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg]:shrink-0",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Invalid
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+	"aria-invalid:border-border-error",
+);
+
+const toggleVariants = cva(baseToggleStyles, {
+	variants: {
+		variant: {
+			default: cn("bg-transparent"),
+			outline: cn(
+				"border",
+				"border-border-primary",
+				"bg-transparent",
+				"shadow-xs",
+				"hover:bg-bg-secondary",
+				"hover:text-text-primary",
+			),
 		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
+		size: {
+			default: cn("h-9", "px-2", "min-w-9"),
+			sm: cn("h-8", "px-1.5", "min-w-8"),
+			lg: cn("h-10", "px-2.5", "min-w-10"),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
 
 function Toggle({
 	className,

package/src/shadcn/components/ui/tooltip.tsx

@@ -4,6 +4,38 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Tooltip content styles
+const tooltipContentStyles = cn(
+	// Layout
+	"z-50",
+	"w-fit",
+	"origin-(--radix-tooltip-content-transform-origin)",
+	// Shape
+	"rounded-md",
+	// Background & Colors
+	"bg-bg-overlay",
+	"text-text-primary_on-brand",
+	// Spacing
+	"px-3",
+	"py-1.5",
+	// Typography
+	"text-xs",
+	"text-balance",
+	// Animations - open
+	"animate-in",
+	"fade-in-0",
+	"zoom-in-95",
+	// Animations - closed
+	"data-[state=closed]:animate-out",
+	"data-[state=closed]:fade-out-0",
+	"data-[state=closed]:zoom-out-95",
+	// Slide animations
+	"data-[side=bottom]:slide-in-from-top-2",
+	"data-[side=left]:slide-in-from-right-2",
+	"data-[side=right]:slide-in-from-left-2",
+	"data-[side=top]:slide-in-from-bottom-2",
+);
+
 function TooltipProvider({
 	delayDuration = 0,
 	...props
@@ -44,14 +76,7 @@ function TooltipContent({
 			<TooltipPrimitive.Content
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
-				className={cn(
-					"bg-(--color-elements-assistive) text-(--color-elements-readable-inv) animate-in fade-in-0 zoom-in-95",
-					"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-					"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-					"data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md",
-					"px-3 py-1.5 text-xs text-balance",
-					className,
-				)}
+				className={cn(tooltipContentStyles, className)}
 				{...props}
 			>
 				{children}

package/src/shadcn/components/ui/tree.tsx

@@ -0,0 +1,233 @@
+import type { ItemInstance } from "@headless-tree/core";
+import { ChevronDownIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+type WithMeta = {
+	meta?: {
+		lastNode?: boolean;
+	};
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+interface TreeContextValue<T = any> {
+	indent: number;
+	currentItem?: ItemInstance<T>;
+	// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+	tree?: any;
+}
+
+const TreeContext = React.createContext<TreeContextValue>({
+	indent: 20,
+});
+
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+function useTreeContext<T = any>() {
+	return React.useContext(TreeContext) as TreeContextValue<T>;
+}
+
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+	indent?: number;
+	// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+	tree?: any;
+}
+
+function Tree({ indent = 20, tree, className, ...props }: TreeProps) {
+	const containerProps =
+		tree && typeof tree.getContainerProps === "function"
+			? tree.getContainerProps()
+			: {};
+	const mergedProps = { ...props, ...containerProps };
+
+	// Extract style from mergedProps to merge with our custom styles
+	const { style: propStyle, ...otherProps } = mergedProps;
+
+	// Merge styles
+	const mergedStyle = {
+		...propStyle,
+		"--tree-indent": `${indent}px`,
+		"--border": `var(--color-fg-disabled)`,
+	} as React.CSSProperties;
+
+	return (
+		<TreeContext.Provider value={{ indent, tree }}>
+			<div
+				data-slot="tree"
+				style={mergedStyle}
+				className={cn("flex flex-col", className)}
+				{...otherProps}
+			/>
+		</TreeContext.Provider>
+	);
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+interface TreeItemProps<T = any>
+	extends React.HTMLAttributes<HTMLButtonElement> {
+	item: ItemInstance<T>;
+	indent?: number;
+	asChild?: boolean;
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+function TreeItem<T = any>({
+	item,
+	className,
+	asChild,
+	children,
+	...props
+}: Omit<TreeItemProps<T>, "indent">) {
+	const { indent } = useTreeContext<T>();
+
+	const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+	const mergedProps = { ...props, ...itemProps };
+
+	// Extract style from mergedProps to merge with our custom styles
+	const { style: propStyle, ...otherProps } = mergedProps;
+
+	// Merge styles
+	const mergedStyle = {
+		...propStyle,
+		"--tree-padding": `${item.getItemMeta().level * indent}px`,
+	} as React.CSSProperties;
+
+	const Comp = asChild ? Slot.Root : "button";
+
+	return (
+		<TreeContext.Provider value={{ indent, currentItem: item }}>
+			<Comp
+				data-slot="tree-item"
+				style={mergedStyle}
+				className={cn(
+					"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+					className,
+				)}
+				data-focus={
+					typeof item.isFocused === "function"
+						? item.isFocused() || false
+						: undefined
+				}
+				data-folder={
+					typeof item.isFolder === "function"
+						? item.isFolder() || false
+						: undefined
+				}
+				data-selected={
+					typeof item.isSelected === "function"
+						? item.isSelected() || false
+						: undefined
+				}
+				data-drag-target={
+					typeof item.isDragTarget === "function"
+						? item.isDragTarget() || false
+						: undefined
+				}
+				data-search-match={
+					typeof item.isMatchingSearch === "function"
+						? item.isMatchingSearch() || false
+						: undefined
+				}
+				aria-expanded={item.isExpanded()}
+				{...otherProps}
+			>
+				{children}
+			</Comp>
+		</TreeContext.Provider>
+	);
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+interface TreeItemLabelProps<T = any>
+	extends React.HTMLAttributes<HTMLSpanElement> {
+	hideChevron?: boolean;
+	disableHover?: boolean;
+	item?: ItemInstance<T>;
+	horizontalLines?: boolean;
+}
+
+function TreeItemLabel<T>({
+	item: propItem,
+	children,
+	className,
+	disableHover,
+	horizontalLines,
+	hideChevron,
+	...props
+}: TreeItemLabelProps<T & WithMeta>) {
+	const { currentItem } = useTreeContext<T & WithMeta>();
+	const item = propItem || currentItem;
+
+	if (!item) {
+		console.warn("TreeItemLabel: No item provided via props or context");
+		return null;
+	}
+
+	const data = item.getItemData?.();
+	const isLastNode = data?.meta?.lastNode;
+	const itemMeta = item.getItemMeta();
+
+	return (
+		<span
+			data-slot="tree-item-label"
+			className={cn(
+				"group/tree-item-label relative select-text cursor-pointer border-l-2 border-l-transparent in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				!disableHover &&
+					"in-data-[selected=true]:bg-bg-secondary hover:bg-bg-secondary hover:text-text-primary in-data-[selected=true]:text-text-primary",
+				disableHover && "text-text-primary",
+				className,
+			)}
+			{...props}
+		>
+			{item.isFolder() && (
+				<ChevronDownIcon className="text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90 self-start mt-0.5" />
+			)}
+			{!item.isFolder() && horizontalLines && (
+				<div
+					className={`w-5 min-w-5 h-px border-t mt-2.25 -ml-1 self-start`}
+				></div>
+			)}
+			{item.isFolder() && item.isExpanded() && horizontalLines && (
+				<div
+					className={`absolute left-4.25 top-4 w-px min-h-full h-full border-l mt-2.25  self-start `}
+				></div>
+			)}
+			{horizontalLines && (
+				<div
+					className={`absolute left-0 top-5.5 -m-1.75 border-t w-4 ${isLastNode ? "h-full bg-inherit " : ""} ${itemMeta.level === 0 ? "hidden" : ""}`}
+				></div>
+			)}
+			{children ||
+				(typeof item.getItemName === "function" ? item.getItemName() : null)}
+		</span>
+	);
+}
+
+function TreeDragLine({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	const { tree } = useTreeContext();
+
+	if (!tree || typeof tree.getDragLineStyle !== "function") {
+		console.warn(
+			"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method",
+		);
+		return null;
+	}
+
+	const dragLine = tree.getDragLineStyle();
+	return (
+		<div
+			style={dragLine}
+			className={cn(
+				"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };

package/src/typography.css

@@ -42,6 +42,18 @@ body {
 	font-weight: var(--font-weight-normal);
 	line-height: var(--font-leading-4);
 }
+.typo-body-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-3);
+}
+.typo-label-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-3);
+}
 
 .h1 {
 	font-size: var(--font-size-4xl);