@seed-design/react 1.1.17 → 1.2.0

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";

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -1,35 +1,154 @@
-import { selectBox } from "@seed-design/css/recipes/select-box";
-import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxCheckmark,
+  type SelectBoxCheckmarkVariantProps,
+} from "@seed-design/css/recipes/selectBoxCheckmark";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
 import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { forwardRef } from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
+import clsx from "clsx";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+} | null>(null);
 export interface CheckSelectBoxGroupProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `CheckSelectBoxRoot` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
+
+export const CheckSelectBoxGroup = forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>(
+  ({ 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<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useCheckboxContext();
+
+  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>
+  );
+}
 
-/**
- * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <VStack> under it is recommended.
- */
-export const CheckSelectBoxGroup = withGroupContext<HTMLDivElement, CheckSelectBoxGroupProps>(
-  forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>((props, ref) => (
-    <Primitive.div ref={ref} role="group" {...props} />
-  )),
+export interface CheckSelectBoxRootProps
+  extends SelectBoxVariantProps,
+    CheckboxPrimitive.RootProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+
+export const CheckSelectBoxRoot = forwardRef<HTMLLabelElement, CheckSelectBoxRootProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <CheckboxPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </CheckboxPrimitive.Root>
+      </ClassNamesProvider>
+    );
+  },
 );
 
-export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {}
+export interface CheckSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const CheckSelectBoxRoot = withProvider<HTMLLabelElement, CheckSelectBoxRootProps>(
-  CheckboxPrimitive.Root,
-  "root",
+export const CheckSelectBoxTrigger = withContext<HTMLDivElement, CheckSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
 );
 
 export interface CheckSelectBoxContentProps
@@ -41,20 +160,106 @@ export const CheckSelectBoxContent = withContext<HTMLDivElement, CheckSelectBoxC
   "content",
 );
 
+export interface CheckSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxBody = withContext<HTMLDivElement, CheckSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
 export interface CheckSelectBoxLabelProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const CheckSelectBoxLabel = withContext<HTMLSpanElement, CheckSelectBoxLabelProps>(
+export const CheckSelectBoxLabel = withContext<HTMLDivElement, CheckSelectBoxLabelProps>(
   withStateProps(Primitive.div),
   "label",
 );
 
 export interface CheckSelectBoxDescriptionProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
 export const CheckSelectBoxDescription = withContext<
-  HTMLSpanElement,
+  HTMLDivElement,
   CheckSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
+
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } =
+  createSlotRecipeContext(selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps([useCheckboxContext]);
+
+export interface CheckSelectBoxCheckmarkControlProps
+  extends SelectBoxCheckmarkVariantProps,
+    CheckboxPrimitive.ControlProps {}
+
+export const CheckSelectBoxCheckmarkControl = withCheckmarkProvider<
+  HTMLDivElement,
+  CheckSelectBoxCheckmarkControlProps
+>(CheckboxPrimitive.Control, "root");
+
+export interface CheckSelectBoxCheckmarkIconProps extends InternalIconProps {}
+
+export const CheckSelectBoxCheckmarkIcon = withCheckmarkContext<
+  SVGSVGElement,
+  CheckSelectBoxCheckmarkIconProps
+>(withCheckmarkStateProps(InternalIcon), "icon");
+
+export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {}
+
+export const CheckSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  CheckSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <CheckboxPrimitive.HiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+
+export interface CheckSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxFooter = forwardRef<HTMLDivElement, CheckSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useCheckboxContext();
+    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>
+    );
+  },
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";

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

@@ -1,12 +1,20 @@
 export {
+  RadioSelectBoxBody as Body,
   RadioSelectBoxContent as Content,
   RadioSelectBoxDescription as Description,
+  RadioSelectBoxFooter as Footer,
+  RadioSelectBoxGroup as Group,
+  RadioSelectBoxHiddenInput as HiddenInput,
   RadioSelectBoxItem as Item,
   RadioSelectBoxLabel as Label,
-  RadioSelectBoxRoot as Root,
+  RadioSelectBoxTrigger as Trigger,
+  type RadioSelectBoxBodyProps as BodyProps,
   type RadioSelectBoxContentProps as ContentProps,
   type RadioSelectBoxDescriptionProps as DescriptionProps,
+  type RadioSelectBoxFooterProps as FooterProps,
+  type RadioSelectBoxGroupProps as GroupProps,
+  type RadioSelectBoxHiddenInputProps as HiddenInputProps,
   type RadioSelectBoxItemProps as ItemProps,
   type RadioSelectBoxLabelProps as LabelProps,
-  type RadioSelectBoxRootProps as RootProps,
+  type RadioSelectBoxTriggerProps as TriggerProps,
 } from "./RadioSelectBox";