@k8o/arte-odyssey 0.0.0

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Breadcrumb } from "./breadcrumb";
+const meta = {
+  title: "components/breadcrumb",
+  component: Breadcrumb.List
+};
+var breadcrumb_stories_default = meta;
+const Medium = {
+  render: () => /* @__PURE__ */ jsxs(Breadcrumb.List, { children: [
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/", children: "Home" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/quizzes", children: "Quizzes" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { current: true, href: "/quizzes/fish-kanji", children: "\u3046\u304A\u3078\u3093\u30AF\u30A4\u30BA" }) })
+  ] })
+};
+const Large = {
+  render: () => /* @__PURE__ */ jsxs(Breadcrumb.List, { size: "lg", children: [
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/", children: "Home" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/quizzes", children: "Quizzes" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { current: true, href: "/quizzes/fish-kanji", children: "\u3046\u304A\u3078\u3093\u30AF\u30A4\u30BA" }) })
+  ] })
+};
+const Small = {
+  render: () => /* @__PURE__ */ jsxs(Breadcrumb.List, { size: "sm", children: [
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/", children: "Home" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { href: "/quizzes", children: "Quizzes" }) }),
+    /* @__PURE__ */ jsx(Breadcrumb.Separator, {}),
+    /* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Breadcrumb.Link, { current: true, href: "/quizzes/fish-kanji", children: "\u3046\u304A\u3078\u3093\u30AF\u30A4\u30BA" }) })
+  ] })
+};
+export {
+  Large,
+  Medium,
+  Small,
+  breadcrumb_stories_default as default
+};

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

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

package/dist/components/breadcrumb/index.js

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

package/dist/components/button/button.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLProps, ReactNode } from 'react';
+export declare const Button: FC<{
+    type?: 'button' | 'submit';
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'gray';
+    variant?: 'contained' | 'outlined' | 'skeleton';
+    fullWidth?: boolean;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>>;

package/dist/components/button/button.js

@@ -0,0 +1,55 @@
+import { jsxs } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const Button = ({
+  ref,
+  children,
+  type = "button",
+  size = "md",
+  color = "primary",
+  variant = "contained",
+  disabled = false,
+  fullWidth = false,
+  onClick,
+  startIcon,
+  endIcon,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "cursor-pointer rounded-lg text-center font-bold",
+        {
+          "bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
+          "bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
+          "cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained",
+          "border-2 border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
+          "border-2 border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
+          "cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": disabled && variant === "outlined",
+          "bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton",
+          "cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:text-fg-mute active:text-fg-mute": disabled && variant === "skeleton"
+        },
+        "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info",
+        size === "sm" && "px-3 py-1 text-sm",
+        size === "md" && "px-4 py-2 text-md",
+        size === "lg" && "px-6 py-3 text-lg",
+        fullWidth && "w-full",
+        Boolean(startIcon ?? endIcon) && "flex items-center gap-2",
+        startIcon && endIcon ? "justify-between" : startIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"
+      ),
+      disabled,
+      onClick,
+      ref,
+      type,
+      ...rest,
+      children: [
+        startIcon,
+        children,
+        endIcon
+      ]
+    }
+  );
+};
+export {
+  Button
+};

package/dist/components/button/button.stories.js

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import { CopyIcon } from "../icons";
+import { Button } from "./button";
+const meta = {
+  title: "components/button",
+  component: Button,
+  args: {
+    type: "button",
+    onClick: () => {
+      console.log("clicked");
+    }
+  },
+  render: (props) => {
+    return /* @__PURE__ */ jsx(Button, { ...props, children: "\u30DC\u30BF\u30F3" });
+  }
+};
+var button_stories_default = meta;
+const Primary = {};
+const Outlined = {
+  args: {
+    variant: "outlined"
+  }
+};
+const Skeleton = {
+  args: {
+    variant: "skeleton"
+  }
+};
+const Gray = {
+  args: {
+    color: "gray"
+  }
+};
+const OutlinedGray = {
+  args: {
+    color: "gray",
+    variant: "outlined"
+  }
+};
+const FullWidth = {
+  args: {
+    fullWidth: true
+  }
+};
+const Large = {
+  args: {
+    size: "lg"
+  }
+};
+const Medium = {
+  args: {
+    size: "md"
+  }
+};
+const Small = {
+  args: {
+    size: "sm"
+  }
+};
+const Disabled = {
+  args: {
+    disabled: true
+  }
+};
+const DisabledOutlined = {
+  args: {
+    variant: "outlined",
+    disabled: true
+  }
+};
+const StartIcon = {
+  args: {
+    startIcon: /* @__PURE__ */ jsx(CopyIcon, {})
+  }
+};
+const EndIcon = {
+  args: {
+    endIcon: /* @__PURE__ */ jsx(CopyIcon, {})
+  }
+};
+export {
+  Disabled,
+  DisabledOutlined,
+  EndIcon,
+  FullWidth,
+  Gray,
+  Large,
+  Medium,
+  Outlined,
+  OutlinedGray,
+  Primary,
+  Skeleton,
+  Small,
+  StartIcon,
+  button_stories_default as default
+};

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

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

package/dist/components/button/index.js

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

package/dist/components/card/card.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { CardProps } from './type';
+export declare const Card: FC<CardProps>;

package/dist/components/card/card.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const Card = ({
+  children,
+  variant = "primary",
+  title,
+  width = "full"
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn(
+      "rounded-lg bg-bg-base/90 shadow-md",
+      width === "full" && "w-full",
+      width === "fit" && "w-fit",
+      variant === "primary" && "bg-bg-base/90",
+      variant === "secondary" && "bg-bg-mute"
+    ),
+    children: [
+      title && /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-t-lg bg-linear-60 from-primary-bg-mute to-secondary-bg-mute p-4", children: /* @__PURE__ */ jsx("p", { className: "font-bold text-xl", children: title }) }),
+      children
+    ]
+  }
+);
+export {
+  Card
+};

package/dist/components/card/card.stories.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { Card } from "./card";
+import { InteractiveCard } from "./interactive-card";
+const meta = {
+  title: "components/card",
+  component: Card
+};
+var card_stories_default = meta;
+const Primary = {
+  args: {
+    children: "card"
+  }
+};
+const Title = {
+  args: {
+    children: "card",
+    title: "title"
+  }
+};
+const Secondary = {
+  args: {
+    children: "card",
+    variant: "secondary"
+  }
+};
+const Interactive = {
+  args: {
+    children: "card"
+  },
+  render: (props) => /* @__PURE__ */ jsx(InteractiveCard, { ...props })
+};
+export {
+  Interactive,
+  Primary,
+  Secondary,
+  Title,
+  card_stories_default as default
+};

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

@@ -0,0 +1,2 @@
+export * from './card';
+export * from './interactive-card';

package/dist/components/card/index.js

@@ -0,0 +1,2 @@
+export * from "./card";
+export * from "./interactive-card";

package/dist/components/card/interactive-card.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { CardProps } from './type';
+export declare const InteractiveCard: FC<CardProps>;

package/dist/components/card/interactive-card.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as motion from "motion/react-client";
+import { cn } from "./../../helpers/cn";
+const InteractiveCard = ({
+  children,
+  variant = "primary",
+  width = "full",
+  title
+}) => /* @__PURE__ */ jsxs(
+  motion.section,
+  {
+    className: cn(
+      "rounded-lg bg-bg-base/90 shadow-md",
+      width === "full" && "w-full",
+      width === "fit" && "w-fit",
+      variant === "primary" && "bg-bg-base/90",
+      variant === "secondary" && "bg-bg-mute"
+    ),
+    tabIndex: -1,
+    whileHover: {
+      scale: 1.02
+    },
+    whileTap: {
+      scale: 0.98
+    },
+    children: [
+      title && /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-t-lg bg-linear-60 from-primary-bg-mute to-secondary-bg-mute p-4", children: /* @__PURE__ */ jsx("p", { className: "font-bold text-xl", children: title }) }),
+      children
+    ]
+  }
+);
+export {
+  InteractiveCard
+};

package/dist/components/card/type.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+export type CardProps = PropsWithChildren<{
+    variant?: 'primary' | 'secondary';
+    title?: string;
+    width?: 'full' | 'fit';
+}>;

package/dist/components/code/code.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const Code: FC<{
+    children: string;
+}>;

package/dist/components/code/code.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { findAllColors } from "./../../helpers/color/find-all-colors";
+const Code = ({ children }) => {
+  const colors = findAllColors(children);
+  if (colors.length === 0) {
+    return /* @__PURE__ */ jsx("code", { className: "m-0.5 rounded-md bg-bg-mute px-1.5 sm:py-0.5", children });
+  }
+  const parts = [];
+  let lastIndex = 0;
+  colors.forEach((colorInfo, index) => {
+    if (colorInfo.start > lastIndex) {
+      parts.push(children.slice(lastIndex, colorInfo.start));
+    }
+    parts.push(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": `Color: ${colorInfo.color}`,
+            className: "inline-block h-3 w-3 flex-shrink-0 rounded-sm border border-gray-300",
+            role: "img",
+            style: { backgroundColor: colorInfo.color }
+          }
+        ),
+        children.slice(colorInfo.start, colorInfo.end)
+      ] }, `color-${String(index)}`)
+    );
+    lastIndex = colorInfo.end;
+  });
+  if (lastIndex < children.length) {
+    parts.push(children.slice(lastIndex));
+  }
+  return /* @__PURE__ */ jsx("code", { className: "m-0.5 inline-flex items-center gap-1 rounded-md bg-bg-mute px-1.5 sm:py-0.5", children: parts });
+};
+export {
+  Code
+};

package/dist/components/code/code.stories.js

@@ -0,0 +1,60 @@
+import { Code } from "./code";
+const meta = {
+  title: "components/code",
+  component: Code,
+  parameters: {
+    layout: "centered"
+  }
+};
+var code_stories_default = meta;
+const Default = {
+  args: {
+    children: 'const example = "Hello World";'
+  }
+};
+const HSLColor = {
+  args: {
+    children: "hsl(280, 70%, 50%)"
+  }
+};
+const RGBColor = {
+  args: {
+    children: "rgb(255, 0, 128)"
+  }
+};
+const HexColor = {
+  args: {
+    children: "#ff0080"
+  }
+};
+const NamedColor = {
+  args: {
+    children: "background-color: red"
+  }
+};
+const ComplexCSS = {
+  args: {
+    children: "background-color: hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%)"
+  }
+};
+const MultipleColors = {
+  args: {
+    children: "border: 1px solid #ff0080; background: hsl(280, 70%, 50%); color: rgb(255, 255, 255);"
+  }
+};
+const GradientWithMultipleColors = {
+  args: {
+    children: "background: linear-gradient(45deg, #ff0080, hsl(280, 70%, 50%), rgba(255, 0, 128, 0.5))"
+  }
+};
+export {
+  ComplexCSS,
+  Default,
+  GradientWithMultipleColors,
+  HSLColor,
+  HexColor,
+  MultipleColors,
+  NamedColor,
+  RGBColor,
+  code_stories_default as default
+};

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

@@ -0,0 +1 @@
+export { Code } from './code';

package/dist/components/code/index.js

@@ -0,0 +1,4 @@
+import { Code } from "./code";
+export {
+  Code
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,17 @@
+import { type FC, type PropsWithChildren, type Ref } from 'react';
+export declare const Content: FC<PropsWithChildren>;
+export declare const Dialog: {
+    Root: FC<PropsWithChildren<{
+        ref?: Ref<HTMLElement> | undefined;
+        id?: string | undefined;
+        tabIndex?: number | undefined;
+        role?: string | undefined;
+    }>>;
+    Header: FC<{
+        title: string;
+        onClose: () => void;
+    }>;
+    Content: FC<{
+        children?: React.ReactNode | undefined;
+    }>;
+};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  use,
+  useId
+} from "react";
+import { Heading } from "../heading";
+import { IconButton } from "../icon-button";
+import { CloseIcon } from "../icons";
+const DialogContext = createContext(null);
+const useDialogContext = () => {
+  const context = use(DialogContext);
+  if (context === null) {
+    throw new Error("useDialogContext must be used within a DialogProvider");
+  }
+  return context;
+};
+const Root = ({ ref, id, children, tabIndex, role = "dialog" }) => {
+  const fallbackId = useId();
+  const rootId = id ?? fallbackId;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-describedby": `${rootId}-content`,
+      "aria-labelledby": `${rootId}-header`,
+      className: "relative w-full rounded-lg border border-border-subtle bg-bg-base shadow-xl",
+      id,
+      ref,
+      role,
+      tabIndex,
+      children: /* @__PURE__ */ jsx(DialogContext, { value: { rootId }, children })
+    }
+  );
+};
+const Header = ({ title, onClose }) => {
+  const { rootId } = useDialogContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-center p-4 pb-2",
+      id: `${rootId}-header`,
+      children: [
+        /* @__PURE__ */ jsx(Heading, { type: "h3", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "\u9589\u3058\u308B",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+const Content = ({ children }) => {
+  const { rootId } = useDialogContext();
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: propagationなので
+    // biome-ignore lint/a11y/useKeyWithClickEvents: propagationなので
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4",
+        id: `${rootId}-content`,
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children
+      }
+    )
+  );
+};
+const Dialog = {
+  Root,
+  Header,
+  Content
+};
+export {
+  Content,
+  Dialog
+};

package/dist/components/dialog/dialog.stories.js

@@ -0,0 +1,98 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { fn } from "storybook/test";
+import { Button } from "../button";
+import { Modal } from "../modal";
+import { Popover, useOpenContext } from "../popover";
+import { Dialog } from "./dialog";
+const meta = {
+  title: "components/dialog",
+  component: Dialog.Root
+};
+var dialog_stories_default = meta;
+const Default = {
+  render: () => /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { onClose: fn, title: "\u30C0\u30A4\u30A2\u30ED\u30B0" }),
+    /* @__PURE__ */ jsx(Dialog.Content, { children: "\u3053\u3093\u306B\u3061\u306F" })
+  ] })
+};
+const StoryDialog = (props) => {
+  const { onClose } = useOpenContext();
+  return /* @__PURE__ */ jsxs(Dialog.Root, { ...props, ref: props.ref, children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { onClose, title: "\u30C0\u30A4\u30A2\u30ED\u30B0" }),
+    /* @__PURE__ */ jsx(Dialog.Content, { children: "\u3053\u3093\u306B\u3061\u306F\u3053\u3093\u306B\u3061\u306F\u3053\u3093\u306B\u3061\u306F\u3053\u3093\u306B\u3061\u306F" })
+  ] });
+};
+const PopoverDialog = {
+  render: () => /* @__PURE__ */ jsxs(Popover.Root, { type: "dialog", children: [
+    /* @__PURE__ */ jsx(
+      Popover.Trigger,
+      {
+        renderItem: (props) => /* @__PURE__ */ jsx(Button, { ...props, size: "md", type: "button", children: "\u30DD\u30C3\u30D7\u30AA\u30FC\u30D0\u30FC" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx(StoryDialog, { ...props }) })
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "\u30DD\u30C3\u30D7\u30AA\u30FC\u30D0\u30FC"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // https://github.com/floating-ui/floating-ui/pull/2298#issuecomment-1518101512
+          "aria-hidden-focus": { enabled: false }
+        }
+      }
+    }
+  }
+};
+const ModalDialog = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            setOpen(true);
+          },
+          size: "md",
+          type: "button",
+          children: "\u30E2\u30FC\u30C0\u30EB"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Modal,
+        {
+          isOpen: open,
+          onClose: () => {
+            setOpen(false);
+          },
+          type: "center",
+          children: /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+            /* @__PURE__ */ jsx(Dialog.Header, { onClose: fn, title: "\u30E2\u30FC\u30C0\u30EB" }),
+            /* @__PURE__ */ jsx(Dialog.Content, { children: "\u3053\u3093\u306B\u3061\u306F" })
+          ] })
+        }
+      )
+    ] });
+  },
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "\u30E2\u30FC\u30C0\u30EB"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+export {
+  Default,
+  ModalDialog,
+  PopoverDialog,
+  dialog_stories_default as default
+};

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

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

package/dist/components/dialog/index.js

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

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const Drawer: FC<PropsWithChildren<{
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+}>>;