@seed-design/react 0.2.2 → 0.2.4

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,133 @@
+import { radio, type RadioVariantProps } from "@seed-design/css/recipes/radio";
+import { radiomark, type RadiomarkVariantProps } from "@seed-design/css/recipes/radiomark";
+import { mergeProps } from "@seed-design/dom-utils";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon } from "../private/Icon";
+
+const { ClassNamesProvider, withContext } = createSlotRecipeContext(radio);
+const {
+  withProvider: withRadiomarkProvider,
+  useClassNames: useRadiomarkClassNames,
+  PropsProvider: RadiomarkPropsProvider,
+} = createSlotRecipeContext(radiomark);
+const withStateProps = createWithStateProps([useRadioGroupItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupRootProps extends RadioGroupPrimitive.RootProps {}
+
+export const RadioGroupRoot = RadioGroupPrimitive.Root;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemProps
+  extends RadioVariantProps,
+    RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemProps {}
+
+export const RadioGroupItem = Object.assign(
+  forwardRef<HTMLLabelElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
+    const [radioVariantProps, __otherProps] = radio.splitVariantProps(props);
+    const [radiomarkVariantProps] = radiomark.splitVariantProps(props);
+
+    const [, otherProps] = radiomark.splitVariantProps(__otherProps);
+
+    const classNames = radio(radioVariantProps);
+
+    return (
+      <RadiomarkPropsProvider value={radiomarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <RadioGroupPrimitive.Item
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </RadiomarkPropsProvider>
+    );
+  }),
+  {
+    Primitive: RadioGroupPrimitive.Item,
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const RadioGroupItemLabel = withContext<HTMLSpanElement, RadioGroupItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemControlProps
+  extends RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemControlProps {}
+
+export const RadioGroupItemControl = withRadiomarkProvider<
+  HTMLDivElement,
+  RadioGroupItemControlProps
+>(RadioGroupPrimitive.ItemControl, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemIndicatorProps extends React.SVGAttributes<SVGSVGElement> {
+  /**
+   * The icon to display when the radio is unchecked.
+   */
+  unchecked?: React.ReactNode;
+
+  /**
+   * The icon to display when the radio is checked.
+   */
+  checked?: React.ReactNode;
+}
+
+export const RadioGroupItemIndicator = forwardRef<SVGSVGElement, RadioGroupItemIndicatorProps>(
+  ({ unchecked: uncheckedSvg, checked: checkedSvg, ...otherProps }, ref) => {
+    const { stateProps, checked } = useRadioGroupItemContext();
+    const classNames = useRadiomarkClassNames();
+
+    const mergedProps = mergeProps(
+      stateProps,
+      { className: classNames.icon },
+      otherProps as React.HTMLAttributes<HTMLElement>,
+    );
+
+    if (checked)
+      return (
+        <InternalIcon
+          ref={ref}
+          svg={
+            checkedSvg ?? (
+              <svg aria-hidden="true" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="12" fill="currentColor" />
+              </svg>
+            )
+          }
+          {...mergedProps}
+        />
+      );
+    if (uncheckedSvg) return <InternalIcon ref={ref} svg={uncheckedSvg} {...mergedProps} />;
+    return null;
+  },
+);
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioGroupItemHiddenInput = RadioGroupPrimitive.ItemHiddenInput;

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,16 @@
+export {
+  RadioGroupRoot,
+  RadioGroupItem,
+  RadioGroupItemLabel,
+  RadioGroupItemControl,
+  RadioGroupItemIndicator,
+  RadioGroupItemHiddenInput,
+  type RadioGroupRootProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemLabelProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemIndicatorProps,
+  type RadioGroupItemHiddenInputProps,
+} from "./RadioGroup";
+
+export * as RadioGroup from "./RadioGroup.namespace";

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

@@ -1,18 +1,12 @@
 export {
   CheckSelectBoxContent as Content,
-  CheckSelectBoxControl as Control,
   CheckSelectBoxDescription as Description,
   CheckSelectBoxGroup as Group,
-  CheckSelectBoxHiddenInput as HiddenInput,
-  CheckSelectBoxIcon as Icon,
   CheckSelectBoxLabel as Label,
   CheckSelectBoxRoot as Root,
   type CheckSelectBoxContentProps as ContentProps,
-  type CheckSelectBoxControlProps as ControlProps,
   type CheckSelectBoxDescriptionProps as DescriptionProps,
   type CheckSelectBoxGroupProps as GroupProps,
-  type CheckSelectBoxHiddenInputProps as HiddenInputProps,
-  type CheckSelectBoxIconProps as IconProps,
   type CheckSelectBoxLabelProps as LabelProps,
   type CheckSelectBoxRootProps as RootProps,
 } from "./CheckSelectBox";

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -6,7 +6,6 @@ import { forwardRef } from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext(selectBox);
@@ -59,21 +58,3 @@ export const CheckSelectBoxDescription = withContext<
   HTMLSpanElement,
   CheckSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
-
-export interface CheckSelectBoxControlProps extends CheckboxPrimitive.ControlProps {}
-
-export const CheckSelectBoxControl = withContext<HTMLDivElement, CheckSelectBoxControlProps>(
-  CheckboxPrimitive.Control,
-  "checkboxControl",
-);
-
-export interface CheckSelectBoxIconProps extends InternalIconProps {}
-
-export const CheckSelectBoxIcon = withContext<SVGSVGElement, CheckSelectBoxIconProps>(
-  withStateProps(InternalIcon),
-  "checkboxIcon",
-);
-
-export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {}
-
-export const CheckSelectBoxHiddenInput = CheckboxPrimitive.HiddenInput;

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

@@ -1,17 +1,11 @@
 export {
   RadioSelectBoxContent as Content,
-  RadioSelectBoxControl as Control,
   RadioSelectBoxDescription as Description,
-  RadioSelectBoxHiddenInput as HiddenInput,
-  RadioSelectBoxIcon as Icon,
   RadioSelectBoxItem as Item,
   RadioSelectBoxLabel as Label,
   RadioSelectBoxRoot as Root,
   type RadioSelectBoxContentProps as ContentProps,
-  type RadioSelectBoxControlProps as ControlProps,
   type RadioSelectBoxDescriptionProps as DescriptionProps,
-  type RadioSelectBoxHiddenInputProps as HiddenInputProps,
-  type RadioSelectBoxIconProps as IconProps,
   type RadioSelectBoxItemProps as ItemProps,
   type RadioSelectBoxLabelProps as LabelProps,
   type RadioSelectBoxRootProps as RootProps,

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -8,7 +8,6 @@ import {
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext(selectBox);
@@ -53,21 +52,3 @@ export const RadioSelectBoxDescription = withContext<
   HTMLSpanElement,
   RadioSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
-
-export interface RadioSelectBoxControlProps extends RadioGroupPrimitive.ItemControlProps {}
-
-export const RadioSelectBoxControl = withContext<HTMLDivElement, RadioSelectBoxControlProps>(
-  RadioGroupPrimitive.ItemControl,
-  "radioControl",
-);
-
-export interface RadioSelectBoxIconProps extends InternalIconProps {}
-
-export const RadioSelectBoxIcon = withContext<SVGSVGElement, RadioSelectBoxIconProps>(
-  withStateProps(InternalIcon),
-  "radioIcon",
-);
-
-export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
-
-export const RadioSelectBoxHiddenInput = RadioGroupPrimitive.ItemHiddenInput;

package/src/components/SelectBox/index.ts

@@ -1,36 +1,24 @@
 export {
   CheckSelectBoxContent,
-  CheckSelectBoxControl,
   CheckSelectBoxDescription,
   CheckSelectBoxGroup,
-  CheckSelectBoxHiddenInput,
-  CheckSelectBoxIcon,
   CheckSelectBoxLabel,
   CheckSelectBoxRoot,
   type CheckSelectBoxContentProps,
-  type CheckSelectBoxControlProps,
   type CheckSelectBoxDescriptionProps,
   type CheckSelectBoxGroupProps,
-  type CheckSelectBoxHiddenInputProps,
-  type CheckSelectBoxIconProps,
   type CheckSelectBoxLabelProps,
   type CheckSelectBoxRootProps,
 } from "./CheckSelectBox";
 
 export {
   RadioSelectBoxContent,
-  RadioSelectBoxControl,
   RadioSelectBoxDescription,
-  RadioSelectBoxHiddenInput,
-  RadioSelectBoxIcon,
   RadioSelectBoxItem,
   RadioSelectBoxLabel,
   RadioSelectBoxRoot,
   type RadioSelectBoxContentProps,
-  type RadioSelectBoxControlProps,
   type RadioSelectBoxDescriptionProps,
-  type RadioSelectBoxHiddenInputProps,
-  type RadioSelectBoxIconProps,
   type RadioSelectBoxItemProps,
   type RadioSelectBoxLabelProps,
   type RadioSelectBoxRootProps,

package/src/components/Switch/Switch.tsx

@@ -27,6 +27,7 @@ export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
     const classNames = switchStyle({
       // TODO: remove this mapping completely
       size: propSize === "small" ? "16" : propSize === "medium" ? "32" : propSize,
+      ...otherProps,
     });
 
     return (

package/src/components/index.ts

@@ -20,15 +20,16 @@ export * from "./Divider";
 export * from "./ExtendedActionSheet";
 export * from "./ExtendedFab";
 export * from "./Fab";
-export * from "./FloatingActionButton";
 export * from "./Flex";
 export * from "./Float";
+export * from "./FloatingActionButton";
 export * from "./HelpBubble";
 export * from "./Icon";
 export * from "./IdentityPlaceholder";
 export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./LinkContent";
+export * from "./List";
 export * from "./LoadingIndicator";
 export * from "./MannerTemp";
 export * from "./MannerTempBadge";
@@ -38,6 +39,7 @@ export * from "./PageBanner";
 export * from "./Portal";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
+export * from "./RadioGroup";
 export * from "./ReactionButton";
 export * from "./ResponsivePair";
 export * from "./SegmentedControl";