@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -0,0 +1,220 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  extendedActionSheet,
+  type ExtendedActionSheetVariantProps,
+} from "@seed-design/css/recipes/extended-action-sheet";
+import {
+  extendedActionSheetItem,
+  type ExtendedActionSheetItemVariantProps,
+} from "@seed-design/css/recipes/extended-action-sheet-item";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
+const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetRootProps
+  extends ExtendedActionSheetVariantProps,
+    DialogPrimitive.RootProps {
+  /**
+   * @default true
+   */
+  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
+  /**
+   * @default true
+   */
+  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
+}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
+  DialogPrimitive.Root,
+  {
+    defaultProps: {
+      lazyMount: true,
+      unmountOnExit: true,
+    },
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetPositioner = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetPositionerProps
+>(DialogPrimitive.Positioner, "positioner");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetBackdrop = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetBackdropProps
+>(DialogPrimitive.Backdrop, "backdrop");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetContent = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetContentProps
+>(DialogPrimitive.Content, "content");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetHeader = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetHeaderProps
+>(withStateProps(Primitive.div), "header");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetTitle = withContext<
+  HTMLHeadingElement,
+  ExtendedActionSheetTitleProps
+>(withStateProps(Primitive.h2), "title");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetListProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
+  withStateProps(Primitive.div),
+  "group",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetItemProps
+  extends PrimitiveProps,
+    ExtendedActionSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetItem = withItemContext<
+  HTMLButtonElement,
+  ExtendedActionSheetItemProps
+>(withStateProps(Primitive.button));
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetFooter = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetFooterProps
+>(withStateProps(Primitive.div), "footer");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ExtendedActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ExtendedActionSheetCloseButton = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetCloseButtonProps
+>(DialogPrimitive.CloseButton, "closeButton");

package/src/components/ExtendedActionSheet/index.ts

@@ -0,0 +1,28 @@
+export {
+  ExtendedActionSheetBackdrop,
+  ExtendedActionSheetPositioner,
+  ExtendedActionSheetContent,
+  ExtendedActionSheetFooter,
+  ExtendedActionSheetHeader,
+  ExtendedActionSheetRoot,
+  ExtendedActionSheetTitle,
+  ExtendedActionSheetTrigger,
+  ExtendedActionSheetList,
+  ExtendedActionSheetGroup,
+  ExtendedActionSheetItem,
+  ExtendedActionSheetCloseButton,
+  type ExtendedActionSheetBackdropProps,
+  type ExtendedActionSheetPositionerProps,
+  type ExtendedActionSheetContentProps,
+  type ExtendedActionSheetFooterProps,
+  type ExtendedActionSheetHeaderProps,
+  type ExtendedActionSheetRootProps,
+  type ExtendedActionSheetTitleProps,
+  type ExtendedActionSheetTriggerProps,
+  type ExtendedActionSheetListProps,
+  type ExtendedActionSheetGroupProps,
+  type ExtendedActionSheetItemProps,
+  type ExtendedActionSheetCloseButtonProps,
+} from "./ExtendedActionSheet";
+
+export * as ExtendedActionSheet from "./ExtendedActionSheet.namespace";

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -0,0 +1,25 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withContext } = createRecipeContext(extendedFab);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `ContextualFloatingButton` instead.
+ */
+export interface ExtendedFabProps
+  extends ExtendedFabVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * @deprecated Use `ContextualFloatingButton` instead.
+ */
+export const ExtendedFab = withContext<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
+  defaultProps: {
+    variant: "neutralSolid",
+    size: "medium",
+  },
+});

package/src/components/ExtendedFab/index.ts

@@ -0,0 +1,4 @@
+export {
+  ExtendedFab,
+  type ExtendedFabProps,
+} from "./ExtendedFab";

package/src/components/Fab/Fab.tsx

@@ -0,0 +1,21 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withContext } = createRecipeContext(fab);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `ContextualFloatingButton` instead.
+ */
+export interface FabProps
+  extends FabVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * @deprecated Use `ContextualFloatingButton` instead.
+ */
+export const Fab = withContext<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/Fab/index.ts

@@ -0,0 +1,4 @@
+export {
+  Fab,
+  type FabProps,
+} from "./Fab";

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,140 @@
+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, className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useFieldContext();
+
+    return (
+      <Primitive.div
+        className={clsx(classNames.characterCountArea, className)}
+        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";