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

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

@@ -1,3 +1,4 @@
+"use client";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
@@ -13,6 +14,18 @@ import {
 import { Label } from "#shadcn/components/ui/label";
 import { cn } from "#shadcn/lib/utils";
 
+// Form item styles
+const formItemStyles = cn("grid", "gap-2");
+
+// Form label error styles
+const formLabelErrorStyles = cn("data-[error=true]:text-text-error-primary");
+
+// Form description styles
+const formDescriptionStyles = cn("text-text-secondary", "text-sm");
+
+// Form message styles
+const formMessageStyles = cn("text-text-error-primary", "text-sm");
+
 const Form = FormProvider;
 
 type FormFieldContextValue<
@@ -26,20 +39,18 @@ const FormFieldContext = React.createContext<FormFieldContextValue>(
 	{} as FormFieldContextValue,
 );
 
-const FormField = <
+function FormField<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-	...props
-}: ControllerProps<TFieldValues, TName>) => {
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
 	return (
 		<FormFieldContext.Provider value={{ name: props.name }}>
 			<Controller {...props} />
 		</FormFieldContext.Provider>
 	);
-};
+}
 
-const useFormField = () => {
+function useFormField() {
 	const fieldContext = React.useContext(FormFieldContext);
 	const itemContext = React.useContext(FormItemContext);
 	const { getFieldState } = useFormContext();
@@ -60,7 +71,7 @@ const useFormField = () => {
 		formMessageId: `${id}-form-item-message`,
 		...fieldState,
 	};
-};
+}
 
 type FormItemContextValue = {
 	id: string;
@@ -77,7 +88,7 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 		<FormItemContext.Provider value={{ id }}>
 			<div
 				data-slot="form-item"
-				className={cn("grid gap-2", className)}
+				className={cn(formItemStyles, className)}
 				{...props}
 			/>
 		</FormItemContext.Provider>
@@ -94,7 +105,7 @@ function FormLabel({
 		<Label
 			data-slot="form-label"
 			data-error={!!error}
-			className={cn("data-[error=true]:text-destructive", className)}
+			className={cn(formLabelErrorStyles, className)}
 			htmlFor={formItemId}
 			{...props}
 		/>
@@ -127,7 +138,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 		<p
 			data-slot="form-description"
 			id={formDescriptionId}
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn(formDescriptionStyles, className)}
 			{...props}
 		/>
 	);
@@ -145,7 +156,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 		<p
 			data-slot="form-message"
 			id={formMessageId}
-			className={cn("text-destructive text-sm", className)}
+			className={cn(formMessageStyles, className)}
 			{...props}
 		>
 			{body}

package/src/shadcn/components/ui/hover-card.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import type * as React from "react";
 
@@ -30,7 +31,7 @@ function HoverCardContent({
 				align={align}
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 dropdown-menu-shadow outline-hidden",
 					className,
 				)}
 				{...props}

package/src/shadcn/components/ui/input-otp.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
 import * as React from "react";

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

@@ -1,8 +1,10 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircleX, Copy, Mail } from "lucide-react";
 import { Badge } from "#shadcn/components/ui/badge";
 import { Input } from "#shadcn/components/ui/input";
 import { Label } from "#shadcn/components/ui/label";
+import { IconButton } from "../../../components/icon-button";
 
 interface InputWithLabelProps {
 	label?: string;
@@ -43,7 +45,7 @@ function InputWithLabel({
 					invalid={invalid}
 					disabled={disabled}
 				/>
-				<p className={`typo-body ${descriptionColor}`}>{description}</p>
+				<p className={`typo-body-xs ${descriptionColor}`}>{description}</p>
 			</div>
 		</div>
 	);
@@ -52,21 +54,72 @@ function InputWithLabel({
 const meta = {
 	title: "Component/Input",
 	component: Input,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		type: {
+			control: "select",
+			options: ["text", "password"],
+		},
+		placeholder: {
+			control: "text",
+		},
+		invalid: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+		hasPrefix: {
+			control: "boolean",
+			name: "hasPrefix",
+		},
+		hasSuffix: {
+			control: "boolean",
+			name: "hasSuffix",
+		},
+	},
+	args: {
+		type: "text",
+		placeholder: "Placeholder",
+		invalid: false,
+		disabled: false,
+		hasPrefix: false,
+		hasSuffix: false,
+	},
 } satisfies Meta<typeof Input>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default = {
-	args: {
-		type: "text",
-		placeholder: "Placeholder",
-		leftSlot: undefined,
-		rightSlot: undefined,
+	tags: ["!dev"],
+	render: (args) => {
+		const { hasPrefix, hasSuffix, ...rest } = args as typeof args & {
+			hasPrefix?: boolean;
+			hasSuffix?: boolean;
+		};
+		return (
+			<Input
+				{...rest}
+				{...(hasPrefix && { prefixValue: "https://" })}
+				{...(hasSuffix && { suffix: ".com" })}
+			/>
+		);
 	},
 } satisfies Story;
 
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
 		<div className="p-6 min-h-screen flex justify-center items-center">
 			<div className="rounded-lg p-6 shadow-sm w-280">
@@ -126,14 +179,26 @@ export const Demo = {
 										{variant === "right" && (
 											<Input
 												placeholder="Placeholder"
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+												}
 											/>
 										)}
 										{variant === "both" && (
 											<Input
 												placeholder="Placeholder"
 												leftSlot={<Mail />}
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+												}
 											/>
 										)}
 										{variant === "left-double-right" && (
@@ -142,10 +207,18 @@ export const Demo = {
 												className="pr-15"
 												leftSlot={<Mail />}
 												rightSlot={
-													<div className="flex items-center gap-2">
-														<CircleX />
-														<Copy />
-													</div>
+													<>
+														<IconButton
+															icon={<CircleX />}
+															aria-label="Clear"
+															variant="link"
+														/>
+														<IconButton
+															icon={<Copy />}
+															aria-label="Copy"
+															variant="link"
+														/>
+													</>
 												}
 												suffix="milliseconds"
 											/>
@@ -167,7 +240,13 @@ export const Demo = {
 										{variant === "right" && (
 											<Input
 												placeholder="Placeholder"
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+												}
 												invalid
 											/>
 										)}
@@ -175,15 +254,35 @@ export const Demo = {
 											<Input
 												placeholder="Placeholder"
 												leftSlot={<Mail />}
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+												}
 												invalid
 											/>
 										)}
 										{variant === "left-double-right" && (
 											<Input
 												placeholder="Placeholder"
+												className="pr-15"
 												leftSlot={<Mail />}
-												rightSlot={<CircleX />}
+												rightSlot={
+													<>
+														<IconButton
+															icon={<CircleX />}
+															aria-label="Clear"
+															variant="link"
+														/>
+														<IconButton
+															icon={<Copy />}
+															aria-label="Copy"
+															variant="link"
+														/>
+													</>
+												}
 												suffix="milliseconds"
 												invalid
 											/>
@@ -205,7 +304,14 @@ export const Demo = {
 										{variant === "right" && (
 											<Input
 												placeholder="Aidbox"
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+														disabled
+													/>
+												}
 												disabled
 											/>
 										)}
@@ -213,15 +319,38 @@ export const Demo = {
 											<Input
 												placeholder="Aidbox"
 												leftSlot={<Mail />}
-												rightSlot={<CircleX />}
+												rightSlot={
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+														disabled
+													/>
+												}
 												disabled
 											/>
 										)}
 										{variant === "left-double-right" && (
 											<Input
 												placeholder="Aidbox"
+												className="pr-15"
 												leftSlot={<Mail />}
-												rightSlot={<CircleX />}
+												rightSlot={
+													<>
+														<IconButton
+															icon={<CircleX />}
+															aria-label="Clear"
+															variant="link"
+															disabled
+														/>
+														<IconButton
+															icon={<Copy />}
+															aria-label="Copy"
+															variant="link"
+															disabled
+														/>
+													</>
+												}
 												suffix="milliseconds"
 												disabled
 											/>
@@ -288,21 +417,46 @@ export const Demo = {
 									{variant === "right" && (
 										<InputWithLabel
 											placeholder="Placeholder"
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+												/>
+											}
 										/>
 									)}
 									{variant === "both" && (
 										<InputWithLabel
 											placeholder="Placeholder"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+												/>
+											}
 										/>
 									)}
 									{variant === "left-double-right" && (
 										<InputWithLabel
 											placeholder="Placeholder"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<>
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+													<IconButton
+														icon={<Copy />}
+														aria-label="Copy"
+														variant="link"
+													/>
+												</>
+											}
 											suffix="milliseconds"
 										/>
 									)}
@@ -323,7 +477,13 @@ export const Demo = {
 									{variant === "right" && (
 										<InputWithLabel
 											placeholder="Placeholder"
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+												/>
+											}
 											invalid
 										/>
 									)}
@@ -331,7 +491,13 @@ export const Demo = {
 										<InputWithLabel
 											placeholder="Placeholder"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+												/>
+											}
 											invalid
 										/>
 									)}
@@ -339,7 +505,20 @@ export const Demo = {
 										<InputWithLabel
 											placeholder="Placeholder"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<>
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+													/>
+													<IconButton
+														icon={<Copy />}
+														aria-label="Copy"
+														variant="link"
+													/>
+												</>
+											}
 											suffix="milliseconds"
 											invalid
 										/>
@@ -361,7 +540,14 @@ export const Demo = {
 									{variant === "right" && (
 										<InputWithLabel
 											placeholder="Aidbox"
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+													disabled
+												/>
+											}
 											disabled
 										/>
 									)}
@@ -369,7 +555,14 @@ export const Demo = {
 										<InputWithLabel
 											placeholder="Aidbox"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<IconButton
+													icon={<CircleX />}
+													aria-label="Clear"
+													variant="link"
+													disabled
+												/>
+											}
 											disabled
 										/>
 									)}
@@ -377,7 +570,22 @@ export const Demo = {
 										<InputWithLabel
 											placeholder="Aidbox"
 											leftSlot={<Mail />}
-											rightSlot={<CircleX />}
+											rightSlot={
+												<>
+													<IconButton
+														icon={<CircleX />}
+														aria-label="Clear"
+														variant="link"
+														disabled
+													/>
+													<IconButton
+														icon={<Copy />}
+														aria-label="Copy"
+														variant="link"
+														disabled
+													/>
+												</>
+											}
 											suffix="milliseconds"
 											disabled
 										/>