@seed-design/react 0.2.5 → 1.0.0

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

@@ -3,6 +3,7 @@ export {
   SnackbarAvoidOverlap as AvoidOverlap,
   SnackbarHiddenCloseButton as HiddenCloseButton,
   SnackbarMessage as Message,
+  SnackbarContent as Content,
   SnackbarPrefixIcon as PrefixIcon,
   SnackbarRegion as Region,
   SnackbarRenderer as Renderer,
@@ -12,6 +13,7 @@ export {
   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,

package/src/components/Snackbar/Snackbar.tsx

@@ -36,11 +36,22 @@ export const SnackbarRoot = withProvider<HTMLDivElement, SnackbarRootProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+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<HTMLDivElement, SnackbarMessageProps>(
+export const SnackbarMessage = withContext<HTMLSpanElement, SnackbarMessageProps>(
   Primitive.span,
   "message",
 );

package/src/components/Switch/Switch.tsx

@@ -1,12 +1,19 @@
 import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
 import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/switch";
+import { switchMark, type SwitchMarkVariantProps } from "@seed-design/css/recipes/switch-mark";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import React from "react";
 import clsx from "clsx";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 
 const { withContext, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
+const {
+  withContext: withControlContext,
+  PropsProvider: ControlPropsProvider,
+  withProvider: withControlProvider,
+} = createSlotRecipeContext(switchMark);
 const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -18,53 +25,54 @@ type SwitchVariantDeprecatedSizeProps = "small" | "medium";
 
 export interface SwitchRootProps
   extends Omit<SwitchVariantProps, "size">,
+    Omit<SwitchMarkVariantProps, "size">,
     SwitchPrimitive.RootProps {
   size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
 
 export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
-  ({ size: propSize, className, ...otherProps }, ref) => {
-    const classNames = switchStyle({
-      // TODO: remove this mapping completely
-      size: propSize === "small" ? "16" : propSize === "medium" ? "32" : propSize,
-      ...otherProps,
-    });
+  ({ className, ...props }, ref) => {
+    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] =
+      splitMultipleVariantsProps(
+        {
+          ...props,
+          // TODO: replace this mapping completely
+          size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size,
+        },
+        { switchMark, switch: switchStyle },
+      );
+
+    const classNames = switchStyle(switchVariantProps);
 
     return (
-      <ClassNamesProvider value={classNames}>
-        <SwitchPrimitive.Root
-          ref={ref}
-          className={clsx(classNames.root, className)}
-          {...otherProps}
-        />
-      </ClassNamesProvider>
+      <ControlPropsProvider value={switchMarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <SwitchPrimitive.Root
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </ControlPropsProvider>
     );
   },
 );
-
-// XXX: use when the deprecated size props are removed
-
-// export interface SwitchRootProps extends SwitchVariantProps, SwitchPrimitive.RootProps {}
-
-// export const SwitchRoot = withProvider<HTMLLabelElement, SwitchRootProps>(
-//   SwitchPrimitive.Root,
-//   "root",
-// );
+SwitchRoot.displayName = "SwitchRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchControlProps extends SwitchPrimitive.ControlProps {}
+export interface SwitchControlProps extends SwitchMarkVariantProps, SwitchPrimitive.ControlProps {}
 
-export const SwitchControl = withContext<HTMLDivElement, SwitchControlProps>(
+export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
   SwitchPrimitive.Control,
-  "control",
+  "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface SwitchThumbProps extends SwitchPrimitive.ThumbProps {}
 
-export const SwitchThumb = withContext<HTMLDivElement, SwitchThumbProps>(
+export const SwitchThumb = withControlContext<HTMLDivElement, SwitchThumbProps>(
   SwitchPrimitive.Thumb,
   "thumb",
 );

package/src/components/index.ts

@@ -6,7 +6,7 @@ export * from "./Badge";
 export * from "./BottomSheet";
 export * from "./Box";
 export * from "./Callout";
-export * from "./Celcius";
+export * from "./Celsius";
 export * from "./Checkbox";
 export * from "./Chip";
 export * from "./ChipTabs";

package/src/utils/splitMultipleVariantsProps.d.ts

@@ -0,0 +1,21 @@
+type ExtractVariantProps<T> = T extends {
+  splitVariantProps: (...args: never[]) => [infer V, unknown];
+}
+  ? V
+  : never;
+
+type ExtractAllVariantKeys<R> = {
+  [K in keyof R]: ExtractVariantProps<R[K]> extends infer V
+    ? V extends Record<string, unknown>
+      ? keyof V
+      : never
+    : never;
+}[keyof R];
+
+export declare function splitMultipleVariantsProps<
+  R extends Record<string, { splitVariantProps: (...args: never[]) => unknown[] }>,
+  P,
+>(
+  props: P,
+  recipesMap: R,
+): [{ [K in keyof R]: ExtractVariantProps<R[K]> }, Omit<P, ExtractAllVariantKeys<R>>];

package/src/utils/splitMultipleVariantsProps.mjs

@@ -0,0 +1,25 @@
+export function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}

package/lib/components/Celcius/Celcius.d.ts

@@ -1,6 +0,0 @@
-import type * as React from "react";
-export interface CelciusProps {
-    value: number;
-}
-export declare const Celcius: React.FC<CelciusProps>;
-//# sourceMappingURL=Celcius.d.ts.map

package/lib/components/Celcius/Celcius.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Celcius.d.ts","sourceRoot":"","sources":["../../../src/components/Celcius/Celcius.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAE1C,CAAC"}

package/lib/components/Celcius/Celcius.js

@@ -1,6 +0,0 @@
-'use client';
-const Celcius = (props) => {
-  return `${props.value}°C`;
-};
-
-export { Celcius };

package/lib/components/Celcius/index.d.ts

@@ -1,2 +0,0 @@
-export { Celcius, type CelciusProps, } from './Celcius';
-//# sourceMappingURL=index.d.ts.map

package/lib/components/Celcius/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Celcius/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,YAAY,GAClB,MAAM,WAAW,CAAC"}

package/lib/components/Celcius/index.js

@@ -1 +0,0 @@
-export { Celcius } from './Celcius.js';

package/src/components/Celcius/Celcius.tsx

@@ -1,9 +0,0 @@
-import type * as React from "react";
-
-export interface CelciusProps {
-  value: number;
-}
-
-export const Celcius: React.FC<CelciusProps> = (props) => {
-  return `${props.value}°C`;
-};

package/src/components/Celcius/index.ts

@@ -1,4 +0,0 @@
-export {
-  Celcius,
-  type CelciusProps,
-} from "./Celcius";