@sproutsocial/seeds-react-card 1.1.52 → 1.1.54

package/dist/card.css

@@ -0,0 +1,152 @@
+/**
+ * Seeds Card component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-card seeds-card-interactive" style="--seeds-card-hover-shadow: var(--shadow-low)">…</div>
+ *
+ * The per-elevation hover shadow is driven by the --seeds-card-hover-shadow
+ * custom property set inline by the component from its `elevation` prop.
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. mx-200, p-300, ml-300) win in the cascade and can override these
+ * component styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin: 0;
+    background: var(--color-container-bg-base);
+    /* borderWidths[500] resolves to 1px; no --border-width var is emitted. */
+    border: 1px solid var(--color-container-border-base);
+    padding: var(--space-400);
+    border-radius: var(--radius-outer);
+    transition: box-shadow var(--duration-medium),
+      border var(--duration-medium);
+  }
+
+  /* Compositional cards (using CardHeader/Content/Footer) drop their own padding. */
+  .seeds-card-compositional {
+    padding: 0;
+  }
+
+  .seeds-card-interactive {
+    cursor: pointer;
+  }
+
+  .seeds-card-interactive:hover {
+    box-shadow: var(--seeds-card-hover-shadow);
+  }
+
+  /* focusRing mixin: button/checkbox cards focus directly; link cards show the
+     ring via :focus-within when their inner link is focused. The :focus-within
+     ring is scoped to link-role cards only (matching StyledCard's $isRoleLink
+     gating), so button/checkbox cards do not show the ring on descendant focus. */
+  .seeds-card:focus,
+  .seeds-card-link-role:focus-within {
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(
+          in srgb,
+          var(--color-button-primary-bg-base),
+          transparent 70%
+        );
+    outline: none;
+  }
+
+  .seeds-card::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* The inner link resets its own focus styling; the card shows the ring. */
+  .seeds-card-link-role:focus-within .seeds-card-link:focus {
+    border: none;
+    box-shadow: none;
+    outline: none;
+  }
+
+  /* disabled mixin */
+  .seeds-card-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .seeds-card-selected {
+    border: 1px solid var(--color-container-border-selected);
+  }
+
+  /* Sub-components ------------------------------------------------------ */
+
+  .seeds-card-content {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-400);
+    box-sizing: border-box;
+  }
+
+  .seeds-card-header {
+    display: flex;
+    flex-direction: row;
+    padding: var(--space-400);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-container-border-base);
+    border-top-left-radius: var(--radius-inner);
+    border-top-right-radius: var(--radius-inner);
+  }
+
+  .seeds-card-footer {
+    display: flex;
+    flex-direction: row;
+    padding: var(--space-400);
+    box-sizing: border-box;
+    border-top: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-inner);
+    border-bottom-right-radius: var(--radius-inner);
+  }
+
+  /* Link typography: font-family + bold + headline color + type scale 400. */
+  .seeds-card-link {
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  /* Selected-icon overlay (positioned top-right, fades in when selected). */
+  .seeds-card-selected-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+
+  .seeds-card-selected-icon {
+    border-radius: 50%;
+    background: var(--color-container-bg-base);
+    opacity: 0;
+    transition: opacity var(--duration-medium);
+  }
+
+  .seeds-card-selected-icon-visible {
+    opacity: 1;
+  }
+
+  /* Affordance icon slides right on card hover (mirrors StyledCardAffordance). */
+  .seeds-card-affordance {
+    transition: var(--duration-medium);
+  }
+
+  .seeds-card:hover .seeds-card-affordance {
+    transform: translateX(var(--space-200));
+  }
+}

package/dist/esm/index.js

@@ -1,5 +1,17 @@
 // src/Card.tsx
-import { useRef, useState } from "react";
+import React6 from "react";
+
+// src/CardHybrid.tsx
+import React5 from "react";
+import {
+  hasStyledProps as hasStyledProps2,
+  hasBorderProps as hasBorderProps2,
+  isStyledExtension as isStyledExtension2
+} from "@sproutsocial/seeds-react-system-props";
+
+// src/CardStyled.tsx
+import React3 from "react";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 // src/styles.tsx
 import styled from "styled-components";
@@ -150,6 +162,9 @@ var StyledCardAffordance = styled(Icon)`
   transition: ${(p) => p.theme.duration.medium};
 `;
 
+// src/useCardBehavior.ts
+import { useRef, useState } from "react";
+
 // src/utils.ts
 import { createContext, useContext, useEffect } from "react";
 import { assertIsElement } from "@sproutsocial/seeds-react-utilities";
@@ -189,46 +204,151 @@ var onKeyDown = ({ e, href, onClick, ref, role }) => {
   }
 };
 
+// src/useCardBehavior.ts
+function useCardBehavior({
+  disabled: disabled2 = false,
+  href,
+  onClick,
+  role = "presentation",
+  selected
+}) {
+  const [hasSubComponent, setHasSubComponent] = useState(false);
+  const containerRef = useRef(null);
+  const linkRef = useRef(null);
+  const isRoleLink = role === "link";
+  const isRolePresentation = role === "presentation";
+  const checkedConditions = role === "checkbox" ? selected : void 0;
+  const cardContext = {
+    setHasSubComponent,
+    href,
+    linkRef
+  };
+  const handleClickConditions = (e) => isRoleLink ? linkRef.current?.click() : onClick?.(e);
+  const handleKeyDown = (e) => onKeyDown({ e, href, onClick, ref: containerRef, role });
+  const shouldBeInteractive = !isRolePresentation && !disabled2;
+  const containerProps = {
+    tabIndex: isRoleLink || isRolePresentation || disabled2 ? -1 : 0,
+    role: isRoleLink ? void 0 : role,
+    onClick: shouldBeInteractive ? handleClickConditions : void 0,
+    onKeyDown: shouldBeInteractive ? handleKeyDown : void 0,
+    "aria-checked": checkedConditions,
+    "aria-disabled": disabled2 && disabled2
+  };
+  return {
+    containerRef,
+    linkRef,
+    cardContext,
+    hasSubComponent,
+    isRoleLink,
+    SubComponentContext,
+    containerProps
+  };
+}
+
 // src/subComponents.tsx
 import { useContext as useContext2 } from "react";
+import {
+  hasStyledProps,
+  hasBorderProps,
+  isStyledExtension
+} from "@sproutsocial/seeds-react-system-props";
+import Icon2 from "@sproutsocial/seeds-react-icon";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CardContent = ({
-  children,
-  ...rest
-}) => {
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+function needsStyled(props) {
+  return hasStyledProps(props) || hasBorderProps(props) || isStyledExtension(props);
+}
+var CardContent = (props) => {
   useChildContext();
-  return /* @__PURE__ */ jsx(StyledCardContent, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ jsx(StyledCardContent, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-content", className),
+      children
+    }
+  );
 };
-var CardHeader = ({
-  children,
-  ...rest
-}) => {
+var CardHeader = (props) => {
   useChildContext();
-  return /* @__PURE__ */ jsx(StyledCardHeader, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ jsx(StyledCardHeader, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-header", className),
+      children
+    }
+  );
 };
-var CardFooter = ({
-  children,
-  ...rest
-}) => {
+var CardFooter = (props) => {
   useChildContext();
-  return /* @__PURE__ */ jsx(StyledCardFooter, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ jsx(StyledCardFooter, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-footer", className),
+      children
+    }
+  );
 };
 var SelectedIcon = ({ $selected }) => {
-  return /* @__PURE__ */ jsx(SelectedIconWrapper, { children: /* @__PURE__ */ jsx(
-    StyledSelectedIcon,
+  return /* @__PURE__ */ jsx("div", { className: "seeds-card-selected-icon-wrapper", children: /* @__PURE__ */ jsx(
+    Icon2,
     {
       "aria-hidden": true,
       color: "icon.base",
       name: "circle-check-solid",
-      $selected
+      className: cn("seeds-card-selected-icon", {
+        "seeds-card-selected-icon-visible": !!$selected
+      })
     }
   ) });
 };
-var CardAffordance = ({ ...rest }) => {
+var CardAffordance = ({ className, ...rest }) => {
+  if (needsStyled(rest) || isStyledExtension({ className })) {
+    return /* @__PURE__ */ jsx(
+      StyledCardAffordance,
+      {
+        ...rest,
+        className,
+        size: "mini",
+        name: "arrow-right-solid",
+        "aria-hidden": true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    StyledCardAffordance,
+    Icon2,
     {
       ...rest,
+      className: cn("seeds-card-affordance", className),
       size: "mini",
       name: "arrow-right-solid",
       "aria-hidden": true
@@ -240,79 +360,183 @@ var CardLink = ({
   children,
   external = false,
   color: color2,
+  className,
   ...rest
 }) => {
   const { href, linkRef } = useContext2(SubComponentContext);
   const handleClick = (e) => {
     e.stopPropagation();
   };
+  const sharedProps = {
+    target: external ? "_blank" : void 0,
+    rel: external ? "noreferrer" : void 0,
+    href,
+    onClick: handleClick
+  };
+  if (color2 !== void 0 || hasStyledProps(rest) || hasBorderProps(rest) || isStyledExtension({ ...rest, className })) {
+    return /* @__PURE__ */ jsx(
+      StyledCardLink,
+      {
+        ...rest,
+        ...sharedProps,
+        ref: linkRef,
+        className,
+        color: color2,
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          affordance ? /* @__PURE__ */ jsx(CardAffordance, { ml: 300 }) : null
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    StyledCardLink,
+    "a",
     {
       ...rest,
-      target: external ? "_blank" : void 0,
-      rel: external ? "noreferrer" : void 0,
-      href,
-      onClick: handleClick,
+      ...sharedProps,
       ref: linkRef,
-      color: color2,
+      className: cn("seeds-card-link", className),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         children,
-        affordance ? /* @__PURE__ */ jsx(CardAffordance, { ml: 300 }) : null
+        affordance ? /* @__PURE__ */ jsx(CardAffordance, { className: "ml-300" }) : null
       ] })
     }
   );
 };
 
-// src/Card.tsx
+// src/CardStyled.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Card = ({
-  children,
-  disabled: disabled2 = false,
-  elevation = "low",
-  href,
-  onClick,
-  role = "presentation",
-  selected,
-  ...rest
-}) => {
-  const [hasSubComponent, setHasSubComponent] = useState(false);
-  const containerRef = useRef(null);
-  const linkRef = useRef(null);
-  const isRoleLink = role === "link";
-  const isRolePresentation = role === "presentation";
-  const checkedConditions = role === "checkbox" ? selected : void 0;
-  const cardContext = {
-    setHasSubComponent,
+var CardStyled = React3.forwardRef(
+  ({
+    children,
+    disabled: disabled2 = false,
+    elevation = "low",
     href,
-    linkRef
-  };
-  const handleClickConditions = (e) => isRoleLink ? linkRef.current?.click() : onClick?.(e);
-  const handleKeyDown = (e) => onKeyDown({ e, href, onClick, ref: containerRef, role });
-  const shouldBeInteractive = !isRolePresentation && !disabled2;
-  return /* @__PURE__ */ jsxs2(
-    StyledCard,
-    {
-      tabIndex: isRoleLink || isRolePresentation || disabled2 ? -1 : 0,
-      role: isRoleLink ? void 0 : role,
-      onClick: shouldBeInteractive ? handleClickConditions : void 0,
-      onKeyDown: shouldBeInteractive ? handleKeyDown : void 0,
-      $elevation: elevation,
-      ref: containerRef,
-      $selected: selected,
-      "aria-checked": checkedConditions,
-      $disabled: disabled2,
-      "aria-disabled": disabled2 && disabled2,
-      $compositionalComponents: hasSubComponent,
-      $isRoleLink: isRoleLink,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx2(SelectedIcon, { $selected: selected }),
-        /* @__PURE__ */ jsx2(SubComponentContext.Provider, { value: cardContext, children })
-      ]
+    onClick,
+    role = "presentation",
+    selected,
+    ...rest
+  }, ref) => {
+    const {
+      containerRef,
+      cardContext,
+      hasSubComponent,
+      isRoleLink,
+      SubComponentContext: SubComponentContext2,
+      containerProps
+    } = useCardBehavior({ disabled: disabled2, href, onClick, role, selected });
+    return /* @__PURE__ */ jsxs2(
+      StyledCard,
+      {
+        ...containerProps,
+        $elevation: elevation,
+        ref: mergeRefs(containerRef, ref),
+        $selected: selected,
+        $disabled: disabled2,
+        $compositionalComponents: hasSubComponent,
+        $isRoleLink: isRoleLink,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx2(SelectedIcon, { $selected: selected }),
+          /* @__PURE__ */ jsx2(SubComponentContext2.Provider, { value: cardContext, children })
+        ]
+      }
+    );
+  }
+);
+CardStyled.displayName = "Card";
+var CardStyled_default = CardStyled;
+
+// src/CardTailwind.tsx
+import React4 from "react";
+import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function cn2(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
     }
-  );
-};
+  }
+  return classes.join(" ");
+}
+var CardTailwind = React4.forwardRef(
+  ({
+    children,
+    className,
+    disabled: disabled2 = false,
+    elevation = "low",
+    href,
+    onClick,
+    role = "presentation",
+    selected,
+    ...rest
+  }, ref) => {
+    const {
+      containerRef,
+      cardContext,
+      hasSubComponent,
+      isRoleLink,
+      SubComponentContext: SubComponentContext2,
+      containerProps
+    } = useCardBehavior({ disabled: disabled2, href, onClick, role, selected });
+    const classes = cn2(
+      "seeds-card",
+      {
+        "seeds-card-interactive": isRoleLink || role === "button" || role === "checkbox",
+        "seeds-card-link-role": isRoleLink
+      },
+      {
+        "seeds-card-selected": !!selected,
+        "seeds-card-disabled": disabled2,
+        "seeds-card-compositional": hasSubComponent
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ...containerProps,
+        ...rest,
+        ref: mergeRefs2(containerRef, ref),
+        className: classes,
+        style: {
+          "--seeds-card-hover-shadow": `var(--shadow-${elevation})`
+        },
+        children: [
+          /* @__PURE__ */ jsx3(SelectedIcon, { $selected: selected }),
+          /* @__PURE__ */ jsx3(SubComponentContext2.Provider, { value: cardContext, children })
+        ]
+      }
+    );
+  }
+);
+CardTailwind.displayName = "CardTailwind";
+
+// src/CardHybrid.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CardHybrid = React5.forwardRef(
+  (props, ref) => {
+    if (hasStyledProps2(props) || hasBorderProps2(props) || isStyledExtension2(props)) {
+      return /* @__PURE__ */ jsx4(CardStyled_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsx4(CardTailwind, { ...props, ref });
+  }
+);
+CardHybrid.displayName = "Card";
+var CardHybrid_default = CardHybrid;
+
+// src/Card.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Card = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx5(CardHybrid_default, { ...props, ref }));
+Card.displayName = "Card";
 var Card_default = Card;
 
 // src/CardTypes.ts