@k8o/arte-odyssey 0.0.0

package/dist/components/index.d.ts

@@ -0,0 +1,37 @@
+export * from './accordion';
+export * from './alert';
+export * from './anchor';
+export * from './baseline-status';
+export * from './breadcrumb';
+export * from './button';
+export * from './card';
+export * from './code';
+export * from './dialog';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './error-boundary';
+export * from './form/autocomplete';
+export * from './form/checkbox';
+export * from './form/form-control';
+export * from './form/number-field';
+export * from './form/radio';
+export * from './form/range-field';
+export * from './form/select';
+export * from './form/text-field';
+export * from './form/textarea';
+export * from './heading';
+export * from './icon-button';
+export * from './icon-link';
+export * from './icons';
+export * from './link-button';
+export * from './list-box';
+export * from './modal';
+export * from './popover';
+export * from './progress';
+export * from './providers';
+export * from './scroll-linked';
+export * from './separator';
+export * from './tabs';
+export * from './text-tag';
+export * from './toast';
+export * from './tooltip';

package/dist/components/index.js

@@ -0,0 +1,37 @@
+export * from "./accordion";
+export * from "./alert";
+export * from "./anchor";
+export * from "./baseline-status";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./code";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./dropdown-menu";
+export * from "./error-boundary";
+export * from "./form/autocomplete";
+export * from "./form/checkbox";
+export * from "./form/form-control";
+export * from "./form/number-field";
+export * from "./form/radio";
+export * from "./form/range-field";
+export * from "./form/select";
+export * from "./form/text-field";
+export * from "./form/textarea";
+export * from "./heading";
+export * from "./icon-button";
+export * from "./icon-link";
+export * from "./icons";
+export * from "./link-button";
+export * from "./list-box";
+export * from "./modal";
+export * from "./popover";
+export * from "./progress";
+export * from "./providers";
+export * from "./scroll-linked";
+export * from "./separator";
+export * from "./tabs";
+export * from "./text-tag";
+export * from "./toast";
+export * from "./tooltip";

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

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

package/dist/components/link-button/index.js

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

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

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react';
+export declare const LinkButton: FC<{
+    variant?: 'contained' | 'outlined' | 'skeleton';
+    size?: 'sm' | 'md' | 'lg';
+    href: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    active?: boolean;
+    openInNewTab?: boolean;
+    children: string;
+    renderAnchor?: (props: {
+        'aria-label'?: string;
+        href: string;
+        className: string;
+        target?: string;
+        rel?: string;
+        children: ReactNode;
+    }) => ReactNode;
+}>;

package/dist/components/link-button/link-button.js

@@ -0,0 +1,46 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+import { isInternalRoute } from "./../../helpers/is-internal-route";
+const LinkButton = ({
+  children,
+  size = "md",
+  variant = "contained",
+  href,
+  startIcon,
+  endIcon,
+  active = false,
+  openInNewTab = false,
+  renderAnchor = ({ children: children2, ...props }) => /* @__PURE__ */ jsx("a", { ...props, children: children2 })
+}) => {
+  const type = isInternalRoute(href) && !openInNewTab ? "internal" : "external";
+  const props = type === "internal" ? {} : { target: "_blank", rel: "noopener noreferrer" };
+  const className = cn(
+    "rounded-lg text-center font-bold",
+    {
+      "bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained",
+      "border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize border-2": variant === "outlined",
+      "bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton"
+    },
+    "focus-visible:border-transparent focus-visible:ring-border-info focus-visible:ring-2 focus-visible:outline-hidden",
+    size === "sm" && "px-3 py-1 text-sm",
+    size === "md" && "text-md px-4 py-2",
+    size === "lg" && "px-6 py-3 text-lg",
+    Boolean(startIcon ?? endIcon) && "flex items-center gap-2",
+    Boolean(endIcon) && "justify-between",
+    active && "text-fg-info hover:text-fg-info active:text-fg-info"
+  );
+  return renderAnchor({
+    href,
+    className,
+    "aria-label": children,
+    ...props,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      startIcon,
+      children,
+      endIcon
+    ] })
+  });
+};
+export {
+  LinkButton
+};

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { CopyIcon } from "../icons";
+import { LinkButton } from "./link-button";
+const meta = {
+  title: "components/link-button",
+  component: LinkButton,
+  args: {
+    href: "",
+    children: "\u30DC\u30BF\u30F3"
+  }
+};
+var link_button_stories_default = meta;
+const Large = {
+  args: {
+    size: "lg"
+  }
+};
+const Medium = {
+  args: {
+    size: "md"
+  }
+};
+const Small = {
+  args: {
+    size: "sm"
+  }
+};
+const Outline = {
+  args: {
+    variant: "outlined"
+  }
+};
+const StartIcon = {
+  args: {
+    startIcon: /* @__PURE__ */ jsx(CopyIcon, {})
+  }
+};
+const EndIcon = {
+  args: {
+    endIcon: /* @__PURE__ */ jsx(CopyIcon, {})
+  }
+};
+export {
+  EndIcon,
+  Large,
+  Medium,
+  Outline,
+  Small,
+  StartIcon,
+  link_button_stories_default as default
+};

package/dist/components/list-box/hooks.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLProps, type RefObject } from 'react';
+export type Option = {
+    key: string;
+    label: string;
+};
+type MenuContext = {
+    options: Option[];
+    activeIndex: number | null;
+    selectedIndex: number | null;
+    handleSelect: (index: number) => void;
+    itemElementsRef: RefObject<(HTMLElement | null)[]>;
+    getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getContentProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'>) => Record<string, unknown>;
+};
+declare const MenuContext: React.Context<MenuContext | null>;
+export declare const MenuContextProvider: React.Context<MenuContext | null>;
+export declare const useMenuContent: () => {
+    options: Option[];
+    selectedIndex: number | null;
+    contentProps: Record<string, unknown>;
+    itemElementsRef: RefObject<(HTMLElement | null)[]>;
+};
+export declare const useMenuItem: (index: number) => {
+    selected: boolean;
+    props: {
+        ref: (node: HTMLElement | null) => void;
+        'aria-selected': boolean;
+        role: string;
+        tabIndex: number;
+    };
+};
+export declare const useMenuTrigger: () => {
+    label: string;
+    getTriggerProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+export {};

package/dist/components/list-box/hooks.js

@@ -0,0 +1,70 @@
+"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(
+    () => ({
+      options: menu.options,
+      selectedIndex: menu.selectedIndex,
+      contentProps: menu.getContentProps(),
+      itemElementsRef: menu.itemElementsRef
+    }),
+    [menu]
+  );
+};
+const useMenuItem = (index) => {
+  const menu = useMenuContext();
+  const { onClose } = useOpenContext();
+  const item = useListItem();
+  return useMemo(
+    () => ({
+      selected: menu.selectedIndex === index,
+      props: {
+        ref: item.ref,
+        "aria-selected": menu.selectedIndex === index,
+        role: "option",
+        tabIndex: menu.activeIndex === item.index ? 0 : -1,
+        ...menu.getItemProps({
+          onClick: () => {
+            menu.handleSelect(index);
+            onClose();
+          }
+        })
+      }
+    }),
+    [index, item.index, item.ref, menu, onClose]
+  );
+};
+const useMenuTrigger = () => {
+  const menu = useMenuContext();
+  const defaultLabel = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044";
+  const label = menu.selectedIndex !== null ? menu.options[menu.selectedIndex]?.label ?? defaultLabel : defaultLabel;
+  return useMemo(
+    () => ({
+      label,
+      getTriggerProps: menu.getTriggerProps
+    }),
+    [label, menu.getTriggerProps]
+  );
+};
+export {
+  MenuContextProvider,
+  useMenuContent,
+  useMenuItem,
+  useMenuTrigger
+};

package/dist/components/list-box/index.d.ts

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

package/dist/components/list-box/index.js

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

package/dist/components/list-box/list-box.d.ts

@@ -0,0 +1,22 @@
+import { type Placement } from '@floating-ui/react';
+import { type ComponentProps, type FC, type PropsWithChildren, type ReactElement } from 'react';
+import { Button } from '../button';
+import { type Option } from './hooks';
+export declare const ListBox: {
+    Root: FC<PropsWithChildren<{
+        placement?: Placement;
+        options: Option[];
+        value: Option["key"] | undefined;
+        onSelect: (key: Option["key"]) => void;
+    }>>;
+    Content: FC<{
+        helpContent?: ReactElement;
+    }>;
+    Trigger: FC<{
+        size?: ComponentProps<typeof Button>["size"];
+    }>;
+    TriggerIcon: FC<{
+        size?: ComponentProps<typeof Button>["size"];
+        icon: ReactElement;
+    }>;
+};

package/dist/components/list-box/list-box.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } 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 { CheckIcon, ChevronIcon } from "../icons";
+import { Popover } from "../popover";
+import { useFloatingUIContext } from "../popover/hooks";
+import {
+  MenuContextProvider,
+  useMenuContent,
+  useMenuItem,
+  useMenuTrigger
+} from "./hooks";
+const Root = ({ children, placement = "bottom", options, value, onSelect }) => {
+  return /* @__PURE__ */ jsx(Popover.Root, { flipDisabled: true, placement, type: "listbox", children: /* @__PURE__ */ jsx(MenuProvider, { onSelect, options, value, children }) });
+};
+const MenuProvider = ({ children, options, onSelect, value }) => {
+  const selectedIndex = options.findIndex((option) => option.key === value);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const itemElementsRef = useRef([]);
+  const context = useFloatingUIContext();
+  const listNavigation = useListNavigation(context, {
+    listRef: itemElementsRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [listNavigation]
+  );
+  const handleSelect = (index) => {
+    const key = options[index]?.key;
+    if (key) {
+      onSelect(key);
+    }
+    return;
+  };
+  return /* @__PURE__ */ jsx(
+    MenuContextProvider,
+    {
+      value: {
+        options,
+        activeIndex,
+        selectedIndex,
+        handleSelect,
+        itemElementsRef,
+        getTriggerProps: getReferenceProps,
+        getContentProps: getFloatingProps,
+        getItemProps
+      },
+      children
+    }
+  );
+};
+const Content = ({ helpContent }) => {
+  const { options, contentProps, itemElementsRef } = useMenuContent();
+  return /* @__PURE__ */ jsx(FloatingList, { elementsRef: itemElementsRef, children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ...contentProps,
+          className: "flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg border border-border-mute bg-bg-base py-2 shadow-xl",
+          children: [
+            helpContent,
+            options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, { index: idx, label }, key))
+          ]
+        }
+      )
+    }
+  ) });
+};
+const Item = ({ label, index }) => {
+  const { props, selected } = useMenuItem(index);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "group 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",
+        !selected && "pl-9",
+        selected && "inline-flex items-center gap-1"
+      ),
+      ...props,
+      children: [
+        selected && /* @__PURE__ */ jsx("span", { className: "text-fg-success group-hover:text-fg-base group-focus-visible:text-fg-base", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        label
+      ]
+    }
+  );
+};
+const Trigger = ({ size = "md" }) => {
+  const { label, getTriggerProps } = useMenuTrigger();
+  return /* @__PURE__ */ jsx(
+    Popover.Trigger,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": label,
+          color: "gray",
+          endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
+          fullWidth: true,
+          size,
+          type: "button",
+          variant: "contained",
+          ...getTriggerProps(props),
+          children: label
+        }
+      )
+    }
+  );
+};
+const TriggerIcon = ({ size = "md", icon }) => {
+  const { label, getTriggerProps } = useMenuTrigger();
+  return /* @__PURE__ */ jsx(
+    Popover.Trigger,
+    {
+      renderItem: (props) => /* @__PURE__ */ jsx(IconButton, { label, size, ...getTriggerProps(props), children: icon })
+    }
+  );
+};
+const ListBox = {
+  Root,
+  Content,
+  Trigger,
+  TriggerIcon
+};
+export {
+  ListBox
+};

package/dist/components/list-box/list-box.stories.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ListBox } from "./list-box";
+const meta = {
+  title: "components/list-box",
+  component: ListBox.Root,
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // https://github.com/floating-ui/floating-ui/pull/2298#issuecomment-1518101512
+          "aria-hidden-focus": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var list_box_stories_default = meta;
+const OPTIONS = [
+  { key: "1", label: "apple" },
+  { key: "2", label: "banana" },
+  { key: "3", label: "cherry" },
+  { key: "4", label: "date" },
+  { key: "5", label: "elderberry" },
+  { key: "6", label: "fig" },
+  { key: "7", label: "grape" },
+  { key: "8", label: "honeydew" },
+  { key: "9", label: "kiwi" },
+  { key: "10", label: "lemon" },
+  { key: "11", label: "mango" },
+  { key: "12", label: "nectarine" },
+  { key: "13", label: "orange" },
+  { key: "14", label: "pear" },
+  { key: "15", label: "quince" },
+  { key: "16", label: "raspberry" },
+  { key: "17", label: "strawberry" },
+  { key: "18", label: "tangerine" },
+  { key: "19", label: "watermelon" }
+];
+const Default = {
+  render: () => {
+    const [selected, setSelected] = useState();
+    return /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsxs(
+      ListBox.Root,
+      {
+        onSelect: (key) => {
+          setSelected(key);
+        },
+        options: OPTIONS,
+        value: selected,
+        children: [
+          /* @__PURE__ */ jsx(ListBox.Trigger, {}),
+          /* @__PURE__ */ jsx(ListBox.Content, {})
+        ]
+      }
+    ) });
+  },
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("combobox", {
+      name: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+export {
+  Default,
+  list_box_stories_default as default
+};

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

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

package/dist/components/modal/index.js

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

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type PropsWithChildren, type RefObject } from 'react';
+export declare const Modal: FC<PropsWithChildren<{
+    ref?: RefObject<HTMLDialogElement | null>;
+    type?: 'center' | 'bottom' | 'right';
+    defaultOpen?: boolean;
+    isOpen?: boolean;
+    onClose?: () => void;
+}>>;

package/dist/components/modal/modal.js

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import * as motion from "motion/react-client";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "./../../helpers/cn";
+import { ToastProvider } from "../toast";
+const centerVariants = {
+  open: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  closed: {
+    opacity: 0,
+    scale: 0.9,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  }
+};
+const bottomVariants = {
+  open: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  closed: {
+    opacity: 0,
+    y: "100%",
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  }
+};
+const rightVariants = {
+  open: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  closed: {
+    opacity: 0,
+    x: "100%",
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  }
+};
+const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children }) => {
+  const dialogRef = useRef(null);
+  const [dialogOpen, setDialogOpen] = useState(defaultOpen ?? false);
+  const realDialogOpen = isOpen === true || isOpen === false ? isOpen : dialogOpen;
+  const realOnClose = useCallback(() => {
+    onClose?.();
+    if (isOpen === void 0) {
+      return;
+    }
+    setDialogOpen(false);
+  }, [isOpen, onClose]);
+  const realRef = ref ?? dialogRef;
+  useEffect(() => {
+    if (realDialogOpen === realRef.current?.open) {
+      return;
+    }
+    if (realDialogOpen) {
+      realRef.current?.showModal();
+    } else {
+      realRef.current?.close();
+    }
+  }, [
+    realDialogOpen,
+    realRef.current?.close,
+    realRef.current?.open,
+    realRef.current?.showModal
+  ]);
+  return /* @__PURE__ */ jsx(
+    motion.dialog,
+    {
+      animate: realDialogOpen ? "open" : "closed",
+      className: cn(
+        "border-border-mute bg-bg-base shadow-xl backdrop:bg-back-drop",
+        type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg dark:border",
+        type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg dark:border-t",
+        type === "right" && "ml-auto min-h-svh w-screen max-w-sm rounded-l-lg dark:border-l"
+      ),
+      exit: "closed",
+      initial: "closed",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          realRef.current?.close();
+        }
+      },
+      onClose: realOnClose,
+      ref: realRef,
+      variants: type === "center" ? centerVariants : type === "bottom" ? bottomVariants : rightVariants,
+      children: /* @__PURE__ */ jsx(ToastProvider, { portalRef: realRef, position: "absolute", children })
+    }
+  );
+};
+export {
+  Modal
+};