@liner-fe/design-library 1.2.8 → 1.2.10

package/lib/index.d.ts

@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps, TextButtonProps } from '@liner-fe/prism';
 import { ClassValue } from 'clsx';
 import { ReactNode } from 'react';
-import { Popover } from 'radix-ui';
 
 declare const TemplateDialog: {
     ({ open, preventEscape, onOpenChange, children, }: {
@@ -59,27 +58,4 @@ declare const TemplateIllustDialog: {
     TextButton({ children, className, ...props }: TextButtonProps): react_jsx_runtime.JSX.Element;
 };
 
-interface ContentProps extends Omit<Popover.PopoverContentProps, 'side' | 'className'> {
-    title: string;
-    description: string;
-    leftSlot?: ReactNode;
-    footer?: {
-        currentStep: number;
-        totalStep: number;
-        buttonText: string;
-        onButtonClick: () => void;
-    };
-}
-declare const TemplateTutorialGuide: ({ position, isOpen, children, onClose, className, content, }: {
-    position: "top" | "right" | "bottom" | "left";
-    isOpen: boolean;
-    children: ReactNode;
-    onClose: () => void;
-    className?: {
-        trigger?: ClassValue;
-        content?: ClassValue;
-    };
-    content: ContentProps;
-}) => react_jsx_runtime.JSX.Element;
-
-export { TemplateDialog, TemplateIllustDialog, TemplateTutorialGuide };
+export { TemplateDialog, TemplateIllustDialog };

package/lib/index.js

@@ -1,6 +1,6 @@
 import { IconClose } from '@liner-fe/icon';
-import { IconButton, Title, Paragraph, Button, TextButton, Caption } from '@liner-fe/prism';
-import { Dialog, Popover } from 'radix-ui';
+import { IconButton, Title, Paragraph, Button, TextButton } from '@liner-fe/prism';
+import { Dialog } from 'radix-ui';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -58,7 +58,7 @@ TemplateDialog.Close = ({ onClose }) => /* @__PURE__ */ jsx(
 TemplateDialog.Title = ({
   children,
   className
-}) => /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx(Title, { type: "accent", weight: "bold", size: 4, className: tw(className), children }) });
+}) => /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx(Title, { type: "accent", weight: "bold", size: 4, className: tw("max-s:text-center", className), children }) });
 TemplateDialog.Description = ({
   children,
   className
@@ -68,7 +68,7 @@ TemplateDialog.Description = ({
     type: "normal",
     weight: "regular",
     size: 4,
-    className: tw("mt-component-200 text-neutral-label-primary/90!", className),
+    className: tw("mt-component-200 text-neutral-label-primary/90! max-s:text-center", className),
     children
   }
 ) });
@@ -181,90 +181,5 @@ TemplateIllustDialog.Buttons = ({
 );
 TemplateIllustDialog.Button = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Button, { ...props, className: tw("w-full!", className), children });
 TemplateIllustDialog.TextButton = ({ children, className, ...props }) => /* @__PURE__ */ jsx(TextButton, { ...props, className: tw(className), children });
-var TemplateTutorialGuide = ({
-  position,
-  isOpen,
-  children,
-  onClose,
-  className,
-  content
-}) => {
-  const { title, description, leftSlot, sideOffset = -5, footer, ...rest } = content;
-  return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { className: tw(className?.trigger), children }),
-    /* @__PURE__ */ jsx(
-      Popover.Content,
-      {
-        side: position,
-        className: tw(className?.content),
-        sideOffset,
-        asChild: true,
-        ...rest,
-        children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: tw(
-                "min-w-[250px] max-w-[350px] bg-neutral-container-lowest gap-positive-150 border-brand-border-opaque-strong py-component-300 px-component-400 relative flex flex-col rounded-xl border shadow-[0_0_4px_0_rgba(12,137,59,0.08),0_0_12px_0_rgba(12,137,59,0.12),0_0_12px_0_rgba(255,255,255,0.50)]",
-                leftSlot && "pl-component-300"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("button", { className: "absolute top-[8px] right-[8px]", onClick: onClose, children: /* @__PURE__ */ jsx(IconClose, { type: "neutral-label-secondary", size: "xs" }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[12px]", children: [
-                  leftSlot,
-                  /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex flex-col", children: [
-                    /* @__PURE__ */ jsx(Caption, { type: "normal", weight: "medium", size: 1, children: title }),
-                    /* @__PURE__ */ jsx(
-                      Caption,
-                      {
-                        type: "normal",
-                        weight: "regular",
-                        size: 2,
-                        className: "whitespace-pre-wrap opacity-70",
-                        children: description
-                      }
-                    )
-                  ] })
-                ] }),
-                footer && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs(
-                    Caption,
-                    {
-                      type: "normal",
-                      weight: "medium",
-                      size: 2,
-                      className: "pl-component-100",
-                      color: "neutral-label-secondary",
-                      children: [
-                        footer.currentStep,
-                        " / ",
-                        footer.totalStep
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Button, { size: "s", level: "quaternary", onClick: footer.onButtonClick, children: footer.buttonText })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Popover.Arrow, { asChild: true, width: 8, height: 35, children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              width: "8",
-              height: "35",
-              viewBox: "0 0 8 35",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              children: [
-                /* @__PURE__ */ jsx("rect", { width: "1", height: "28", transform: "translate(3.5)", fill: "#0C893B" }),
-                /* @__PURE__ */ jsx("circle", { cx: "4", cy: "31", r: "4", fill: "#0C893B" })
-              ]
-            }
-          ) })
-        ] })
-      }
-    )
-  ] });
-};
 
-export { TemplateDialog, TemplateIllustDialog, TemplateTutorialGuide };
+export { TemplateDialog, TemplateIllustDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-library",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "type": "module",
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",
@@ -10,9 +10,9 @@
     "react-dom": "18.2.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
-    "@liner-fe/design-token": "^2.5.35",
-    "@liner-fe/icon": "^0.2.56",
-    "@liner-fe/prism": "^2.11.5"
+    "@liner-fe/design-token": "^2.5.36",
+    "@liner-fe/icon": "^0.2.57",
+    "@liner-fe/prism": "^2.11.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",