@liner-fe/prism 2.9.50 → 2.10.0

package/lib/index.css

@@ -931,7 +931,7 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/CheckBox/style.module.scss */
-._checkbox_1dr57_1 {
+._checkbox_1jjvt_1 {
   display: flex;
   width: var(--lp-sys-icon-size-xs);
   height: var(--lp-sys-icon-size-xs);
@@ -940,49 +940,50 @@
   flex-shrink: 0;
   outline: none;
   transform: translateY(10%);
+  background: var(--neutral-fill-overlay-lowest);
   border-radius: 4px;
   border: 1px solid var(--neutral-border-overlay-strong);
   cursor: pointer;
 }
-._checkbox_1dr57_1:hover:not(:disabled) {
-  background: var(--inverse-container-highest);
+._checkbox_1jjvt_1:hover:not(:disabled) {
+  background: var(--neutral-fill-overlay-lowest-hover);
 }
-._checkbox_1dr57_1:disabled {
+._checkbox_1jjvt_1:disabled {
   background: var(--neutral-container-highest);
   cursor: not-allowed;
   border: 1px solid var(--neutral-border-overlay-strong);
 }
-._checkbox_1dr57_1:disabled > span {
+._checkbox_1jjvt_1:disabled > span {
   background: none;
 }
-._checkbox_1dr57_1:disabled > span > svg > path {
+._checkbox_1jjvt_1:disabled > span > svg > path {
   fill: var(--neutral-label-tertiary);
 }
-._checkbox_1dr57_1[aria-checked=true]:not(:disabled) {
+._checkbox_1jjvt_1[aria-checked=true]:not(:disabled) {
   border: none;
 }
-._checkbox_1dr57_1[aria-checked=true]:hover:not(:disabled) > span {
-  background: var(--inverse-container-static-high-hover);
+._checkbox_1jjvt_1[aria-checked=true]:hover:not(:disabled) > span {
+  background: var(--inverse-container-highest);
 }
-._checkbox_1dr57_1 [aria-checked=true]:disabled > span {
+._checkbox_1jjvt_1 [aria-checked=true]:disabled > span {
   background: none;
 }
-._checkbox-indicator_1dr57_38 {
+._checkbox-indicator_1jjvt_39 {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   background: var(--inverse-container-lowest);
 }
-._label-wrapper_1dr57_46 {
+._label-wrapper_1jjvt_47 {
   display: flex;
   flex-direction: column;
   gap: var(--lp-sys-gap-positive-200);
 }
-._description_1dr57_52 {
+._description_1jjvt_53 {
   color: var(--neutral-label-secondary);
 }
-._description_1dr57_52:has([disabled]) {
+._description_1jjvt_53:has([disabled]) {
   color: var(--neutral-label-tertiary);
 }
 

package/lib/index.d.ts

@@ -424,6 +424,7 @@ interface ISnackbarBase extends ToastProps {
     title: string;
     description?: string;
     position?: 'left' | 'right';
+    timer?: number;
 }
 interface ButtonType {
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;

package/lib/index.js

@@ -1645,10 +1645,10 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui";
 
 // src/components/CheckBox/style.module.scss
 var style_module_default9 = {
-  "checkbox": "_checkbox_1dr57_1",
-  "checkbox-indicator": "_checkbox-indicator_1dr57_38",
-  "label-wrapper": "_label-wrapper_1dr57_46",
-  "description": "_description_1dr57_52"
+  "checkbox": "_checkbox_1jjvt_1",
+  "checkbox-indicator": "_checkbox-indicator_1jjvt_39",
+  "label-wrapper": "_label-wrapper_1jjvt_47",
+  "description": "_description_1jjvt_53"
 };
 
 // src/components/CheckBox/index.tsx
@@ -2293,6 +2293,7 @@ import { useRecoilValue as useRecoilValue2, useSetRecoilState as useSetRecoilSta
 
 // src/hooks/useSnackbar.ts
 import { atom as atom2, useSetRecoilState as useSetRecoilState3 } from "recoil";
+import { millisecondsInSecond as millisecondsInSecond3 } from "date-fns/constants";
 var snackbarAtom = atom2({
   key: "snackbarAtom",
   default: []
@@ -2302,7 +2303,8 @@ var useSnackbar = /* @__PURE__ */ __name(() => {
   return {
     open: /* @__PURE__ */ __name((info) => {
       const snackbarId = generateRandomId();
-      setSnackbar((prev) => [...prev, { ...info, snackbarId }]);
+      const timer = info.timer ?? (info.button ? millisecondsInSecond3 * 10 : millisecondsInSecond3 + 800);
+      setSnackbar((prev) => [...prev, { ...info, snackbarId, timer }]);
     }, "open")
   };
 }, "useSnackbar");
@@ -2410,6 +2412,8 @@ var SnackbarButton = /* @__PURE__ */ __name(({
 }, "SnackbarButton");
 
 // src/components/Snackbar/index.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { millisecondsInSecond as millisecondsInSecond4 } from "date-fns/constants";
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 var { Provider: Provider2, Root: Root2, Viewport: Viewport2 } = Toast;
@@ -2436,10 +2440,38 @@ var Snackbar = /* @__PURE__ */ __name(() => {
 }, "Snackbar");
 var SingleSnackbar = /* @__PURE__ */ __name((props) => {
   const setSnackbar = useSetRecoilState4(snackbarAtom);
-  const { snackbarId, description, title } = props;
-  const onCloseSnackbar = /* @__PURE__ */ __name(() => {
+  const timerRef = useRef3();
+  const { snackbarId, description, title, timer } = props;
+  const [isOpen, setIsOpen] = useState5(true);
+  const onCloseSnackbar = useCallback(() => {
     setSnackbar((prev) => prev.filter((snackbar) => snackbar.snackbarId !== snackbarId));
-  }, "onCloseSnackbar");
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, [setSnackbar, snackbarId]);
+  useEffect3(() => {
+    if (timer && timer > 0) {
+      const preCloseTimeout = setTimeout(() => {
+        setIsOpen(false);
+      }, timer);
+      timerRef.current = setTimeout(() => {
+        onCloseSnackbar();
+      }, timer + millisecondsInSecond4);
+      return () => {
+        clearTimeout(preCloseTimeout);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }
+  }, [timer, onCloseSnackbar]);
+  useEffect3(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
   if (props.kind === "navigation") {
     return /* @__PURE__ */ jsxs12(
       Root2,
@@ -2447,7 +2479,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
         onSwipeEnd: onCloseSnackbar,
         className: clsx18(style_module_default15.Root, style_module_default15.NavigationWrapper),
         onClick: props.onClick,
-        open: true,
+        open: isOpen,
         children: [
           /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default15.Content, style_module_default15.MarginRight12), children: [
             /* @__PURE__ */ jsx26(SnackbarTitle, { title }),
@@ -2474,7 +2506,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
       {
         onSwipeEnd: onCloseSnackbar,
         className: clsx18(style_module_default15.Root, style_module_default15.gap300, style_module_default15.extendedContainer),
-        open: true,
+        open: isOpen,
         children: [
           /* @__PURE__ */ jsxs12("div", { className: style_module_default15.Content, children: [
             /* @__PURE__ */ jsx26(SnackbarTitle, { title }),
@@ -2493,7 +2525,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs12(Root2, { onSwipeEnd: onCloseSnackbar, className: clsx18(style_module_default15.Root, style_module_default15.Wrapper), open: true, children: [
+  return /* @__PURE__ */ jsxs12(Root2, { onSwipeEnd: onCloseSnackbar, className: clsx18(style_module_default15.Root, style_module_default15.Wrapper), open: isOpen, children: [
     /* @__PURE__ */ jsxs12("div", { className: style_module_default15.ContentWrapper, children: [
       /* @__PURE__ */ jsx26(SnackbarIcon, { icon: props.icon }),
       /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default15.Content, style_module_default15.MarginRight12), children: [
@@ -2980,7 +3012,7 @@ var PrimitiveCoachMark = Object.assign(PrimitiveCoachMarkRoot, {
 });
 
 // src/components/coach-mark/compact/index.tsx
-import { forwardRef as forwardRef18, useState as useState5 } from "react";
+import { forwardRef as forwardRef18, useState as useState6 } from "react";
 
 // src/components/coach-mark/compact/style.module.scss
 var style_module_default19 = {
@@ -3212,7 +3244,7 @@ var CompactCoachMarkRoot = /* @__PURE__ */ __name((props) => {
 }, "CompactCoachMarkRoot");
 var CompactCoachMarkContent = forwardRef18(
   ({ tag, title, level = "brand", className, side = "top", sideOffset = -15, onClose, ...props }, ref) => {
-    const [isHover, setIsHover] = useState5(false);
+    const [isHover, setIsHover] = useState6(false);
     return /* @__PURE__ */ jsxs15(
       PrimitiveCoachMark.Content,
       {
@@ -3280,7 +3312,7 @@ var style_module_default21 = {
 import {
   forwardRef as forwardRef19,
   isValidElement,
-  useEffect as useEffect3
+  useEffect as useEffect4
 } from "react";
 import { IconClose } from "@liner-fe/icon";
 import { cva as cva12 } from "cva";
@@ -3304,7 +3336,7 @@ var coachMarkLevelButtonLevelMap = {
 };
 var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
   const { children } = props;
-  useEffect3(() => {
+  useEffect4(() => {
     if (isValidElement(children) && "image" in children.props) {
       const imageProps = children.props.image;
       if (imageProps?.src) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.9.50",
+  "version": "2.10.0",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -19,7 +19,7 @@
     "recoil": "^0.5.2",
     "@liner-fe/design-token": "^2.5.35",
     "@liner-fe/design-token-primitive": "^0.2.34",
-    "@liner-fe/icon": "^0.2.42",
+    "@liner-fe/icon": "^0.2.43",
     "@liner-fe/illust": "^0.2.10"
   },
   "devDependencies": {