@liner-fe/design-library 1.2.5 → 1.2.6

package/lib/index.d.ts

@@ -2,6 +2,7 @@ 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, }: {
@@ -58,4 +59,28 @@ declare const TemplateIllustDialog: {
     TextButton({ children, className, ...props }: TextButtonProps): react_jsx_runtime.JSX.Element;
 };
 
-export { TemplateDialog, TemplateIllustDialog };
+interface ContentProps extends Omit<Popover.PopoverContentProps, 'side' | 'className'> {
+    position: 'top' | 'right' | 'bottom' | 'left';
+    title: string;
+    description: string;
+    leftSlot?: ReactNode;
+    footer?: {
+        currentStep: number;
+        totalStep: number;
+        buttonText: string;
+        onButtonClick: () => void;
+    };
+}
+declare const TemplateTutorialGuide: ({ 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 };

package/lib/index.js

@@ -1,6 +1,6 @@
 import { IconClose } from '@liner-fe/icon';
-import { IconButton, Title, Paragraph, Button, TextButton } from '@liner-fe/prism';
-import { Dialog } from 'radix-ui';
+import { IconButton, Title, Paragraph, Button, TextButton, Caption } from '@liner-fe/prism';
+import { Dialog, Popover } from 'radix-ui';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -181,5 +181,89 @@ 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 = ({
+  isOpen,
+  children,
+  onClose,
+  className,
+  content
+}) => {
+  const { position, 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(
+                "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 };
+export { TemplateDialog, TemplateIllustDialog, TemplateTutorialGuide };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-library",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "type": "module",
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",