@seed-design/react-field 1.0.0

package/lib/index.js

@@ -0,0 +1,12 @@
+import { F as FieldDescription, a as FieldErrorMessage, b as FieldLabel, c as FieldRoot } from './Field-12s-C77so-rw.js';
+export { u as useFieldContext } from './Field-12s-C77so-rw.js';
+
+var Field_namespace = {
+  __proto__: null,
+  Description: FieldDescription,
+  ErrorMessage: FieldErrorMessage,
+  Label: FieldLabel,
+  Root: FieldRoot
+};
+
+export { Field_namespace as Field, FieldDescription, FieldErrorMessage, FieldLabel, FieldRoot };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@seed-design/react-field",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/field"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Field.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  FieldRoot as Root,
+  FieldLabel as Label,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  type FieldRootProps as RootProps,
+  type FieldLabelProps as LabelProps,
+  type FieldDescriptionProps as DescriptionProps,
+  type FieldErrorMessageProps as ErrorMessageProps,
+} from "./Field";

package/src/Field.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { useField, type UseFieldProps } from "./useField";
+import { FieldProvider, useFieldContext } from "./useFieldContext";
+
+export interface FieldRootProps
+  extends UseFieldProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldRoot = forwardRef<HTMLDivElement, FieldRootProps>((props, ref) => {
+  const { readOnly, disabled, invalid, required, name, ...otherProps } = props;
+
+  const api = useField({
+    disabled,
+    invalid,
+    required,
+    readOnly,
+    name,
+  });
+  const mergedProps = mergeProps(api.rootProps, otherProps);
+
+  return (
+    <FieldProvider value={api}>
+      <Primitive.div ref={ref} {...mergedProps} />
+    </FieldProvider>
+  );
+});
+FieldRoot.displayName = "FieldRoot";
+
+export interface FieldLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLLabelElement> {}
+
+export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>((props, ref) => {
+  const { refs, labelProps } = useFieldContext();
+  const mergedProps = mergeProps(labelProps, props);
+  return <Primitive.label ref={composeRefs(refs.label, ref)} {...mergedProps} />;
+});
+FieldLabel.displayName = "FieldLabel";
+
+export interface FieldDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldDescription = forwardRef<HTMLSpanElement, FieldDescriptionProps>((props, ref) => {
+  const { refs, descriptionProps } = useFieldContext();
+  const mergedProps = mergeProps(descriptionProps, props);
+
+  return <Primitive.span ref={composeRefs(refs.description, ref)} {...mergedProps} />;
+});
+FieldDescription.displayName = "FieldDescription";
+
+export interface FieldErrorMessageProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldErrorMessage = forwardRef<HTMLDivElement, FieldErrorMessageProps>(
+  (props, ref) => {
+    const { refs, errorMessageProps } = useFieldContext();
+    const mergedProps = mergeProps(errorMessageProps, props);
+    return <Primitive.div ref={composeRefs(refs.errorMessage, ref)} {...mergedProps} />;
+  },
+);
+FieldErrorMessage.displayName = "FieldErrorMessage";

package/src/dom.ts

@@ -0,0 +1,4 @@
+export const getLabelId = (id: string) => `field:${id}:label`;
+export const getInputId = (id: string) => `field:${id}:input`;
+export const getDescriptionId = (id: string) => `field:${id}:description`;
+export const getErrorMessageId = (id: string) => `field:${id}:error-message`;

package/src/index.ts

@@ -0,0 +1,14 @@
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldDescription,
+  FieldErrorMessage,
+  type FieldRootProps,
+  type FieldLabelProps,
+  type FieldDescriptionProps,
+  type FieldErrorMessageProps,
+} from "./Field";
+
+export { useFieldContext, type UseFieldContext } from "./useFieldContext";
+
+export * as Field from "./Field.namespace";