@liner-fe/design-library 1.2.11 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.d.ts +10 -12
  2. package/lib/index.js +24 -11
  3. package/package.json +7 -7
package/lib/index.d.ts CHANGED
@@ -67,25 +67,23 @@ interface SideBannerProps {
67
67
  }
68
68
  declare const SideBanner: ({ button, onCloseClick }: SideBannerProps) => react_jsx_runtime.JSX.Element;
69
69
 
70
- interface NewsType {
71
- type: 'news';
72
- tag?: string;
70
+ interface BaseType {
73
71
  onClick: () => void;
74
- onCloseClick: () => void;
72
+ onCloseClick?: () => void;
73
+ mountEffectCallback?: () => void;
75
74
  content: string;
76
75
  }
77
- interface AlertType {
76
+ interface NewsType extends BaseType {
77
+ type: 'news';
78
+ tag?: string;
79
+ }
80
+ interface AlertType extends BaseType {
78
81
  type: 'alert';
79
- onClick: () => void;
80
- onCloseClick: () => void;
81
- content: string;
82
82
  }
83
- interface PromotionType {
83
+ interface PromotionType extends BaseType {
84
84
  type: 'promotion';
85
85
  tag?: string;
86
- onClick: () => void;
87
- onCloseClick: () => void;
88
- content: string;
86
+ tagColor?: string;
89
87
  }
90
88
  type TopBannerType = NewsType | AlertType | PromotionType;
91
89
  declare const TopBanner: ({ type, ...rest }: TopBannerType) => react_jsx_runtime.JSX.Element;
package/lib/index.js CHANGED
@@ -4,6 +4,7 @@ import { Dialog } from 'radix-ui';
4
4
  import clsx from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
7
+ import { useEffect } from 'react';
7
8
 
8
9
  // src/template-dialog/index.tsx
9
10
  var tw = (...args) => twMerge(clsx(args));
@@ -222,7 +223,7 @@ var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
222
223
  return /* @__PURE__ */ jsxs(
223
224
  "div",
224
225
  {
225
- className: "px-positive-400 py-component-200 hover:bg-brand-fill-low-hover bg-brand-fill-low flex h-[44px] w-full items-center justify-between",
226
+ className: "px-positive-400 py-component-200 hover:bg-brand-fill-low-hover bg-brand-fill-low flex h-[44px] w-full items-center justify-between cursor-pointer",
226
227
  onClick,
227
228
  children: [
228
229
  /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
@@ -244,7 +245,7 @@ var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
244
245
  /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "neutral-label-primary", size: "xs" }) }) })
245
246
  ] })
246
247
  ] }) }),
247
- /* @__PURE__ */ jsx(
248
+ onCloseClick && /* @__PURE__ */ jsx(
248
249
  IconButton,
249
250
  {
250
251
  onClick: onCloseClick,
@@ -265,7 +266,7 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
265
266
  "div",
266
267
  {
267
268
  onClick,
268
- className: "py-component-200 pl-gap-positive-600 pr-gap-positive-400 flex h-[44px] w-full items-center justify-between bg-[rgba(254,143,22,0.45)] hover:bg-[rgba(254,143,22,0.48)]",
269
+ className: "py-component-200 pl-gap-positive-600 pr-gap-positive-400 flex h-[44px] w-full items-center justify-between bg-[rgba(254,143,22,0.45)] hover:bg-[rgba(254,143,22,0.48)] cursor-pointer",
269
270
  children: [
270
271
  /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
271
272
  /* @__PURE__ */ jsx("div", { className: "flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsx(IconExclamationmarkFill, { size: "xs", fill: true }) }),
@@ -298,7 +299,7 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
298
299
  ) }) })
299
300
  ] })
300
301
  ] }) }),
301
- /* @__PURE__ */ jsx(
302
+ onCloseClick && /* @__PURE__ */ jsx(
302
303
  IconButton,
303
304
  {
304
305
  icon: {
@@ -314,17 +315,29 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
314
315
  }
315
316
  );
316
317
  };
317
- var PromotionBanner = ({ onClick, onCloseClick, content, tag }) => {
318
+ var PromotionBanner = ({
319
+ onClick,
320
+ onCloseClick,
321
+ content,
322
+ tag,
323
+ tagColor,
324
+ mountEffectCallback
325
+ }) => {
326
+ useEffect(() => {
327
+ if (mountEffectCallback) {
328
+ mountEffectCallback();
329
+ }
330
+ }, []);
318
331
  return /* @__PURE__ */ jsxs(
319
332
  "div",
320
333
  {
321
334
  onClick,
322
- className: "px-positive-400 py-component-200 bg-inverse-container-static-high hover:bg-inverse-container-static-high-hover flex h-[44px] w-full items-center justify-between",
335
+ className: "px-positive-600 m:px-positive-400 py-component-200 bg-inverse-container-static-high hover:bg-inverse-container-static-high-hover flex h-[44px] w-full items-center justify-between cursor-pointer",
323
336
  children: [
324
337
  /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
325
- tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 flex items-center", children: [
326
- /* @__PURE__ */ jsx(Paragraph, { color: "brand-label-primary", size: 4, weight: "medium", type: "normal", children: tag }),
327
- /* @__PURE__ */ jsx("div", { className: "bg-neutral-border-overlay-normal h-[12px] w-px" })
338
+ tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 s:flex items-center hidden", children: [
339
+ /* @__PURE__ */ jsx(Paragraph, { size: 4, weight: "medium", type: "normal", style: { color: tagColor }, children: tag }),
340
+ /* @__PURE__ */ jsx("div", { className: "bg-inverse-label-static-secondary h-[12px] w-px" })
328
341
  ] }),
329
342
  /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
330
343
  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
@@ -337,10 +350,10 @@ var PromotionBanner = ({ onClick, onCloseClick, content, tag }) => {
337
350
  children: content
338
351
  }
339
352
  ) }),
340
- /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "inverse-label-static-primary", size: "xs" }) }) })
353
+ /* @__PURE__ */ jsx("div", { className: "flex-col s:flex items-start justify-center hidden", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "inverse-label-static-primary", size: "xs" }) }) })
341
354
  ] })
342
355
  ] }) }),
343
- /* @__PURE__ */ jsx(
356
+ onCloseClick && /* @__PURE__ */ jsx(
344
357
  IconButton,
345
358
  {
346
359
  onClick: onCloseClick,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liner-fe/design-library",
3
- "version": "1.2.11",
3
+ "version": "1.2.13",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@tailwindcss/vite": "^4.1.14",
@@ -10,9 +10,9 @@
10
10
  "react-dom": "18.2.0",
11
11
  "tailwind-merge": "^3.3.1",
12
12
  "tailwindcss": "^4.1.14",
13
- "@liner-fe/design-token": "^2.5.43",
14
- "@liner-fe/icon": "^0.2.68",
15
- "@liner-fe/prism": "^2.11.15"
13
+ "@liner-fe/design-token": "^2.5.47",
14
+ "@liner-fe/icon": "^0.2.72",
15
+ "@liner-fe/prism": "^2.12.1"
16
16
  },
17
17
  "devDependencies": {
18
18
  "@chromatic-com/storybook": "^4.1.1",
@@ -24,9 +24,9 @@
24
24
  "@storybook/addon-vitest": "^9.1.13",
25
25
  "@storybook/react-vite": "^9.1.13",
26
26
  "@tailwindcss/cli": "^4.1.15",
27
- "@types/node": "^24.6.0",
28
- "@types/react": "^18.2.12",
29
- "@types/react-dom": "^18.2.5",
27
+ "@types/node": "^25.1.0",
28
+ "@types/react": "18.2.23",
29
+ "@types/react-dom": "18.2.23",
30
30
  "@vitejs/plugin-react": "^5.0.4",
31
31
  "@vitest/browser": "^3.2.4",
32
32
  "@vitest/coverage-v8": "^3.2.4",