@you-agent-factory/components 0.0.0

package/src/forms/package-enum-select.tsx

@@ -0,0 +1,185 @@
+import { type ComponentProps, useState } from "react";
+
+import {
+  Select,
+  SELECT_EMPTY_STATE_VALUE,
+  SelectContent,
+  SelectEmpty,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./package-select";
+
+export const ENUM_SELECT_EMPTY_VALUE = "__enum-select-empty__";
+
+export interface EnumSelectOption {
+  disabled?: boolean;
+  label: string;
+  value: string;
+}
+
+type EnumSelectAriaProps = Pick<
+  ComponentProps<typeof SelectTrigger>,
+  "aria-describedby" | "aria-invalid" | "aria-label" | "aria-labelledby"
+>;
+
+export interface EnumSelectProps extends EnumSelectAriaProps {
+  className?: string;
+  disabled?: boolean;
+  emptyOptionsLabel?: string;
+  id: string;
+  loading?: boolean;
+  loadingLabel?: string;
+  onValueChange: (value: string) => void;
+  options: readonly EnumSelectOption[];
+  placeholder?: string;
+  value: string;
+}
+
+export function EnumSelect({
+  className,
+  disabled,
+  emptyOptionsLabel = "No options available",
+  id,
+  loading = false,
+  loadingLabel = "Loading options...",
+  onValueChange,
+  options,
+  placeholder,
+  value,
+  ...aria
+}: EnumSelectProps) {
+  const isEmpty = !loading && options.length === 0;
+  const resolvedPlaceholder = loading ? loadingLabel : placeholder;
+
+  return (
+    <Select
+      disabled={disabled || loading}
+      onValueChange={onValueChange}
+      value={loading ? SELECT_EMPTY_STATE_VALUE : value}
+    >
+      <SelectTrigger
+        aria-busy={loading || undefined}
+        className={className}
+        id={id}
+        {...aria}
+      >
+        <SelectValue placeholder={resolvedPlaceholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {loading ? (
+          <SelectEmpty>{loadingLabel}</SelectEmpty>
+        ) : isEmpty ? (
+          <SelectEmpty>{emptyOptionsLabel}</SelectEmpty>
+        ) : (
+          options.map((option) => (
+            <SelectItem
+              disabled={option.disabled}
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export interface OptionalEnumSelectProps extends EnumSelectAriaProps {
+  className?: string;
+  disabled?: boolean;
+  emptyOptionLabel: string;
+  id: string;
+  onValueChange: (value: string | null) => void;
+  options: readonly EnumSelectOption[];
+  value: string | null | undefined;
+}
+
+export function OptionalEnumSelect({
+  className,
+  disabled,
+  emptyOptionLabel,
+  id,
+  onValueChange,
+  options,
+  value,
+  ...aria
+}: OptionalEnumSelectProps) {
+  return (
+    <Select
+      disabled={disabled}
+      onValueChange={(nextValue) =>
+        onValueChange(nextValue === ENUM_SELECT_EMPTY_VALUE ? null : nextValue)
+      }
+      value={value ?? ENUM_SELECT_EMPTY_VALUE}
+    >
+      <SelectTrigger className={className} id={id} {...aria}>
+        <SelectValue placeholder={emptyOptionLabel} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={ENUM_SELECT_EMPTY_VALUE}>
+          {emptyOptionLabel}
+        </SelectItem>
+        {options.map((option) => (
+          <SelectItem
+            disabled={option.disabled}
+            key={option.value}
+            value={option.value}
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export interface ResetEnumSelectProps extends EnumSelectAriaProps {
+  className?: string;
+  disabled?: boolean;
+  id: string;
+  onValueChange: (value: string) => void;
+  options: readonly EnumSelectOption[];
+  placeholder: string;
+}
+
+export function ResetEnumSelect({
+  className,
+  disabled,
+  id,
+  onValueChange,
+  options,
+  placeholder,
+  ...aria
+}: ResetEnumSelectProps) {
+  const [instanceKey, setInstanceKey] = useState(0);
+
+  return (
+    <Select
+      key={instanceKey}
+      disabled={disabled}
+      onValueChange={(nextValue) => {
+        onValueChange(nextValue);
+        setInstanceKey((current) => current + 1);
+      }}
+      value={undefined}
+    >
+      <SelectTrigger className={className} id={id} {...aria}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem
+            disabled={option.disabled}
+            key={option.value}
+            value={option.value}
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/forms/package-file-input.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+export type PackageFileInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+>;
+
+const FILE_INPUT_CLASS =
+  "block w-full rounded-xl px-3 py-3 text-sm text-on-surface-variant outline-none focus-visible:ring-2 focus-visible:ring-af-focus-ring file:mr-3 file:rounded-lg file:border-0 file:bg-surface-container-high file:px-3 file:py-2 file:text-sm file:font-semibold file:text-on-surface hover:bg-af-overlay aria-invalid:border-af-danger-border aria-invalid:ring-2 aria-invalid:ring-af-danger-border disabled:cursor-not-allowed disabled:bg-surface-container-low disabled:text-on-surface-disabled";
+
+export const PackageFileInput = forwardRef<
+  HTMLInputElement,
+  PackageFileInputProps
+>(function PackageFileInput({ className, ...props }, ref) {
+  return (
+    <input
+      className={cn(FILE_INPUT_CLASS, className)}
+      ref={ref}
+      type="file"
+      {...props}
+    />
+  );
+});

package/src/forms/package-form-field.tsx

@@ -0,0 +1,202 @@
+import {
+  type ElementType,
+  forwardRef,
+  type FieldsetHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../utilities/cn";
+
+export type FormFieldMessageIds = {
+  descriptionId?: string;
+  helperId?: string;
+  warningId?: string;
+  errorId?: string;
+  successId?: string;
+};
+
+export function buildFormFieldAriaDescribedBy(
+  messageIds: FormFieldMessageIds,
+): string | undefined {
+  const ids = [
+    messageIds.descriptionId,
+    messageIds.helperId,
+    messageIds.warningId,
+    messageIds.errorId,
+    messageIds.successId,
+  ].filter((id): id is string => Boolean(id));
+
+  return ids.length > 0 ? ids.join(" ") : undefined;
+}
+
+export type FormFieldProps = HTMLAttributes<HTMLDivElement>;
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  function FormField({ className, ...props }, ref) {
+    return <div className={cn("space-y-2", className)} ref={ref} {...props} />;
+  },
+);
+
+export type FormLabelProps = HTMLAttributes<HTMLElement> & {
+  as?: ElementType;
+  children?: ReactNode;
+  htmlFor?: string;
+};
+
+const FORM_LABEL_CLASS = "block text-sm font-semibold text-on-surface";
+
+export const FormLabel = forwardRef<HTMLElement, FormLabelProps>(
+  function FormLabel({ as: Component = "label", className, ...props }, ref) {
+    return (
+      <Component
+        className={cn(FORM_LABEL_CLASS, className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface FormDescriptionProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  variant?: "body" | "supporting";
+}
+
+const FORM_BODY_TEXT_CLASS = "m-0 text-body-medium text-on-surface";
+const FORM_SUPPORTING_TEXT_CLASS =
+  "m-0 text-body-small text-on-surface-variant";
+
+export const FormDescription = forwardRef<HTMLElement, FormDescriptionProps>(
+  function FormDescription(
+    { as: Component = "p", className, variant = "supporting", ...props },
+    ref,
+  ) {
+    return (
+      <Component
+        className={cn(
+          variant === "body" ? FORM_BODY_TEXT_CLASS : FORM_SUPPORTING_TEXT_CLASS,
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface FormHelperTextProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+}
+
+export const FormHelperText = forwardRef<HTMLElement, FormHelperTextProps>(
+  function FormHelperText(
+    { as: Component = "p", className, ...props },
+    ref,
+  ) {
+    return (
+      <Component
+        className={cn(FORM_SUPPORTING_TEXT_CLASS, className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface FormErrorProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  role?: "alert" | "status";
+}
+
+export const FormError = forwardRef<HTMLElement, FormErrorProps>(
+  function FormError(
+    { as: Component = "p", className, role = "alert", ...props },
+    ref,
+  ) {
+    return (
+      <Component
+        className={cn(
+          "m-0 text-body-small font-medium text-on-error-container",
+          className,
+        )}
+        ref={ref}
+        role={role}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface FormWarningProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  role?: "alert" | "status";
+}
+
+export const FormWarning = forwardRef<HTMLElement, FormWarningProps>(
+  function FormWarning(
+    { as: Component = "p", className, role, ...props },
+    ref,
+  ) {
+    return (
+      <Component
+        className={cn(
+          "m-0 text-body-small font-medium text-on-warning-container",
+          className,
+        )}
+        ref={ref}
+        role={role}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface FormSuccessProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  role?: "alert" | "status";
+}
+
+export const FormSuccess = forwardRef<HTMLElement, FormSuccessProps>(
+  function FormSuccess(
+    { as: Component = "p", className, role = "status", ...props },
+    ref,
+  ) {
+    return (
+      <Component
+        className={cn(
+          "m-0 text-body-small font-medium text-on-success-container",
+          className,
+        )}
+        ref={ref}
+        role={role}
+        {...props}
+      />
+    );
+  },
+);
+
+export type FormFieldGroupProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+
+export const FormFieldGroup = forwardRef<HTMLFieldSetElement, FormFieldGroupProps>(
+  function FormFieldGroup({ className, ...props }, ref) {
+    return (
+      <fieldset
+        className={cn("m-0 space-y-2 border-0 p-0", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export type FormFieldGroupLabelProps = HTMLAttributes<HTMLLegendElement>;
+
+export const FormFieldGroupLabel = forwardRef<
+  HTMLLegendElement,
+  FormFieldGroupLabelProps
+>(function FormFieldGroupLabel({ className, ...props }, ref) {
+  return (
+    <legend className={cn(FORM_LABEL_CLASS, "px-0", className)} ref={ref} {...props} />
+  );
+});

package/src/forms/package-input.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+export type PackageInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+const INPUT_CLASS =
+  "flex min-h-11 w-full rounded-xl border border-outline bg-surface-container-high px-3 py-2.5 text-sm text-on-surface outline-none transition-colors placeholder:text-on-surface-disabled focus-visible:border-outline-variant focus-visible:ring-2 focus-visible:ring-af-focus-ring aria-invalid:border-af-danger-border aria-invalid:ring-2 aria-invalid:ring-af-danger-border disabled:cursor-not-allowed disabled:border-outline disabled:bg-surface-container-low disabled:text-on-surface-disabled";
+
+export function inputVariants({ className }: { className?: string } = {}) {
+  return cn(INPUT_CLASS, className);
+}
+
+export const PackageInput = forwardRef<HTMLInputElement, PackageInputProps>(
+  function PackageInput({ className, type = "text", ...props }, ref) {
+    return (
+      <input
+        className={inputVariants({ className })}
+        ref={ref}
+        type={type}
+        {...props}
+      />
+    );
+  },
+);

package/src/forms/package-native-select.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type SelectHTMLAttributes } from "react";
+
+import { inputVariants } from "./package-input";
+import { SelectChevronDownIcon } from "./select-icons";
+
+export type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+
+export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+  function NativeSelect({ children, className, ...props }, ref) {
+    return (
+      <div className="relative">
+        <select
+          className={inputVariants({
+            className: `appearance-none pr-10 ${className ?? ""}`,
+          })}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </select>
+        <SelectChevronDownIcon className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-af-text-subtle" />
+      </div>
+    );
+  },
+);

package/src/forms/package-select.tsx

@@ -0,0 +1,209 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+  type ComponentProps,
+  type ComponentRef,
+  forwardRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../utilities/cn";
+import { inputVariants } from "./package-input";
+import { SelectCheckIcon, SelectChevronDownIcon } from "./select-icons";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;
+
+export const SelectTrigger = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(function SelectTrigger({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        inputVariants({
+          className:
+            "flex items-center justify-between gap-2 text-left data-[placeholder]:text-on-surface-disabled [&>span]:line-clamp-1",
+        }),
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <SelectChevronDownIcon className="h-4 w-4 shrink-0 text-af-text-subtle" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+
+export type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content>;
+
+// tailwind-exception: intrinsic-sizing
+const SELECT_CONTENT_POPPER_CLASS = "min-w-[var(--radix-select-trigger-width)]";
+// tailwind-exception: intrinsic-sizing
+const SELECT_VIEWPORT_POPPER_CLASS =
+  "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]";
+
+export function SelectContent({
+  children,
+  className,
+  onCloseAutoFocus,
+  position = "popper",
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={cn(
+          "relative z-50 max-h-72 overflow-hidden rounded-xl border border-outline bg-surface-container-high text-on-surface shadow-af-panel data-[state=closed]:animate-out data-[state=open]:animate-in",
+          position === "popper" && SELECT_CONTENT_POPPER_CLASS,
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        onCloseAutoFocus={onCloseAutoFocus}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" && SELECT_VIEWPORT_POPPER_CLASS,
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export type SelectLabelProps = ComponentProps<typeof SelectPrimitive.Label>;
+
+export function SelectLabel({ className, ...props }: SelectLabelProps) {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        "px-2 py-1.5 text-xs font-semibold uppercase tracking-[0.08em] text-on-surface-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const SELECT_EMPTY_STATE_VALUE = "__select-empty-state__";
+
+export type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
+
+export const SelectItem = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Item>,
+  SelectItemProps
+>(function SelectItem({ children, className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none focus:bg-surface-container-highest data-[disabled]:pointer-events-none data-[disabled]:text-on-surface-disabled data-[highlighted]:bg-surface-container-highest",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <SelectCheckIcon className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText className="line-clamp-2 break-words">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
+
+export type SelectEmptyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function SelectEmpty({ children, className }: SelectEmptyProps) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg px-2 py-2 text-sm text-on-surface-disabled data-[disabled]:pointer-events-none data-[disabled]:text-on-surface-disabled",
+        className,
+      )}
+      disabled
+      value={SELECT_EMPTY_STATE_VALUE}
+    >
+      <SelectPrimitive.ItemText className="line-clamp-2 break-words">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export type SelectSeparatorProps = ComponentProps<
+  typeof SelectPrimitive.Separator
+>;
+
+export function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-outline", className)}
+      {...props}
+    />
+  );
+}
+
+export interface SelectFieldProps {
+  children: ReactNode;
+  className?: string;
+  description?: ReactNode;
+  descriptionId?: string;
+  error?: ReactNode;
+  errorId?: string;
+  inputId: string;
+  label: ReactNode;
+}
+
+export function SelectField({
+  children,
+  className,
+  description,
+  descriptionId,
+  error,
+  errorId,
+  inputId,
+  label,
+}: SelectFieldProps) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <label
+        className="text-xs font-bold uppercase tracking-[0.08em] text-af-text-subtle"
+        htmlFor={inputId}
+      >
+        {label}
+      </label>
+      {children}
+      {description ? (
+        <p className="m-0 text-sm text-af-text-muted" id={descriptionId}>
+          {description}
+        </p>
+      ) : null}
+      {error ? (
+        <p
+          className="m-0 text-sm font-medium text-on-error-container"
+          id={errorId}
+          role="alert"
+        >
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/forms/package-textarea.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+import { inputVariants } from "./package-input";
+
+const TEXTAREA_PLAIN_CLASS =
+  "m-0 w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 text-on-surface outline-none";
+
+const TEXTAREA_FIELD_CLASS =
+  "min-h-28 max-h-52 resize-none overflow-y-auto py-3";
+
+export type PackageTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  variant?: "field" | "plain";
+};
+
+export function textareaVariants({ className }: { className?: string } = {}) {
+  return inputVariants({ className: cn(TEXTAREA_FIELD_CLASS, className) });
+}
+
+export const PackageTextarea = forwardRef<
+  HTMLTextAreaElement,
+  PackageTextareaProps
+>(function PackageTextarea({ className, variant = "field", ...props }, ref) {
+  return (
+    <textarea
+      className={
+        variant === "plain"
+          ? cn(TEXTAREA_PLAIN_CLASS, className)
+          : textareaVariants({ className })
+      }
+      ref={ref}
+      {...props}
+    />
+  );
+});