@seed-design/react 1.2.6 → 1.2.8

package/lib/components/ImageFrame/ImageFrame.js

@@ -5,20 +5,21 @@ import { imageFrameIcon } from '@seed-design/css/recipes/image-frame-icon';
 import { imageFrameIndicator } from '@seed-design/css/recipes/image-frame-indicator';
 import { imageFrameReactionButton } from '@seed-design/css/recipes/image-frame-reaction-button';
 import { imageFrameFloater } from '@seed-design/css/vars/component';
+import { mergeProps } from '@seed-design/dom-utils';
 import { Image } from '@seed-design/react-image';
-import { Toggle } from '@seed-design/react-toggle';
+import { Toggle, useToggleContext } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { AspectRatio } from '../AspectRatio/AspectRatio.js';
 import { Badge } from '../Badge/Badge.js';
 import { Float } from '../Float/Float.js';
 import { Icon } from '../Icon/Icon.js';
+import { InternalIcon } from '../private/Icon.js';
 
 const ImageFrame = React.forwardRef(
   ({
     ratio = 4 / 3,
-    stroke,
-    rounded,
     src,
     alt,
     fallback,
@@ -34,10 +35,13 @@ const ImageFrame = React.forwardRef(
     children,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx(AspectRatio, { ref, ratio, className, ...rest, children: /* @__PURE__ */ jsxs(Image.Root, { className: imageFrame({ stroke, rounded }), children: [
+    const [variantProps, restProps] = imageFrame.splitVariantProps(rest);
+    const classNames = imageFrame(variantProps);
+    return /* @__PURE__ */ jsx(AspectRatio, { ref, ratio, className, ...restProps, children: /* @__PURE__ */ jsxs(Image.Root, { className: classNames.root, children: [
       /* @__PURE__ */ jsx(
         Image.Content,
         {
+          className: classNames.content,
           src,
           alt,
           loading,
@@ -50,7 +54,7 @@ const ImageFrame = React.forwardRef(
           onError
         }
       ),
-      fallback && /* @__PURE__ */ jsx(Image.Fallback, { children: fallback }),
+      fallback && /* @__PURE__ */ jsx(Image.Fallback, { className: classNames.fallback, children: fallback }),
       children
     ] }) });
   }
@@ -84,45 +88,70 @@ const ImageFrameIndicator = React.forwardRef(
   }
 );
 ImageFrameIndicator.displayName = "ImageFrameIndicator";
+const {
+  ClassNamesProvider: ImageFrameReactionButtonClassNamesProvider,
+  useClassNames: useImageFrameReactionButtonClassNames
+} = createSlotRecipeContext(imageFrameReactionButton);
 const HeartFillPath = "M15.5452 10C11.7873 10 9.25 12.9484 9.25 16.6267C9.25 19.8754 11.1219 22.0952 13.1877 23.969C13.7807 24.5069 14.4438 25.0617 15.095 25.6066C15.5434 25.9817 15.9862 26.3522 16.3967 26.7093C17.4501 27.6257 18.4191 28.557 19.1995 29.5994C19.3886 29.8518 19.6856 30.0003 20.001 30C20.3163 29.9997 20.6131 29.8507 20.8016 29.5979C21.5785 28.5562 22.5453 27.6253 23.598 26.7091C24.0105 26.35 24.4568 25.9766 24.9089 25.5984C25.5573 25.0559 26.2176 24.5035 26.807 23.9693C28.8739 22.096 30.75 19.8761 30.75 16.6267C30.75 12.9484 28.2127 10 24.4548 10C22.6365 10 21.1002 11.0545 20 12.4906C18.8998 11.0545 17.3635 10 15.5452 10Z";
 const HeartOutlineStrokePath = "M15.5452 12C13.0342 12 11.25 13.905 11.25 16.6267C11.25 18.9912 12.5659 20.7048 14.5314 22.4876C15.1157 23.0176 15.7038 23.5087 16.3148 24.019C16.7646 24.3946 17.2269 24.7807 17.7093 25.2003C18.4947 25.8835 19.2814 26.6141 19.9988 27.4215C20.7144 26.614 21.5001 25.8836 22.2849 25.2005C22.7714 24.7771 23.2368 24.3885 23.6895 24.0105C24.2967 23.5035 24.8813 23.0154 25.4639 22.4874C27.4317 20.704 28.75 18.9906 28.75 16.6267C28.75 13.905 26.9658 12 24.4548 12C23.069 12 21.747 12.8325 20.8919 14.5189C20.7215 14.8549 20.3768 15.0667 20 15.0667C19.6233 15.0667 19.2785 14.8549 19.1081 14.5189C18.2531 12.8325 16.931 12 15.5452 12ZM9.25 16.6267C9.25 12.9484 11.7873 10 15.5452 10C17.3146 10 18.8683 10.8364 20 12.2306C21.1317 10.8364 22.6854 10 24.4548 10C28.2127 10 30.75 12.9484 30.75 16.6267C30.75 19.8761 28.8739 22.096 26.807 23.9693C26.2176 24.5035 25.5573 25.0559 24.9089 25.5984C24.4568 25.9766 24.0105 26.35 23.598 26.7091C22.5453 27.6253 21.5785 28.5562 20.8016 29.5979C20.6131 29.8507 20.3163 29.9997 20.001 30C19.6856 30.0003 19.3886 29.8518 19.1995 29.5994C18.4191 28.557 17.4501 27.6257 16.3967 26.7093C15.9862 26.3522 15.5434 25.9817 15.095 25.6066C14.4438 25.0617 13.7807 24.5069 13.1877 23.969C11.1219 22.0952 9.25 19.8754 9.25 16.6267Z";
-const UnselectedHeartIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx("path", { d: HeartFillPath, fill: "black", fillOpacity: "0.063" }),
-  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: HeartOutlineStrokePath, fill: "white" })
-] });
-const SelectedHeartIcon = () => {
+const HeartFillSvg = (props) => {
   const id = React.useId();
   const gradientId = `seed-heart-gradient${id.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "8 9 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("path", { d: HeartFillPath, fill: `url(#${gradientId})` }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-      "linearGradient",
-      {
-        id: gradientId,
-        x1: "7",
-        y1: "8.5",
-        x2: "26.0974",
-        y2: "10.5391",
-        gradientUnits: "userSpaceOnUse",
-        children: [
-          /* @__PURE__ */ jsx("stop", { stopColor: "#FF9A56" }),
-          /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF6600" })
-        ]
-      }
-    ) })
-  ] });
-};
-const ImageFrameReactionButton = React.forwardRef(({ className, pressed, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Toggle.Root,
+  return /* @__PURE__ */ jsxs(
+    "svg",
     {
-      ref,
-      className: clsx(imageFrameReactionButton(), className),
-      pressed,
-      ...rest,
-      children: /* @__PURE__ */ jsx(Icon, { svg: pressed ? /* @__PURE__ */ jsx(SelectedHeartIcon, {}) : /* @__PURE__ */ jsx(UnselectedHeartIcon, {}) })
+      width: "100%",
+      height: "100%",
+      viewBox: "8 9 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: HeartFillPath, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "7",
+            y1: "8.5",
+            x2: "26.0974",
+            y2: "10.5391",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#FF9A56" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF6600" })
+            ]
+          }
+        ) })
+      ]
     }
   );
+};
+const HeartLineSvg = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "8 9 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: HeartOutlineStrokePath, fill: "currentColor" })
+  }
+);
+const ReactionButtonIcon = () => {
+  const { pressed, stateProps } = useToggleContext();
+  const classNames = useImageFrameReactionButtonClassNames();
+  const iconProps = mergeProps(stateProps, {
+    className: pressed ? classNames.fillIcon : classNames.lineIcon
+  });
+  return /* @__PURE__ */ jsx(InternalIcon, { svg: pressed ? /* @__PURE__ */ jsx(HeartFillSvg, {}) : /* @__PURE__ */ jsx(HeartLineSvg, {}), ...iconProps });
+};
+const ImageFrameReactionButton = React.forwardRef(({ className, ...rest }, ref) => {
+  const classNames = imageFrameReactionButton();
+  return /* @__PURE__ */ jsx(ImageFrameReactionButtonClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Toggle.Root, { ref, className: clsx(classNames.root, className), ...rest, children: /* @__PURE__ */ jsx(ReactionButtonIcon, {}) }) });
 });
 ImageFrameReactionButton.displayName = "ImageFrameReactionButton";
 

package/lib/components/ImageFrame/ImageFrame.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageFrame.test.d.ts.map

package/lib/components/ImageFrame/ImageFrame.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageFrame.test.d.ts","sourceRoot":"","sources":["../../../src/components/ImageFrame/ImageFrame.test.tsx"],"names":[],"mappings":""}

package/lib/components/TagGroup/TagGroup.cjs

@@ -18,7 +18,7 @@ const TagGroupRoot = React.forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(props, { tagGroup: tagGroup.tagGroup, tagGroupItem: tagGroupItem.tagGroupItem });
     const classNames = tagGroup.tagGroup(tagGroupVariantProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: React.Children.toArray(children).filter((child) => child !== null && child !== void 0).map((child, index) => (
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: React.Children.toArray(children).filter(Boolean).map((child, index) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
       /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
         index > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),

package/lib/components/TagGroup/TagGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AAIjD,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMpE,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GA0BxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAoBxB,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,iBAAiB,oHAG7B,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AAIjD,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMpE,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GA6BxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAoBxB,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,iBAAiB,oHAG7B,CAAC"}

package/lib/components/TagGroup/TagGroup.js

@@ -14,7 +14,7 @@ const TagGroupRoot = forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
     const classNames = tagGroup(tagGroupVariantProps);
-    return /* @__PURE__ */ jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: Children.toArray(children).filter((child) => child !== null && child !== void 0).map((child, index) => (
+    return /* @__PURE__ */ jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: Children.toArray(children).filter(Boolean).map((child, index) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
       /* @__PURE__ */ jsxs(Fragment, { children: [
         index > 0 && /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),

package/lib/components/index.cjs

@@ -25,6 +25,8 @@ const ChipTabs = require('./ChipTabs/ChipTabs.cjs');
 const ChipTabs_namespace = require('./ChipTabs/ChipTabs.namespace.cjs');
 const Columns = require('./Columns/Columns.cjs');
 const ConsistentWidth = require('./ConsistentWidth/ConsistentWidth.cjs');
+const ContentPlaceholder = require('./ContentPlaceholder/ContentPlaceholder.cjs');
+const ContentPlaceholder_namespace = require('./ContentPlaceholder/ContentPlaceholder.namespace.cjs');
 const ContextualFloatingButton = require('./ContextualFloatingButton/ContextualFloatingButton.cjs');
 const ControlChip = require('./ControlChip/ControlChip.cjs');
 const Count = require('./Count/Count.cjs');
@@ -179,6 +181,9 @@ exports.ChipTabs = ChipTabs_namespace;
 exports.Column = Columns.Column;
 exports.Columns = Columns.Columns;
 exports.ConsistentWidth = ConsistentWidth.ConsistentWidth;
+exports.ContentPlaceholderAsset = ContentPlaceholder.ContentPlaceholderAsset;
+exports.ContentPlaceholderRoot = ContentPlaceholder.ContentPlaceholderRoot;
+exports.ContentPlaceholder = ContentPlaceholder_namespace;
 exports.ContextualFloatingButton = ContextualFloatingButton.ContextualFloatingButton;
 exports.ControlChip = ControlChip.ControlChip;
 exports.Count = Count.Count;

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './Chip';
 export * from './ChipTabs';
 export * from './Columns';
 export * from './ConsistentWidth';
+export * from './ContentPlaceholder';
 export * from './ContextualFloatingButton';
 export * from './ControlChip';
 export * from './Count';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -28,6 +28,9 @@ import * as ChipTabs_namespace from './ChipTabs/ChipTabs.namespace.js';
 export { ChipTabs_namespace as ChipTabs };
 export { Column, Columns } from './Columns/Columns.js';
 export { ConsistentWidth } from './ConsistentWidth/ConsistentWidth.js';
+export { ContentPlaceholderAsset, ContentPlaceholderRoot } from './ContentPlaceholder/ContentPlaceholder.js';
+import * as ContentPlaceholder_namespace from './ContentPlaceholder/ContentPlaceholder.namespace.js';
+export { ContentPlaceholder_namespace as ContentPlaceholder };
 export { ContextualFloatingButton } from './ContextualFloatingButton/ContextualFloatingButton.js';
 export { ControlChip } from './ControlChip/ControlChip.js';
 export { Count } from './Count/Count.js';

package/lib/index.cjs

@@ -25,6 +25,8 @@ const ChipTabs = require('./components/ChipTabs/ChipTabs.cjs');
 const ChipTabs_namespace = require('./components/ChipTabs/ChipTabs.namespace.cjs');
 const Columns = require('./components/Columns/Columns.cjs');
 const ConsistentWidth = require('./components/ConsistentWidth/ConsistentWidth.cjs');
+const ContentPlaceholder = require('./components/ContentPlaceholder/ContentPlaceholder.cjs');
+const ContentPlaceholder_namespace = require('./components/ContentPlaceholder/ContentPlaceholder.namespace.cjs');
 const ContextualFloatingButton = require('./components/ContextualFloatingButton/ContextualFloatingButton.cjs');
 const ControlChip = require('./components/ControlChip/ControlChip.cjs');
 const Count = require('./components/Count/Count.cjs');
@@ -179,6 +181,9 @@ exports.ChipTabs = ChipTabs_namespace;
 exports.Column = Columns.Column;
 exports.Columns = Columns.Columns;
 exports.ConsistentWidth = ConsistentWidth.ConsistentWidth;
+exports.ContentPlaceholderAsset = ContentPlaceholder.ContentPlaceholderAsset;
+exports.ContentPlaceholderRoot = ContentPlaceholder.ContentPlaceholderRoot;
+exports.ContentPlaceholder = ContentPlaceholder_namespace;
 exports.ContextualFloatingButton = ContextualFloatingButton.ContextualFloatingButton;
 exports.ControlChip = ControlChip.ControlChip;
 exports.Count = Count.Count;

package/lib/index.js

@@ -28,6 +28,9 @@ import * as ChipTabs_namespace from './components/ChipTabs/ChipTabs.namespace.js
 export { ChipTabs_namespace as ChipTabs };
 export { Column, Columns } from './components/Columns/Columns.js';
 export { ConsistentWidth } from './components/ConsistentWidth/ConsistentWidth.js';
+export { ContentPlaceholderAsset, ContentPlaceholderRoot } from './components/ContentPlaceholder/ContentPlaceholder.js';
+import * as ContentPlaceholder_namespace from './components/ContentPlaceholder/ContentPlaceholder.namespace.js';
+export { ContentPlaceholder_namespace as ContentPlaceholder };
 export { ContextualFloatingButton } from './components/ContextualFloatingButton/ContextualFloatingButton.js';
 export { ControlChip } from './components/ControlChip/ControlChip.js';
 export { Count } from './components/Count/Count.js';

package/lib/utils/styled.cjs

@@ -286,7 +286,11 @@ function useStyleProps(props) {
       "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
       ...style
     },
-    restProps
+    restProps: {
+      ...restProps,
+      // see global.ts to understand why we need this
+      ...(_active?.bg != null || _active?.background != null) && { "data-has-active-bg": "" }
+    }
   };
 }
 function withStyleProps(Component) {

package/lib/utils/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -282,7 +282,11 @@ function useStyleProps(props) {
       "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
       ...style
     },
-    restProps
+    restProps: {
+      ...restProps,
+      // see global.ts to understand why we need this
+      ...(_active?.bg != null || _active?.background != null) && { "data-has-active-bg": "" }
+    }
   };
 }
 function withStyleProps(Component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -60,7 +60,7 @@
     "@seed-design/react-slider": "1.0.2",
     "@seed-design/react-snackbar": "1.0.1",
     "@seed-design/react-switch": "1.0.1",
-    "@seed-design/react-tabs": "1.0.2",
+    "@seed-design/react-tabs": "1.0.3",
     "@seed-design/react-text-field": "1.1.1",
     "@seed-design/react-toggle": "1.0.1",
     "clsx": "^2.1.1",

package/src/components/ContentPlaceholder/ContentPlaceholder.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  ContentPlaceholderRoot as Root,
+  ContentPlaceholderAsset as Asset,
+  type ContentPlaceholderRootProps as RootProps,
+  type ContentPlaceholderAssetProps as AssetProps,
+} from "./ContentPlaceholder";

package/src/components/ContentPlaceholder/ContentPlaceholder.tsx

@@ -0,0 +1,59 @@
+import {
+  contentPlaceholder,
+  type ContentPlaceholderVariantProps,
+} from "@seed-design/css/recipes/content-placeholder";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { contentPlaceholderAssetPresetMap } from "./presets";
+import { mergeProps } from "@seed-design/dom-utils";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+
+const { PropsProvider, ClassNamesProvider, useProps, useClassNames } =
+  createSlotRecipeContext(contentPlaceholder);
+
+export interface ContentPlaceholderRootProps
+  extends ContentPlaceholderVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ContentPlaceholderRoot = React.forwardRef<HTMLDivElement, ContentPlaceholderRootProps>(
+  (props, ref) => {
+    const [variantProps, restProps] = contentPlaceholder.splitVariantProps(props);
+    const classNames = contentPlaceholder(variantProps);
+
+    return (
+      <PropsProvider value={variantProps}>
+        <ClassNamesProvider value={classNames}>
+          <Primitive.div ref={ref} {...mergeProps({ className: classNames.root }, restProps)} />
+        </ClassNamesProvider>
+      </PropsProvider>
+    );
+  },
+);
+
+ContentPlaceholderRoot.displayName = "ContentPlaceholderRoot";
+
+export interface ContentPlaceholderAssetProps extends React.HTMLAttributes<HTMLElement> {}
+
+export const ContentPlaceholderAsset = React.forwardRef<HTMLElement, ContentPlaceholderAssetProps>(
+  ({ children, className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const parentProps = useProps();
+
+    const asset = useMemo(() => {
+      if (children) return children;
+
+      return contentPlaceholderAssetPresetMap[parentProps?.type ?? "default"];
+    }, [children, parentProps?.type]);
+
+    return (
+      <Slot ref={ref} className={clsx(classNames.asset, className)} {...props}>
+        {asset}
+      </Slot>
+    );
+  },
+);
+ContentPlaceholderAsset.displayName = "ContentPlaceholderAsset";

package/src/components/ContentPlaceholder/index.ts

@@ -0,0 +1,8 @@
+export {
+  ContentPlaceholderRoot,
+  ContentPlaceholderAsset,
+  type ContentPlaceholderRootProps,
+  type ContentPlaceholderAssetProps,
+} from "./ContentPlaceholder";
+
+export * as ContentPlaceholder from "./ContentPlaceholder.namespace";

package/src/components/ContentPlaceholder/presets.tsx

@@ -0,0 +1,96 @@
+import type { ContentPlaceholderVariant } from "@seed-design/css/recipes/content-placeholder";
+
+export const contentPlaceholderAssetPresetMap: Record<
+  ContentPlaceholderVariant["type"],
+  React.ReactNode
+> = {
+  default: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M31.8617 23.6125C21.7886 23.6125 13.6225 31.8129 13.6225 42.1479C13.6225 56.4372 31.912 64.0207 31.8617 63.9988C31.8114 64.0207 50.1009 56.4372 50.1009 42.1479C50.1009 31.8129 41.9348 23.6125 31.8617 23.6125ZM31.8617 49.6501C30.4962 49.6498 29.1614 49.2341 28.0261 48.4556C26.8909 47.677 26.0061 46.5705 25.4837 45.2761C24.9613 43.9816 24.8247 42.5573 25.0913 41.1832C25.3579 39.8092 26.0155 38.547 26.9812 37.5564C27.9469 36.5659 29.1771 35.8913 30.5164 35.6181C31.8557 35.3448 33.2439 35.4852 34.5055 36.0214C35.7671 36.5576 36.8453 37.4656 37.6039 38.6305C38.3626 39.7954 38.7675 41.165 38.7675 42.566C38.7675 43.4964 38.5888 44.4177 38.2418 45.2773C37.8947 46.1368 37.386 46.9178 36.7447 47.5757C36.1035 48.2335 35.3422 48.7553 34.5043 49.1112C33.6665 49.4671 32.7685 49.6502 31.8617 49.6501Z" />
+      <path d="M35.9687 0C31.7121 0 28.7485 3.05094 28.2818 6.64392C22.6063 5.03456 18.1597 9.44706 18.1597 14.3306C18.1597 18.054 20.6478 21.0636 23.9811 22.0406C26.6642 22.8265 31.4944 22.2419 31.4944 22.2419C31.4705 21.0378 32.5511 19.7162 34.2165 18.5134C38.9549 15.0921 42.6644 13.4801 43.238 8.81597C43.8368 3.9466 40.3046 0 35.9687 0Z" />
+    </svg>
+  ),
+  coupon: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60.0418 35.7199H57.7218C55.7485 35.7199 54.0951 34.0666 54.0951 32.0399C54.0951 30.0133 55.7751 28.3599 57.7218 28.3599H60.0418C60.7885 28.3599 61.5085 28.0399 62.0151 27.4799C62.5218 26.9199 62.7618 26.1733 62.6818 25.4266C62.2551 21.1866 61.2418 16.4666 59.9085 12.0399C58.9218 8.75993 55.8551 6.7066 52.5751 6.7066H40.0418V14.7066C40.0418 16.1733 38.8418 17.3733 37.3751 17.3733C35.9085 17.3733 34.7085 16.1733 34.7085 14.7066V6.67993H23.1084H11.5084C8.22845 6.67993 5.16178 8.75993 4.17512 12.0399C2.84178 16.4399 1.80178 21.1599 1.37512 25.3999C1.29512 26.1466 1.53512 26.8933 2.04178 27.4533C2.54845 28.0133 3.26845 28.3333 4.01512 28.3333H6.33512C8.30845 28.3333 9.96178 29.9866 9.96178 32.0133C9.96178 34.0399 8.28178 35.6933 6.33512 35.6933H4.01512C3.24178 35.6933 2.52178 36.0133 2.01512 36.5999C1.50845 37.1599 1.26845 37.9333 1.34845 38.6799C1.80178 42.6266 2.78845 47.5866 4.04178 51.9599C5.00178 55.2933 8.06845 57.3199 11.3484 57.3199H34.6818V49.3199C34.6818 47.8533 35.8818 46.6533 37.3484 46.6533C38.8151 46.6533 40.0151 47.8533 40.0151 49.3199V57.3199H52.6551C55.9085 57.3199 59.0018 55.2666 59.9618 51.9599C61.2151 47.5866 62.2018 42.6266 62.6551 38.6799C62.7351 37.9333 62.4951 37.1599 61.9884 36.5999C61.4818 36.0399 60.7618 35.6933 59.9884 35.6933L60.0418 35.7199ZM40.0418 36.0399C40.0418 37.5066 38.8418 38.7066 37.3751 38.7066C35.9085 38.7066 34.7085 37.5066 34.7085 36.0399V28.0399C34.7085 26.5733 35.9085 25.3733 37.3751 25.3733C38.8418 25.3733 40.0418 26.5733 40.0418 28.0399V36.0399Z"
+      />
+    </svg>
+  ),
+  car: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M63.6986 23.0139C63.0853 21.3605 61.272 20.5072 59.592 21.0939C59.0053 21.3072 58.4186 21.4939 57.832 21.7072L52.312 10.6939C50.8453 7.78721 47.9386 5.97388 44.6853 5.97388H19.272C16.0186 5.97388 13.0853 7.78721 11.6453 10.6939L6.15196 21.7072C5.59196 21.5205 5.03196 21.3339 4.44529 21.1205C2.79196 20.5339 0.951957 21.3605 0.338623 23.0405C-0.27471 24.6939 0.60529 26.5339 2.25862 27.1472C2.95196 27.3872 3.64529 27.6272 4.33862 27.8672C1.67196 35.6805 1.24529 45.3339 3.37862 53.1472C3.64529 54.1339 4.47196 54.8805 5.45862 55.0672L16.712 57.1472C17.4853 57.2761 18.2934 57.0916 18.8986 56.5872C19.512 56.0805 19.8586 55.3339 19.8586 54.5339V49.3872C22.5253 49.7072 26.7653 50.0805 32.0186 50.1339C37.2186 50.0805 41.4586 49.7072 44.1253 49.3872V54.5339C44.1253 55.3339 44.472 56.0805 45.0853 56.5872C45.6986 57.0939 46.4986 57.3072 47.272 57.1472L58.5253 55.0672C59.5386 54.8805 60.3386 54.1339 60.6053 53.1472C62.7653 45.3605 62.3386 35.7072 59.672 27.8672C60.3653 27.6272 61.0586 27.4139 61.752 27.1472C63.4053 26.5339 64.2586 24.6939 63.672 23.0405L63.6986 23.0139ZM17.0053 39.5205L13.0053 38.7205C11.5653 38.4272 10.632 37.0405 10.9253 35.5739C11.2186 34.1339 12.632 33.1739 14.072 33.4939L18.072 34.2939C19.512 34.5872 20.4453 35.9739 20.152 37.4405C19.8979 38.7955 18.3922 39.9168 17.0053 39.5205ZM32.0186 26.2405C25.5653 26.2405 18.9786 25.3072 12.3386 23.5739L17.352 13.5472C17.7253 12.8272 18.4453 12.3739 19.2453 12.3739H44.6586C45.4853 12.3739 46.2053 12.8272 46.5786 13.5472L51.592 23.6005C44.9786 25.3339 38.4186 26.2405 31.992 26.2672L32.0186 26.2405ZM50.952 38.7205L46.952 39.5205C45.521 39.725 44.1209 38.9237 43.8053 37.4405C43.512 36.0005 44.4453 34.5872 45.8853 34.2939L49.8853 33.4939C51.3253 33.2005 52.7386 34.1339 53.032 35.5739C53.3253 37.0139 52.392 38.4272 50.952 38.7205Z" />
+    </svg>
+  ),
+  realty: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M61.7279 21.0934C54.5279 16.6134 41.6745 8.66669 36.2345 5.30669C33.6479 3.70669 30.4212 3.70669 27.8345 5.30669L2.36787 21.0934C0.847872 22 0.394539 23.9734 1.32787 25.4934C2.18654 26.8747 3.90121 27.3734 5.30121 26.72V51.8134C5.30121 56.2667 8.92787 59.8934 13.3545 59.8934H50.6879C55.1412 59.8934 58.7412 56.2667 58.7412 51.8134V26.6667C60.1812 27.3067 61.8612 26.8534 62.7145 25.4934C63.6479 24 63.1945 22.0267 61.6745 21.0934H61.7279ZM28.1812 44.2934C28.1812 45.3867 27.2745 46.2934 26.1812 46.2934H23.5145C22.4212 46.2934 21.5145 45.3867 21.5145 44.2934V41.6267C21.5145 40.5334 22.4212 39.6267 23.5145 39.6267H26.1812C27.2745 39.6267 28.1812 40.5334 28.1812 41.6267V44.2934ZM28.1812 29.8934C28.1812 30.9867 27.2745 31.8934 26.1812 31.8934H23.5145C22.4212 31.8934 21.5145 30.9867 21.5145 29.8934V27.2267C21.5145 26.1334 22.4212 25.2267 23.5145 25.2267H26.1812C27.2745 25.2267 28.1812 26.1334 28.1812 27.2267V29.8934ZM42.5812 44.2934C42.5812 45.3867 41.6745 46.2934 40.5812 46.2934H37.9145C36.8212 46.2934 35.9145 45.3867 35.9145 44.2934V41.6267C35.9145 40.5334 36.8212 39.6267 37.9145 39.6267H40.5812C41.6745 39.6267 42.5812 40.5334 42.5812 41.6267V44.2934ZM42.5812 29.8934C42.5812 30.9867 41.6745 31.8934 40.5812 31.8934H37.9145C36.8212 31.8934 35.9145 30.9867 35.9145 29.8934V27.2267C35.9145 26.1334 36.8212 25.2267 37.9145 25.2267H40.5812C41.6745 25.2267 42.5812 26.1334 42.5812 27.2267V29.8934Z" />
+    </svg>
+  ),
+  food: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M26.9083 5.85409C25.1483 5.85409 23.7083 7.29409 23.7083 9.05409V21.9874C23.7083 23.1608 22.7483 24.1208 21.575 24.1208C20.4017 24.1208 19.4417 23.1608 19.4417 21.9874V9.05409C19.4417 7.29409 18.0283 5.85409 16.2683 5.85409C14.5083 5.85409 13.0683 7.29409 13.0683 9.05409V21.9874C13.0683 23.1608 12.1083 24.1208 10.935 24.1208C9.76167 24.1208 8.80167 23.1608 8.80167 21.9874V9.05409C8.80167 7.29409 7.36167 5.85409 5.60167 5.85409C3.84167 5.85409 2.375 7.26742 2.375 9.05409V23.1608C2.375 29.8008 6.56167 33.9874 11.655 35.5608V55.6941C11.655 58.2274 13.7083 60.2541 16.215 60.2541C18.7217 60.2541 20.775 58.2007 20.775 55.6941V35.5874C25.895 34.0408 30.1083 29.8541 30.1083 23.1874V9.05409C30.1083 7.29409 28.6683 5.85409 26.9083 5.85409Z" />
+      <path d="M48.2917 3.74731C41.6783 3.74731 34.9583 8.36065 34.9583 17.134V22.334C34.9583 29.0806 38.905 33.3473 43.7317 34.974V55.6673C43.7317 58.2006 45.785 60.2273 48.2917 60.2273C50.7983 60.2273 52.8517 58.174 52.8517 55.6673V34.974C57.6783 33.3473 61.625 29.0806 61.625 22.334V17.134C61.625 8.33398 54.905 3.74731 48.2917 3.74731Z" />
+    </svg>
+  ),
+  image: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M51.2 5.33325H12.8C8.66665 5.33325 5.33331 8.66659 5.33331 12.7999V51.1999C5.33331 55.3333 8.66665 58.6666 12.8 58.6666H51.2C55.3333 58.6666 58.6666 55.3333 58.6666 51.1999V12.7999C58.6666 8.66659 55.3333 5.33325 51.2 5.33325ZM42.6666 16.2666C44.88 16.2666 46.6666 18.0533 46.6666 20.2666C46.6666 22.4799 44.88 24.2666 42.6666 24.2666C40.4533 24.2666 38.6666 22.4799 38.6666 20.2666C38.6666 18.0533 40.4533 16.2666 42.6666 16.2666ZM49.8666 45.4399C48.8266 46.4799 47.12 46.4533 46.1066 45.4133L42.4533 41.6799L38.72 45.4399C38.2133 45.9466 37.5466 46.2133 36.8266 46.2133C36.1066 46.2133 35.44 45.9199 34.9333 45.4133L26.48 36.7199L17.9466 45.4399C16.9066 46.4799 15.2266 46.5066 14.1866 45.4666C13.1466 44.4266 13.12 42.7466 14.16 41.6799L24.6133 31.0133C25.12 30.5066 25.8133 30.2133 26.5066 30.2133C27.2266 30.2133 27.92 30.5066 28.4266 31.0133L36.88 39.7333L40.6133 35.9733C41.12 35.4666 41.7866 35.1999 42.5066 35.1999C43.2266 35.1999 43.8933 35.4933 44.4 35.9999L49.9466 41.6533C50.9866 42.6933 50.96 44.3999 49.92 45.4399H49.8666Z"
+      />
+    </svg>
+  ),
+  group: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M15.5417 15.8656C15.5417 10.8419 19.5847 6.79956 24.6084 6.79956C29.632 6.79956 33.675 10.8419 33.675 15.8656C33.675 20.8948 29.5983 24.9315 24.6084 24.9315C19.5847 24.9315 15.5417 20.8892 15.5417 15.8656Z" />
+      <path d="M45.0979 12.1329C40.8214 12.1329 37.3646 15.5891 37.3646 19.8657C37.3646 24.1423 40.8214 27.5985 45.0979 27.5985C49.3744 27.5985 52.8313 24.1423 52.8313 19.8657C52.8313 15.5891 49.3744 12.1329 45.0979 12.1329Z" />
+      <path d="M12.6313 24.1052C11.5016 22.913 10.1841 21.9114 8.71728 21.4344C7.15188 20.9254 5.41388 21.0338 3.91743 22.1102C2.27054 23.2957 1.79321 25.1206 1.86024 26.6697C1.92592 28.1877 2.49461 29.7093 3.28307 31.0211C5.73925 35.1078 8.15929 39.2165 10.5959 43.3148L7.54618 53.5039C7.30456 54.3112 7.45871 55.1852 7.96193 55.8611C8.46514 56.537 9.25822 56.9352 10.1009 56.9352C18.0718 56.9352 26.0427 56.934 34.0136 56.934L34.0138 40.7869C34.0138 38.2483 33.4037 36.2516 32.3403 34.7828C31.3522 33.4179 29.8334 32.3145 27.5733 31.6881C20.904 30.0613 15.977 27.6362 12.6313 24.1052Z" />
+      <path d="M37.5089 32.9941C38.7797 35.3 39.3471 37.9696 39.3471 40.7869L39.347 56.934H52.7083C53.5262 56.934 54.2989 56.5586 54.8045 55.9157C55.3101 55.2727 55.4926 54.4333 55.2997 53.6384L53.2908 45.3611C55.1418 43.4528 58.9977 39.4703 60.3119 38.0478C62.7044 35.4581 63.0014 32.0871 61.0202 29.8861C60.044 28.8018 58.7109 28.0757 57.1705 27.9553C55.6458 27.836 54.1626 28.3266 52.8604 29.2226C50.1047 31.1186 46.0544 32.3735 41.4382 32.8171C40.1476 32.9411 38.831 32.9998 37.5089 32.9941Z" />
+    </svg>
+  ),
+  post: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.0018 4.80178C38.7559 4.7983 25.5101 4.79939 12.2647 4.80178C8.14144 4.80252 4.79939 8.14535 4.79947 12.2685L4.80021 51.9997C4.80029 56.1234 8.14322 59.4662 12.2669 59.4662H51.9994C56.1231 59.4662 59.466 56.1233 59.466 51.9996V12.2682C59.466 8.14559 56.1247 4.80287 52.0018 4.80178ZM17.3333 13.3329C15.8606 13.3329 14.6667 14.5268 14.6667 15.9996V22.6663C14.6667 24.139 15.8606 25.3329 17.3333 25.3329H24C25.4727 25.3329 26.6667 24.139 26.6667 22.6663V15.9996C26.6667 14.5268 25.4727 13.3329 24 13.3329H17.3333ZM14.6667 35.9996C14.6667 34.5268 15.8606 33.3329 17.3333 33.3329H44C45.4727 33.3329 46.6667 34.5268 46.6667 35.9996C46.6667 37.4724 45.4727 38.6663 44 38.6663H17.3333C15.8606 38.6663 14.6667 37.4724 14.6667 35.9996ZM14.6667 47.9996C14.6667 46.5268 15.8606 45.3329 17.3333 45.3329H33.3333C34.8061 45.3329 36 46.5268 36 47.9996C36 49.4724 34.8061 50.6663 33.3333 50.6663H17.3333C15.8606 50.6663 14.6667 49.4724 14.6667 47.9996Z"
+      />
+    </svg>
+  ),
+  business: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M62.3312 20.8933L57.7979 9.45331C56.7045 6.70664 54.0379 4.89331 51.0779 4.89331H13.0779C10.1179 4.89331 7.45121 6.70664 6.35788 9.45331L1.82454 20.8933C1.53121 21.64 1.61121 22.4666 2.06454 23.1333C4.76445 26.7187 8.69287 29.6933 13.3712 29.6933C17.0216 29.6933 20.1017 27.8393 22.7045 25.4533C25.168 27.9168 28.4991 29.6933 32.0379 29.6933C35.6883 29.6933 38.7683 27.8393 41.3712 25.4533C43.8347 27.9168 47.1658 29.6933 50.7045 29.6933C55.0823 29.6933 59.4621 26.7074 61.9579 23.2133C62.3007 22.6991 62.5571 21.4684 62.3312 20.8933Z" />
+      <path d="M50.7567 35.1085C46.41 35.1085 43.3434 33.2152 41.4234 31.4819C39.53 33.2152 36.4634 35.1085 32.09 35.1085C27.7167 35.1085 24.65 33.2152 22.7567 31.4819C20.8634 33.2152 17.7967 35.1085 13.4234 35.1085C9.90335 35.1085 7.07669 33.9085 4.94335 32.5219V51.2685C4.94335 55.5885 8.46335 59.0819 12.7834 59.0819C23.85 59.0819 28.65 59.0819 34.4634 59.0819C38.6767 59.0819 43.3967 59.0819 51.3967 59.1085C55.69 59.1085 59.21 55.6419 59.21 51.3219V32.5485C57.1034 33.9352 54.25 35.1352 50.7567 35.1352V35.1085ZM28.2234 46.5219C28.2234 47.5352 27.3967 48.3885 26.3567 48.3885H23.3967C22.3834 48.3885 21.5567 47.5619 21.5567 46.5219V43.5619C21.5567 42.5485 22.3834 41.7219 23.3967 41.7219H26.3567C27.37 41.7219 28.2234 42.5485 28.2234 43.5619V46.5219ZM42.6234 46.5219C42.6234 47.5352 41.7967 48.3885 40.7834 48.3885H37.8234C36.81 48.3885 35.9834 47.5619 35.9834 46.5219V43.5619C35.9834 42.5485 36.81 41.7219 37.8234 41.7219H40.7834C41.7967 41.7219 42.6234 42.5485 42.6234 43.5619V46.5219Z" />
+    </svg>
+  ),
+  buySell: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M48.0554 4.20562L54.9887 19.059L55.0154 19.0856C51.682 18.179 47.282 17.1923 42.0554 16.6056C41.6287 12.659 40.0554 9.05895 37.682 6.12562L44.5087 2.92562C45.4954 2.44562 46.642 2.65895 47.4154 3.35229C47.682 3.59229 47.8954 3.85895 48.0554 4.20562Z" />
+      <path d="M36.6145 16.0989C26.8454 15.6022 16.9515 16.5849 7.54788 19.3256C6.62841 11.0504 14.1374 3.99227 22.1612 3.99227C29.4412 3.99227 35.5212 9.21894 36.6145 16.0989Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M59.3261 25.8476C59.0054 25.7062 58.5444 25.513 57.943 25.2857C56.7401 24.831 54.9762 24.24 52.6517 23.6543C48.0009 22.4823 41.1155 21.3334 32.0001 21.3334C22.8847 21.3334 15.9993 22.4823 11.3485 23.6543C9.02395 24.24 7.2601 24.831 6.05719 25.2857C5.4558 25.513 4.99475 25.7062 4.67407 25.8476C4.51373 25.9184 4.38849 25.9761 4.29835 26.0187L4.13323 26.0988C3.10728 26.6158 2.52784 27.7319 2.69519 28.8685L6.46878 54.4987C7.04679 58.4246 10.4153 61.3334 14.3834 61.3334H49.6167C53.5849 61.3334 56.9534 58.4246 57.5314 54.4987L61.305 28.8685C61.4723 27.7319 60.8929 26.6158 59.8669 26.0988L59.3261 25.8476ZM24 30.6615C25.4727 30.6615 26.6666 31.8554 26.6666 33.3282V35.9869C26.6666 38.9132 29.0355 41.2963 31.9999 41.3281C34.9575 41.2963 37.3333 38.8881 37.3333 35.9869V33.3282C37.3333 31.8554 38.5272 30.6615 40 30.6615C41.4727 30.6615 42.6666 31.8554 42.6666 33.3282V35.9869C42.6666 41.8561 37.8848 46.6189 32.0193 46.6615H31.9806C26.1221 46.619 21.3333 41.895 21.3333 35.9869V33.3282C21.3333 31.8554 22.5272 30.6615 24 30.6615Z"
+      />
+    </svg>
+  ),
+  jobs: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M29.3469 32.9489C34.9469 32.9489 39.4802 28.3889 39.4802 22.8155C39.4802 17.2422 34.9469 12.6822 29.3469 12.6822C23.7469 12.6822 19.2135 17.2422 19.2135 22.8155C19.2135 28.3889 23.7469 32.9489 29.3469 32.9489Z" />
+      <path d="M59.3191 53.9876L51.0258 45.6943C54.5725 41.001 56.5458 35.241 56.5458 29.2943C56.5458 14.281 44.3325 2.06763 29.3458 2.06763C14.3591 2.06763 2.14581 14.281 2.14581 29.2676C2.14581 44.066 14.5974 56.4676 29.3725 56.4676C34.6525 56.4676 39.7991 54.8943 44.1725 52.041L52.7058 60.5743C54.5191 62.3876 57.5058 62.3876 59.3191 60.5743C61.1325 58.761 61.1325 55.801 59.3191 53.9876ZM8.54581 28.8943C8.75915 17.5876 18.0125 8.46763 29.3458 8.46763C40.6791 8.46763 50.1458 17.801 50.1458 29.2676C50.1458 33.9076 48.5725 38.361 45.7725 41.9876C45.7725 41.9876 45.7458 41.9876 45.7191 41.9876C42.7858 39.2943 37.3191 35.6676 29.3191 35.6676C21.3191 35.6676 15.8791 39.2943 12.9191 41.9876C10.0034 38.2143 8.54581 33.6435 8.54581 28.8943Z" />
+    </svg>
+  ),
+  commerce: (
+    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M21.3333 51.4666C24.2788 51.4666 26.6666 53.8545 26.6666 56.8C26.6666 59.7455 24.2788 62.1333 21.3333 62.1333C18.3878 62.1333 16 59.7455 16 56.8C16 53.8545 18.3878 51.4666 21.3333 51.4666Z" />
+      <path d="M50.6666 51.4666C53.6121 51.4666 56 53.8545 56 56.8C56 59.7455 53.6121 62.1333 50.6666 62.1333C47.7211 62.1333 45.3333 59.7455 45.3333 56.8C45.3333 53.8544 47.7211 51.4666 50.6666 51.4666Z" />
+      <path d="M6.66663 11.4666C10.8773 11.4669 14.4741 14.5114 15.1744 18.675L16 23.4666H58.664C59.4399 23.4661 60.1779 23.8037 60.6849 24.3911C61.1914 24.9782 61.4182 25.7569 61.3046 26.5239L58.8151 41.9614C58.8113 41.9866 58.8065 42.0119 58.802 42.0369C58.4481 44.0218 57.4986 45.7558 56.0026 46.9849C54.5116 48.2095 52.6409 48.8 50.6666 48.8H24L22.8619 48.7635C20.2853 48.5917 18.2371 47.8215 16.6823 46.4953C14.9347 45.0043 14.1412 43.0863 13.7135 41.4901C13.6926 41.4121 13.6752 41.3326 13.6614 41.2531L10.9401 25.4953C10.9038 25.3534 10.877 25.2077 10.8645 25.0578L9.91923 19.5838L9.91663 19.5656C9.64957 17.9603 8.26855 16.8003 6.66663 16.8H5.31767C3.84491 16.8 2.651 15.6061 2.651 14.1333C2.651 12.6605 3.84491 11.4666 5.31767 11.4666H6.66663Z" />
+      <path d="M37.9427 2.1333C40.4831 2.13368 42.7559 3.3734 44.1666 5.3182C37.8405 6.64864 33.0177 12.0577 32.5703 18.6672H19.4713C19.294 18.0136 19.2005 17.3247 19.2005 16.6099C19.2012 11.677 23.8799 7.21956 29.8515 8.84424C30.3431 5.21485 33.4635 2.1333 37.9427 2.1333Z" />
+      <path d="M47.2005 10.339C52.0147 10.3394 55.975 13.9852 56.4765 18.6672H37.9244C38.3715 14.4943 41.5654 11.1456 45.664 10.4666C46.1638 10.3839 46.6773 10.339 47.2005 10.339Z" />
+    </svg>
+  ),
+};

package/src/components/ImageFrame/ImageFrame.test.tsx

@@ -0,0 +1,57 @@
+import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-reaction-button";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "bun:test";
+import type { ReactElement } from "react";
+import { ImageFrameReactionButton } from "./ImageFrame";
+
+function setUp(jsx: ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+describe("ImageFrame", () => {
+  describe("ImageFrameReactionButton", () => {
+    it("renders the unselected icon by default", () => {
+      const classNames = imageFrameReactionButton();
+      const { getByRole, container } = setUp(
+        <ImageFrameReactionButton aria-label="Like image" />,
+      );
+
+      const button = getByRole("button", { name: "Like image" });
+      const lineIcon = container.querySelector(`.${classNames.lineIcon}`);
+      const fillIcon = container.querySelector(`.${classNames.fillIcon}`);
+      const gradient = container.querySelector("linearGradient");
+
+      expect(button).toHaveAttribute("aria-pressed", "false");
+      expect(lineIcon).not.toBeNull();
+      expect(lineIcon).toHaveClass(classNames.lineIcon);
+      expect(fillIcon).toBeNull();
+      expect(gradient).toBeNull();
+      expect(lineIcon).not.toHaveAttribute("data-pressed");
+    });
+
+    it("switches to the selected icon on press", async () => {
+      const classNames = imageFrameReactionButton();
+      const { getByRole, container, user } = setUp(
+        <ImageFrameReactionButton aria-label="Like image" />,
+      );
+
+      const button = getByRole("button", { name: "Like image" });
+
+      await user.click(button);
+
+      const fillIcon = container.querySelector(`.${classNames.fillIcon}`);
+      const lineIcon = container.querySelector(`.${classNames.lineIcon}`);
+      const gradient = container.querySelector("linearGradient");
+
+      expect(button).toHaveAttribute("aria-pressed", "true");
+      expect(fillIcon).not.toBeNull();
+      expect(lineIcon).toBeNull();
+      expect(gradient).not.toBeNull();
+      expect(fillIcon).toHaveAttribute("data-pressed", "");
+    });
+  });
+});