@seed-design/react 1.1.5 → 1.1.7

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.5",
+  "version": "1.1.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -53,9 +53,8 @@
     "@seed-design/react-progress": "1.0.0",
     "@seed-design/react-pull-to-refresh": "1.0.1",
     "@seed-design/react-radio-group": "1.0.1",
-    "@seed-design/react-scrollable": "1.0.0",
     "@seed-design/react-segmented-control": "1.0.1",
-    "@seed-design/react-slider": "1.0.0",
+    "@seed-design/react-slider": "1.0.1",
     "@seed-design/react-snackbar": "1.0.0",
     "@seed-design/react-switch": "1.0.1",
     "@seed-design/react-tabs": "1.0.1",

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,