@sproutsocial/seeds-react-modal 1.0.1 → 1.0.3

package/src/v2/components/ModalCloseButton.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import styled from "styled-components";
+import Icon from "@sproutsocial/seeds-react-icon";
+import type { TypeModalV2CloseButtonProps } from "../ModalV2Types";
+
+const CloseButtonWrapper = styled.button<{
+  size?: number;
+  position?: "absolute" | "relative";
+  side?: "right" | "left";
+  offset?: number;
+}>`
+  width: ${(p) => p.size || 44}px;
+  height: ${(p) => p.size || 44}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  ${(p) =>
+    p.position === "absolute" &&
+    `
+    position: absolute;
+    top: 0px;
+    ${p.side || "right"}: ${p.offset || -48}px;
+    z-index: 1;
+  `}
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const ModalCloseButton = (props: TypeModalV2CloseButtonProps) => {
+  const {
+    children,
+    onClick,
+    asChild,
+    closeButtonLabel = "Close modal",
+    size = 44,
+    position = "absolute",
+    side = "right",
+    offset = -48,
+    ...rest
+  } = props;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    // Dialog.Close automatically handles closing
+  };
+
+  if (asChild) {
+    return (
+      <Dialog.Close asChild>
+        {React.cloneElement(children as React.ReactElement, {
+          onClick: handleClick,
+          ...rest,
+        })}
+      </Dialog.Close>
+    );
+  }
+
+  return (
+    <Dialog.Close asChild>
+      <CloseButtonWrapper
+        onClick={handleClick}
+        size={size}
+        position={position}
+        side={side}
+        offset={offset}
+        aria-label={closeButtonLabel}
+        title={closeButtonLabel}
+        {...rest}
+      >
+        {children || <Icon name="x-outline" size="small" />}
+      </CloseButtonWrapper>
+    </Dialog.Close>
+  );
+};
+
+ModalCloseButton.displayName = "ModalCloseButton";

package/src/v2/components/ModalContent.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Content } from "../ModalV2Styles";
+import type { TypeModalV2ContentProps } from "../ModalV2Types";
+
+export const ModalContent = React.forwardRef<
+  HTMLDivElement,
+  TypeModalV2ContentProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <Content data-qa-modal ref={ref} {...rest}>
+      {children}
+    </Content>
+  );
+});
+
+ModalContent.displayName = "ModalContent";

package/src/v2/components/ModalDescription.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import Box from "@sproutsocial/seeds-react-box";
+import type { TypeModalV2DescriptionProps } from "../ModalV2Types";
+
+export const ModalDescription = React.forwardRef<
+  HTMLDivElement,
+  TypeModalV2DescriptionProps
+>(({ children, descriptionProps = {}, ...rest }, ref) => {
+  return (
+    <Dialog.Description asChild {...descriptionProps}>
+      <Box ref={ref} {...rest}>
+        {children}
+      </Box>
+    </Dialog.Description>
+  );
+});
+
+ModalDescription.displayName = "ModalDescription";

package/src/v2/components/ModalFooter.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Footer } from "../ModalV2Styles";
+import { DEFAULT_MODAL_BG } from "../../shared/constants";
+import type { TypeModalV2FooterProps } from "../ModalV2Types";
+
+export const ModalFooter = (props: TypeModalV2FooterProps) => {
+  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;
+  return (
+    <Footer
+      bg={bg}
+      borderTop={500}
+      borderColor="container.border.base"
+      {...rest}
+    >
+      {children}
+    </Footer>
+  );
+};
+
+ModalFooter.displayName = "ModalFooter";

package/src/v2/components/ModalHeader.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { Header } from "../ModalV2Styles";
+import { ModalCloseButton } from "./ModalCloseButton";
+import type { TypeModalV2HeaderProps } from "../ModalV2Types";
+
+export const ModalHeader = (props: TypeModalV2HeaderProps) => {
+  const {
+    title,
+    subtitle,
+    children,
+    bordered,
+    titleProps = {},
+    subtitleProps = {},
+    showInlineClose,
+    ...rest
+  } = props;
+
+  return (
+    <Header {...rest}>
+      {children ? (
+        children
+      ) : (
+        <React.Fragment>
+          <Box>
+            {title && (
+              <Dialog.Title asChild {...titleProps}>
+                <Text.Headline>{title}</Text.Headline>
+              </Dialog.Title>
+            )}
+            {subtitle && (
+              <Dialog.Description asChild {...subtitleProps}>
+                <Text as="div" fontSize={200}>
+                  {subtitle}
+                </Text>
+              </Dialog.Description>
+            )}
+          </Box>
+          {showInlineClose && (
+            <Box display="flex" alignItems="center" justifyContent="flex-end">
+              <ModalCloseButton position="relative" offset={0} />
+            </Box>
+          )}
+        </React.Fragment>
+      )}
+    </Header>
+  );
+};
+
+ModalHeader.displayName = "ModalHeader";

package/src/v2/components/ModalRail.tsx

@@ -0,0 +1,121 @@
+// components/ModalRail.tsx
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import styled from "styled-components";
+import Icon from "@sproutsocial/seeds-react-icon"; // adjust import if path differs
+import type { TypeModalRailProps, TypeModalActionProps } from "../ModalV2Types";
+
+// --- styled wrappers ---
+const Rail = styled.div<{
+  side: "right" | "left";
+  offset: number;
+  gap: number;
+  size: number;
+  collapseAt: number;
+}>`
+  position: absolute;
+  top: ${(p) => p.offset}px;
+  ${(p) =>
+    p.side === "right"
+      ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`
+      : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}
+  display: grid;
+  grid-auto-flow: row;
+  gap: ${(p) => p.gap}px;
+  z-index: 1;
+
+  @media (max-width: ${(p) => p.collapseAt}px) {
+    ${(p) =>
+      p.side === "right" ? `right: ${p.offset}px;` : `left: ${p.offset}px;`}
+  }
+`;
+
+const RailBtn = styled.button<{ size: number }>`
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+// --- components ---
+export const ModalRail: React.FC<TypeModalRailProps> = ({
+  side = "right",
+  offset = 12,
+  gap = 12,
+  size = 44,
+  collapseAt = 640,
+  children,
+}) => {
+  return (
+    <Rail
+      data-slot="modal-rail"
+      side={side}
+      offset={offset}
+      gap={gap}
+      size={size}
+      collapseAt={collapseAt}
+      aria-label="Modal quick actions"
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as any, { size })
+          : child
+      )}
+    </Rail>
+  );
+};
+
+export const ModalAction: React.FC<
+  TypeModalActionProps & { size?: number }
+> = ({
+  "aria-label": ariaLabel,
+  iconName,
+  disabled,
+  size = 44,
+  actionType,
+  onClick,
+  ...rest
+}) => {
+  const Btn = (
+    <RailBtn
+      size={size}
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      disabled={disabled}
+      {...rest}
+    >
+      {iconName ? <Icon name={iconName} size="small" /> : ariaLabel}
+    </RailBtn>
+  );
+
+  return actionType === "close" ? (
+    <Dialog.Close asChild>{Btn}</Dialog.Close>
+  ) : (
+    React.cloneElement(Btn, { onClick })
+  );
+};

package/src/v2/components/ModalTrigger.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import Button from "@sproutsocial/seeds-react-button";
+import type { TypeModalV2TriggerProps } from "../ModalV2Types";
+
+/**
+ * A trigger button that opens the modal when clicked.
+ * Must be used inside a Modal component's Dialog.Root context.
+ * Uses Seeds Button by default but supports asChild for custom elements.
+ */
+export const ModalTrigger = (props: TypeModalV2TriggerProps) => {
+  const { children, onClick, asChild, ...rest } = props;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    // Dialog.Trigger automatically handles modal opening
+  };
+
+  if (asChild) {
+    return (
+      <Dialog.Trigger asChild>
+        {React.cloneElement(children as React.ReactElement, {
+          onClick: handleClick,
+          ...rest,
+        })}
+      </Dialog.Trigger>
+    );
+  }
+
+  return (
+    <Dialog.Trigger asChild>
+      <Button onClick={handleClick} {...rest}>
+        {children}
+      </Button>
+    </Dialog.Trigger>
+  );
+};
+
+ModalTrigger.displayName = "ModalTrigger";

package/src/v2/components/index.ts

@@ -0,0 +1,8 @@
+export { ModalHeader } from "./ModalHeader";
+export { ModalFooter } from "./ModalFooter";
+export { ModalContent } from "./ModalContent";
+export { ModalDescription } from "./ModalDescription";
+export { ModalCloseButton } from "./ModalCloseButton";
+export { ModalTrigger } from "./ModalTrigger";
+export { ModalClose } from "./ModalClose";
+export { ModalRail, ModalAction } from "./ModalRail";

package/src/v2/index.ts

@@ -0,0 +1,37 @@
+// Modal - Explicit named exports for optimal tree shaking
+export { default as Modal } from "./ModalV2";
+export {
+  ModalHeader,
+  ModalFooter,
+  ModalContent,
+  ModalDescription,
+  ModalCloseButton,
+  ModalTrigger,
+  ModalClose,
+  ModalRail,
+  ModalAction,
+} from "./components";
+
+// Explicit type exports
+export type {
+  TypeModalV2Props,
+  TypeModalV2TriggerProps,
+  TypeModalV2HeaderProps,
+  TypeModalV2FooterProps,
+  TypeModalV2ContentProps,
+  TypeModalV2DescriptionProps,
+  TypeModalV2CloseButtonProps,
+  TypeModalRailProps,
+  TypeModalActionProps,
+} from "./ModalV2Types";
+
+// Explicit constant exports
+export {
+  DEFAULT_MODAL_Z_INDEX,
+  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
+  DEFAULT_MODAL_WIDTH,
+  DEFAULT_MODAL_BG,
+  BODY_PADDING,
+  MODAL_SIZE_PRESETS,
+  MODAL_PRIORITY_Z_INDEX,
+} from "../shared/constants";

package/tsconfig.json

@@ -5,5 +5,11 @@
     "module": "esnext"
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "**/*.stories.tsx",
+    "**/*.stories.ts"
+  ]
 }

package/tsup.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
+  entry: {
+    index: "src/index.ts",
+    "v1/index": "src/v1/index.ts",
+    "v2/index": "src/v2/index.ts",
+  },
   format: ["cjs", "esm"],
   clean: true,
   legacyOutput: true,