@seed-design/react 1.1.17 → 1.2.1

package/src/components/MenuSheet/MenuSheet.tsx

@@ -6,16 +6,17 @@ import {
   type MenuSheetItemVariantProps,
 } from "@seed-design/css/recipes/menu-sheet-item";
 import * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import clsx from "clsx";
 
-const { withRootProvider, withContext } = createSlotRecipeContext(menuSheet);
+const { withRootProvider, withContext, useClassNames } = createSlotRecipeContext(menuSheet);
 const {
-  withContext: withItemContext,
   PropsProvider: ItemPropsProvider,
   useProps: useItemProps,
-} = createRecipeContext(menuSheetItem);
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -68,18 +69,18 @@ export interface MenuSheetContentProps
   extends DialogPrimitive.ContentProps,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
-const MenuSheetContentBase = withContext<HTMLDivElement, DialogPrimitive.ContentProps>(
-  DialogPrimitive.Content,
-  "content",
-);
-
 export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetContentProps>(
-  ({ labelAlign, children, ...props }, ref) => {
+  ({ className, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+    const classNames = useClassNames();
+
     return (
-      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
-        <MenuSheetContentBase ref={ref} {...props}>
-          {children}
-        </MenuSheetContentBase>
+      <ItemPropsProvider value={variantProps}>
+        <DialogPrimitive.Content
+          className={clsx(classNames.content, className)}
+          ref={ref}
+          {...otherProps}
+        />
       </ItemPropsProvider>
     );
   },
@@ -96,8 +97,9 @@ export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>
   "header",
 );
 
-////////////////////////////////////////////////////////////////////////////////////
-
+// NOTE: uses DialogPrimitive.TitleProps,
+// but actual rendered component is a Primitive.h2 rather than a DialogPrimitive.Title
+// find out why later; h2 is same but missing and some a11y features
 export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
 
 export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
@@ -105,6 +107,16 @@ export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProp
   "title",
 );
 
+// NOTE: uses DialogPrimitive.DescriptionProps,
+// but actual rendered component is a Primitive.p rather than a DialogPrimitive.Description
+// find out why later; p is same but missing and some a11y features
+export interface MenuSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetDescriptionProps>(
+  withStateProps(Primitive.p),
+  "description",
+);
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
@@ -120,21 +132,22 @@ export interface MenuSheetGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
-const MenuSheetGroupBase = withContext<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  withStateProps(Primitive.div),
-  "group",
-);
-
 export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupProps>(
-  ({ labelAlign: overriddenLabelAlign, children, ...props }, ref) => {
+  ({ className, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
     const parentProps = useItemProps();
-    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
+
+    const classNames = useClassNames();
+    const { stateProps } = useDialogContext();
 
     return (
-      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
-        <MenuSheetGroupBase ref={ref} {...props}>
-          {children}
-        </MenuSheetGroupBase>
+      <ItemPropsProvider value={{ ...parentProps, ...variantProps }}>
+        <Primitive.div
+          className={clsx(classNames.group, className)}
+          ref={ref}
+          {...stateProps}
+          {...otherProps}
+        />
       </ItemPropsProvider>
     );
   },
@@ -147,19 +160,54 @@ export interface MenuSheetItemProps
     MenuSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-const MenuSheetItemBase = withItemContext<HTMLButtonElement, MenuSheetItemProps>(
-  withStateProps(Primitive.button),
-);
-
 export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
-  ({ labelAlign: overriddenLabelAlign, ...props }, ref) => {
+  ({ className: propClassName, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
     const parentProps = useItemProps();
-    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
 
-    return <MenuSheetItemBase ref={ref} labelAlign={labelAlign} {...props} />;
+    const classNames = menuSheetItem({ ...parentProps, ...variantProps });
+    const { stateProps } = useDialogContext();
+
+    return (
+      <ItemClassNamesProvider value={classNames}>
+        <Primitive.button
+          ref={ref}
+          className={clsx(classNames.root, propClassName)}
+          {...stateProps}
+          {...otherProps}
+        />
+      </ItemClassNamesProvider>
+    );
   },
 );
 
+export interface MenuSheetItemContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetItemContent = withItemContext<HTMLDivElement, MenuSheetItemContentProps>(
+  withStateProps(Primitive.div),
+  "content",
+);
+
+export interface MenuSheetItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuSheetItemLabel = withItemContext<HTMLSpanElement, MenuSheetItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+export interface MenuSheetItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuSheetItemDescription = withItemContext<
+  HTMLSpanElement,
+  MenuSheetItemDescriptionProps
+>(withStateProps(Primitive.span), "description");
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface MenuSheetFooterProps

package/src/components/MenuSheet/index.ts

@@ -6,10 +6,14 @@ export {
   MenuSheetHeader,
   MenuSheetRoot,
   MenuSheetTitle,
+  MenuSheetDescription,
   MenuSheetTrigger,
   MenuSheetList,
   MenuSheetGroup,
   MenuSheetItem,
+  MenuSheetItemContent,
+  MenuSheetItemLabel,
+  MenuSheetItemDescription,
   MenuSheetCloseButton,
   type MenuSheetBackdropProps,
   type MenuSheetPositionerProps,
@@ -18,10 +22,14 @@ export {
   type MenuSheetHeaderProps,
   type MenuSheetRootProps,
   type MenuSheetTitleProps,
+  type MenuSheetDescriptionProps,
   type MenuSheetTriggerProps,
   type MenuSheetListProps,
   type MenuSheetGroupProps,
   type MenuSheetItemProps,
+  type MenuSheetItemContentProps,
+  type MenuSheetItemLabelProps,
+  type MenuSheetItemDescriptionProps,
   type MenuSheetCloseButtonProps,
 } from "./MenuSheet";
 

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,4 +1,5 @@
 import { radio, type RadioVariantProps } from "@seed-design/css/recipes/radio";
+import { radioGroup, type RadioGroupVariantProps } from "@seed-design/css/recipes/radio-group";
 import { radiomark, type RadiomarkVariantProps } from "@seed-design/css/recipes/radiomark";
 import { mergeProps } from "@seed-design/dom-utils";
 import {
@@ -12,7 +13,9 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon } from "../private/Icon";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
+const { withContext: withGroupContext } = createRecipeContext(radioGroup);
 const { ClassNamesProvider, withContext } = createSlotRecipeContext(radio);
 const {
   withProvider: withRadiomarkProvider,
@@ -23,9 +26,12 @@ const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface RadioGroupRootProps extends RadioGroupPrimitive.RootProps {}
+export interface RadioGroupRootProps
+  extends RadioGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const RadioGroupRoot = RadioGroupPrimitive.Root;
+export const RadioGroupRoot = withGroupContext<HTMLDivElement, RadioGroupRootProps>(Primitive.div);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/RadioGroupField/RadioGroupField.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  RadioGroupFieldRoot as Root,
+  RadioGroupFieldHeader as Header,
+  RadioGroupFieldLabel as Label,
+  RadioGroupFieldIndicatorText as IndicatorText,
+  RadioGroupFieldRequiredIndicator as RequiredIndicator,
+  RadioGroupFieldFooter as Footer,
+  RadioGroupFieldDescription as Description,
+  RadioGroupFieldErrorMessage as ErrorMessage,
+  type RadioGroupFieldRootProps as RootProps,
+  type RadioGroupFieldHeaderProps as HeaderProps,
+  type RadioGroupFieldLabelProps as LabelProps,
+  type RadioGroupFieldIndicatorTextProps as IndicatorTextProps,
+  type RadioGroupFieldRequiredIndicatorProps as RequiredIndicatorProps,
+  type RadioGroupFieldFooterProps as FooterProps,
+  type RadioGroupFieldDescriptionProps as DescriptionProps,
+  type RadioGroupFieldErrorMessageProps as ErrorMessageProps,
+} from "./RadioGroupField";

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { RadioGroup as RadioGroupPrimitive } from "@seed-design/react-radio-group";
+import type * as React from "react";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { InternalIcon } from "../private/Icon";
+
+const { withProvider, withContext } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldRootProps
+  extends FieldVariantProps,
+    RadioGroupPrimitive.RootProps {}
+
+export const RadioGroupFieldRoot = withProvider<HTMLDivElement, RadioGroupFieldRootProps>(
+  RadioGroupPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioGroupFieldHeader = withContext<HTMLDivElement, RadioGroupFieldHeaderProps>(
+  Primitive.div,
+  "header",
+);
+
+export interface RadioGroupFieldLabelProps
+  extends FieldLabelVariantProps,
+    RadioGroupPrimitive.LabelProps {}
+
+export const RadioGroupFieldLabel = withLabelProvider<HTMLDivElement, RadioGroupFieldLabelProps>(
+  RadioGroupPrimitive.Label,
+  "root",
+);
+
+export interface RadioGroupFieldIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const RadioGroupFieldIndicatorText = withLabelContext<
+  HTMLSpanElement,
+  RadioGroupFieldIndicatorTextProps
+>(Primitive.span, "indicatorText");
+
+export interface RadioGroupFieldRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const RadioGroupFieldRequiredIndicator = forwardRef<
+  SVGSVGElement,
+  RadioGroupFieldRequiredIndicatorProps
+>(({ 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}
+    />
+  );
+});
+RadioGroupFieldRequiredIndicator.displayName = "RadioGroupFieldRequiredIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioGroupFieldFooter = withContext<HTMLDivElement, RadioGroupFieldFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+export interface RadioGroupFieldDescriptionProps extends RadioGroupPrimitive.DescriptionProps {}
+
+export const RadioGroupFieldDescription = withContext<
+  HTMLSpanElement,
+  RadioGroupFieldDescriptionProps
+>(RadioGroupPrimitive.Description, "description");
+
+export interface RadioGroupFieldErrorMessageProps extends RadioGroupPrimitive.ErrorMessageProps {}
+
+export const RadioGroupFieldErrorMessage = withContext<
+  HTMLDivElement,
+  RadioGroupFieldErrorMessageProps
+>(RadioGroupPrimitive.ErrorMessage, "errorMessage");

package/src/components/RadioGroupField/index.ts

@@ -0,0 +1,2 @@
+export * from "./RadioGroupField";
+export * as RadioGroupField from "./RadioGroupField.namespace";

package/src/components/SelectBox/CheckSelectBox.namespace.ts

@@ -1,12 +1,24 @@
 export {
+  CheckSelectBoxBody as Body,
+  CheckSelectBoxCheckmarkControl as CheckmarkControl,
+  CheckSelectBoxCheckmarkIcon as CheckmarkIcon,
   CheckSelectBoxContent as Content,
   CheckSelectBoxDescription as Description,
+  CheckSelectBoxFooter as Footer,
   CheckSelectBoxGroup as Group,
+  CheckSelectBoxHiddenInput as HiddenInput,
   CheckSelectBoxLabel as Label,
   CheckSelectBoxRoot as Root,
+  CheckSelectBoxTrigger as Trigger,
+  type CheckSelectBoxBodyProps as BodyProps,
+  type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps,
   type CheckSelectBoxContentProps as ContentProps,
   type CheckSelectBoxDescriptionProps as DescriptionProps,
+  type CheckSelectBoxFooterProps as FooterProps,
   type CheckSelectBoxGroupProps as GroupProps,
+  type CheckSelectBoxHiddenInputProps as HiddenInputProps,
   type CheckSelectBoxLabelProps as LabelProps,
   type CheckSelectBoxRootProps as RootProps,
+  type CheckSelectBoxTriggerProps as TriggerProps,
 } from "./CheckSelectBox";