@seed-design/react 0.0.13 → 0.0.15

package/src/components/ActionButton/ActionButton.tsx

@@ -11,11 +11,13 @@ import {
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
 
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
     UsePendingButtonProps,
     PrimitiveProps,
+    Pick<StyleProps, "flexGrow">,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -25,6 +27,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
   ) => {
     const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = useStyleProps(otherProps);
 
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
@@ -38,8 +41,9 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
           <Primitive.button
             ref={ref}
             className={clsx(recipeClassName, className)}
+            style={style}
             {...api.stateProps}
-            {...otherProps}
+            {...restProps}
           >
             {children}
           </Primitive.button>

package/src/components/Columns/Columns.tsx

@@ -1,8 +1,14 @@
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {}
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, ref) => {
   return (
     <Box
@@ -10,17 +16,22 @@ export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, re
       display="flex"
       flexDirection="row"
       flexWrap="nowrap"
-      justifyContent="flexStart"
+      justifyContent="flex-start"
       {...props}
     />
   );
 });
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
   width?: BoxProps["width"] | "content";
 }
 
-// TODO: do we need fractional width support?
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
   const { width, ...otherProps } = props;
 

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface DividerProps {
+  /**
+   * @default "hr"
+   */
+  as?: "hr" | "div";
+
+  /**
+   * @default "stroke.neutral"
+   */
+  color?: BoxProps["borderColor"];
+
+  /**
+   * @default 1
+   */
+  thickness?: BoxProps["borderBottomWidth"];
+}
+
+export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
+
+  return (
+    <Box
+      ref={ref}
+      as={as}
+      display="block"
+      borderColor={color}
+      borderWidth={0}
+      borderBottomWidth={thickness}
+      {...rest}
+    />
+  );
+});

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from "./Divider";

package/src/components/Flex/Flex.tsx

@@ -7,13 +7,53 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
    */
   display?: "flex" | "none";
 
-  direction?: "row" | "column" | "rowReverse" | "columnReverse";
+  /**
+   * Shorthand for `flexDirection`.
+   */
+  direction?: BoxProps["flexDirection"];
+
+  /**
+   * Shorthand for `flexWrap`.
+   * If true, flex-wrap will be set to `wrap`.
+   */
+  wrap?: BoxProps["flexWrap"] | true;
+
+  /**
+   * Shorthand for `alignItems`.
+   */
+  align?: BoxProps["alignItems"];
 
-  wrap?: "wrap" | "nowrap";
+  /**
+   * Shorthand for `justifyContent`.
+   */
+  justify?: BoxProps["justifyContent"];
+
+  /**
+   * Shorthand for `flexGrow`.
+   * If true, flex-grow will be set to `1`.
+   */
+  grow?: BoxProps["flexGrow"] | true;
+
+  /**
+   * Shorthand for `flexShrink`.
+   */
+  shrink?: BoxProps["flexShrink"];
 }
 
 export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { direction, wrap, ...rest } = props;
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
 
-  return <Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} {...rest} />;
+  return (
+    <Box
+      ref={ref}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap === true ? "wrap" : wrap}
+      alignItems={align}
+      justifyContent={justify}
+      flexGrow={grow === true ? 1 : grow}
+      flexShrink={shrink}
+      {...rest}
+    />
+  );
 });

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

@@ -2,7 +2,6 @@ export {
   HelpBubbleAnchor as Anchor,
   HelpBubbleArrow as Arrow,
   HelpBubbleArrowTip as ArrowTip,
-  HelpBubbleBackdrop as Backdrop,
   HelpBubbleCloseButton as CloseButton,
   HelpBubbleContent as Content,
   HelpBubbleDescription as Description,
@@ -12,7 +11,6 @@ export {
   HelpBubbleTrigger as Trigger,
   type HelpBubbleArrowProps as ArrowProps,
   type HelpBubbleArrowTipProps as ArrowTipProps,
-  type HelpBubbleBackdropProps as BackdropProps,
   type HelpBubbleCloseButtonProps as CloseButtonProps,
   type HelpBubbleContentProps as ContentProps,
   type HelpBubbleDescriptionProps as DescriptionProps,

package/src/components/HelpBubble/HelpBubble.tsx

@@ -48,17 +48,6 @@ export const HelpBubblePositioner = withContext<HTMLDivElement, HelpBubblePositi
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface HelpBubbleBackdropProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const HelpBubbleBackdrop = withContext<HTMLDivElement, HelpBubbleBackdropProps>(
-  withStateProps(Primitive.div),
-  "backdrop",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface HelpBubbleContentProps
   extends PrimitiveProps,
     Pick<StyleProps, "maxWidth">,

package/src/components/HelpBubble/index.ts

@@ -2,7 +2,6 @@ export {
   HelpBubbleAnchor,
   HelpBubbleArrow,
   HelpBubbleArrowTip,
-  HelpBubbleBackdrop,
   HelpBubbleCloseButton,
   HelpBubbleContent,
   HelpBubbleDescription,
@@ -13,7 +12,6 @@ export {
   type HelpBubbleAnchorProps,
   type HelpBubbleArrowProps,
   type HelpBubbleArrowTipProps,
-  type HelpBubbleBackdropProps,
   type HelpBubbleCloseButtonProps,
   type HelpBubbleContentProps,
   type HelpBubbleDescriptionProps,

package/src/components/Inline/Inline.tsx

@@ -1,8 +1,14 @@
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface InlineProps extends Omit<BoxProps, "display" | "direction" | "flexWrap"> {}
 
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref) => {
   return (
     <Box
@@ -10,8 +16,8 @@ export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref)
       display="flex"
       flexDirection="row"
       flexWrap="wrap"
-      alignItems="flexStart"
-      justifyContent="flexStart"
+      alignItems="flex-start"
+      justifyContent="flex-start"
       {...props}
     />
   );

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -18,7 +18,7 @@ export interface CheckSelectBoxGroupProps
 
 /**
  * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <Stack> under it is recommended.
+ * It does not have spacing by default, nesting <VStack> under it is recommended.
  */
 export const CheckSelectBoxGroup = withGroupContext<HTMLDivElement, CheckSelectBoxGroupProps>(
   forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>((props, ref) => (

package/src/components/Stack/Stack.tsx

@@ -1,8 +1,26 @@
 import * as React from "react";
-import { Box, type BoxProps } from "../Box/Box";
+import { Flex, type FlexProps } from "../Flex";
 
-export interface StackProps extends Omit<BoxProps, "display" | "direction"> {}
+/**
+ * @deprecated Use `VStack` instead.
+ */
+export interface StackProps extends Omit<FlexProps, "flexDirection"> {}
 
+/**
+ * @deprecated Use `VStack` instead.
+ */
 export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {
-  return <Box ref={ref} display="flex" flexDirection="column" {...props} />;
+  return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
+});
+
+export interface VStackProps extends Omit<FlexProps, "flexDirection"> {}
+
+export const VStack = React.forwardRef<HTMLDivElement, VStackProps>((props, ref) => {
+  return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
+});
+
+export interface HStackProps extends Omit<FlexProps, "flexDirection"> {}
+
+export const HStack = React.forwardRef<HTMLDivElement, HStackProps>((props, ref) => {
+  return <Flex ref={ref} display="flex" flexDirection="row" {...props} />;
 });

package/src/components/Stack/index.ts

@@ -1 +1,8 @@
-export { Stack, type StackProps } from "./Stack";
+export {
+  Stack,
+  VStack,
+  HStack,
+  type StackProps,
+  type VStackProps,
+  type HStackProps,
+} from "./Stack";

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from "./ConsistentWidth";
 export * from "./ControlChip";
 export * from "./Count";
 export * from "./Dialog";
+export * from "./Divider";
 export * from "./ExtendedActionSheet";
 export * from "./ExtendedFab";
 export * from "./Fab";