@seed-design/react 0.1.3 → 0.1.5

package/src/components/MenuSheet/MenuSheet.tsx

@@ -0,0 +1,172 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { menuSheet, type MenuSheetVariantProps } from "@seed-design/css/recipes/menu-sheet";
+import {
+  menuSheetItem,
+  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";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(menuSheet);
+const {
+  withContext: withItemContext,
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+} = createRecipeContext(menuSheetItem);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimitive.RootProps {}
+
+export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const MenuSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+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) => {
+    return (
+      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
+        <MenuSheetContentBase ref={ref} {...props}>
+          {children}
+        </MenuSheetContentBase>
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+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) => {
+    const parentProps = useItemProps();
+    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
+
+    return (
+      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
+        <MenuSheetGroupBase ref={ref} {...props}>
+          {children}
+        </MenuSheetGroupBase>
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetItemProps
+  extends PrimitiveProps,
+    MenuSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+const MenuSheetItemBase = withItemContext<HTMLButtonElement, MenuSheetItemProps>(
+  withStateProps(Primitive.button),
+);
+
+export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
+  ({ labelAlign: overriddenLabelAlign, ...props }, ref) => {
+    const parentProps = useItemProps();
+    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
+
+    return <MenuSheetItemBase ref={ref} labelAlign={labelAlign} {...props} />;
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
+  DialogPrimitive.CloseButton,
+  "closeButton",
+);

package/src/components/MenuSheet/index.ts

@@ -0,0 +1,28 @@
+export {
+  MenuSheetBackdrop,
+  MenuSheetPositioner,
+  MenuSheetContent,
+  MenuSheetFooter,
+  MenuSheetHeader,
+  MenuSheetRoot,
+  MenuSheetTitle,
+  MenuSheetTrigger,
+  MenuSheetList,
+  MenuSheetGroup,
+  MenuSheetItem,
+  MenuSheetCloseButton,
+  type MenuSheetBackdropProps,
+  type MenuSheetPositionerProps,
+  type MenuSheetContentProps,
+  type MenuSheetFooterProps,
+  type MenuSheetHeaderProps,
+  type MenuSheetRootProps,
+  type MenuSheetTitleProps,
+  type MenuSheetTriggerProps,
+  type MenuSheetListProps,
+  type MenuSheetGroupProps,
+  type MenuSheetItemProps,
+  type MenuSheetCloseButtonProps,
+} from "./MenuSheet";
+
+export * as MenuSheet from "./MenuSheet.namespace";

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./Box";
 export * from "./Callout";
 export * from "./Celcius";
 export * from "./Checkbox";
+export * from "./Chip";
 export * from "./ChipTabs";
 export * from "./Columns";
 export * from "./ConsistentWidth";
@@ -31,6 +32,7 @@ export * from "./LinkContent";
 export * from "./LoadingIndicator";
 export * from "./MannerTemp";
 export * from "./MannerTempBadge";
+export * from "./MenuSheet";
 export * from "./NotificationBadge";
 export * from "./Portal";
 export * from "./ProgressCircle";

package/src/utils/styled.tsx

@@ -51,6 +51,19 @@ function handleBleed(
   return handleDimension(dimension);
 }
 
+export function handlePaddingWithSafeArea(
+  padding: string | 0 | undefined,
+  direction: "top" | "bottom",
+): string | undefined {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+
+  const paddingValue = handleDimension(padding);
+
+  return paddingValue;
+}
+
 function handleRadius(radius: string | 0 | undefined) {
   if (radius == null) {
     return undefined;
@@ -284,12 +297,18 @@ export interface StyleProps {
    */
   py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
-  paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingTop?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
 
   /**
    * Shorthand for `paddingTop`.
    */
-  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
 
   paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
@@ -298,12 +317,18 @@ export interface StyleProps {
    */
   pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
-  paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingBottom?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
 
   /**
    * Shorthand for `paddingBottom`.
    */
-  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
 
   paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
@@ -576,9 +601,9 @@ export function useStyleProps<T extends UseStyleProps>(
       "--seed-box-padding": handleDimension(padding ?? p),
       "--seed-box-padding-x": handleDimension(paddingX ?? px),
       "--seed-box-padding-y": handleDimension(paddingY ?? py),
-      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
       "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
       "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
       "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),