@seed-design/react 1.1.4 → 1.1.7

package/lib/components/BottomSheet/BottomSheet.cjs

@@ -7,6 +7,7 @@ const bottomSheet = require('@seed-design/css/recipes/bottom-sheet');
 const reactDrawer = require('@seed-design/react-drawer');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const styled = require('../../utils/styled.cjs');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(bottomSheet.bottomSheet);
 const BottomSheetRoot = withRootProvider(reactDrawer.Drawer.Root, {
@@ -37,7 +38,7 @@ const BottomSheetTitle = withContext(
 );
 const BottomSheetDescription = withContext(reactDrawer.Drawer.Description, "description");
 const BottomSheetBody = withContext(
-  reactPrimitive.Primitive.div,
+  styled.withStyleProps(reactPrimitive.Primitive.div),
   "body"
 );
 const BottomSheetFooter = withContext(

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrD,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,MAAM,CAAC,SAAS;CAAG;AAE1F,eAAO,MAAM,eAAe,iEAI1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,mJAAiB,CAAC;AAIjD,MAAM,WAAW,0BAA2B,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE7E,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEnE,eAAO,MAAM,gBAAgB,sHAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,8HAGC,CAAC;AAIrC,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,IAAI,CACF,UAAU,EACV,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CACpF,EACD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,2HAGlC,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrE,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,MAAM,CAAC,SAAS;CAAG;AAE1F,eAAO,MAAM,eAAe,iEAI1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,mJAAiB,CAAC;AAIjD,MAAM,WAAW,0BAA2B,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE7E,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEzE,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAEvE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEnE,eAAO,MAAM,gBAAgB,sHAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,8HAGC,CAAC;AAIrC,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,IAAI,CACF,UAAU,EACV,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CACpF,EACD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE/E,eAAO,MAAM,sBAAsB,2HAGlC,CAAC"}

package/lib/components/BottomSheet/BottomSheet.js

@@ -3,6 +3,7 @@ import { bottomSheet } from '@seed-design/css/recipes/bottom-sheet';
 import { Drawer } from '@seed-design/react-drawer';
 import { Primitive } from '@seed-design/react-primitive';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { withStyleProps } from '../../utils/styled.js';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
 const BottomSheetRoot = withRootProvider(Drawer.Root, {
@@ -33,7 +34,7 @@ const BottomSheetTitle = withContext(
 );
 const BottomSheetDescription = withContext(Drawer.Description, "description");
 const BottomSheetBody = withContext(
-  Primitive.div,
+  withStyleProps(Primitive.div),
   "body"
 );
 const BottomSheetFooter = withContext(

package/lib/components/ScrollFog/ScrollFog.cjs

@@ -5,13 +5,20 @@ 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) => {
+  ({
+    className,
+    hideScrollBar,
+    placement = ["top", "bottom"],
+    size = component.scrollFog.base.enabled.root.size,
+    sizes,
+    style,
+    ...props
+  }, ref) => {
     const [variantProps, restProps] = scrollFog.scrollFog.splitVariantProps({
       hideScrollBar,
       ...props
@@ -29,19 +36,24 @@ const ScrollFog = React.forwardRef(
         "--scroll-fog-size-top": finalSizes.top,
         "--scroll-fog-size-bottom": finalSizes.bottom,
         "--scroll-fog-size-left": finalSizes.left,
-        "--scroll-fog-size-right": finalSizes.right
+        "--scroll-fog-size-right": finalSizes.right,
+        // placement에 포함된 방향만 1, 나머지는 0
+        "--scrollable-top": placement.includes("top") ? "1" : "0",
+        "--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
+        "--scrollable-left": placement.includes("left") ? "1" : "0",
+        "--scrollable-right": placement.includes("right") ? "1" : "0"
       };
-    }, [sizePx, sizes]);
+    }, [sizePx, sizes, placement]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactScrollable.Scrollable,
+      "div",
       {
         ref,
         className: clsx(scrollFogClassName, className),
-        ...restProps,
         style: {
           ...style,
           ...sizeStyle
-        }
+        },
+        ...restProps
       }
     );
   }

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

@@ -1,13 +1,18 @@
 import { ScrollFogVariantProps } from '@seed-design/css/recipes/scroll-fog';
-import { ScrollableProps } from '@seed-design/react-scrollable';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
+type ScrollPlacement = "top" | "bottom" | "left" | "right";
 type SizesConfig = {
     top?: number;
     bottom?: number;
     left?: number;
     right?: number;
 };
-export interface ScrollFogProps extends ScrollFogVariantProps, ScrollableProps {
+export interface ScrollFogProps extends ScrollFogVariantProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Placement of fog effect
+     * @default ["top", "bottom"]
+     */
+    placement?: ScrollPlacement[];
     /**
      * Size of the fog effect in pixels
      * @default 20

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

@@ -1 +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"}
+{"version":3,"file":"ScrollFog.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/ScrollFog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAK5F,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,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,cACf,SAAQ,qBAAqB,EAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAE9B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2GAqDrB,CAAC"}

package/lib/components/ScrollFog/ScrollFog.js

@@ -1,13 +1,20 @@
 '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) => {
+  ({
+    className,
+    hideScrollBar,
+    placement = ["top", "bottom"],
+    size = scrollFog$1.base.enabled.root.size,
+    sizes,
+    style,
+    ...props
+  }, ref) => {
     const [variantProps, restProps] = scrollFog.splitVariantProps({
       hideScrollBar,
       ...props
@@ -25,19 +32,24 @@ const ScrollFog = forwardRef(
         "--scroll-fog-size-top": finalSizes.top,
         "--scroll-fog-size-bottom": finalSizes.bottom,
         "--scroll-fog-size-left": finalSizes.left,
-        "--scroll-fog-size-right": finalSizes.right
+        "--scroll-fog-size-right": finalSizes.right,
+        // placement에 포함된 방향만 1, 나머지는 0
+        "--scrollable-top": placement.includes("top") ? "1" : "0",
+        "--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
+        "--scrollable-left": placement.includes("left") ? "1" : "0",
+        "--scrollable-right": placement.includes("right") ? "1" : "0"
       };
-    }, [sizePx, sizes]);
+    }, [sizePx, sizes, placement]);
     return /* @__PURE__ */ jsx(
-      Scrollable,
+      "div",
       {
         ref,
         className: clsx(scrollFogClassName, className),
-        ...restProps,
         style: {
           ...style,
           ...sizeStyle
-        }
+        },
+        ...restProps
       }
     );
   }

package/lib/components/Slider/Slider.cjs

@@ -69,7 +69,7 @@ const SliderValueIndicatorRoot = withContext(
   reactSlider.Slider.ValueIndicatorRoot,
   "valueIndicatorRoot"
 );
-const SliderValueIndicatorLabel = reactSlider.Slider.ValueIndicatorLabel;
+const SliderValueIndicatorLabel = withStateProps(reactSlider.Slider.ValueIndicatorLabel);
 const SliderValueIndicatorArrow = withContext(withStateProps(reactPrimitive.Primitive.div), "valueIndicatorArrow");
 const SliderValueIndicatorArrowTip = React.forwardRef(({ tipRadius = 2, className, ...otherProps }, ref) => {
   const [valueIndicatorArrowTip, setValueIndicatorArrowTip] = React.useState(null);

package/lib/components/Slider/Slider.d.ts

@@ -36,7 +36,7 @@ export interface SliderValueIndicatorRootProps extends Slider.ValueIndicatorRoot
 export declare const SliderValueIndicatorRoot: ForwardRefExoticComponent<SliderValueIndicatorRootProps & RefAttributes<HTMLDivElement>>;
 export interface SliderValueIndicatorLabelProps extends Slider.ValueIndicatorLabelProps {
 }
-export declare const SliderValueIndicatorLabel: ForwardRefExoticComponent<Slider.ValueIndicatorLabelProps & RefAttributes<HTMLSpanElement>>;
+export declare const SliderValueIndicatorLabel: ForwardRefExoticComponent<Omit<Slider.ValueIndicatorLabelProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;
 export interface SliderValueIndicatorArrowProps extends PrimitiveProps, HTMLAttributes<HTMLDivElement> {
 }
 export declare const SliderValueIndicatorArrow: ForwardRefExoticComponent<SliderValueIndicatorArrowProps & RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAkBlE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,MAAM,CAAC,SAAS;CAAG;AAEhF,eAAO,MAAM,UAAU,4GAAqE,CAAC;AAE7F,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE7F,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3F,eAAO,MAAM,WAAW,6GAGvB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAE9D,eAAO,MAAM,WAAW,6GAGvB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAE9D,eAAO,MAAM,WAAW,8GAgBvB,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE1E,eAAO,MAAM,iBAAiB,sHAAqB,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,MAAM,CAAC,SAAS;CAAG;AAEpF,eAAO,MAAM,UAAU,4GAAgE,CAAC;AAExF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE7F,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,EAAE,MAAM,CAAC,WAAW;CAAG;AAE1F,eAAO,MAAM,YAAY,8GAExB,CAAC;AAEF,MAAM,WAAW,6BAA8B,SAAQ,MAAM,CAAC,uBAAuB;CAAG;AAExF,eAAO,MAAM,wBAAwB,0HAGpC,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,MAAM,CAAC,wBAAwB;CAAG;AAE1F,eAAO,MAAM,yBAAyB,6HAA6B,CAAC;AAEpE,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,cAAc,CAAC,cAAc,CAAC;CAAG;AAErC,eAAO,MAAM,yBAAyB,2HAGiB,CAAC;AAExD,MAAM,WAAW,iCAAkC,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACtF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,4BAA4B,0IA4BvC,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAkBlE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,MAAM,CAAC,SAAS;CAAG;AAEhF,eAAO,MAAM,UAAU,4GAAqE,CAAC;AAE7F,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE7F,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3F,eAAO,MAAM,WAAW,6GAGvB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAE9D,eAAO,MAAM,WAAW,6GAGvB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAE9D,eAAO,MAAM,WAAW,8GAgBvB,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE1E,eAAO,MAAM,iBAAiB,sHAAqB,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,MAAM,CAAC,SAAS;CAAG;AAEpF,eAAO,MAAM,UAAU,4GAAgE,CAAC;AAExF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE7F,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,EAAE,MAAM,CAAC,WAAW;CAAG;AAE1F,eAAO,MAAM,YAAY,8GAExB,CAAC;AAEF,MAAM,WAAW,6BAA8B,SAAQ,MAAM,CAAC,uBAAuB;CAAG;AAExF,eAAO,MAAM,wBAAwB,0HAGpC,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,MAAM,CAAC,wBAAwB;CAAG;AAE1F,eAAO,MAAM,yBAAyB,2LAA6C,CAAC;AAEpF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,cAAc,CAAC,cAAc,CAAC;CAAG;AAErC,eAAO,MAAM,yBAAyB,2HAGiB,CAAC;AAExD,MAAM,WAAW,iCAAkC,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACtF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,4BAA4B,0IA4BvC,CAAC"}

package/lib/components/Slider/Slider.js

@@ -65,7 +65,7 @@ const SliderValueIndicatorRoot = withContext(
   Slider.ValueIndicatorRoot,
   "valueIndicatorRoot"
 );
-const SliderValueIndicatorLabel = Slider.ValueIndicatorLabel;
+const SliderValueIndicatorLabel = withStateProps(Slider.ValueIndicatorLabel);
 const SliderValueIndicatorArrow = withContext(withStateProps(Primitive.div), "valueIndicatorArrow");
 const SliderValueIndicatorArrowTip = forwardRef(({ tipRadius = 2, className, ...otherProps }, ref) => {
   const [valueIndicatorArrowTip, setValueIndicatorArrowTip] = useState(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.1.4",
+  "version": "1.1.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -42,24 +42,23 @@
     "@radix-ui/react-use-layout-effect": "^1.1.1",
     "@seed-design/dom-utils": "1.0.0",
     "@seed-design/react-avatar": "1.0.0",
-    "@seed-design/react-checkbox": "1.0.0",
+    "@seed-design/react-checkbox": "1.0.1",
     "@seed-design/react-dialog": "1.0.0",
-    "@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-drawer": "1.0.3",
+    "@seed-design/react-field": "1.0.1",
+    "@seed-design/react-field-button": "1.0.1",
     "@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-radio-group": "1.0.1",
+    "@seed-design/react-segmented-control": "1.0.1",
+    "@seed-design/react-slider": "1.0.1",
     "@seed-design/react-snackbar": "1.0.0",
-    "@seed-design/react-switch": "1.0.0",
-    "@seed-design/react-tabs": "1.0.0",
-    "@seed-design/react-text-field": "1.1.0",
+    "@seed-design/react-switch": "1.0.1",
+    "@seed-design/react-tabs": "1.0.1",
+    "@seed-design/react-text-field": "1.1.1",
     "@seed-design/react-toggle": "1.0.0",
     "clsx": "^2.1.1",
     "unicode-segmenter": "^0.14.0"
@@ -74,7 +73,7 @@
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "csstype": "^3.1.3",
-    "globby": "^15.0.0",
+    "globby": "^16.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "vite": "^7.0.0",

package/src/components/BottomSheet/BottomSheet.tsx

@@ -2,7 +2,7 @@ import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/reci
 import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import type { StyleProps } from "../../utils/styled";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
 
@@ -89,7 +89,7 @@ export interface BottomSheetBodyProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const BottomSheetBody = withContext<HTMLDivElement, BottomSheetBodyProps>(
-  Primitive.div,
+  withStyleProps(Primitive.div),
   "body",
 );
 

package/src/components/ScrollFog/ScrollFog.tsx

@@ -1,9 +1,10 @@
 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 ScrollPlacement = "top" | "bottom" | "left" | "right";
+
 type SizesConfig = {
   top?: number;
   bottom?: number;
@@ -11,12 +12,21 @@ type SizesConfig = {
   right?: number;
 };
 
-export interface ScrollFogProps extends ScrollFogVariantProps, ScrollableProps {
+export interface ScrollFogProps
+  extends ScrollFogVariantProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Placement of fog effect
+   * @default ["top", "bottom"]
+   */
+  placement?: ScrollPlacement[];
+
   /**
    * Size of the fog effect in pixels
    * @default 20
    */
   size?: number;
+
   /**
    * Size of the fog effect for each direction in pixels
    */
@@ -25,7 +35,15 @@ export interface ScrollFogProps extends ScrollFogVariantProps, ScrollableProps {
 
 export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
   (
-    { className, hideScrollBar, size = vars.base.enabled.root.size, sizes, style, ...props },
+    {
+      className,
+      hideScrollBar,
+      placement = ["top", "bottom"],
+      size = vars.base.enabled.root.size,
+      sizes,
+      style,
+      ...props
+    },
     ref,
   ) => {
     const [variantProps, restProps] = scrollFog.splitVariantProps({
@@ -48,18 +66,23 @@ export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
         "--scroll-fog-size-bottom": finalSizes.bottom,
         "--scroll-fog-size-left": finalSizes.left,
         "--scroll-fog-size-right": finalSizes.right,
-      };
-    }, [sizePx, sizes]);
+        // placement에 포함된 방향만 1, 나머지는 0
+        "--scrollable-top": placement.includes("top") ? "1" : "0",
+        "--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
+        "--scrollable-left": placement.includes("left") ? "1" : "0",
+        "--scrollable-right": placement.includes("right") ? "1" : "0",
+      } as React.CSSProperties;
+    }, [sizePx, sizes, placement]);
 
     return (
-      <Scrollable
+      <div
         ref={ref}
         className={clsx(scrollFogClassName, className)}
-        {...restProps}
         style={{
           ...style,
           ...sizeStyle,
         }}
+        {...restProps}
       />
     );
   },

package/src/components/Slider/Slider.tsx

@@ -103,7 +103,7 @@ export const SliderValueIndicatorRoot = withContext<HTMLDivElement, SliderValueI
 
 export interface SliderValueIndicatorLabelProps extends Slider.ValueIndicatorLabelProps {}
 
-export const SliderValueIndicatorLabel = Slider.ValueIndicatorLabel;
+export const SliderValueIndicatorLabel = withStateProps(Slider.ValueIndicatorLabel);
 
 export interface SliderValueIndicatorArrowProps
   extends PrimitiveProps,

package/src/components/TextField/TextField.test.tsx

@@ -26,6 +26,11 @@ function setUp(jsx: ReactElement) {
 }
 
 describe("TextField", () => {
+  global.CSS = {
+    // @ts-expect-error
+    supports: (_k, _v) => true,
+  };
+
   describe("props merging", () => {
     describe("TextFieldInput", () => {
       it("should merge props from TextFieldRoot", () => {

package/src/components/TextField/useTextFieldWithGraphemes.test.tsx

@@ -55,6 +55,11 @@ const TextFieldWithGraphemes = (props: TextFieldWithGraphemesProps) => {
 };
 
 describe("useTextFieldWithGraphemes", () => {
+  global.CSS = {
+    // @ts-expect-error
+    supports: (_k, _v) => true,
+  };
+
   describe("basic functionality", () => {
     it("should render with empty default value", () => {
       const { getByTestId } = setUp(<TextFieldWithGraphemes />);