@you-agent-factory/components 0.0.0 → 0.0.2

package/src/feedback/skeleton.tsx

@@ -1,16 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-
-export function Skeleton({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn("animate-pulse rounded-xl bg-af-overlay", className)}
-      {...props}
-    />
-  );
-}

package/src/forms/index.ts

@@ -1,73 +0,0 @@
-/** Stable category path for `@you-agent-factory/components/forms`. */
-export const COMPONENTS_CATEGORY = "forms" as const;
-
-export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
-export { PackageCheckbox } from "./package-checkbox";
-export type { PackageCheckboxProps } from "./package-checkbox";
-export {
-  EnumSelect,
-  ENUM_SELECT_EMPTY_VALUE,
-  OptionalEnumSelect,
-  ResetEnumSelect,
-} from "./package-enum-select";
-export type {
-  EnumSelectOption,
-  EnumSelectProps,
-  OptionalEnumSelectProps,
-  ResetEnumSelectProps,
-} from "./package-enum-select";
-export { PackageFileInput } from "./package-file-input";
-export type { PackageFileInputProps } from "./package-file-input";
-export { PackageInput, inputVariants } from "./package-input";
-export type { PackageInputProps } from "./package-input";
-export { NativeSelect } from "./package-native-select";
-export type { NativeSelectProps } from "./package-native-select";
-export {
-  Select,
-  SELECT_EMPTY_STATE_VALUE,
-  SelectContent,
-  SelectEmpty,
-  SelectField,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "./package-select";
-export type {
-  SelectContentProps,
-  SelectEmptyProps,
-  SelectFieldProps,
-  SelectItemProps,
-  SelectLabelProps,
-  SelectSeparatorProps,
-  SelectTriggerProps,
-} from "./package-select";
-export { PackageTextarea, textareaVariants } from "./package-textarea";
-export type { PackageTextareaProps } from "./package-textarea";
-export {
-  buildFormFieldAriaDescribedBy,
-  FormDescription,
-  FormError,
-  FormField,
-  FormFieldGroup,
-  FormFieldGroupLabel,
-  FormHelperText,
-  FormLabel,
-  FormSuccess,
-  FormWarning,
-} from "./package-form-field";
-export type {
-  FormDescriptionProps,
-  FormErrorProps,
-  FormFieldGroupLabelProps,
-  FormFieldGroupProps,
-  FormFieldMessageIds,
-  FormFieldProps,
-  FormHelperTextProps,
-  FormLabelProps,
-  FormSuccessProps,
-  FormWarningProps,
-} from "./package-form-field";

package/src/forms/package-checkbox.tsx

@@ -1,50 +0,0 @@
-import { forwardRef, type InputHTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-
-export type PackageCheckboxProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "type"
->;
-
-const CHECKBOX_ROOT_CLASS =
-  "relative inline-flex size-4 shrink-0 items-center justify-center [&:has(:disabled)]:cursor-not-allowed";
-
-function CheckboxCheckIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="size-3 opacity-0"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2.5}
-      viewBox="0 0 24 24"
-    >
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}
-
-export const PackageCheckbox = forwardRef<
-  HTMLInputElement,
-  PackageCheckboxProps
->(function PackageCheckbox({ className, ...props }, ref) {
-  return (
-    <span className={cn(CHECKBOX_ROOT_CLASS, className)}>
-      <input
-        className="peer sr-only"
-        ref={ref}
-        type="checkbox"
-        {...props}
-      />
-      <span
-        aria-hidden="true"
-        className="pointer-events-none flex size-4 items-center justify-center rounded border border-outline bg-surface-container-high text-on-primary transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-af-focus-ring peer-disabled:border-outline peer-disabled:bg-surface-container-low peer-checked:border-primary peer-checked:bg-primary peer-aria-invalid:ring-2 peer-aria-invalid:ring-af-danger-border peer-checked:[&_svg]:opacity-100"
-      >
-        <CheckboxCheckIcon />
-      </span>
-    </span>
-  );
-});

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

@@ -1,185 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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>
-    );
-  },
-);