@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/FieldButton/FieldButton.tsx

@@ -0,0 +1,249 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { FieldButton, useFieldButtonContext } from "@seed-design/react-field-button";
+import * as React 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, type InternalIconProps } from "../private/Icon";
+import { inputButton } from "@seed-design/css/recipes/input-button";
+import clsx from "clsx";
+
+const { withContext: withFieldContext, withProvider: withFieldProvider } =
+  createSlotRecipeContext(field);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(inputButton);
+const {
+  withProvider: withLabelProvider,
+  withContext: withLabelContext,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+
+const withStateProps = createWithStateProps([useFieldButtonContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldButtonRootProps extends FieldVariantProps, FieldButton.RootProps {}
+
+export const FieldButtonRoot = withFieldProvider<HTMLDivElement, FieldButtonRootProps>(
+  FieldButton.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldButtonHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonHeader = withFieldContext<HTMLDivElement, FieldButtonHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+export interface FieldButtonLabelProps
+  extends PrimitiveProps,
+    FieldLabelVariantProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonLabel = withLabelProvider<HTMLDivElement, FieldButtonLabelProps>(
+  withStateProps(Primitive.div),
+  "root",
+);
+
+export interface FieldButtonIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldButtonIndicatorText = withLabelContext<
+  HTMLSpanElement,
+  FieldButtonIndicatorTextProps
+>(withStateProps(Primitive.span), "indicatorText");
+
+export interface FieldButtonRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const FieldButtonRequiredIndicator = React.forwardRef<
+  SVGSVGElement,
+  FieldButtonRequiredIndicatorProps
+>(({ 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}
+    />
+  );
+});
+FieldButtonRequiredIndicator.displayName = "FieldButtonRequiredIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldButtonPrefixIconProps extends InternalIconProps {}
+
+export const FieldButtonPrefixIcon = withContext<SVGSVGElement, FieldButtonPrefixIconProps>(
+  withStateProps(InternalIcon),
+  "prefixIcon",
+);
+
+export interface FieldButtonPrefixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldButtonPrefixText = React.forwardRef<HTMLSpanElement, FieldButtonPrefixTextProps>(
+  ({ className, ...props }, ref) => {
+    const { stateProps } = useFieldButtonContext();
+    const { prefixText } = useClassNames();
+
+    return (
+      <Primitive.span
+        className={clsx(prefixText, className)}
+        ref={ref}
+        aria-hidden
+        {...stateProps}
+        {...props}
+      />
+    );
+  },
+);
+FieldButtonPrefixText.displayName = "FieldButtonPrefixText";
+
+export interface FieldButtonSuffixIconProps extends InternalIconProps {}
+
+export const FieldButtonSuffixIcon = withContext<SVGSVGElement, FieldButtonSuffixIconProps>(
+  withStateProps(InternalIcon),
+  "suffixIcon",
+);
+
+export interface FieldButtonSuffixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldButtonSuffixText = React.forwardRef<HTMLSpanElement, FieldButtonSuffixTextProps>(
+  ({ className, ...props }, ref) => {
+    const { stateProps } = useFieldButtonContext();
+    const { suffixText } = useClassNames();
+
+    return (
+      <Primitive.span
+        className={clsx(suffixText, className)}
+        ref={ref}
+        aria-hidden
+        {...stateProps}
+        {...props}
+      />
+    );
+  },
+);
+FieldButtonSuffixText.displayName = "FieldButtonSuffixText";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldButtonFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonFooter = withFieldContext<HTMLDivElement, FieldButtonFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+export interface FieldButtonDescriptionProps extends FieldButton.DescriptionProps {}
+
+export const FieldButtonDescription = withFieldContext<
+  HTMLSpanElement,
+  FieldButtonDescriptionProps
+>(FieldButton.Description, "description");
+
+export interface FieldButtonErrorMessageProps extends FieldButton.ErrorMessageProps {}
+
+export const FieldButtonErrorMessage = withFieldContext<
+  HTMLSpanElement,
+  FieldButtonErrorMessageProps
+>(FieldButton.ErrorMessage, "errorMessage");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldButtonHiddenInputProps extends FieldButton.HiddenInputProps {}
+
+export const FieldButtonHiddenInput = FieldButton.HiddenInput;
+
+export interface FieldButtonButtonProps extends FieldButton.ButtonProps {}
+
+export const FieldButtonButton = withContext<HTMLButtonElement, FieldButtonButtonProps>(
+  FieldButton.Button,
+  "button",
+);
+
+export interface FieldButtonControlProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonControl = withProvider<HTMLDivElement, FieldButtonControlProps>(
+  withStateProps(Primitive.div),
+  "root",
+);
+
+export interface FieldButtonClearButtonProps extends FieldButton.ClearButtonProps {}
+
+export const FieldButtonClearButton = withContext<HTMLButtonElement, FieldButtonClearButtonProps>(
+  FieldButton.ClearButton,
+  "clearButton",
+);
+
+export interface FieldButtonValueProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonValue = React.forwardRef<HTMLDivElement, FieldButtonValueProps>(
+  ({ className, ...props }, ref) => {
+    const { stateProps } = useFieldButtonContext();
+    const { value } = useClassNames();
+
+    return (
+      <Primitive.div
+        className={clsx(value, className)}
+        ref={ref}
+        aria-hidden
+        {...stateProps}
+        {...props}
+      />
+    );
+  },
+);
+FieldButtonValue.displayName = "FieldButtonValue";
+
+export interface FieldButtonPlaceholderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldButtonPlaceholder = React.forwardRef<HTMLDivElement, FieldButtonPlaceholderProps>(
+  ({ className, ...props }, ref) => {
+    const { stateProps } = useFieldButtonContext();
+    const { placeholder } = useClassNames();
+
+    return (
+      <Primitive.div
+        className={clsx(placeholder, className)}
+        ref={ref}
+        aria-hidden
+        {...stateProps}
+        {...props}
+      />
+    );
+  },
+);
+FieldButtonPlaceholder.displayName = "FieldButtonPlaceholder";

package/src/components/FieldButton/index.ts

@@ -0,0 +1,40 @@
+export {
+  FieldButtonButton,
+  FieldButtonClearButton,
+  FieldButtonDescription,
+  FieldButtonErrorMessage,
+  FieldButtonRoot,
+  FieldButtonFooter,
+  FieldButtonHeader,
+  FieldButtonHiddenInput,
+  FieldButtonIndicatorText,
+  FieldButtonLabel,
+  FieldButtonPlaceholder,
+  FieldButtonPrefixIcon,
+  FieldButtonPrefixText,
+  FieldButtonRequiredIndicator,
+  FieldButtonControl,
+  FieldButtonSuffixIcon,
+  FieldButtonSuffixText,
+  FieldButtonValue,
+  type FieldButtonButtonProps,
+  type FieldButtonClearButtonProps,
+  type FieldButtonDescriptionProps,
+  type FieldButtonErrorMessageProps,
+  type FieldButtonRootProps,
+  type FieldButtonFooterProps,
+  type FieldButtonHeaderProps,
+  type FieldButtonHiddenInputProps,
+  type FieldButtonIndicatorTextProps,
+  type FieldButtonLabelProps,
+  type FieldButtonPlaceholderProps,
+  type FieldButtonPrefixIconProps,
+  type FieldButtonPrefixTextProps,
+  type FieldButtonRequiredIndicatorProps,
+  type FieldButtonControlProps,
+  type FieldButtonSuffixIconProps,
+  type FieldButtonSuffixTextProps,
+  type FieldButtonValueProps,
+} from "./FieldButton";
+
+export * as FieldButton from "./FieldButton.namespace";

package/src/components/Fieldset/Fieldset.namespace.ts

@@ -0,0 +1,17 @@
+export {
+  FieldsetRoot as Root,
+  FieldsetHeader as Header,
+  FieldsetLabel as Label,
+  FieldsetIndicatorText as IndicatorText,
+  FieldsetRequiredIndicator as RequiredIndicator,
+  FieldsetFooter as Footer,
+  FieldsetDescription as Description,
+  FieldsetErrorMessage as ErrorMessage,
+  type FieldsetRootProps as RootProps,
+  type FieldsetHeaderProps as HeaderProps,
+  type FieldsetLabelProps as LabelProps,
+  type FieldsetIndicatorTextProps as IndicatorTextProps,
+  type FieldsetFooterProps as FooterProps,
+  type FieldsetDescriptionProps as DescriptionProps,
+  type FieldsetErrorMessageProps as ErrorMessageProps,
+} from "./Fieldset";

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,101 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
+import { Fieldset } from "@seed-design/react-fieldset";
+import { InternalIcon } from "../private/Icon";
+import clsx from "clsx";
+
+const { withProvider, withContext } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+
+// withStateProps isn't needed because currently useFieldset doesn't return any state props
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldsetRootProps extends FieldVariantProps, Fieldset.RootProps {}
+
+export const FieldsetRoot = withProvider<HTMLDivElement, FieldsetRootProps>(Fieldset.Root, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldsetHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldsetHeader = withContext<HTMLDivElement, FieldsetHeaderProps>(
+  Primitive.div,
+  "header",
+);
+
+export interface FieldsetLabelProps extends FieldLabelVariantProps, Fieldset.LabelProps {}
+
+export const FieldsetLabel = withLabelProvider<HTMLDivElement, FieldsetLabelProps>(
+  Fieldset.Label,
+  "root",
+);
+
+export interface FieldsetIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldsetIndicatorText = withLabelContext<HTMLSpanElement, FieldsetIndicatorTextProps>(
+  Primitive.span,
+  "indicatorText",
+);
+
+export interface FieldsetRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const FieldsetRequiredIndicator = forwardRef<SVGSVGElement, FieldsetRequiredIndicatorProps>(
+  ({ 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 FieldsetFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldsetFooter = withContext<HTMLDivElement, FieldsetFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+export interface FieldsetDescriptionProps extends Fieldset.DescriptionProps {}
+
+export const FieldsetDescription = withContext<HTMLSpanElement, FieldsetDescriptionProps>(
+  Fieldset.Description,
+  "description",
+);
+
+export interface FieldsetErrorMessageProps extends Fieldset.ErrorMessageProps {}
+
+export const FieldsetErrorMessage = withContext<HTMLDivElement, FieldsetErrorMessageProps>(
+  Fieldset.ErrorMessage,
+  "errorMessage",
+);

package/src/components/Fieldset/index.ts

@@ -0,0 +1,19 @@
+export {
+  FieldsetRoot,
+  FieldsetHeader,
+  FieldsetLabel,
+  FieldsetIndicatorText,
+  FieldsetRequiredIndicator,
+  FieldsetFooter,
+  FieldsetDescription,
+  FieldsetErrorMessage,
+  type FieldsetRootProps,
+  type FieldsetHeaderProps,
+  type FieldsetLabelProps,
+  type FieldsetIndicatorTextProps,
+  type FieldsetFooterProps,
+  type FieldsetDescriptionProps,
+  type FieldsetErrorMessageProps,
+} from "./Fieldset";
+
+export * as Fieldset from "./Fieldset.namespace";

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import type { ResponsiveValue } from "../../types/responsive";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface FlexProps extends Omit<BoxProps, "display"> {
+  /**
+   * @default "flex"
+   */
+  display?: ResponsiveValue<"flex" | "none">;
+
+  /**
+   * Shorthand for `flexDirection`.
+   */
+  direction?: BoxProps["flexDirection"];
+
+  /**
+   * Shorthand for `flexWrap`.
+   */
+  wrap?: BoxProps["flexWrap"];
+
+  /**
+   * Shorthand for `alignItems`.
+   */
+  align?: BoxProps["alignItems"];
+
+  /**
+   * Shorthand for `justifyContent`.
+   */
+  justify?: BoxProps["justifyContent"];
+
+  /**
+   * Shorthand for `flexGrow`.
+   */
+  grow?: BoxProps["flexGrow"];
+
+  /**
+   * Shorthand for `flexShrink`.
+   */
+  shrink?: BoxProps["flexShrink"];
+}
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+
+  return (
+    <Box
+      ref={ref}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap}
+      alignItems={align}
+      justifyContent={justify}
+      flexGrow={grow}
+      flexShrink={shrink}
+      {...rest}
+    />
+  );
+});

package/src/components/Flex/index.ts

@@ -0,0 +1 @@
+export { Flex, type FlexProps } from "./Flex";

package/src/components/Float/Float.tsx

@@ -0,0 +1,124 @@
+import type { Dimension } from "@seed-design/css/vars";
+import * as React from "react";
+import { Box } from "../Box/Box";
+import { handleDimension } from "../../utils/styled";
+
+export interface FloatProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+
+  placement:
+    | "bottom-end"
+    | "bottom-start"
+    | "top-end"
+    | "top-start"
+    | "bottom-center"
+    | "top-center"
+    | "middle-center"
+    | "middle-end"
+    | "middle-start";
+
+  /**
+   * @default 0
+   */
+  offsetX?: 0 | Dimension | (string & {});
+
+  /**
+   * @default 0
+   */
+  offsetY?: 0 | Dimension | (string & {});
+
+  zIndex?: number | (string & {});
+}
+
+function getPlacementStyle(
+  placement: FloatProps["placement"],
+  offsetX: 0 | (string & {}) | undefined,
+  offsetY: 0 | (string & {}) | undefined,
+): {
+  top?: 0 | string | undefined;
+  left?: 0 | string | undefined;
+  right?: 0 | string | undefined;
+  bottom?: 0 | string | undefined;
+  unstable_transform?: string | undefined;
+} {
+  const offsetXValue = handleDimension(offsetX);
+  const offsetYValue = handleDimension(offsetY);
+
+  const centerLeft = offsetXValue ? `calc(50% + ${offsetXValue})` : "50%";
+  const middleTop = offsetYValue ? `calc(50% + ${offsetYValue})` : "50%";
+
+  const shiftLeft = "translateX(-50%)";
+  const shiftTop = "translateY(-50%)";
+  const shiftBoth = "translate(-50%, -50%)";
+
+  switch (placement) {
+    case "top-start":
+      return {
+        top: offsetYValue ?? 0,
+        left: offsetXValue ?? 0,
+      };
+    case "top-center":
+      return {
+        top: offsetYValue ?? 0,
+        left: centerLeft,
+        unstable_transform: shiftLeft,
+      };
+    case "top-end":
+      return {
+        top: offsetYValue ?? 0,
+        right: offsetXValue ?? 0,
+      };
+    case "middle-start":
+      return {
+        top: middleTop,
+        left: offsetXValue ?? 0,
+        unstable_transform: shiftTop,
+      };
+    case "middle-center":
+      return {
+        top: middleTop,
+        left: centerLeft,
+        unstable_transform: shiftBoth,
+      };
+    case "middle-end":
+      return {
+        top: middleTop,
+        right: offsetXValue ?? 0,
+        unstable_transform: shiftTop,
+      };
+    case "bottom-start":
+      return {
+        bottom: offsetYValue ?? 0,
+        left: offsetXValue ?? 0,
+      };
+    case "bottom-center":
+      return {
+        bottom: offsetYValue ?? 0,
+        left: centerLeft,
+        unstable_transform: shiftLeft,
+      };
+    case "bottom-end":
+      return {
+        bottom: offsetYValue ?? 0,
+        right: offsetXValue ?? 0,
+      };
+  }
+}
+
+export const Float = React.forwardRef<HTMLDivElement, FloatProps>((props, ref) => {
+  const { as, placement, offsetX, offsetY, zIndex, ...rest } = props;
+
+  const placementStyle = getPlacementStyle(placement, offsetX, offsetY);
+
+  return (
+    <Box
+      ref={ref}
+      as={as}
+      position="absolute"
+      display="inline-flex"
+      zIndex={zIndex}
+      {...placementStyle}
+      {...rest}
+    />
+  );
+});

package/src/components/Float/index.ts

@@ -0,0 +1 @@
+export { Float, type FloatProps } from "./Float";

package/src/components/FloatingActionButton/FloatingActionButton.namespace.tsx

@@ -0,0 +1,8 @@
+export {
+  FloatingActionButtonIcon as Icon,
+  FloatingActionButtonLabel as Label,
+  FloatingActionButtonRoot as Root,
+  type FloatingActionButtonIconProps as IconProps,
+  type FloatingActionButtonLabelProps as LabelProps,
+  type FloatingActionButtonRootProps as RootProps,
+} from "./FloatingActionButton";

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,38 @@
+import {
+  floatingActionButton,
+  type FloatingActionButtonVariantProps,
+} from "@seed-design/css/recipes/floating-action-button";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+
+const { withProvider, withContext } = createSlotRecipeContext(floatingActionButton);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FloatingActionButtonRootProps
+  extends FloatingActionButtonVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FloatingActionButtonRoot = withProvider<
+  HTMLButtonElement,
+  FloatingActionButtonRootProps
+>(Primitive.button, "root");
+
+export interface FloatingActionButtonIconProps extends InternalIconProps {}
+
+export const FloatingActionButtonIcon = withContext<
+  HTMLButtonElement,
+  FloatingActionButtonIconProps
+>(InternalIcon, "icon");
+
+export interface FloatingActionButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FloatingActionButtonLabel = withContext<
+  HTMLSpanElement,
+  FloatingActionButtonLabelProps
+>(Primitive.span, "label");

package/src/components/FloatingActionButton/index.ts

@@ -0,0 +1,10 @@
+export {
+  FloatingActionButtonIcon,
+  FloatingActionButtonLabel,
+  FloatingActionButtonRoot,
+  type FloatingActionButtonIconProps,
+  type FloatingActionButtonLabelProps,
+  type FloatingActionButtonRootProps,
+} from "./FloatingActionButton";
+
+export * as FloatingActionButton from "./FloatingActionButton.namespace";