@seed-design/react 1.0.6 → 1.1.0

package/lib/primitive.d.ts

@@ -5,6 +5,7 @@ export * from '@seed-design/react-popover';
 export * from '@seed-design/react-progress';
 export * from '@seed-design/react-pull-to-refresh';
 export * from '@seed-design/react-radio-group';
+export * from '@seed-design/react-slider';
 export * from '@seed-design/react-snackbar';
 export * from '@seed-design/react-switch';
 export * from '@seed-design/react-tabs';

package/lib/primitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitive.d.ts","sourceRoot":"","sources":["../src/primitive.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"primitive.d.ts","sourceRoot":"","sources":["../src/primitive.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/lib/primitive.js

@@ -5,6 +5,7 @@ export * from '@seed-design/react-popover';
 export * from '@seed-design/react-progress';
 export * from '@seed-design/react-pull-to-refresh';
 export * from '@seed-design/react-radio-group';
+export * from '@seed-design/react-slider';
 export * from '@seed-design/react-snackbar';
 export * from '@seed-design/react-switch';
 export * from '@seed-design/react-tabs';

package/lib/utils/createWithStateProps.cjs

@@ -6,13 +6,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 
-function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+function createWithStateProps(useContexts) {
   return function withStateProps(Component) {
     const Node = React.forwardRef((props, ref) => {
       const stateProps = {};
-      for (const useContext of useContexts) {
-        Object.assign(stateProps, useContext({ strict })?.stateProps);
+      for (const contextConfig of useContexts) {
+        if (typeof contextConfig === "function") {
+          Object.assign(stateProps, contextConfig({ strict: true })?.stateProps);
+        } else {
+          const { useContext, strict = false } = contextConfig;
+          Object.assign(stateProps, useContext({ strict })?.stateProps);
+        }
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...stateProps, ...props });
     });

package/lib/utils/createWithStateProps.d.ts

@@ -1,11 +1,14 @@
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 type AtLeastOne<T> = [T, ...T[]];
-export declare function createWithStateProps(useContexts: AtLeastOne<(prop?: {
+type ContextHook = (prop?: {
     strict?: boolean;
 }) => {
     stateProps: React.HTMLAttributes<HTMLElement>;
-} | null>, options?: {
+} | null;
+type ContextConfig = ContextHook | {
+    useContext: ContextHook;
     strict?: boolean;
-}): <P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) => ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
+};
+export declare function createWithStateProps(useContexts: AtLeastOne<ContextConfig>): <P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) => ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
 export {};
 //# sourceMappingURL=createWithStateProps.d.ts.map

package/lib/utils/createWithStateProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createWithStateProps.d.ts","sourceRoot":"","sources":["../../src/utils/createWithStateProps.tsx"],"names":[],"mappings":";AAEA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEjC,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,UAAU,CACrB,CAAC,IAAI,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK;IAAE,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;CAAE,GAAG,IAAI,CAC1F,EACD,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,IAIC,CAAC,EAAE,CAAC,EAAE,WAAW,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,sHAehG"}
+{"version":3,"file":"createWithStateProps.d.ts","sourceRoot":"","sources":["../../src/utils/createWithStateProps.tsx"],"names":[],"mappings":";AAEA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEjC,KAAK,WAAW,GAAG,CAAC,IAAI,CAAC,EAAE;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,KAAK;IAAE,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;CAAE,GAAG,IAAI,CAAC;AAE/D,KAAK,aAAa,GAAG,WAAW,GAAG;IAAE,UAAU,EAAE,WAAW,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjF,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,UAAU,CAAC,aAAa,CAAC,IAC1C,CAAC,EAAE,CAAC,EAAE,WAAW,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,sHAqBhG"}

package/lib/utils/createWithStateProps.js

@@ -2,13 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
-function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+function createWithStateProps(useContexts) {
   return function withStateProps(Component) {
     const Node = forwardRef((props, ref) => {
       const stateProps = {};
-      for (const useContext of useContexts) {
-        Object.assign(stateProps, useContext({ strict })?.stateProps);
+      for (const contextConfig of useContexts) {
+        if (typeof contextConfig === "function") {
+          Object.assign(stateProps, contextConfig({ strict: true })?.stateProps);
+        } else {
+          const { useContext, strict = false } = contextConfig;
+          Object.assign(stateProps, useContext({ strict })?.stateProps);
+        }
       }
       return /* @__PURE__ */ jsx(Component, { ref, ...stateProps, ...props });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -43,27 +43,30 @@
     "@seed-design/react-avatar": "1.0.0",
     "@seed-design/react-checkbox": "1.0.0",
     "@seed-design/react-dialog": "1.0.0",
-    "@seed-design/react-popover": "1.0.1",
+    "@seed-design/react-drawer": "1.0.0",
+    "@seed-design/react-field": "1.0.0",
+    "@seed-design/react-field-button": "1.0.0",
+    "@seed-design/react-popover": "1.0.2",
     "@seed-design/react-portal": "1.0.0",
     "@seed-design/react-primitive": "1.0.0",
     "@seed-design/react-progress": "1.0.0",
     "@seed-design/react-pull-to-refresh": "1.0.1",
     "@seed-design/react-radio-group": "1.0.0",
     "@seed-design/react-segmented-control": "1.0.0",
+    "@seed-design/react-slider": "1.0.0",
     "@seed-design/react-snackbar": "1.0.0",
     "@seed-design/react-switch": "1.0.0",
     "@seed-design/react-tabs": "1.0.0",
-    "@seed-design/react-text-field": "1.0.0",
+    "@seed-design/react-text-field": "1.1.0",
     "@seed-design/react-toggle": "1.0.0",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "unicode-segmenter": "^0.14.0"
   },
   "peerDependencies": {
-    "@seed-design/css": "1.0.6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.6",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^5.0.0",

package/src/components/ActionButton/ActionButton.tsx

@@ -12,7 +12,12 @@ import {
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
-import type { ScopedColorFg, ScopedColorPalette } from "@seed-design/css/vars";
+import {
+  type ScopedColorFg,
+  type ScopedColorPalette,
+  type FontWeight,
+  vars,
+} from "@seed-design/css/vars";
 
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
@@ -26,6 +31,13 @@ export interface ActionButtonProps
    * @default "fg.neutral"
    */
   color?: ScopedColorFg | ScopedColorPalette;
+
+  /**
+   * Weight of the label.
+   * Works only when `variant` is `ghost`.
+   * @default "bold"
+   */
+  fontWeight?: FontWeight;
 }
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -36,6 +48,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       loading = false,
       layout = "withText",
       color,
+      fontWeight,
       className,
       children,
       ...otherProps
@@ -59,7 +72,13 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             ref={ref}
             className={clsx(recipeClassName, className)}
             // NOTE: Should we handle color as a style prop?
-            style={{ ...style, "--seed-box-color": handleColor(color) } as React.CSSProperties}
+            style={
+              {
+                ...style,
+                ...(color && { "--seed-box-color": handleColor(color) }),
+                ...(fontWeight && { "--seed-font-weight": vars.$fontWeight[fontWeight] }),
+              } as React.CSSProperties
+            }
             {...api.stateProps}
             {...restProps}
           >

package/src/components/BottomSheet/BottomSheet.namespace.ts

@@ -22,3 +22,8 @@ export {
   type BottomSheetTriggerProps as TriggerProps,
   type BottomSheetCloseButtonProps as CloseButtonProps,
 } from "./BottomSheet";
+
+export {
+  BottomSheetHandle as Handle,
+  type BottomSheetHandleProps as HandleProps,
+} from "../BottomSheetHandle";

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,63 +1,51 @@
-import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/recipes/bottom-sheet";
+import { Drawer } from "@seed-design/react-drawer";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { createWithStateProps } from "../../utils/createWithStateProps";
-import { withStyleProps, type StyleProps } from "../../utils/styled";
+import type { StyleProps } from "../../utils/styled";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
-const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetRootProps extends BottomSheetVariantProps, DialogPrimitive.RootProps {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-export const BottomSheetRoot = withRootProvider<BottomSheetRootProps>(DialogPrimitive.Root, {
+export interface BottomSheetRootProps extends BottomSheetVariantProps, Drawer.RootProps {}
+
+export const BottomSheetRoot = withRootProvider<BottomSheetRootProps>(Drawer.Root, {
   defaultProps: {
-    lazyMount: true,
-    unmountOnExit: true,
+    direction: "bottom",
   },
 });
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+export interface BottomSheetTriggerProps extends Drawer.TriggerProps {}
 
-export const BottomSheetTrigger = DialogPrimitive.Trigger;
+export const BottomSheetTrigger = Drawer.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+export interface BottomSheetPositionerProps extends Drawer.PositionerProps {}
 
 export const BottomSheetPositioner = withContext<HTMLDivElement, BottomSheetPositionerProps>(
-  DialogPrimitive.Positioner,
+  Drawer.Positioner,
   "positioner",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+export interface BottomSheetBackdropProps extends Drawer.BackdropProps {}
 
 export const BottomSheetBackdrop = withContext<HTMLDivElement, BottomSheetBackdropProps>(
-  DialogPrimitive.Backdrop,
+  Drawer.Backdrop,
   "backdrop",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetContentProps extends DialogPrimitive.ContentProps {}
+export interface BottomSheetContentProps extends Drawer.ContentProps {}
 
 export const BottomSheetContent = withContext<HTMLDivElement, BottomSheetContentProps>(
-  DialogPrimitive.Content,
+  Drawer.Content,
   "content",
 );
 
@@ -68,27 +56,27 @@ export interface BottomSheetHeaderProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const BottomSheetHeader = withContext<HTMLDivElement, BottomSheetHeaderProps>(
-  withStateProps(Primitive.div),
+  Primitive.div,
   "header",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetTitleProps extends DialogPrimitive.TitleProps {}
+export interface BottomSheetTitleProps extends Drawer.TitleProps {}
 
 export const BottomSheetTitle = withContext<HTMLHeadingElement, BottomSheetTitleProps>(
-  withStateProps(Primitive.h2),
+  Drawer.Title,
   "title",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+export interface BottomSheetDescriptionProps extends Drawer.DescriptionProps {}
 
 export const BottomSheetDescription = withContext<
   HTMLParagraphElement,
   BottomSheetDescriptionProps
->(withStateProps(Primitive.p), "description");
+>(Drawer.Description, "description");
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -101,7 +89,7 @@ export interface BottomSheetBodyProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const BottomSheetBody = withContext<HTMLDivElement, BottomSheetBodyProps>(
-  withStyleProps(withStateProps(Primitive.div)),
+  Primitive.div,
   "body",
 );
 
@@ -112,17 +100,15 @@ export interface BottomSheetFooterProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const BottomSheetFooter = withContext<HTMLDivElement, BottomSheetFooterProps>(
-  withStateProps(Primitive.div),
+  Primitive.div,
   "footer",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetCloseButtonProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
+export interface BottomSheetCloseButtonProps extends Drawer.CloseButtonProps {}
 
 export const BottomSheetCloseButton = withContext<HTMLButtonElement, BottomSheetCloseButtonProps>(
-  DialogPrimitive.CloseButton,
+  Drawer.CloseButton,
   "closeButton",
 );

package/src/components/BottomSheetHandle/BottomSheetHandle.tsx

@@ -0,0 +1,22 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { bottomSheetHandle } from "@seed-design/css/recipes/bottom-sheet-handle";
+import React from "react";
+import clsx from "clsx";
+
+export interface BottomSheetHandleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetHandle = React.forwardRef<HTMLDivElement, BottomSheetHandleProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = bottomSheetHandle();
+
+    return (
+      <Primitive.div ref={ref} className={clsx(classNames.root, className)} {...props}>
+        <Primitive.div aria-hidden="true" className={classNames.touchArea} />
+      </Primitive.div>
+    );
+  },
+);
+
+BottomSheetHandle.displayName = "BottomSheetHandle";

package/src/components/BottomSheetHandle/index.ts

@@ -0,0 +1 @@
+export { BottomSheetHandle, type BottomSheetHandleProps } from "./BottomSheetHandle";

package/src/components/Chip/Chip.tsx

@@ -8,9 +8,10 @@ import { useCheckboxContext } from "@seed-design/react-checkbox";
 import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
-const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
-  strict: false,
-});
+const withStateProps = createWithStateProps([
+  { useContext: useCheckboxContext, strict: false },
+  { useContext: useRadioGroupItemContext, strict: false },
+]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/Field/Field.namespace.ts

@@ -0,0 +1,19 @@
+export {
+  FieldRoot as Root,
+  FieldHeader as Header,
+  FieldLabel as Label,
+  FieldIndicatorText as IndicatorText,
+  FieldRequiredIndicator as RequiredIndicator,
+  FieldFooter as Footer,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  FieldCharacterCount as CharacterCount,
+  type FieldRootProps as RootProps,
+  type FieldHeaderProps as HeaderProps,
+  type FieldLabelProps as LabelProps,
+  type FieldIndicatorTextProps as IndicatorTextProps,
+  type FieldFooterProps as FooterProps,
+  type FieldDescriptionProps as DescriptionProps,
+  type FieldErrorMessageProps as ErrorMessageProps,
+  type FieldCharacterCountProps as CharacterCountProps,
+} from "./Field";

package/src/components/Field/Field.tsx

@@ -0,0 +1,136 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Field, useFieldContext } from "@seed-design/react-field";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
+import { InternalIcon } from "../private/Icon";
+import clsx from "clsx";
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+const withStateProps = createWithStateProps([useFieldContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldRootProps extends FieldVariantProps, Field.RootProps {}
+
+export const FieldRoot = withProvider<HTMLDivElement, FieldRootProps>(Field.Root, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldHeader = withContext<HTMLDivElement, FieldHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+export interface FieldLabelProps extends FieldLabelVariantProps, Field.LabelProps {}
+
+export const FieldLabel = withLabelProvider<HTMLLabelElement, FieldLabelProps>(Field.Label, "root");
+
+export interface FieldIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldIndicatorText = withLabelContext<HTMLSpanElement, FieldIndicatorTextProps>(
+  withStateProps(Primitive.span),
+  "indicatorText",
+);
+
+export interface FieldRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const FieldRequiredIndicator = forwardRef<SVGSVGElement, FieldRequiredIndicatorProps>(
+  ({ className, ...props }, ref) => {
+    const { indicatorIcon } = useLabelClassNames();
+
+    return (
+      <InternalIcon
+        svg={
+          // biome-ignore lint/a11y/noSvgWithoutTitle: InternalIcon is aria-hidden
+          <svg
+            viewBox="0 0 6 6"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={clsx(indicatorIcon, className)}
+          >
+            <path
+              d="M3.75002 1.55859L4.41318 1.09468C4.75243 0.857361 5.21982 0.939865 5.45732 1.27899C5.69499 1.61836 5.61243 2.08615 5.27295 2.32366L4.30763 2.99902L5.27372 3.67612C5.61285 3.91381 5.69517 4.38137 5.45761 4.72059C5.21999 5.0599 4.7523 5.14233 4.41299 4.90471L3.75002 4.44043V5.25C3.75002 5.66421 3.41423 6 3.00002 6C2.5858 6 2.25002 5.66421 2.25002 5.25V4.44043L1.58704 4.90471C1.24773 5.14233 0.780041 5.0599 0.542418 4.72059C0.304856 4.38137 0.387176 3.91381 0.726309 3.67612L1.6924 2.99902L0.727079 2.32366C0.387603 2.08615 0.305043 1.61836 0.542707 1.27899C0.780206 0.939865 1.2476 0.857361 1.58685 1.09468L2.25002 1.55859V0.75C2.25002 0.335786 2.5858 0 3.00002 0C3.41423 0 3.75002 0.335786 3.75002 0.75V1.55859Z"
+              fill="currentColor"
+            />
+          </svg>
+        }
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldFooter = withContext<HTMLDivElement, FieldFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+export interface FieldDescriptionProps extends Field.DescriptionProps {}
+
+export const FieldDescription = withContext<HTMLSpanElement, FieldDescriptionProps>(
+  Field.Description,
+  "description",
+);
+
+export interface FieldErrorMessageProps extends Field.ErrorMessageProps {}
+
+export const FieldErrorMessage = withContext<HTMLSpanElement, FieldErrorMessageProps>(
+  Field.ErrorMessage,
+  "errorMessage",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldCharacterCountProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The current number of characters/graphemes
+   */
+  current: number;
+  /**
+   * The maximum allowed characters/graphemes
+   */
+  max: number;
+}
+
+export const FieldCharacterCount = forwardRef<HTMLDivElement, FieldCharacterCountProps>(
+  ({ current, max, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useFieldContext();
+
+    return (
+      <Primitive.div ref={ref} {...otherProps}>
+        <span
+          {...(current === 0 ? { "data-empty": true } : {})}
+          {...(current > max ? { "data-exceeded": true } : {})}
+          className={classNames.characterCount}
+          {...stateProps}
+        >
+          {current}
+        </span>
+        <span className={classNames.maxCharacterCount} {...stateProps}>
+          /{max}
+        </span>
+      </Primitive.div>
+    );
+  },
+);

package/src/components/Field/index.ts

@@ -0,0 +1,21 @@
+export {
+  FieldRoot,
+  FieldHeader,
+  FieldLabel,
+  FieldIndicatorText,
+  FieldRequiredIndicator,
+  FieldFooter,
+  FieldDescription,
+  FieldErrorMessage,
+  FieldCharacterCount,
+  type FieldRootProps,
+  type FieldHeaderProps,
+  type FieldLabelProps,
+  type FieldIndicatorTextProps,
+  type FieldFooterProps,
+  type FieldDescriptionProps,
+  type FieldErrorMessageProps,
+  type FieldCharacterCountProps,
+} from "./Field";
+
+export * as Field from "./Field.namespace";

package/src/components/FieldButton/FieldButton.namespace.ts

@@ -0,0 +1,38 @@
+export {
+  FieldButtonButton as Button,
+  FieldButtonClearButton as ClearButton,
+  FieldButtonDescription as Description,
+  FieldButtonErrorMessage as ErrorMessage,
+  FieldButtonRoot as Root,
+  FieldButtonFooter as Footer,
+  FieldButtonHeader as Header,
+  FieldButtonHiddenInput as HiddenInput,
+  FieldButtonIndicatorText as IndicatorText,
+  FieldButtonLabel as Label,
+  FieldButtonPlaceholder as Placeholder,
+  FieldButtonPrefixIcon as PrefixIcon,
+  FieldButtonPrefixText as PrefixText,
+  FieldButtonRequiredIndicator as RequiredIndicator,
+  FieldButtonControl as Control,
+  FieldButtonSuffixIcon as SuffixIcon,
+  FieldButtonSuffixText as SuffixText,
+  FieldButtonValue as Value,
+  type FieldButtonButtonProps as ButtonProps,
+  type FieldButtonClearButtonProps as ClearButtonProps,
+  type FieldButtonDescriptionProps as DescriptionProps,
+  type FieldButtonErrorMessageProps as ErrorMessageProps,
+  type FieldButtonRootProps as RootProps,
+  type FieldButtonFooterProps as FooterProps,
+  type FieldButtonHeaderProps as HeaderProps,
+  type FieldButtonHiddenInputProps as HiddenInputProps,
+  type FieldButtonIndicatorTextProps as IndicatorTextProps,
+  type FieldButtonLabelProps as LabelProps,
+  type FieldButtonPlaceholderProps as PlaceholderProps,
+  type FieldButtonPrefixIconProps as PrefixIconProps,
+  type FieldButtonPrefixTextProps as PrefixTextProps,
+  type FieldButtonRequiredIndicatorProps as RequiredIndicatorProps,
+  type FieldButtonControlProps as ControlProps,
+  type FieldButtonSuffixIconProps as SuffixIconProps,
+  type FieldButtonSuffixTextProps as SuffixTextProps,
+  type FieldButtonValueProps as ValueProps,
+} from "./FieldButton";