@k8o/arte-odyssey 0.0.0

package/dist/components/drawer/drawer.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Heading } from "../heading";
+import { IconButton } from "../icon-button";
+import { CloseIcon } from "../icons";
+import { Modal } from "../modal";
+const Drawer = ({ title, isOpen, onClose, children }) => {
+  const rootId = useId();
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, type: "right", children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-describedby": `${rootId}-content`,
+      "aria-labelledby": `${rootId}-header`,
+      className: "min-h-svh",
+      id: rootId,
+      children: [
+        /* @__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" })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "p-4",
+            id: `${rootId}-content`,
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            children
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Drawer
+};

package/dist/components/drawer/drawer.stories.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fn } from "storybook/test";
+import { Drawer } from "./drawer";
+const meta = {
+  title: "components/drawer",
+  component: Drawer
+};
+var drawer_stories_default = meta;
+const Default = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    title: "Drawer Title",
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "This is a drawer component. You can put any content here." }),
+      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "You can use it to display additional information or actions related to the current context." }),
+      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "You can also use it to display forms, lists, or any other type of content that you want to show in a drawer." }),
+      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "This is a great way to keep your UI clean and organized while still providing access to important information or actions." })
+    ] })
+  }
+};
+export {
+  Default,
+  drawer_stories_default as default
+};

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

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

package/dist/components/drawer/index.js

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

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,24 @@
+import { type Placement } from '@floating-ui/react';
+import { type ComponentProps, type FC, type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react';
+import { Button } from '../button';
+export declare const DropdownMenu: {
+    Root: FC<PropsWithChildren<{
+        placement?: Placement;
+    }>>;
+    Content: FC<{
+        children?: ReactNode | undefined;
+    }>;
+    Item: FC<{
+        onClick: MouseEventHandler;
+        label: string;
+    }>;
+    Trigger: FC<{
+        text: string;
+        size?: ComponentProps<typeof Button>["size"];
+        variant?: ComponentProps<typeof Button>["variant"];
+    }>;
+    IconTrigger: FC<{
+        icon: ReactNode;
+        label: string;
+    }>;
+};

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  FloatingList,
+  useInteractions,
+  useListNavigation
+} from "@floating-ui/react";
+import {
+  useRef,
+  useState
+} from "react";
+import { cn } from "./../../helpers/cn";
+import { Button } from "../button";
+import { IconButton } from "../icon-button";
+import { ChevronIcon } from "../icons";
+import { Popover } from "../popover";
+import { useFloatingUIContext } from "../popover/hooks";
+import {
+  MenuContextProvider,
+  useMenuContent,
+  useMenuItem,
+  useMenuTrigger
+} from "./hooks";
+const Root = ({
+  children,
+  placement = "bottom-start"
+}) => {
+  return /* @__PURE__ */ jsx(Popover.Root, { placement, type: "menu", children: /* @__PURE__ */ jsx(MenuProvider, { children }) });
+};
+const MenuProvider = ({ children }) => {
+  const [activeIndex, setActiveIndex] = useState(null);
+  const itemElementsRef = useRef([]);
+  const context = useFloatingUIContext();
+  const listNavigation = useListNavigation(context, {
+    listRef: itemElementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [listNavigation]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuContextProvider,
+    {
+      value: {
+        activeIndex,
+        itemElementsRef,
+        getTriggerProps: getReferenceProps,
+        getContentProps: getFloatingProps,
+        getItemProps
+      },
+      children
+    }
+  );
+};
+const Content = ({ children }) => {
+  const { contentProps, itemElementsRef } = useMenuContent();
+  return /* @__PURE__ */ jsx(FloatingList, { elementsRef: itemElementsRef, children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...contentProps,
+          className: "flex min-w-40 flex-col rounded-lg border border-border-mute bg-bg-base py-2 shadow-xl",
+          children
+        }
+      )
+    }
+  ) });
+};
+const Item = ({
+  label,
+  onClick
+}) => {
+  const props = useMenuItem({ onClick });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "w-full px-2 py-1 text-left",
+        "hover:bg-primary-bg",
+        "focus-visible:border-transparent focus-visible:bg-primary-bg focus-visible:outline-hidden"
+      ),
+      ...props,
+      children: label
+    }
+  );
+};
+const Trigger = ({ text, size = "md", variant = "contained" }) => {
+  const getTriggerProps = useMenuTrigger();
+  return /* @__PURE__ */ jsx(
+    Popover.Trigger,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "gray",
+          endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
+          size,
+          type: "button",
+          variant,
+          ...getTriggerProps(props),
+          children: text
+        }
+      )
+    }
+  );
+};
+const IconTrigger = ({ icon, label }) => {
+  const getTriggerProps = useMenuTrigger();
+  return /* @__PURE__ */ jsx(
+    Popover.Trigger,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsx(IconButton, { bg: "base", label, ...getTriggerProps(props), children: icon })
+    }
+  );
+};
+const DropdownMenu = {
+  Root,
+  Content,
+  Item,
+  Trigger,
+  IconTrigger
+};
+export {
+  DropdownMenu
+};

package/dist/components/dropdown-menu/dropdown-menu.stories.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DarkModeIcon } from "../icons";
+import { DropdownMenu } from "./dropdown-menu";
+const meta = {
+  title: "components/dropdown-menu",
+  component: DropdownMenu.Root,
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // https://github.com/floating-ui/floating-ui/pull/2298#issuecomment-1518101512
+          "aria-hidden-focus": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var dropdown_menu_stories_default = meta;
+const Default = {
+  render: () => /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { text: "Options" }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 1",
+          onClick: () => {
+            console.log(1);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 2",
+          onClick: () => {
+            console.log(2);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 3",
+          onClick: () => {
+            console.log(3);
+          }
+        }
+      )
+    ] })
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "Options"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+const TriggerByIcon = {
+  render: () => /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenu.IconTrigger,
+      {
+        icon: /* @__PURE__ */ jsx(DarkModeIcon, { size: "lg" }),
+        label: "Options"
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 1",
+          onClick: () => {
+            console.log(1);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 2",
+          onClick: () => {
+            console.log(2);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          label: "Item 3",
+          onClick: () => {
+            console.log(3);
+          }
+        }
+      )
+    ] })
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "Options"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+export {
+  Default,
+  TriggerByIcon,
+  dropdown_menu_stories_default as default
+};

package/dist/components/dropdown-menu/hooks.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLProps, type MouseEventHandler, type RefObject } from 'react';
+type MenuContext = {
+    activeIndex: number | null;
+    itemElementsRef: RefObject<(HTMLElement | null)[]>;
+    getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getContentProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<HTMLProps<HTMLButtonElement>, 'selected' | 'active'>) => Record<string, unknown>;
+};
+declare const MenuContext: React.Context<MenuContext | null>;
+export declare const MenuContextProvider: React.Context<MenuContext | null>;
+export declare const useMenuContent: () => {
+    contentProps: Record<string, unknown>;
+    itemElementsRef: RefObject<(HTMLElement | null)[]>;
+};
+export declare const useMenuItem: ({ onClick }: {
+    onClick: MouseEventHandler;
+}) => {
+    ref: (node: HTMLElement | null) => void;
+    role: string;
+    tabIndex: number;
+};
+export declare const useMenuTrigger: () => (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+export {};

package/dist/components/dropdown-menu/hooks.js

@@ -0,0 +1,56 @@
+"use client";
+import { useListItem } from "@floating-ui/react";
+import {
+  createContext,
+  use,
+  useMemo
+} from "react";
+import { useOpenContext } from "../popover/hooks";
+const MenuContext = createContext(null);
+const MenuContextProvider = MenuContext;
+const useMenuContext = () => {
+  const menu = use(MenuContext);
+  if (!menu) {
+    throw new Error("useMenuContext must be used within a DropdownMenu.Root");
+  }
+  return menu;
+};
+const useMenuContent = () => {
+  const menu = useMenuContext();
+  return useMemo(
+    () => ({
+      contentProps: menu.getContentProps(),
+      itemElementsRef: menu.itemElementsRef
+    }),
+    [menu]
+  );
+};
+const useMenuItem = ({ onClick }) => {
+  const menu = useMenuContext();
+  const { onClose } = useOpenContext();
+  const item = useListItem();
+  return useMemo(
+    () => ({
+      ref: item.ref,
+      role: "menuitem",
+      tabIndex: menu.activeIndex === item.index ? 0 : -1,
+      ...menu.getItemProps({
+        onClick: (e) => {
+          onClick(e);
+          onClose();
+        }
+      })
+    }),
+    [item.index, item.ref, menu, onClick, onClose]
+  );
+};
+const useMenuTrigger = () => {
+  const menu = useMenuContext();
+  return useMemo(() => menu.getTriggerProps, [menu]);
+};
+export {
+  MenuContextProvider,
+  useMenuContent,
+  useMenuItem,
+  useMenuTrigger
+};

package/dist/components/dropdown-menu/index.d.ts

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

package/dist/components/dropdown-menu/index.js

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

package/dist/components/error-boundary/index.d.ts

@@ -0,0 +1 @@
+export { ErrorBoundary } from 'react-error-boundary';

package/dist/components/error-boundary/index.js

@@ -0,0 +1,4 @@
+import { ErrorBoundary } from "react-error-boundary";
+export {
+  ErrorBoundary
+};

package/dist/components/form/autocomplete/autocomplete.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import type { Option } from '../../../types/variables';
+type Props = {
+    id: string;
+    describedbyId: string | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    options: readonly Option[];
+    value: string[];
+    onChange: (value: string[]) => void;
+};
+export declare const Autocomplete: FC<Props>;
+export {};

package/dist/components/form/autocomplete/autocomplete.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "./../../../helpers/cn";
+import { IconButton } from "../../icon-button";
+import { CloseIcon } from "../../icons";
+const Autocomplete = ({
+  id,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  options,
+  value,
+  onChange
+}) => {
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [selectIndex, setSelectIndex] = useState();
+  const filteredOptions = options.filter(
+    (option) => option.label.includes(text)
+  );
+  const reset = useCallback(() => {
+    setText("");
+    setOpen(false);
+    setSelectIndex(void 0);
+  }, []);
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (ref.current?.contains(e.target)) return;
+      reset();
+    };
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, [reset]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-full rounded-md border border-border-base bg-bg-base shadow-xs",
+        "focus-within:bordertransparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info",
+        "has-aria-invalid:border-border-error",
+        "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute has-disabled:has-hover:hover:bg-bg-mute"
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-1", children: [
+            value.map((text2) => {
+              const label = options.find(
+                (option) => option.value === text2
+              )?.label;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "inline-flex items-center gap-2 rounded-full bg-bg-mute px-3 py-1 font-medium text-sm",
+                  tabIndex: -1,
+                  children: [
+                    label,
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        label: "\u9589\u3058\u308B",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          reset();
+                          onChange(value.filter((v) => v !== text2));
+                        },
+                        size: "sm",
+                        children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+                      }
+                    )
+                  ]
+                },
+                text2
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-autocomplete": "list",
+                "aria-controls": open ? `${id}_listbox` : void 0,
+                "aria-describedby": describedbyId,
+                "aria-expanded": open,
+                "aria-invalid": isInvalid,
+                "aria-required": isRequired,
+                autoComplete: "off",
+                className: cn(
+                  "grow bg-transparent focus-visible:outline-hidden",
+                  "disabled:cursor-not-allowed"
+                ),
+                disabled: isDisabled,
+                id,
+                onBlur: (e) => {
+                  if (e.relatedTarget?.id.startsWith(`${id}_option_`)) {
+                    return;
+                  }
+                  setOpen(false);
+                },
+                onChange: (e) => {
+                  setOpen(true);
+                  setText(e.target.value);
+                  setSelectIndex(void 0);
+                },
+                onClick: () => {
+                  if (open && text.length === 0) {
+                    setOpen(false);
+                    return;
+                  }
+                  setOpen(true);
+                  setSelectIndex(void 0);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Backspace" && text.length === 0) {
+                    reset();
+                    onChange(value.slice(0, -1));
+                    return;
+                  }
+                  if (e.key === "ArrowDown") {
+                    setOpen(true);
+                    setSelectIndex((prev) => {
+                      if (prev === void 0) {
+                        return 0;
+                      }
+                      return Math.min(prev + 1, options.length - 1);
+                    });
+                    return;
+                  }
+                  if (e.key === "ArrowUp") {
+                    setOpen(true);
+                    setSelectIndex((prev) => {
+                      if (prev === void 0) {
+                        return 0;
+                      }
+                      return Math.max(prev - 1, 0);
+                    });
+                    return;
+                  }
+                  if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
+                    const selected = filteredOptions[selectIndex];
+                    if (!selected) {
+                      return;
+                    }
+                    if (value.includes(selected.value)) {
+                      onChange(value.filter((v) => v !== selected.value));
+                      reset();
+                      return;
+                    }
+                    onChange([...value, selected.value]);
+                    reset();
+                    return;
+                  }
+                },
+                placeholder: "\u5165\u529B\u3057\u3066\u7D5E\u308A\u8FBC\u3081\u307E\u3059",
+                role: "combobox",
+                type: "text",
+                value: text
+              }
+            )
+          ] }),
+          value.length > 0 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: "\u3059\u3079\u3066\u9589\u3058\u308B",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange([]);
+              },
+              size: "sm",
+              children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full", children: open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1 z-10 w-full rounded-md border border-border-mute bg-bg-base shadow-md",
+            role: "presentation",
+            children: /* @__PURE__ */ jsxs("ul", { className: "max-h-96 py-2", id: `${id}_listbox`, children: [
+              filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-fg-mute", children: "\u8A72\u5F53\u306A\u3057" }),
+              filteredOptions.map((option, idx) => {
+                const selected = value.includes(option.value);
+                return /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    className: cn(
+                      "cursor-pointer px-3 py-2",
+                      selected && "bg-primary-bg text-fg-inverse",
+                      selectIndex === idx && !selected && "bg-bg-emphasize",
+                      selectIndex === idx && selected && "hover:bg-primary-bg/90"
+                    ),
+                    id: `${id}_option_${option.value}`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      reset();
+                      if (selected) {
+                        onChange(value.filter((v) => v !== option.value));
+                        return;
+                      }
+                      onChange([...value, option.value]);
+                    },
+                    onKeyDown: (e) => {
+                      e.preventDefault();
+                    },
+                    onMouseEnter: () => {
+                      setSelectIndex(idx);
+                    },
+                    tabIndex: -1,
+                    children: option.label
+                  },
+                  option.value
+                );
+              })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Autocomplete
+};