@k8o/arte-odyssey 0.0.0

package/dist/components/separator/separator.stories.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "./separator";
+const meta = {
+  title: "components/separator",
+  component: Separator,
+  decorators: [
+    (Story) => {
+      return /* @__PURE__ */ jsx("div", { className: "size-40", children: /* @__PURE__ */ jsx(Story, {}) });
+    }
+  ]
+};
+var separator_stories_default = meta;
+const Horizontal = {
+  args: {
+    orientation: "horizontal"
+  }
+};
+const Vertical = {
+  args: {
+    orientation: "vertical"
+  }
+};
+export {
+  Horizontal,
+  Vertical,
+  separator_stories_default as default
+};

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export * from "./tabs";

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,16 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const Tabs: {
+    Root: FC<PropsWithChildren<{
+        defaultSelectedId?: string | null;
+        ids: [string, ...string[]];
+    }>>;
+    List: FC<PropsWithChildren<{
+        label: string;
+    }>>;
+    Tab: FC<PropsWithChildren<{
+        id: string;
+    }>>;
+    Panel: FC<PropsWithChildren<{
+        id: string;
+    }>>;
+};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as motion from "motion/react-client";
+import {
+  createContext,
+  use,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { cn } from "./../../helpers/cn";
+const TabsProvider = createContext(void 0);
+const useTabsState = () => {
+  const context = use(TabsProvider);
+  if (!context) {
+    throw new Error("useTabsState must be used within a TabsProvider");
+  }
+  return context;
+};
+const Root = ({ defaultSelectedId = null, ids, children }) => {
+  const defaultIndex = defaultSelectedId ? ids.indexOf(defaultSelectedId) : 0;
+  const [selectedId, setSelectedId] = useState(
+    defaultSelectedId ?? ids[defaultIndex] ?? ids[0]
+  );
+  const rootId = useId();
+  return /* @__PURE__ */ jsx(
+    TabsProvider,
+    {
+      value: {
+        rootId,
+        ids,
+        selectedId,
+        setSelectedId
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 overflow-x-auto p-0.5", children })
+    }
+  );
+};
+const TabsListProvider = createContext(void 0);
+const useTabsListState = () => {
+  const context = use(TabsListProvider);
+  if (!context) {
+    throw new Error("useTabListState must be used within a TabListProvider");
+  }
+  return context;
+};
+const List = ({ label, children }) => {
+  const { rootId } = useTabsState();
+  const setFocusRef = useRef(false);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      className: "wrap-normal flex overflow-x-auto overflow-y-hidden border-border-base border-b p-0.5",
+      id: `${rootId}-tablist`,
+      role: "tablist",
+      children: /* @__PURE__ */ jsx(TabsListProvider, { value: { setFocusRef }, children })
+    }
+  );
+};
+const Tab = ({ id, children }) => {
+  const { rootId, ids, selectedId, setSelectedId } = useTabsState();
+  const { setFocusRef } = useTabsListState();
+  const ref = useRef(null);
+  const activeIndex = ids.indexOf(selectedId);
+  const index = ids.indexOf(id);
+  useEffect(() => {
+    if (activeIndex === index && setFocusRef.current) {
+      ref.current?.focus();
+      setFocusRef.current = false;
+    }
+  }, [activeIndex, index, setFocusRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
+      "aria-selected": selectedId === id,
+      className: cn(
+        "relative cursor-pointer rounded-md p-2",
+        "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
+      ),
+      id: `${rootId}-tab-${id}`,
+      onClick: () => {
+        setSelectedId(id);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "ArrowLeft") {
+          const nextActiveIndex = index === 0 ? ids.length - 1 : index - 1;
+          setSelectedId(ids[nextActiveIndex] ?? ids[0]);
+          setFocusRef.current = true;
+          return;
+        }
+        if (e.key === "ArrowRight") {
+          const nextActiveIndex = index === ids.length - 1 ? 0 : index + 1;
+          setSelectedId(ids[nextActiveIndex] ?? ids[0]);
+          setFocusRef.current = true;
+          return;
+        }
+      },
+      ref,
+      role: "tab",
+      tabIndex: activeIndex === index ? 0 : -1,
+      children: [
+        selectedId === id && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "-bottom-0.5 absolute right-0 left-0 h-1 bg-primary-border",
+            layoutId: "underline"
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+const Panel = ({ id, children }) => {
+  const { rootId, selectedId } = useTabsState();
+  if (selectedId !== id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-labelledby": `${rootId}-tab-${id}`,
+      className: cn(
+        "flex-grow rounded-md p-2",
+        "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
+      ),
+      id: `${rootId}-panel-${id}`,
+      role: "tabpanel",
+      children
+    }
+  );
+};
+const Tabs = {
+  Root,
+  List,
+  Tab,
+  Panel
+};
+export {
+  Tabs
+};

package/dist/components/tabs/tabs.stories.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { expect } from "storybook/test";
+import { Tabs } from "./tabs";
+const meta = {
+  title: "components/tabs",
+  component: Tabs.Root
+};
+var tabs_stories_default = meta;
+const Primary = {
+  render: () => /* @__PURE__ */ jsxs(Tabs.Root, { ids: ["tab1", "tab2", "tab3"], children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { label: "Tabs Example", children: [
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab1", children: "Tab1" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab2", children: "Tab2" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab3", children: "Tab3" })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab1", children: "Panel1" }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab2", children: "Panel2" }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab3", children: "Panel3" })
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const tab2 = canvas.getByRole("tab", { name: "Tab2" });
+    const tab3 = canvas.getByRole("tab", { name: "Tab3" });
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel1");
+    await userEvent.click(tab2);
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel2");
+    await userEvent.click(tab3);
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel3");
+  }
+};
+const DefaultSelected = {
+  render: () => /* @__PURE__ */ jsxs(Tabs.Root, { defaultSelectedId: "tab2", ids: ["tab1", "tab2", "tab3"], children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { label: "Tabs Example", children: [
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab1", children: "Tab1" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab2", children: "Tab2" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab3", children: "Tab3" })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab1", children: "Panel1" }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab2", children: "Panel2" }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab3", children: "Panel3" })
+  ] }),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel2");
+  }
+};
+export {
+  DefaultSelected,
+  Primary,
+  tabs_stories_default as default
+};

package/dist/components/text-tag/index.d.ts

@@ -0,0 +1 @@
+export * from './text-tag';

package/dist/components/text-tag/index.js

@@ -0,0 +1 @@
+export * from "./text-tag";

package/dist/components/text-tag/text-tag.d.ts

@@ -0,0 +1,5 @@
+export declare const TextTag: ({ text, size, clickable, }: {
+    text: string;
+    size?: "sm" | "md";
+    clickable?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text-tag/text-tag.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const TextTag = ({
+  text,
+  size = "md",
+  clickable = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block rounded-full bg-bg-mute font-medium",
+        clickable && "cursor-pointer hover:bg-bg-emphasize",
+        size === "sm" && "px-2 py-0.5 text-xs",
+        size === "md" && "px-3 py-1 text-sm"
+      ),
+      children: text
+    }
+  );
+};
+export {
+  TextTag
+};

package/dist/components/text-tag/text-tag.stories.js

@@ -0,0 +1,30 @@
+import { TextTag } from "./text-tag";
+const meta = {
+  title: "components/text-tag",
+  component: TextTag
+};
+var text_tag_stories_default = meta;
+const Medium = {
+  args: {
+    text: "TypeScript",
+    size: "md"
+  }
+};
+const Clickable = {
+  args: {
+    text: "TypeScript",
+    clickable: true
+  }
+};
+const Small = {
+  args: {
+    text: "TypeScript",
+    size: "sm"
+  }
+};
+export {
+  Clickable,
+  Medium,
+  Small,
+  text_tag_stories_default as default
+};

package/dist/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from './provider';

package/dist/components/toast/index.js

@@ -0,0 +1,5 @@
+import { ToastProvider, useToast } from "./provider";
+export {
+  ToastProvider,
+  useToast
+};

package/dist/components/toast/provider.d.ts

@@ -0,0 +1,11 @@
+import { type FC, type PropsWithChildren, type RefObject } from 'react';
+import type { Status } from './../../types/variables';
+export declare const useToast: () => {
+    onOpen: (status: Status, message: string) => void;
+    onClose: (id: string) => void;
+    onCloseAll: () => void;
+};
+export declare const ToastProvider: FC<PropsWithChildren<{
+    portalRef?: RefObject<HTMLElement | null>;
+    position?: 'fixed' | 'absolute';
+}>>;

package/dist/components/toast/provider.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import * as motion from "motion/react-client";
+import {
+  createContext,
+  use,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "./../../helpers/cn";
+import { uuidV4 } from "./../../helpers/uuid-v4";
+import { Toast } from "./toast";
+const SetToastContext = createContext(void 0);
+const useToast = () => {
+  const setToasts = use(SetToastContext);
+  if (!setToasts) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  const onOpen = useCallback(
+    (status, message) => {
+      setToasts((prev) => [
+        ...prev,
+        {
+          id: uuidV4(),
+          status,
+          message
+        }
+      ]);
+    },
+    [setToasts]
+  );
+  const onClose = useCallback(
+    (id) => {
+      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    },
+    [setToasts]
+  );
+  const onCloseAll = useCallback(() => {
+    setToasts([]);
+  }, [setToasts]);
+  return {
+    onOpen,
+    onClose,
+    onCloseAll
+  };
+};
+const toastMotionVariants = {
+  initial: {
+    opacity: 0,
+    y: 24
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.85,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 1, 1]
+    }
+  }
+};
+const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
+  const [toasts, setToasts] = useState([]);
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = document.body;
+  }, []);
+  const container = portalRef?.current ?? ref.current;
+  return /* @__PURE__ */ jsxs(SetToastContext, { value: setToasts, children: [
+    children,
+    container ? createPortal(
+      /* @__PURE__ */ jsx(
+        "section",
+        {
+          "aria-label": "\u901A\u77E5",
+          "aria-live": "polite",
+          className: cn(
+            "absolute bottom-3 z-50 flex w-full flex-col items-center justify-center gap-4",
+            position === "fixed" && "fixed",
+            position === "absolute" && "absolute"
+          ),
+          children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: toasts.map((toast) => /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: "animate",
+              custom: { position: "bottom" },
+              exit: "exit",
+              initial: "initial",
+              layout: true,
+              variants: toastMotionVariants,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-atomic": true,
+                  className: "shadow-lg",
+                  role: toast.status === "error" || toast.status === "warning" ? "alert" : "status",
+                  children: /* @__PURE__ */ jsx(Toast, { ...toast })
+                }
+              )
+            },
+            toast.id
+          )) })
+        }
+      ),
+      container
+    ) : null
+  ] });
+};
+export {
+  ToastProvider,
+  useToast
+};

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import type { Status } from './../../types/variables';
+type ToastProps = {
+    id: string;
+    status: Status;
+    message: string;
+};
+export declare const Toast: FC<ToastProps>;
+export {};

package/dist/components/toast/toast.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useTimeout } from "./../../hooks/timeout";
+import { Alert } from "../alert";
+import { useToast } from "./provider";
+const DELAY_MS = 5e3;
+const Toast = ({ id, status, message }) => {
+  const { onClose } = useToast();
+  useTimeout(
+    useCallback(() => {
+      onClose(id);
+    }, [id, onClose]),
+    DELAY_MS
+  );
+  return /* @__PURE__ */ jsx(Alert, { message, status });
+};
+export {
+  Toast
+};

package/dist/components/toast/toast.stories.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../button";
+import { ToastProvider, useToast } from "./provider";
+import { Toast } from "./toast";
+const meta = {
+  title: "components/toast",
+  component: ToastProvider,
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(Story, {}) })
+  ],
+  render: () => {
+    const { onOpen } = useToast();
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          onOpen("success", "\u30C8\u30FC\u30B9\u30C8\u3092\u547C\u3073\u307E\u3057\u305F");
+        },
+        children: "\u30C8\u30FC\u30B9\u30C8\u3092\u547C\u3076"
+      }
+    );
+  }
+};
+var toast_stories_default = meta;
+const Primary = {};
+const ToastSuccess = {
+  render: () => /* @__PURE__ */ jsx(Toast, { id: "1", message: "\u6210\u529F\u3057\u307E\u3057\u305F", status: "success" })
+};
+const ToasInfo = {
+  render: () => /* @__PURE__ */ jsx(Toast, { id: "1", message: "\u60C5\u5831\u3067\u3059", status: "info" })
+};
+const ToastError = {
+  render: () => /* @__PURE__ */ jsx(Toast, { id: "1", message: "\u5931\u6557\u3057\u307E\u3057\u305F", status: "error" })
+};
+const ToastWarning = {
+  render: () => /* @__PURE__ */ jsx(Toast, { id: "1", message: "\u8B66\u544A\u3067\u3059", status: "warning" })
+};
+export {
+  Primary,
+  ToasInfo,
+  ToastError,
+  ToastSuccess,
+  ToastWarning,
+  toast_stories_default as default
+};

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export * from "./tooltip";

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,13 @@
+import type { Placement } from '@floating-ui/react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
+export declare const Tooltip: {
+    Root: FC<PropsWithChildren<{
+        placement?: Placement;
+    }>>;
+    Trigger: FC<{
+        renderItem: (props: Record<string, unknown>) => ReactElement;
+    }>;
+    Content: FC<{
+        children?: React.ReactNode | undefined;
+    }>;
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "../popover";
+import { usePlacement } from "../popover/hooks";
+const Root = ({
+  children,
+  placement = "bottom-start"
+}) => {
+  return /* @__PURE__ */ jsx(Popover.Root, { placement, type: "tooltip", children });
+};
+const Trigger = ({ renderItem }) => {
+  return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => renderItem({ ...props }) });
+};
+const Content = ({ children }) => {
+  const placement = usePlacement();
+  const translate = {
+    top: { translateY: 5 },
+    bottom: { translateY: -5 },
+    left: { translateX: 5 },
+    right: { translateX: -5 }
+  }[placement.includes("-") ? placement.split("-")[0] ?? "bottom" : placement];
+  return /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      motionVariants: {
+        closed: {
+          ...translate,
+          opacity: 0,
+          transition: {
+            duration: 0.3
+          }
+        },
+        open: {
+          translate: 0,
+          opacity: 1,
+          transition: {
+            duration: 0.4,
+            ease: "easeOut"
+          }
+        }
+      },
+      renderItem: (props) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          className: "rounded-lg border border-border-mute bg-bg-base px-4 py-2 shadow-xl",
+          children
+        }
+      )
+    }
+  );
+};
+const Tooltip = {
+  Root,
+  Trigger,
+  Content
+};
+export {
+  Tooltip
+};

package/dist/components/tooltip/tooltip.stories.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../button";
+import { Tooltip } from "./tooltip";
+const meta = {
+  title: "components/tooltip",
+  component: Tooltip.Root,
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // https://github.com/floating-ui/floating-ui/pull/2298#issuecomment-1518101512
+          "aria-hidden-focus": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var tooltip_stories_default = meta;
+const Default = {
+  render: () => /* @__PURE__ */ jsxs(Tooltip.Root, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(
+      Tooltip.Trigger,
+      {
+        renderItem: (props) => /* @__PURE__ */ jsx(Button, { type: "button", ...props, children: "Tooltip" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx("p", { children: "Tooltip content" }) })
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "Tooltip"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+export {
+  Default,
+  tooltip_stories_default as default
+};

package/dist/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/helpers/cn.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+const cn = (...inputs) => {
+  return twMerge(clsx(inputs));
+};
+export {
+  cn
+};