@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/shadcn/components/ui/textarea.stories.tsx

@@ -1,13 +1,105 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "#shadcn/components/ui/label";
 import { Textarea } from "#shadcn/components/ui/textarea";
 
+interface TextareaWithLabelProps {
+	label?: string;
+	description?: string;
+	invalid?: boolean;
+	disabled?: boolean;
+	placeholder?: string;
+	focused?: boolean;
+}
+
+function TextareaWithLabel({
+	label = "Description",
+	description = "This is a hint text to help user.",
+	invalid = false,
+	disabled = false,
+	placeholder = "Enter a description...",
+	focused = false,
+}: TextareaWithLabelProps) {
+	const descriptionColor = invalid
+		? "text-text-error-primary"
+		: disabled
+			? "text-text-disabled"
+			: "text-text-secondary";
+
+	return (
+		<div className="flex w-full">
+			<div className="space-y-2 w-full">
+				<Label>{label}</Label>
+				<Textarea
+					placeholder={placeholder}
+					invalid={invalid}
+					disabled={disabled}
+					autoFocus={focused}
+				/>
+				<p className={`typo-body-xs ${descriptionColor}`}>{description}</p>
+			</div>
+		</div>
+	);
+}
+
 const meta = {
 	title: "Component/Textarea",
-} satisfies Meta;
+	component: Textarea,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		placeholder: {
+			control: "text",
+		},
+		invalid: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		placeholder: "Enter a description...",
+		invalid: false,
+		disabled: false,
+	},
+} satisfies Meta<typeof Textarea>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: (args) => <Textarea {...args} />,
+} satisfies Story;
+
 export const Demo = {
-	render: () => <Textarea placeholder="Type your message here." />,
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="p-6 space-y-6">
+			{/* Default */}
+			<TextareaWithLabel />
+
+			{/* Focused */}
+			<TextareaWithLabel focused />
+
+			{/* Disabled */}
+			<TextareaWithLabel disabled />
+
+			{/* Error */}
+			<TextareaWithLabel invalid />
+
+			{/* Error + Focused */}
+			<TextareaWithLabel invalid focused />
+		</div>
+	),
 } satisfies Story;

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

@@ -1,15 +1,80 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+const textareaVariants = cva(
+	cn(
+		// Layout
+		"flex",
+		"w-full",
+		"min-h-16",
+		"field-sizing-content",
+		// Shape
+		"rounded-md",
+		// Borders
+		"border",
+		"border-border-primary",
+		// Background & Colors
+		"bg-transparent",
+		"text-base",
+		// Spacing
+		"px-3",
+		"py-2",
+		// Typography
+		"md:text-sm",
+		// Placeholder
+		"placeholder:text-text-tertiary",
+		// Transitions
+		"transition-all",
+		"duration-300",
+		"outline-none",
+		// Hover
+		"hover:border-border-primary_hover",
+		// Focus
+		"focus-visible:border-border-link",
+		// Disabled
+		"disabled:cursor-not-allowed",
+		"disabled:bg-bg-secondary",
+		"disabled:border-border-primary",
+		"disabled:text-text-disabled",
+		"disabled:placeholder:text-text-disabled",
+	),
+	{
+		variants: {
+			invalid: {
+				true: cn(
+					// Invalid border colors
+					"border-border-error",
+					"hover:border-border-error_inverse",
+					// Invalid focus states
+					"focus-visible:ring-4",
+					"focus-visible:ring-ring-red",
+					"focus-visible:border-border-error",
+					// Transitions
+					"transition-all",
+					"duration-300",
+				),
+			},
+		},
+		defaultVariants: {
+			invalid: false,
+		},
+	},
+);
+
+interface TextareaProps
+	extends React.ComponentProps<"textarea">,
+		VariantProps<typeof textareaVariants> {
+	invalid?: boolean;
+}
+
+function Textarea({ className, invalid, ...props }: TextareaProps) {
 	return (
 		<textarea
 			data-slot="textarea"
-			className={cn(
-				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-				className,
-			)}
+			className={cn(textareaVariants({ invalid }), className)}
+			aria-invalid={invalid}
 			{...props}
 		/>
 	);

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

@@ -1,20 +1,49 @@
+"use client";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { toggleVariants } from "#shadcn/components/ui/toggle";
 import { cn } from "#shadcn/lib/utils";
 
+// Toggle group styles
+const toggleGroupStyles = cn(
+	"group/toggle-group",
+	"flex",
+	"w-fit",
+	"items-center",
+	"rounded-md",
+	"bg-bg-primary",
+	"border",
+	"border-border-primary",
+);
+
+// Toggle group item styles
+const toggleGroupItemStyles = cn(
+	"min-w-0",
+	"flex-1",
+	"shrink-0",
+	"rounded-none",
+	"shadow-none",
+	"first:rounded-l-md",
+	"last:rounded-r-md",
+	"focus:z-10",
+	"focus-visible:z-10",
+	// Убираем все границы у элементов внутри группы
+	"data-[variant=outline]:border-0",
+	// Добавляем правую границу как разделитель (кроме последнего элемента)
+	"data-[variant=outline]:[&:not(:last-child)]:border-r",
+	"data-[variant=outline]:[&:not(:last-child)]:border-r-border-primary",
+);
+
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants>
 >({
-	size: "default",
-	variant: "default",
+	variant: "filled",
 });
 
 function ToggleGroup({
 	className,
 	variant,
-	size,
 	children,
 	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
@@ -23,14 +52,10 @@ function ToggleGroup({
 		<ToggleGroupPrimitive.Root
 			data-slot="toggle-group"
 			data-variant={variant}
-			data-size={size}
-			className={cn(
-				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-				className,
-			)}
+			className={cn(toggleGroupStyles, className)}
 			{...props}
 		>
-			<ToggleGroupContext.Provider value={{ variant, size }}>
+			<ToggleGroupContext.Provider value={{ variant }}>
 				{children}
 			</ToggleGroupContext.Provider>
 		</ToggleGroupPrimitive.Root>
@@ -41,7 +66,6 @@ function ToggleGroupItem({
 	className,
 	children,
 	variant,
-	size,
 	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
 	VariantProps<typeof toggleVariants>) {
@@ -51,13 +75,11 @@ function ToggleGroupItem({
 		<ToggleGroupPrimitive.Item
 			data-slot="toggle-group-item"
 			data-variant={context.variant || variant}
-			data-size={context.size || size}
 			className={cn(
 				toggleVariants({
 					variant: context.variant || variant,
-					size: context.size || size,
 				}),
-				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+				toggleGroupItemStyles,
 				className,
 			)}
 			{...props}

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

@@ -1,18 +1,105 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Bold } from "lucide-react";
+import { PanelRight } from "lucide-react";
+import { Badge } from "#shadcn/components/ui/badge";
 import { Toggle } from "#shadcn/components/ui/toggle";
 
 const meta = {
 	title: "Component/Toggle",
-} satisfies Meta;
+	component: Toggle,
+	parameters: {
+		controls: {
+			exclude: ["size", "asChild"],
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["filled", "outline"],
+		},
+	},
+	args: {
+		variant: "filled",
+		children: (
+			<>
+				<PanelRight /> Instance preview
+			</>
+		),
+		"aria-label": "Toggle panel",
+	},
+} satisfies Meta<typeof Toggle>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const WithText = {
+	args: {
+		children: (
+			<>
+				<PanelRight /> Instance preview
+			</>
+		),
+		"aria-label": "Toggle panel",
+		variant: "filled",
+	},
+} satisfies Story;
+
+export const IconOnly = {
+	args: {
+		children: <PanelRight />,
+		"aria-label": "Toggle panel",
+	},
+} satisfies Story;
+
 export const Demo = {
 	render: () => (
-		<Toggle aria-label="Toggle italic">
-			<Bold className="h-4 w-4" />
-		</Toggle>
+		<div className="p-6 min-h-screen flex justify-center items-center">
+			<div className="rounded-lg p-6 shadow-sm w-200">
+				<div className="flex items-center mb-4 justify-between">
+					<div className="w-30 text-center">Variant</div>
+					<div className="w-40 text-center text-sm text-text-secondary">
+						Default
+					</div>
+					<div className="w-40 text-center text-sm text-text-secondary">
+						Disabled
+					</div>
+				</div>
+
+				{(["filled", "outline"] as const).map((variant) => (
+					<div className="border-t border-border-separator py-4" key={variant}>
+						<div className="flex gap-4 items-center py-2 justify-between">
+							<div className="w-30 text-sm text-text-secondary">
+								<Badge variant="outline" className="text-xs">
+									{variant}
+								</Badge>
+							</div>
+							<div className="w-40 flex gap-3 justify-center items-center">
+								<Toggle variant={variant} aria-label="Toggle with text">
+									<PanelRight /> Instance preview
+								</Toggle>
+								<Toggle variant={variant} aria-label="Toggle icon only">
+									<PanelRight />
+								</Toggle>
+							</div>
+							<div className="w-40 flex gap-3 justify-center items-center">
+								<Toggle
+									variant={variant}
+									disabled
+									aria-label="Toggle with text"
+								>
+									<PanelRight /> Instance preview
+								</Toggle>
+								<Toggle
+									variant={variant}
+									disabled
+									aria-label="Toggle icon only"
+								>
+									<PanelRight />
+								</Toggle>
+							</div>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
 	),
 } satisfies Story;

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

@@ -1,44 +1,117 @@
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * 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",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
+// Base toggle styles
+const baseToggleStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"gap-2",
+	"whitespace-nowrap",
+	// Shape
+	"rounded",
+	"h-6",
+	"px-2",
+	"border",
+	"border-transparent",
+	// Typography
+	"typo-body",
+	// Colors
+	"bg-bg-primary",
+	"text-text-secondary",
+	// Interaction
+	"outline-none",
+	"transition-colors",
+	"cursor-pointer",
+	// Hover
+	"hover:bg-bg-secondary",
+	// SVG icons
+	"[&_svg]:pointer-events-none",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg]:shrink-0",
+	"[&_svg]:text-text-secondary",
+	"data-[state=on]:[&_svg]:text-text-primary",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Invalid
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+);
+
+const toggleVariants = cva(baseToggleStyles, {
+	variants: {
+		variant: {
+			filled: cn("data-[state=on]:bg-bg-tertiary"),
+			outline: cn(
+				"data-[state=on]:border-border-separator",
+				"data-[state=on]:bg-bg-secondary",
+			),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "filled",
+	},
+});
+
+// Рекурсивно проверяем наличие текста в children
+function hasTextContent(children: React.ReactNode): boolean {
+	const childArray = React.Children.toArray(children);
+
+	for (const child of childArray) {
+		// Проверяем строки и числа
+		if (typeof child === "string" || typeof child === "number") {
+			// Игнорируем пустые строки и пробелы
+			if (String(child).trim()) {
+				return true;
+			}
+		}
+
+		// Проверяем React элементы (включая фрагменты)
+		if (
+			React.isValidElement(child) &&
+			child.props &&
+			typeof child.props === "object" &&
+			"children" in child.props
+		) {
+			if (hasTextContent(child.props.children as React.ReactNode)) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
 
 function Toggle({
 	className,
 	variant,
-	size,
+	children,
 	...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> &
 	VariantProps<typeof toggleVariants>) {
+	// Автоматически определяем, есть ли текст помимо иконки
+	const hasText = hasTextContent(children);
+
 	return (
 		<TogglePrimitive.Root
 			data-slot="toggle"
-			className={cn(toggleVariants({ variant, size, className }))}
+			className={cn(
+				toggleVariants({ variant }),
+				!hasText && "w-6 p-1",
+				className,
+			)}
 			{...props}
-		/>
+		>
+			{children}
+		</TogglePrimitive.Root>
 	);
 }
 

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

@@ -1,8 +1,41 @@
+"use client";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 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
@@ -43,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}