@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -0,0 +1,248 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import clsx from "clsx";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
+
+const withStateProps = createWithStateProps([useRadioGroupItemContext]);
+
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+} | null>(null);
+
+export interface RadioSelectBoxGroupProps
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `RadioSelectBoxItem` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
+
+export const RadioSelectBoxGroup = forwardRef<HTMLDivElement, RadioSelectBoxGroupProps>(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+
+    return (
+      <PropsProvider value={{ layout }}>
+        <Primitive.div
+          ref={ref}
+          data-columns={columns}
+          className={clsx(recipeClassName, className)}
+          style={
+            {
+              ...style,
+              "--seed-select-box-group--columns": columns,
+            } as React.CSSProperties
+          }
+          {...otherProps}
+        />
+      </PropsProvider>
+    );
+  },
+);
+
+function FooterVisibilityProvider({
+  children,
+  footerVisibility,
+}: PropsWithChildren<{
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useRadioGroupItemContext();
+
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked,
+    }[footerVisibility],
+  });
+
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node: HTMLDivElement | null) => {
+    setIsFooterRendered(!!node);
+  }, []);
+
+  return (
+    <CollapsibleProvider value={collapsible}>
+      <FooterContext.Provider value={{ isFooterRendered, footerRef, footerVisibility }}>
+        {children}
+      </FooterContext.Provider>
+    </CollapsibleProvider>
+  );
+}
+
+export interface RadioSelectBoxItemProps
+  extends SelectBoxVariantProps,
+    RadioGroupPrimitive.ItemProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+
+export const RadioSelectBoxItem = forwardRef<HTMLLabelElement, RadioSelectBoxItemProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <RadioGroupPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </RadioGroupPrimitive.Item>
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface RadioSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxTrigger = withContext<HTMLDivElement, RadioSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
+);
+
+export interface RadioSelectBoxContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxContent = withContext<HTMLDivElement, RadioSelectBoxContentProps>(
+  withStateProps(Primitive.div),
+  "content",
+);
+
+export interface RadioSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxBody = withContext<HTMLDivElement, RadioSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
+export interface RadioSelectBoxLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxLabel = withContext<HTMLDivElement, RadioSelectBoxLabelProps>(
+  withStateProps(Primitive.div),
+  "label",
+);
+
+export interface RadioSelectBoxDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxDescription = withContext<
+  HTMLDivElement,
+  RadioSelectBoxDescriptionProps
+>(withStateProps(Primitive.div), "description");
+
+export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  RadioSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+
+  // NOTE: aria-expanded on role="radio" is not officially supported. See: https://github.com/w3c/aria/issues/1404
+  // but it helps some screen readers to announce the expanded/collapsed state of the footer.
+  // gov.uk applies aria-expanded on the radio input as well. See: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-a-related-question
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <RadioGroupPrimitive.ItemHiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+RadioSelectBoxHiddenInput.displayName = "RadioSelectBoxHiddenInput";
+
+export interface RadioSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxFooter = forwardRef<HTMLDivElement, RadioSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useRadioGroupItemContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+
+    if (collapsibleContext) {
+      return (
+        <Collapsible.Content
+          ref={composedRef}
+          className={clsx(classNames.footer, className)}
+          {...stateProps}
+          {...props}
+        >
+          {children}
+        </Collapsible.Content>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={composedRef}
+        className={clsx(classNames.footer, className)}
+        {...stateProps}
+        {...props}
+      >
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+RadioSelectBoxFooter.displayName = "RadioSelectBoxFooter";

package/src/components/SelectBox/index.ts

@@ -0,0 +1,48 @@
+export {
+  CheckSelectBoxBody,
+  CheckSelectBoxCheckmarkControl,
+  CheckSelectBoxCheckmarkIcon,
+  CheckSelectBoxContent,
+  CheckSelectBoxDescription,
+  CheckSelectBoxFooter,
+  CheckSelectBoxGroup,
+  CheckSelectBoxHiddenInput,
+  CheckSelectBoxLabel,
+  CheckSelectBoxRoot,
+  CheckSelectBoxTrigger,
+  type CheckSelectBoxBodyProps,
+  type CheckSelectBoxCheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps,
+  type CheckSelectBoxContentProps,
+  type CheckSelectBoxDescriptionProps,
+  type CheckSelectBoxFooterProps,
+  type CheckSelectBoxGroupProps,
+  type CheckSelectBoxHiddenInputProps,
+  type CheckSelectBoxLabelProps,
+  type CheckSelectBoxRootProps,
+  type CheckSelectBoxTriggerProps,
+} from "./CheckSelectBox";
+
+export {
+  RadioSelectBoxBody,
+  RadioSelectBoxContent,
+  RadioSelectBoxDescription,
+  RadioSelectBoxFooter,
+  RadioSelectBoxGroup,
+  RadioSelectBoxHiddenInput,
+  RadioSelectBoxItem,
+  RadioSelectBoxLabel,
+  RadioSelectBoxTrigger,
+  type RadioSelectBoxBodyProps,
+  type RadioSelectBoxContentProps,
+  type RadioSelectBoxDescriptionProps,
+  type RadioSelectBoxFooterProps,
+  type RadioSelectBoxGroupProps,
+  type RadioSelectBoxHiddenInputProps,
+  type RadioSelectBoxItemProps,
+  type RadioSelectBoxLabelProps,
+  type RadioSelectBoxTriggerProps,
+} from "./RadioSelectBox";
+
+export * as CheckSelectBox from "./CheckSelectBox.namespace";
+export * as RadioSelectBox from "./RadioSelectBox.namespace";

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,15 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { skeleton, type SkeletonVariantProps } from "@seed-design/css/recipes/skeleton";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withContext } = createRecipeContext(skeleton);
+
+export interface SkeletonProps
+  extends SkeletonVariantProps,
+    PrimitiveProps,
+    Pick<StyleProps, "height" | "width">,
+    Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {}
+
+export const Skeleton = withContext<HTMLDivElement, SkeletonProps>(withStyleProps(Primitive.div));

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from "./Skeleton";

package/src/components/Slider/Slider.namespace.ts

@@ -0,0 +1,28 @@
+export {
+  SliderRoot as Root,
+  SliderControl as Control,
+  SliderTrack as Track,
+  SliderRange as Range,
+  SliderThumb as Thumb,
+  SliderHiddenInput as HiddenInput,
+  SliderTick as Tick,
+  SliderMarkers as Markers,
+  SliderMarker as Marker,
+  SliderValueIndicatorRoot as ValueIndicatorRoot,
+  SliderValueIndicatorArrow as ValueIndicatorArrow,
+  SliderValueIndicatorArrowTip as ValueIndicatorArrowTip,
+  SliderValueIndicatorLabel as ValueIndicatorLabel,
+  type SliderRootProps as RootProps,
+  type SliderControlProps as ControlProps,
+  type SliderTrackProps as TrackProps,
+  type SliderRangeProps as RangeProps,
+  type SliderThumbProps as ThumbProps,
+  type SliderHiddenInputProps as HiddenInputProps,
+  type SliderTickProps as TickProps,
+  type SliderMarkersProps as MarkersProps,
+  type SliderMarkerProps as MarkerProps,
+  type SliderValueIndicatorRootProps as ValueIndicatorRootProps,
+  type SliderValueIndicatorArrowProps as ValueIndicatorArrowProps,
+  type SliderValueIndicatorArrowTipProps as ValueIndicatorArrowTipProps,
+  type SliderValueIndicatorLabelProps as ValueIndicatorLabelProps,
+} from "./Slider";

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { slider, type SliderVariantProps } from "@seed-design/css/recipes/slider";
+import { sliderTick, type SliderTickVariantProps } from "@seed-design/css/recipes/slider-tick";
+import {
+  sliderMarker,
+  type SliderMarkerVariantProps,
+} from "@seed-design/css/recipes/slider-marker";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { Slider, useSliderContext } from "@seed-design/react-slider";
+import { forwardRef, useState, type HTMLAttributes } from "react";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import clsx from "clsx";
+import { mergeProps } from "@seed-design/dom-utils";
+import { useFieldContext } from "@seed-design/react-field";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(slider);
+const { withContext: withTickContext } = createRecipeContext(sliderTick);
+const { withContext: withMarkerContext } = createRecipeContext(sliderMarker);
+
+const withFieldStateProps = createWithStateProps([{ useContext: useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps([
+  useSliderContext,
+  { useContext: useFieldContext, strict: false },
+]);
+
+export interface SliderRootProps extends SliderVariantProps, Slider.RootProps {}
+
+export const SliderRoot = withProvider<HTMLDivElement, SliderRootProps>(Slider.Root, "root");
+
+export interface SliderControlProps extends PrimitiveProps, HTMLAttributes<HTMLDivElement> {}
+
+export const SliderControl = withContext<HTMLDivElement, SliderControlProps>(
+  withStateProps(Primitive.div),
+  "control",
+);
+
+export interface SliderTrackProps extends PrimitiveProps, HTMLAttributes<HTMLDivElement> {}
+
+export const SliderTrack = withContext<HTMLDivElement, SliderTrackProps>(
+  withStateProps(Primitive.div),
+  "track",
+);
+
+export interface SliderRangeProps extends Slider.RangeProps {}
+
+export const SliderRange = withContext<HTMLDivElement, SliderRangeProps>(
+  withFieldStateProps(Slider.Range),
+  "range",
+);
+
+export interface SliderThumbProps extends Slider.ThumbProps {}
+
+export const SliderThumb = forwardRef<HTMLDivElement, Slider.ThumbProps>(
+  ({ thumbIndex, className, ...props }, ref) => {
+    const classNames = useClassNames();
+
+    const fieldContext = useFieldContext({ strict: false });
+    const mergedProps = mergeProps(fieldContext?.inputAriaAttributes ?? {}, props); // intentionally omits Field stateProps here because each thumb is styled individually
+
+    return (
+      <Slider.Thumb
+        ref={ref}
+        className={clsx(classNames.thumb, className)}
+        thumbIndex={thumbIndex}
+        {...mergedProps}
+      />
+    );
+  },
+);
+SliderThumb.displayName = "SliderThumb";
+
+export interface SliderHiddenInputProps extends Slider.HiddenInputProps {}
+
+export const SliderHiddenInput = Slider.HiddenInput;
+
+export interface SliderTickProps extends SliderTickVariantProps, Slider.TickProps {}
+
+export const SliderTick = withTickContext<HTMLDivElement, SliderTickProps>(Slider.Tick);
+
+export interface SliderMarkersProps extends PrimitiveProps, HTMLAttributes<HTMLDivElement> {}
+
+export const SliderMarkers = withContext<HTMLDivElement, SliderMarkersProps>(
+  withStateProps(Primitive.div),
+  "markers",
+);
+
+export interface SliderMarkerProps extends SliderMarkerVariantProps, Slider.MarkerProps {}
+
+export const SliderMarker = withMarkerContext<HTMLDivElement, SliderMarkerProps>(
+  withFieldStateProps(Slider.Marker),
+);
+
+export interface SliderValueIndicatorRootProps extends Slider.ValueIndicatorRootProps {}
+
+export const SliderValueIndicatorRoot = withContext<HTMLDivElement, SliderValueIndicatorRootProps>(
+  Slider.ValueIndicatorRoot,
+  "valueIndicatorRoot",
+);
+
+export interface SliderValueIndicatorLabelProps extends Slider.ValueIndicatorLabelProps {}
+
+export const SliderValueIndicatorLabel = withStateProps(Slider.ValueIndicatorLabel);
+
+export interface SliderValueIndicatorArrowProps
+  extends PrimitiveProps,
+    HTMLAttributes<HTMLDivElement> {}
+
+export const SliderValueIndicatorArrow = withContext<
+  HTMLDivElement,
+  SliderValueIndicatorArrowProps
+>(withStateProps(Primitive.div), "valueIndicatorArrow");
+
+export interface SliderValueIndicatorArrowTipProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * radius of the arrow tip
+   * @default 2
+   */
+  tipRadius?: number;
+}
+
+export const SliderValueIndicatorArrowTip = forwardRef<
+  SVGSVGElement,
+  SliderValueIndicatorArrowTipProps
+>(({ tipRadius = 2, className, ...otherProps }, ref) => {
+  const [valueIndicatorArrowTip, setValueIndicatorArrowTip] = useState<SVGSVGElement | null>(null);
+
+  const width = valueIndicatorArrowTip?.clientWidth ?? 0;
+  const height = valueIndicatorArrowTip?.clientHeight ?? 0;
+
+  const pathData = `M0,0
+      H${width}
+      L${width / 2 + tipRadius},${height - tipRadius}
+      Q${width / 2},${height} ${width / 2 - tipRadius},${height - tipRadius}
+      Z`;
+
+  const classNames = useClassNames();
+
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox={`0 0 ${width} ${height}`}
+      ref={composeRefs(setValueIndicatorArrowTip, ref)}
+      className={clsx(classNames.valueIndicatorArrowTip, className)}
+      {...otherProps}
+    >
+      <path stroke="none" d={pathData} />
+    </svg>
+  );
+});
+SliderValueIndicatorArrowTip.displayName = "SliderValueIndicatorArrowTip";

package/src/components/Slider/index.ts

@@ -0,0 +1,30 @@
+export {
+  SliderRoot,
+  SliderControl,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+  SliderHiddenInput,
+  SliderTick,
+  SliderMarkers,
+  SliderMarker,
+  SliderValueIndicatorRoot,
+  SliderValueIndicatorArrow,
+  SliderValueIndicatorArrowTip,
+  SliderValueIndicatorLabel,
+  type SliderRootProps,
+  type SliderControlProps,
+  type SliderTrackProps,
+  type SliderRangeProps,
+  type SliderThumbProps,
+  type SliderHiddenInputProps,
+  type SliderTickProps,
+  type SliderMarkersProps,
+  type SliderMarkerProps,
+  type SliderValueIndicatorRootProps,
+  type SliderValueIndicatorArrowProps,
+  type SliderValueIndicatorArrowTipProps,
+  type SliderValueIndicatorLabelProps,
+} from "./Slider";
+
+export * as Slider from "./Slider.namespace";

package/src/components/Snackbar/Snackbar.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  SnackbarActionButton as ActionButton,
+  SnackbarAvoidOverlap as AvoidOverlap,
+  SnackbarHiddenCloseButton as HiddenCloseButton,
+  SnackbarMessage as Message,
+  SnackbarContent as Content,
+  SnackbarPrefixIcon as PrefixIcon,
+  SnackbarRegion as Region,
+  SnackbarRenderer as Renderer,
+  SnackbarRoot as Root,
+  SnackbarRootProvider as RootProvider,
+  type SnackbarActionButtonProps as ActionButtonProps,
+  type SnackbarAvoidOverlapProps as AvoidOverlapProps,
+  type SnackbarHiddenCloseButtonProps as HiddenCloseButtonProps,
+  type SnackbarMessageProps as MessageProps,
+  type SnackbarContentProps as ContentProps,
+  type SnackbarPrefixIconProps as PrefixIconProps,
+  type SnackbarRegionProps as RegionProps,
+  type SnackbarRendererProps as RendererProps,
+  type SnackbarRootProps as RootProps,
+  type SnackbarRootProviderProps as RootProviderProps,
+} from "./Snackbar";

package/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,110 @@
+import { snackbar, type SnackbarVariantProps } from "@seed-design/css/recipes/snackbar";
+import { snackbarRegion } from "@seed-design/css/recipes/snackbar-region";
+import { visuallyHidden } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
+import { forwardRef } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+
+const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
+const { withProvider, withContext } = createSlotRecipeContext(snackbar);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarRootProviderProps extends SnackbarPrimitive.RootProviderProps {}
+
+export const SnackbarRootProvider = SnackbarPrimitive.RootProvider;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarRegionProps extends SnackbarVariantProps, SnackbarPrimitive.RegionProps {}
+
+export const SnackbarRegion = withRegionContext<HTMLDivElement, SnackbarRegionProps>(
+  SnackbarPrimitive.Region,
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarRootProps extends SnackbarVariantProps, SnackbarPrimitive.RootProps {}
+
+export const SnackbarRoot = withProvider<HTMLDivElement, SnackbarRootProps>(
+  SnackbarPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SnackbarContent = withContext<HTMLDivElement, SnackbarContentProps>(
+  Primitive.div,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarMessageProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const SnackbarMessage = withContext<HTMLSpanElement, SnackbarMessageProps>(
+  Primitive.span,
+  "message",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarPrefixIconProps extends InternalIconProps {}
+
+export const SnackbarPrefixIcon = withContext<HTMLDivElement, SnackbarPrefixIconProps>(
+  InternalIcon,
+  "prefixIcon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarActionButtonProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActionButtonProps>(
+  Primitive.button,
+  "actionButton",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarHiddenCloseButtonProps extends SnackbarPrimitive.CloseButtonProps {}
+
+/**
+ * Visually hidden button that closes the snackbar (for screen readers).
+ */
+export const SnackbarHiddenCloseButton = forwardRef<
+  HTMLButtonElement,
+  SnackbarHiddenCloseButtonProps
+>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return (
+    <SnackbarPrimitive.CloseButton
+      ref={ref}
+      style={{ ...visuallyHidden, ...style }}
+      {...otherProps}
+    />
+  );
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarRendererProps extends SnackbarPrimitive.RendererProps {}
+
+export const SnackbarRenderer = SnackbarPrimitive.Renderer;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SnackbarAvoidOverlapProps extends SnackbarPrimitive.AvoidOverlapProps {}
+
+export const SnackbarAvoidOverlap = SnackbarPrimitive.AvoidOverlap;