@you-agent-factory/components 0.0.0 → 0.0.2

package/dist/chunks/package-form-field.js

@@ -0,0 +1,546 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { c as cn } from "./cn.js";
+import * as SelectPrimitive from "@radix-ui/react-select";
+const CHECKBOX_ROOT_CLASS = "relative inline-flex size-4 shrink-0 items-center justify-center [&:has(:disabled)]:cursor-not-allowed";
+function CheckboxCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "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",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+const PackageCheckbox = forwardRef(function PackageCheckbox2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(CHECKBOX_ROOT_CLASS, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "peer sr-only",
+        ref,
+        type: "checkbox",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "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",
+        children: /* @__PURE__ */ jsx(CheckboxCheckIcon, {})
+      }
+    )
+  ] });
+});
+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";
+function inputVariants({ className } = {}) {
+  return cn(INPUT_CLASS, className);
+}
+const PackageInput = forwardRef(
+  function PackageInput2({ className, type = "text", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: inputVariants({ className }),
+        ref,
+        type,
+        ...props
+      }
+    );
+  }
+);
+function SelectChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.8,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function SelectCheckIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    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,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(SelectChevronDownIcon, { className: "h-4 w-4 shrink-0 text-af-text-subtle" }) })
+      ]
+    }
+  );
+});
+const SELECT_CONTENT_POPPER_CLASS = "min-w-[var(--radix-select-trigger-width)]";
+const SELECT_VIEWPORT_POPPER_CLASS = "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]";
+function SelectContent({
+  children,
+  className,
+  onCloseAutoFocus,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    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,
+      position,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && SELECT_VIEWPORT_POPPER_CLASS
+          ),
+          children
+        }
+      )
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      className: cn(
+        "px-2 py-1.5 text-xs font-semibold uppercase tracking-[0.08em] text-on-surface-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const SELECT_EMPTY_STATE_VALUE = "__select-empty-state__";
+const SelectItem = forwardRef(function SelectItem2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    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,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(SelectCheckIcon, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { className: "line-clamp-2 break-words", children })
+      ]
+    }
+  );
+});
+function SelectEmpty({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    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: true,
+      value: SELECT_EMPTY_STATE_VALUE,
+      children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { className: "line-clamp-2 break-words", children })
+    }
+  );
+}
+function SelectSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      className: cn("-mx-1 my-1 h-px bg-outline", className),
+      ...props
+    }
+  );
+}
+function SelectField({
+  children,
+  className,
+  description,
+  descriptionId,
+  error,
+  errorId,
+  inputId,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "text-xs font-bold uppercase tracking-[0.08em] text-af-text-subtle",
+        htmlFor: inputId,
+        children: label
+      }
+    ),
+    children,
+    description ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-af-text-muted", id: descriptionId, children: description }) : null,
+    error ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "m-0 text-sm font-medium text-on-error-container",
+        id: errorId,
+        role: "alert",
+        children: error
+      }
+    ) : null
+  ] });
+}
+const ENUM_SELECT_EMPTY_VALUE = "__enum-select-empty__";
+function EnumSelect({
+  className,
+  disabled,
+  emptyOptionsLabel = "No options available",
+  id,
+  loading = false,
+  loadingLabel = "Loading options...",
+  onValueChange,
+  options,
+  placeholder,
+  value,
+  ...aria
+}) {
+  const isEmpty = !loading && options.length === 0;
+  const resolvedPlaceholder = loading ? loadingLabel : placeholder;
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      disabled: disabled || loading,
+      onValueChange,
+      value: loading ? SELECT_EMPTY_STATE_VALUE : value,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            "aria-busy": loading || void 0,
+            className,
+            id,
+            ...aria,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: resolvedPlaceholder })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: loading ? /* @__PURE__ */ jsx(SelectEmpty, { children: loadingLabel }) : isEmpty ? /* @__PURE__ */ jsx(SelectEmpty, { children: emptyOptionsLabel }) : options.map((option) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            disabled: option.disabled,
+            value: option.value,
+            children: option.label
+          },
+          option.value
+        )) })
+      ]
+    }
+  );
+}
+function OptionalEnumSelect({
+  className,
+  disabled,
+  emptyOptionLabel,
+  id,
+  onValueChange,
+  options,
+  value,
+  ...aria
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      disabled,
+      onValueChange: (nextValue) => onValueChange(nextValue === ENUM_SELECT_EMPTY_VALUE ? null : nextValue),
+      value: value ?? ENUM_SELECT_EMPTY_VALUE,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className, id, ...aria, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: emptyOptionLabel }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: ENUM_SELECT_EMPTY_VALUE, children: emptyOptionLabel }),
+          options.map((option) => /* @__PURE__ */ jsx(
+            SelectItem,
+            {
+              disabled: option.disabled,
+              value: option.value,
+              children: option.label
+            },
+            option.value
+          ))
+        ] })
+      ]
+    }
+  );
+}
+function ResetEnumSelect({
+  className,
+  disabled,
+  id,
+  onValueChange,
+  options,
+  placeholder,
+  ...aria
+}) {
+  const [instanceKey, setInstanceKey] = useState(0);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      disabled,
+      onValueChange: (nextValue) => {
+        onValueChange(nextValue);
+        setInstanceKey((current) => current + 1);
+      },
+      value: void 0,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className, id, ...aria, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            disabled: option.disabled,
+            value: option.value,
+            children: option.label
+          },
+          option.value
+        )) })
+      ]
+    },
+    instanceKey
+  );
+}
+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";
+const PackageFileInput = forwardRef(function PackageFileInput2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: cn(FILE_INPUT_CLASS, className),
+      ref,
+      type: "file",
+      ...props
+    }
+  );
+});
+const NativeSelect = forwardRef(
+  function NativeSelect2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: inputVariants({
+            className: `appearance-none pr-10 ${className ?? ""}`
+          }),
+          ref,
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-af-text-subtle" })
+    ] });
+  }
+);
+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";
+function textareaVariants({ className } = {}) {
+  return inputVariants({ className: cn(TEXTAREA_FIELD_CLASS, className) });
+}
+const PackageTextarea = forwardRef(function PackageTextarea2({ className, variant = "field", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: variant === "plain" ? cn(TEXTAREA_PLAIN_CLASS, className) : textareaVariants({ className }),
+      ref,
+      ...props
+    }
+  );
+});
+function buildFormFieldAriaDescribedBy(messageIds) {
+  const ids = [
+    messageIds.descriptionId,
+    messageIds.helperId,
+    messageIds.warningId,
+    messageIds.errorId,
+    messageIds.successId
+  ].filter((id) => Boolean(id));
+  return ids.length > 0 ? ids.join(" ") : void 0;
+}
+const FormField = forwardRef(
+  function FormField2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props });
+  }
+);
+const FORM_LABEL_CLASS = "block text-sm font-semibold text-on-surface";
+const FormLabel = forwardRef(
+  function FormLabel2({ as: Component = "label", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(FORM_LABEL_CLASS, className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+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";
+const FormDescription = forwardRef(
+  function FormDescription2({ as: Component = "p", className, variant = "supporting", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(
+          variant === "body" ? FORM_BODY_TEXT_CLASS : FORM_SUPPORTING_TEXT_CLASS,
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const FormHelperText = forwardRef(
+  function FormHelperText2({ as: Component = "p", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(FORM_SUPPORTING_TEXT_CLASS, className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const FormError = forwardRef(
+  function FormError2({ as: Component = "p", className, role = "alert", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(
+          "m-0 text-body-small font-medium text-on-error-container",
+          className
+        ),
+        ref,
+        role,
+        ...props
+      }
+    );
+  }
+);
+const FormWarning = forwardRef(
+  function FormWarning2({ as: Component = "p", className, role, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(
+          "m-0 text-body-small font-medium text-on-warning-container",
+          className
+        ),
+        ref,
+        role,
+        ...props
+      }
+    );
+  }
+);
+const FormSuccess = forwardRef(
+  function FormSuccess2({ as: Component = "p", className, role = "status", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(
+          "m-0 text-body-small font-medium text-on-success-container",
+          className
+        ),
+        ref,
+        role,
+        ...props
+      }
+    );
+  }
+);
+const FormFieldGroup = forwardRef(
+  function FormFieldGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: cn("m-0 space-y-2 border-0 p-0", className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const FormFieldGroupLabel = forwardRef(function FormFieldGroupLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("legend", { className: cn(FORM_LABEL_CLASS, "px-0", className), ref, ...props });
+});
+export {
+  ENUM_SELECT_EMPTY_VALUE as E,
+  FormDescription as F,
+  NativeSelect as N,
+  OptionalEnumSelect as O,
+  PackageCheckbox as P,
+  ResetEnumSelect as R,
+  SELECT_EMPTY_STATE_VALUE as S,
+  EnumSelect as a,
+  FormError as b,
+  FormField as c,
+  FormFieldGroup as d,
+  FormFieldGroupLabel as e,
+  FormHelperText as f,
+  FormLabel as g,
+  FormSuccess as h,
+  FormWarning as i,
+  PackageFileInput as j,
+  PackageInput as k,
+  PackageTextarea as l,
+  Select as m,
+  SelectContent as n,
+  SelectEmpty as o,
+  SelectField as p,
+  SelectGroup as q,
+  SelectItem as r,
+  SelectLabel as s,
+  SelectSeparator as t,
+  SelectTrigger as u,
+  SelectValue as v,
+  buildFormFieldAriaDescribedBy as w,
+  inputVariants as x,
+  textareaVariants as y
+};