@seed-design/react 1.1.1 → 1.1.4

package/lib/components/HelpBubble/HelpBubble.cjs

@@ -31,6 +31,7 @@ const HelpBubblePositioner = withContext(
   reactPopover.Popover.Positioner,
   "positioner"
 );
+const HelpBubblePositionerPortal = withContext(reactPopover.Popover.PositionerPortal, "positioner");
 const HelpBubbleContent = withContext(
   styled.withStyleProps(withStateProps(reactPrimitive.Primitive.div)),
   "content"
@@ -69,6 +70,7 @@ const HelpBubbleArrowTip = React.forwardRef(
     );
   }
 );
+HelpBubbleArrowTip.displayName = "HelpBubbleArrowTip";
 const HelpBubbleCloseButton = withContext(
   reactPopover.Popover.CloseButton,
   "closeButton"
@@ -89,6 +91,7 @@ exports.HelpBubbleCloseButton = HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubbleDescription;
 exports.HelpBubblePositioner = HelpBubblePositioner;
+exports.HelpBubblePositionerPortal = HelpBubblePositionerPortal;
 exports.HelpBubbleRoot = HelpBubbleRoot;
 exports.HelpBubbleTitle = HelpBubbleTitle;
 exports.HelpBubbleTrigger = HelpBubbleTrigger;

package/lib/components/HelpBubble/HelpBubble.d.ts

@@ -31,6 +31,9 @@ export declare const HelpBubbleTrigger: ForwardRefExoticComponent<PopoverPrimiti
 export interface HelpBubblePositionerProps extends PopoverPrimitive.PositionerProps {
 }
 export declare const HelpBubblePositioner: ForwardRefExoticComponent<HelpBubblePositionerProps & RefAttributes<HTMLDivElement>>;
+export interface HelpBubblePositionerPortalProps extends PopoverPrimitive.PositionerPortalProps {
+}
+export declare const HelpBubblePositionerPortal: ForwardRefExoticComponent<HelpBubblePositionerPortalProps & RefAttributes<HTMLDivElement>>;
 export interface HelpBubbleContentProps extends PrimitiveProps, Pick<StyleProps, "maxWidth">, React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const HelpBubbleContent: ForwardRefExoticComponent<HelpBubbleContentProps & RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AASrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9C;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,gEAOzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIAiC9B,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AASrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9C;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,gEAOzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAEF,MAAM,WAAW,+BAAgC,SAAQ,gBAAgB,CAAC,qBAAqB;CAAG;AAElG,eAAO,MAAM,0BAA0B,4HAGW,CAAC;AAInD,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIAiC9B,CAAC;AAKF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}

package/lib/components/HelpBubble/HelpBubble.js

@@ -27,6 +27,7 @@ const HelpBubblePositioner = withContext(
   Popover.Positioner,
   "positioner"
 );
+const HelpBubblePositionerPortal = withContext(Popover.PositionerPortal, "positioner");
 const HelpBubbleContent = withContext(
   withStyleProps(withStateProps(Primitive.div)),
   "content"
@@ -65,6 +66,7 @@ const HelpBubbleArrowTip = forwardRef(
     );
   }
 );
+HelpBubbleArrowTip.displayName = "HelpBubbleArrowTip";
 const HelpBubbleCloseButton = withContext(
   Popover.CloseButton,
   "closeButton"
@@ -78,4 +80,4 @@ const HelpBubbleDescription = withContext(
   "description"
 );
 
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger };
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger };

package/lib/components/HelpBubble/HelpBubble.namespace.cjs

@@ -13,6 +13,7 @@ exports.CloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.Content = HelpBubble.HelpBubbleContent;
 exports.Description = HelpBubble.HelpBubbleDescription;
 exports.Positioner = HelpBubble.HelpBubblePositioner;
+exports.PositionerPortal = HelpBubble.HelpBubblePositionerPortal;
 exports.Root = HelpBubble.HelpBubbleRoot;
 exports.Title = HelpBubble.HelpBubbleTitle;
 exports.Trigger = HelpBubble.HelpBubbleTrigger;

package/lib/components/HelpBubble/HelpBubble.namespace.d.ts

@@ -1,2 +1,2 @@
-export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, 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 HelpBubbleCloseButtonProps as CloseButtonProps, 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';
+export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubblePositionerPortal as PositionerPortal, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger, type HelpBubbleArrowProps as ArrowProps, type HelpBubbleArrowTipProps as ArrowTipProps, type HelpBubbleCloseButtonProps as CloseButtonProps, type HelpBubbleContentProps as ContentProps, type HelpBubbleDescriptionProps as DescriptionProps, type HelpBubblePositionerProps as PositionerProps, type HelpBubblePositionerPortalProps as PositionerPortalProps, type HelpBubbleRootProps as RootProps, type HelpBubbleTitleProps as TitleProps, type HelpBubbleTriggerProps as TriggerProps, } from './HelpBubble';
 //# sourceMappingURL=HelpBubble.namespace.d.ts.map

package/lib/components/HelpBubble/HelpBubble.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,MAAM,EAC1B,eAAe,IAAI,KAAK,EACxB,kBAAkB,IAAI,QAAQ,EAC9B,qBAAqB,IAAI,WAAW,EACpC,iBAAiB,IAAI,OAAO,EAC5B,qBAAqB,IAAI,WAAW,EACpC,oBAAoB,IAAI,UAAU,EAClC,cAAc,IAAI,IAAI,EACtB,eAAe,IAAI,KAAK,EACxB,iBAAiB,IAAI,OAAO,EAC5B,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,uBAAuB,IAAI,aAAa,EAC7C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,sBAAsB,IAAI,YAAY,EAC3C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,yBAAyB,IAAI,eAAe,EACjD,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,sBAAsB,IAAI,YAAY,GAC5C,MAAM,cAAc,CAAC"}
+{"version":3,"file":"HelpBubble.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,MAAM,EAC1B,eAAe,IAAI,KAAK,EACxB,kBAAkB,IAAI,QAAQ,EAC9B,qBAAqB,IAAI,WAAW,EACpC,iBAAiB,IAAI,OAAO,EAC5B,qBAAqB,IAAI,WAAW,EACpC,oBAAoB,IAAI,UAAU,EAClC,0BAA0B,IAAI,gBAAgB,EAC9C,cAAc,IAAI,IAAI,EACtB,eAAe,IAAI,KAAK,EACxB,iBAAiB,IAAI,OAAO,EAC5B,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,uBAAuB,IAAI,aAAa,EAC7C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,sBAAsB,IAAI,YAAY,EAC3C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,yBAAyB,IAAI,eAAe,EACjD,KAAK,+BAA+B,IAAI,qBAAqB,EAC7D,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,sBAAsB,IAAI,YAAY,GAC5C,MAAM,cAAc,CAAC"}

package/lib/components/HelpBubble/HelpBubble.namespace.js

@@ -1 +1 @@
-export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger } from './HelpBubble.js';
+export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubblePositionerPortal as PositionerPortal, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger } from './HelpBubble.js';

package/lib/components/HelpBubble/index.cjs

@@ -14,6 +14,7 @@ exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;
 exports.HelpBubblePositioner = HelpBubble.HelpBubblePositioner;
+exports.HelpBubblePositionerPortal = HelpBubble.HelpBubblePositionerPortal;
 exports.HelpBubbleRoot = HelpBubble.HelpBubbleRoot;
 exports.HelpBubbleTitle = HelpBubble.HelpBubbleTitle;
 exports.HelpBubbleTrigger = HelpBubble.HelpBubbleTrigger;

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

@@ -1,3 +1,3 @@
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger, type HelpBubbleAnchorProps, type HelpBubbleArrowProps, type HelpBubbleArrowTipProps, type HelpBubbleCloseButtonProps, type HelpBubbleContentProps, type HelpBubbleDescriptionProps, type HelpBubblePositionerProps, type HelpBubbleRootProps, type HelpBubbleTitleProps, type HelpBubbleTriggerProps, } from './HelpBubble';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger, type HelpBubbleAnchorProps, type HelpBubbleArrowProps, type HelpBubbleArrowTipProps, type HelpBubbleCloseButtonProps, type HelpBubbleContentProps, type HelpBubbleDescriptionProps, type HelpBubblePositionerProps, type HelpBubblePositionerPortalProps, type HelpBubbleRootProps, type HelpBubbleTitleProps, type HelpBubbleTriggerProps, } from './HelpBubble';
 export * as HelpBubble from './HelpBubble.namespace';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,+BAA+B,EACpC,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}

package/lib/components/HelpBubble/index.js

@@ -1,3 +1,3 @@
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble.js';
 import * as HelpBubble_namespace from './HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };

package/lib/components/ScrollFog/ScrollFog.cjs

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const scrollFog = require('@seed-design/css/recipes/scroll-fog');
+const reactScrollable = require('@seed-design/react-scrollable');
+const clsx = require('clsx');
+const React = require('react');
+const component = require('@seed-design/css/vars/component');
+
+const ScrollFog = React.forwardRef(
+  ({ className, hideScrollBar, size = component.scrollFog.base.enabled.root.size, sizes, style, ...props }, ref) => {
+    const [variantProps, restProps] = scrollFog.scrollFog.splitVariantProps({
+      hideScrollBar,
+      ...props
+    });
+    const scrollFogClassName = scrollFog.scrollFog(variantProps);
+    const sizePx = typeof size === "number" ? `${size}px` : size;
+    const sizeStyle = React.useMemo(() => {
+      const finalSizes = {
+        top: sizes?.top ? `${sizes.top}px` : sizePx,
+        bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
+        left: sizes?.left ? `${sizes.left}px` : sizePx,
+        right: sizes?.right ? `${sizes.right}px` : sizePx
+      };
+      return {
+        "--scroll-fog-size-top": finalSizes.top,
+        "--scroll-fog-size-bottom": finalSizes.bottom,
+        "--scroll-fog-size-left": finalSizes.left,
+        "--scroll-fog-size-right": finalSizes.right
+      };
+    }, [sizePx, sizes]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactScrollable.Scrollable,
+      {
+        ref,
+        className: clsx(scrollFogClassName, className),
+        ...restProps,
+        style: {
+          ...style,
+          ...sizeStyle
+        }
+      }
+    );
+  }
+);
+ScrollFog.displayName = "ScrollFog";
+
+exports.ScrollFog = ScrollFog;

package/lib/components/ScrollFog/ScrollFog.d.ts

@@ -0,0 +1,23 @@
+import { ScrollFogVariantProps } from '@seed-design/css/recipes/scroll-fog';
+import { ScrollableProps } from '@seed-design/react-scrollable';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+type SizesConfig = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+export interface ScrollFogProps extends ScrollFogVariantProps, ScrollableProps {
+    /**
+     * Size of the fog effect in pixels
+     * @default 20
+     */
+    size?: number;
+    /**
+     * Size of the fog effect for each direction in pixels
+     */
+    sizes?: SizesConfig;
+}
+export declare const ScrollFog: ForwardRefExoticComponent<ScrollFogProps & RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=ScrollFog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollFog.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/ScrollFog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAKjF,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,qBAAqB,EAAE,eAAe;IAC5E;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2GAwCrB,CAAC"}

package/lib/components/ScrollFog/ScrollFog.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { scrollFog } from '@seed-design/css/recipes/scroll-fog';
+import { Scrollable } from '@seed-design/react-scrollable';
+import clsx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { scrollFog as scrollFog$1 } from '@seed-design/css/vars/component';
+
+const ScrollFog = forwardRef(
+  ({ className, hideScrollBar, size = scrollFog$1.base.enabled.root.size, sizes, style, ...props }, ref) => {
+    const [variantProps, restProps] = scrollFog.splitVariantProps({
+      hideScrollBar,
+      ...props
+    });
+    const scrollFogClassName = scrollFog(variantProps);
+    const sizePx = typeof size === "number" ? `${size}px` : size;
+    const sizeStyle = useMemo(() => {
+      const finalSizes = {
+        top: sizes?.top ? `${sizes.top}px` : sizePx,
+        bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
+        left: sizes?.left ? `${sizes.left}px` : sizePx,
+        right: sizes?.right ? `${sizes.right}px` : sizePx
+      };
+      return {
+        "--scroll-fog-size-top": finalSizes.top,
+        "--scroll-fog-size-bottom": finalSizes.bottom,
+        "--scroll-fog-size-left": finalSizes.left,
+        "--scroll-fog-size-right": finalSizes.right
+      };
+    }, [sizePx, sizes]);
+    return /* @__PURE__ */ jsx(
+      Scrollable,
+      {
+        ref,
+        className: clsx(scrollFogClassName, className),
+        ...restProps,
+        style: {
+          ...style,
+          ...sizeStyle
+        }
+      }
+    );
+  }
+);
+ScrollFog.displayName = "ScrollFog";
+
+export { ScrollFog };

package/lib/components/ScrollFog/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ScrollFog = require('./ScrollFog.cjs');
+
+
+
+exports.ScrollFog = ScrollFog.ScrollFog;

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

@@ -0,0 +1,2 @@
+export { ScrollFog, type ScrollFogProps } from './ScrollFog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/ScrollFog/index.js

@@ -0,0 +1 @@
+export { ScrollFog } from './ScrollFog.js';

package/lib/components/index.cjs

@@ -73,6 +73,7 @@ const RadioGroup = require('./RadioGroup/RadioGroup.cjs');
 const RadioGroup_namespace = require('./RadioGroup/RadioGroup.namespace.cjs');
 const ReactionButton = require('./ReactionButton/ReactionButton.cjs');
 const ResponsivePair = require('./ResponsivePair/ResponsivePair.cjs');
+const ScrollFog = require('./ScrollFog/ScrollFog.cjs');
 const SegmentedControl = require('./SegmentedControl/SegmentedControl.cjs');
 const SegmentedControl_namespace = require('./SegmentedControl/SegmentedControl.namespace.cjs');
 const CheckSelectBox = require('./SelectBox/CheckSelectBox.cjs');
@@ -240,6 +241,7 @@ exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;
 exports.HelpBubblePositioner = HelpBubble.HelpBubblePositioner;
+exports.HelpBubblePositionerPortal = HelpBubble.HelpBubblePositionerPortal;
 exports.HelpBubbleRoot = HelpBubble.HelpBubbleRoot;
 exports.HelpBubbleTitle = HelpBubble.HelpBubbleTitle;
 exports.HelpBubbleTrigger = HelpBubble.HelpBubbleTrigger;
@@ -320,6 +322,7 @@ exports.RadioGroupRoot = RadioGroup.RadioGroupRoot;
 exports.RadioGroup = RadioGroup_namespace;
 exports.ReactionButton = ReactionButton.ReactionButton;
 exports.ResponsivePair = ResponsivePair.ResponsivePair;
+exports.ScrollFog = ScrollFog.ScrollFog;
 exports.SegmentedControlIndicator = SegmentedControl.SegmentedControlIndicator;
 exports.SegmentedControlItem = SegmentedControl.SegmentedControlItem;
 exports.SegmentedControlItemHiddenInput = SegmentedControl.SegmentedControlItemHiddenInput;

package/lib/components/index.d.ts

@@ -45,6 +45,7 @@ export * from './PullToRefresh';
 export * from './RadioGroup';
 export * from './ReactionButton';
 export * from './ResponsivePair';
+export * from './ScrollFog';
 export * from './SegmentedControl';
 export * from './SelectBox';
 export * from './Skeleton';

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,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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,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,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,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,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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,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,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

@@ -50,7 +50,7 @@ export { Float } from './Float/Float.js';
 export { FloatingActionButtonIcon, FloatingActionButtonLabel, FloatingActionButtonRoot } from './FloatingActionButton/FloatingActionButton.js';
 import * as FloatingActionButton_namespace from './FloatingActionButton/FloatingActionButton.namespace.js';
 export { FloatingActionButton_namespace as FloatingActionButton };
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble/HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
 export { Icon, PrefixIcon, SuffixIcon } from './Icon/Icon.js';
@@ -90,6 +90,7 @@ import * as RadioGroup_namespace from './RadioGroup/RadioGroup.namespace.js';
 export { RadioGroup_namespace as RadioGroup };
 export { ReactionButton } from './ReactionButton/ReactionButton.js';
 export { ResponsivePair } from './ResponsivePair/ResponsivePair.js';
+export { ScrollFog } from './ScrollFog/ScrollFog.js';
 export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlItemHiddenInput, SegmentedControlRoot } from './SegmentedControl/SegmentedControl.js';
 import * as SegmentedControl_namespace from './SegmentedControl/SegmentedControl.namespace.js';
 export { SegmentedControl_namespace as SegmentedControl };

package/lib/index.cjs

@@ -73,6 +73,7 @@ const RadioGroup = require('./components/RadioGroup/RadioGroup.cjs');
 const RadioGroup_namespace = require('./components/RadioGroup/RadioGroup.namespace.cjs');
 const ReactionButton = require('./components/ReactionButton/ReactionButton.cjs');
 const ResponsivePair = require('./components/ResponsivePair/ResponsivePair.cjs');
+const ScrollFog = require('./components/ScrollFog/ScrollFog.cjs');
 const SegmentedControl = require('./components/SegmentedControl/SegmentedControl.cjs');
 const SegmentedControl_namespace = require('./components/SegmentedControl/SegmentedControl.namespace.cjs');
 const CheckSelectBox = require('./components/SelectBox/CheckSelectBox.cjs');
@@ -240,6 +241,7 @@ exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;
 exports.HelpBubblePositioner = HelpBubble.HelpBubblePositioner;
+exports.HelpBubblePositionerPortal = HelpBubble.HelpBubblePositionerPortal;
 exports.HelpBubbleRoot = HelpBubble.HelpBubbleRoot;
 exports.HelpBubbleTitle = HelpBubble.HelpBubbleTitle;
 exports.HelpBubbleTrigger = HelpBubble.HelpBubbleTrigger;
@@ -320,6 +322,7 @@ exports.RadioGroupRoot = RadioGroup.RadioGroupRoot;
 exports.RadioGroup = RadioGroup_namespace;
 exports.ReactionButton = ReactionButton.ReactionButton;
 exports.ResponsivePair = ResponsivePair.ResponsivePair;
+exports.ScrollFog = ScrollFog.ScrollFog;
 exports.SegmentedControlIndicator = SegmentedControl.SegmentedControlIndicator;
 exports.SegmentedControlItem = SegmentedControl.SegmentedControlItem;
 exports.SegmentedControlItemHiddenInput = SegmentedControl.SegmentedControlItemHiddenInput;

package/lib/index.js

@@ -50,7 +50,7 @@ export { Float } from './components/Float/Float.js';
 export { FloatingActionButtonIcon, FloatingActionButtonLabel, FloatingActionButtonRoot } from './components/FloatingActionButton/FloatingActionButton.js';
 import * as FloatingActionButton_namespace from './components/FloatingActionButton/FloatingActionButton.namespace.js';
 export { FloatingActionButton_namespace as FloatingActionButton };
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './components/HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
 export { Icon, PrefixIcon, SuffixIcon } from './components/Icon/Icon.js';
@@ -90,6 +90,7 @@ import * as RadioGroup_namespace from './components/RadioGroup/RadioGroup.namesp
 export { RadioGroup_namespace as RadioGroup };
 export { ReactionButton } from './components/ReactionButton/ReactionButton.js';
 export { ResponsivePair } from './components/ResponsivePair/ResponsivePair.js';
+export { ScrollFog } from './components/ScrollFog/ScrollFog.js';
 export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlItemHiddenInput, SegmentedControlRoot } from './components/SegmentedControl/SegmentedControl.js';
 import * as SegmentedControl_namespace from './components/SegmentedControl/SegmentedControl.namespace.js';
 export { SegmentedControl_namespace as SegmentedControl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-controllable-state": "1.2.2",
     "@radix-ui/react-use-layout-effect": "^1.1.1",
@@ -43,15 +44,16 @@
     "@seed-design/react-avatar": "1.0.0",
     "@seed-design/react-checkbox": "1.0.0",
     "@seed-design/react-dialog": "1.0.0",
-    "@seed-design/react-drawer": "1.0.1",
+    "@seed-design/react-drawer": "1.0.2",
     "@seed-design/react-field": "1.0.0",
     "@seed-design/react-field-button": "1.0.0",
-    "@seed-design/react-popover": "1.0.2",
+    "@seed-design/react-popover": "1.0.3",
     "@seed-design/react-portal": "1.0.0",
     "@seed-design/react-primitive": "1.0.0",
     "@seed-design/react-progress": "1.0.0",
     "@seed-design/react-pull-to-refresh": "1.0.1",
     "@seed-design/react-radio-group": "1.0.0",
+    "@seed-design/react-scrollable": "1.0.0",
     "@seed-design/react-segmented-control": "1.0.0",
     "@seed-design/react-slider": "1.0.0",
     "@seed-design/react-snackbar": "1.0.0",

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

@@ -6,6 +6,7 @@ export {
   HelpBubbleContent as Content,
   HelpBubbleDescription as Description,
   HelpBubblePositioner as Positioner,
+  HelpBubblePositionerPortal as PositionerPortal,
   HelpBubbleRoot as Root,
   HelpBubbleTitle as Title,
   HelpBubbleTrigger as Trigger,
@@ -15,6 +16,7 @@ export {
   type HelpBubbleContentProps as ContentProps,
   type HelpBubbleDescriptionProps as DescriptionProps,
   type HelpBubblePositionerProps as PositionerProps,
+  type HelpBubblePositionerPortalProps as PositionerPortalProps,
   type HelpBubbleRootProps as RootProps,
   type HelpBubbleTitleProps as TitleProps,
   type HelpBubbleTriggerProps as TriggerProps,

package/src/components/HelpBubble/HelpBubble.tsx

@@ -62,6 +62,13 @@ export const HelpBubblePositioner = withContext<HTMLDivElement, HelpBubblePositi
   "positioner",
 );
 
+export interface HelpBubblePositionerPortalProps extends PopoverPrimitive.PositionerPortalProps {}
+
+export const HelpBubblePositionerPortal = withContext<
+  HTMLDivElement,
+  HelpBubblePositionerPortalProps
+>(PopoverPrimitive.PositionerPortal, "positioner");
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface HelpBubbleContentProps
@@ -127,6 +134,7 @@ export const HelpBubbleArrowTip = forwardRef<SVGSVGElement, HelpBubbleArrowTipPr
     );
   },
 );
+HelpBubbleArrowTip.displayName = "HelpBubbleArrowTip";
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/HelpBubble/index.ts

@@ -6,6 +6,7 @@ export {
   HelpBubbleContent,
   HelpBubbleDescription,
   HelpBubblePositioner,
+  HelpBubblePositionerPortal,
   HelpBubbleRoot,
   HelpBubbleTitle,
   HelpBubbleTrigger,
@@ -16,6 +17,7 @@ export {
   type HelpBubbleContentProps,
   type HelpBubbleDescriptionProps,
   type HelpBubblePositionerProps,
+  type HelpBubblePositionerPortalProps,
   type HelpBubbleRootProps,
   type HelpBubbleTitleProps,
   type HelpBubbleTriggerProps,

package/src/components/ScrollFog/ScrollFog.tsx

@@ -0,0 +1,67 @@
+import { scrollFog, type ScrollFogVariantProps } from "@seed-design/css/recipes/scroll-fog";
+import { Scrollable, type ScrollableProps } from "@seed-design/react-scrollable";
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+import { scrollFog as vars } from "@seed-design/css/vars/component";
+
+type SizesConfig = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
+export interface ScrollFogProps extends ScrollFogVariantProps, ScrollableProps {
+  /**
+   * Size of the fog effect in pixels
+   * @default 20
+   */
+  size?: number;
+  /**
+   * Size of the fog effect for each direction in pixels
+   */
+  sizes?: SizesConfig;
+}
+
+export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
+  (
+    { className, hideScrollBar, size = vars.base.enabled.root.size, sizes, style, ...props },
+    ref,
+  ) => {
+    const [variantProps, restProps] = scrollFog.splitVariantProps({
+      hideScrollBar,
+      ...props,
+    });
+    const scrollFogClassName = scrollFog(variantProps);
+    const sizePx = typeof size === "number" ? `${size}px` : size;
+
+    const sizeStyle = useMemo(() => {
+      const finalSizes = {
+        top: sizes?.top ? `${sizes.top}px` : sizePx,
+        bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
+        left: sizes?.left ? `${sizes.left}px` : sizePx,
+        right: sizes?.right ? `${sizes.right}px` : sizePx,
+      };
+
+      return {
+        "--scroll-fog-size-top": finalSizes.top,
+        "--scroll-fog-size-bottom": finalSizes.bottom,
+        "--scroll-fog-size-left": finalSizes.left,
+        "--scroll-fog-size-right": finalSizes.right,
+      };
+    }, [sizePx, sizes]);
+
+    return (
+      <Scrollable
+        ref={ref}
+        className={clsx(scrollFogClassName, className)}
+        {...restProps}
+        style={{
+          ...style,
+          ...sizeStyle,
+        }}
+      />
+    );
+  },
+);
+ScrollFog.displayName = "ScrollFog";

package/src/components/ScrollFog/index.ts

@@ -0,0 +1 @@
+export { ScrollFog, type ScrollFogProps } from "./ScrollFog";

package/src/components/index.ts

@@ -45,6 +45,7 @@ export * from "./PullToRefresh";
 export * from "./RadioGroup";
 export * from "./ReactionButton";
 export * from "./ResponsivePair";
+export * from "./ScrollFog";
 export * from "./SegmentedControl";
 export * from "./SelectBox";
 export * from "./Skeleton";