@seed-design/react 0.0.1-alpha-20250210081704

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,94 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { dialog, type DialogVariantProps } from "@seed-design/recipe/dialog";
+import { forwardRef } from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withRootProvider, withContext } = createStyleContext(dialog);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogRootProps extends DialogVariantProps, DialogPrimitive.RootProps {}
+
+export const DialogRoot = withRootProvider<DialogRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const DialogPositioner = withContext<HTMLDivElement, DialogPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const DialogBackdrop = withContext<HTMLDivElement, DialogBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogContentProps extends DialogPrimitive.ContentProps {}
+
+export const DialogContent = withContext<HTMLDivElement, DialogContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DialogHeader = withContext<HTMLDivElement, DialogHeaderProps>(Primitive.div, "header");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogTitleProps extends DialogPrimitive.TitleProps {}
+
+export const DialogTitle = withContext<HTMLHeadingElement, DialogTitleProps>(
+  withStateProps(Primitive.span),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const DialogDescription = withContext<HTMLParagraphElement, DialogDescriptionProps>(
+  withStateProps(Primitive.div),
+  "description",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DialogFooter = withContext<HTMLDivElement, DialogFooterProps>(Primitive.div, "footer");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogActionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const DialogAction = forwardRef<HTMLButtonElement, DialogActionProps>((props, ref) => {
+  const api = useDialogContext();
+  return <Primitive.button {...props} ref={ref} onClick={() => api.setOpen(false)} />;
+});

package/src/components/Dialog/index.ts

@@ -0,0 +1,24 @@
+export {
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  DialogAction,
+  type DialogBackdropProps,
+  type DialogPositionerProps,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogFooterProps,
+  type DialogHeaderProps,
+  type DialogRootProps,
+  type DialogTitleProps,
+  type DialogTriggerProps,
+  type DialogActionProps,
+} from "./Dialog";
+
+export * as Dialog from "./Dialog.namespace";

package/src/components/ExtendedActionSheet/ExtendedActionSheet.namespace.ts

@@ -0,0 +1,32 @@
+export {
+  ExtendedActionSheetBackdrop as Backdrop,
+  ExtendedActionSheetPositioner as Positioner,
+  ExtendedActionSheetContent as Content,
+  ExtendedActionSheetFooter as Footer,
+  ExtendedActionSheetHeader as Header,
+  ExtendedActionSheetRoot as Root,
+  ExtendedActionSheetTitle as Title,
+  ExtendedActionSheetTrigger as Trigger,
+  ExtendedActionSheetList as List,
+  ExtendedActionSheetGroup as Group,
+  ExtendedActionSheetItem as Item,
+  ExtendedActionSheetItemLabel as ItemLabel,
+  ExtendedActionSheetItemPrefixIcon as ItemPrefixIcon,
+  ExtendedActionSheetCloseButton as CloseButton,
+  ExtendedActionSheetCloseButtonLabel as CloseButtonLabel,
+  type ExtendedActionSheetBackdropProps as BackdropProps,
+  type ExtendedActionSheetPositionerProps as PositionerProps,
+  type ExtendedActionSheetContentProps as ContentProps,
+  type ExtendedActionSheetFooterProps as FooterProps,
+  type ExtendedActionSheetHeaderProps as HeaderProps,
+  type ExtendedActionSheetRootProps as RootProps,
+  type ExtendedActionSheetTitleProps as TitleProps,
+  type ExtendedActionSheetTriggerProps as TriggerProps,
+  type ExtendedActionSheetListProps as ListProps,
+  type ExtendedActionSheetGroupProps as GroupProps,
+  type ExtendedActionSheetItemProps as ItemProps,
+  type ExtendedActionSheetItemLabelProps as ItemLabelProps,
+  type ExtendedActionSheetItemPrefixIconProps as ItemPrefixIconProps,
+  type ExtendedActionSheetCloseButtonProps as CloseButtonProps,
+  type ExtendedActionSheetCloseButtonLabelProps as CloseButtonLabelProps,
+} from "./ExtendedActionSheet";

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -0,0 +1,181 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  extendedActionSheet,
+  type ExtendedActionSheetVariantProps,
+} from "@seed-design/recipe/extendedActionSheet";
+import {
+  extendedActionSheetCloseButton,
+  type ExtendedActionSheetCloseButtonVariantProps,
+} from "@seed-design/recipe/extendedActionSheetCloseButton";
+import {
+  extendedActionSheetItem,
+  type ExtendedActionSheetItemVariantProps,
+} from "@seed-design/recipe/extendedActionSheetItem";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withRootProvider, withContext } = createStyleContext(extendedActionSheet);
+const { withProvider: withItemProvider, withContext: withItemContext } =
+  createStyleContext(extendedActionSheetItem);
+const { withProvider: withCloseButtonProvider, withContext: withCloseButtonContext } =
+  createStyleContext(extendedActionSheetCloseButton);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetRootProps
+  extends ExtendedActionSheetVariantProps,
+    DialogPrimitive.RootProps {}
+
+export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
+  DialogPrimitive.Root,
+  {
+    defaultProps: {
+      lazyMount: true,
+      unmountOnExit: true,
+    },
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const ExtendedActionSheetPositioner = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetPositionerProps
+>(DialogPrimitive.Positioner, "positioner");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const ExtendedActionSheetBackdrop = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetBackdropProps
+>(DialogPrimitive.Backdrop, "backdrop");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
+
+export const ExtendedActionSheetContent = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetContentProps
+>(DialogPrimitive.Content, "content");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ExtendedActionSheetHeader = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetHeaderProps
+>(withStateProps(Primitive.div), "header");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const ExtendedActionSheetTitle = withContext<
+  HTMLHeadingElement,
+  ExtendedActionSheetTitleProps
+>(withStateProps(Primitive.h2), "title");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetListProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
+  withStateProps(Primitive.div),
+  "group",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetItemProps
+  extends PrimitiveProps,
+    ExtendedActionSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const ExtendedActionSheetItem = withItemProvider<
+  HTMLButtonElement,
+  ExtendedActionSheetItemProps
+>(withStateProps(Primitive.button), "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {
+  asChild?: boolean;
+}
+
+export const ExtendedActionSheetItemLabel = withItemContext<
+  HTMLSpanElement,
+  ExtendedActionSheetItemLabelProps
+>(withStateProps(Primitive.span), "label");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetItemPrefixIconProps extends IconProps {}
+
+export const ExtendedActionSheetItemPrefixIcon = withItemContext<
+  HTMLSpanElement,
+  ExtendedActionSheetItemPrefixIconProps
+>(withStateProps(Icon), "prefixIcon");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ExtendedActionSheetFooter = withContext<
+  HTMLDivElement,
+  ExtendedActionSheetFooterProps
+>(withStateProps(Primitive.div), "footer");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetCloseButtonProps
+  extends DialogPrimitive.CloseButtonProps,
+    ExtendedActionSheetCloseButtonVariantProps {}
+
+export const ExtendedActionSheetCloseButton = withCloseButtonProvider<
+  HTMLDivElement,
+  ExtendedActionSheetCloseButtonProps
+>(DialogPrimitive.CloseButton, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedActionSheetCloseButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ExtendedActionSheetCloseButtonLabel = withCloseButtonContext<
+  HTMLSpanElement,
+  ExtendedActionSheetCloseButtonLabelProps
+>(Primitive.span, "label");

package/src/components/ExtendedActionSheet/index.ts

@@ -0,0 +1,34 @@
+export {
+  ExtendedActionSheetBackdrop,
+  ExtendedActionSheetPositioner,
+  ExtendedActionSheetContent,
+  ExtendedActionSheetFooter,
+  ExtendedActionSheetHeader,
+  ExtendedActionSheetRoot,
+  ExtendedActionSheetTitle,
+  ExtendedActionSheetTrigger,
+  ExtendedActionSheetList,
+  ExtendedActionSheetGroup,
+  ExtendedActionSheetItem,
+  ExtendedActionSheetItemLabel,
+  ExtendedActionSheetItemPrefixIcon,
+  ExtendedActionSheetCloseButton,
+  ExtendedActionSheetCloseButtonLabel,
+  type ExtendedActionSheetBackdropProps,
+  type ExtendedActionSheetPositionerProps,
+  type ExtendedActionSheetContentProps,
+  type ExtendedActionSheetFooterProps,
+  type ExtendedActionSheetHeaderProps,
+  type ExtendedActionSheetRootProps,
+  type ExtendedActionSheetTitleProps,
+  type ExtendedActionSheetTriggerProps,
+  type ExtendedActionSheetListProps,
+  type ExtendedActionSheetGroupProps,
+  type ExtendedActionSheetItemProps,
+  type ExtendedActionSheetItemLabelProps,
+  type ExtendedActionSheetItemPrefixIconProps,
+  type ExtendedActionSheetCloseButtonProps,
+  type ExtendedActionSheetCloseButtonLabelProps,
+} from "./ExtendedActionSheet";
+
+export * as ExtendedActionSheet from "./ExtendedActionSheet.namespace";

package/src/components/ExtendedFab/ExtendedFab.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  ExtendedFabRoot as Root,
+  ExtendedFabLabel as Label,
+  ExtendedFabPrefixIcon as PrefixIcon,
+  type ExtendedFabRootProps as RootProps,
+  type ExtendedFabLabelProps as LabelProps,
+  type ExtendedFabPrefixIconProps as PrefixIconProps,
+} from "./ExtendedFab";

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -0,0 +1,44 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/recipe/extendedFab";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withContext, withProvider } = createStyleContext(extendedFab);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedFabRootProps
+  extends ExtendedFabVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const ExtendedFabRoot = withProvider<HTMLButtonElement, ExtendedFabRootProps>(
+  Primitive.button,
+  "root",
+  {
+    defaultProps: {
+      variant: "neutralSolid",
+      size: "medium",
+    },
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedFabLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ExtendedFabLabel = withContext<HTMLSpanElement, ExtendedFabLabelProps>(
+  Primitive.span,
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ExtendedFabPrefixIconProps extends IconProps {}
+
+export const ExtendedFabPrefixIcon = withContext<SVGSVGElement, ExtendedFabPrefixIconProps>(
+  Icon,
+  "prefixIcon",
+);

package/src/components/ExtendedFab/index.ts

@@ -0,0 +1,10 @@
+export {
+  ExtendedFabRoot,
+  ExtendedFabLabel,
+  ExtendedFabPrefixIcon,
+  type ExtendedFabRootProps,
+  type ExtendedFabLabelProps,
+  type ExtendedFabPrefixIconProps,
+} from "./ExtendedFab";
+
+export * as ExtendedFab from "./ExtendedFab.namespace";

package/src/components/Fab/Fab.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  FabRoot as Root,
+  FabIcon as Icon,
+  type FabRootProps as RootProps,
+  type FabIconProps as IconProps,
+} from "./Fab";

package/src/components/Fab/Fab.tsx

@@ -0,0 +1,22 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { fab, type FabVariantProps } from "@seed-design/recipe/fab";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withContext, withProvider } = createStyleContext(fab);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FabRootProps
+  extends FabVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FabRoot = withProvider<HTMLButtonElement, FabRootProps>(Primitive.button, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FabIconProps extends IconProps {}
+
+export const FabIcon = withContext<SVGSVGElement, FabIconProps>(Icon, "icon");

package/src/components/Fab/index.ts

@@ -0,0 +1,8 @@
+export {
+  FabRoot,
+  FabIcon,
+  type FabRootProps,
+  type FabIconProps,
+} from "./Fab";
+
+export * as Fab from "./Fab.namespace";

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface FlexProps extends Omit<BoxProps, "display"> {
+  /**
+   * @default "flex"
+   */
+  display?: "flex" | "none";
+
+  direction?: "row" | "column" | "rowReverse" | "columnReverse";
+
+  wrap?: "wrap" | "nowrap";
+}
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  const { direction, wrap, ...rest } = props;
+
+  return <Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} {...rest} />;
+});

package/src/components/Flex/index.ts

@@ -0,0 +1 @@
+export { Flex, type FlexProps } from "./Flex";

package/src/components/HelpBubble/HelpBubble.namespace.ts

@@ -0,0 +1,25 @@
+export {
+  HelpBubbleAnchor as Anchor,
+  HelpBubbleArrow as Arrow,
+  HelpBubbleArrowTip as ArrowTip,
+  HelpBubbleBackdrop as Backdrop,
+  HelpBubbleCloseButton as CloseButton,
+  HelpBubbleCloseIcon as CloseIcon,
+  HelpBubbleContent as Content,
+  HelpBubbleDescription as Description,
+  HelpBubblePositioner as Positioner,
+  HelpBubbleRoot as Root,
+  HelpBubbleTitle as Title,
+  HelpBubbleTrigger as Trigger,
+  type HelpBubbleArrowProps as ArrowProps,
+  type HelpBubbleArrowTipProps as ArrowTipProps,
+  type HelpBubbleBackdropProps as BackdropProps,
+  type HelpBubbleCloseButtonProps as CloseButtonProps,
+  type HelpBubbleCloseIconProps as CloseIconProps,
+  type HelpBubbleContentProps as ContentProps,
+  type HelpBubbleDescriptionProps as DescriptionProps,
+  type HelpBubblePositionerProps as PositionerProps,
+  type HelpBubbleRootProps as RootProps,
+  type HelpBubbleTitleProps as TitleProps,
+  type HelpBubbleTriggerProps as TriggerProps,
+} from "./HelpBubble";