@k8o/arte-odyssey 0.0.0

package/dist/components/modal/modal.stories.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fn } from "storybook/test";
+import { Dialog } from "../dialog";
+import { Modal } from "./modal";
+const meta = {
+  title: "components/modal",
+  component: Modal
+};
+var modal_stories_default = meta;
+const Default = {
+  args: {
+    defaultOpen: true,
+    children: /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { onClose: fn(), title: "Hello" }),
+      /* @__PURE__ */ jsx(Dialog.Content, { children: "World" })
+    ] })
+  }
+};
+export {
+  Default,
+  modal_stories_default as default
+};

package/dist/components/popover/hooks.d.ts

@@ -0,0 +1,65 @@
+import type { FloatingContext, Placement, ReferenceType } from '@floating-ui/react';
+import { type CSSProperties, type HTMLProps, type RefObject } from 'react';
+type PopoverContext = {
+    rootId: string;
+    type: 'dialog' | 'menu' | 'tooltip' | 'listbox';
+    isOpen: boolean;
+    toggleOpen: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+    context: FloatingContext;
+    placement: Placement;
+    triggerRef: RefObject<Element | null>;
+    setTriggerRef: (node: ReferenceType | null) => void;
+    setContentRef: (node: HTMLElement | null) => void;
+    contentStyles: CSSProperties;
+};
+declare const PopoverContext: React.Context<PopoverContext | null>;
+export declare const PopoverProvider: React.Context<PopoverContext | null>;
+export declare const useFloatingUIContext: () => FloatingContext;
+export declare const usePlacement: () => Placement;
+export declare const useOpenContext: () => {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    toggleOpen: () => void;
+};
+export declare const usePopoverContent: () => {
+    id: string;
+    ref: RefObject<HTMLDivElement | null>;
+    isOpen: boolean;
+    isHover: boolean;
+    context: FloatingContext;
+    setContentRef: (node: HTMLElement | null) => void;
+    contentStyles: CSSProperties;
+    itemProps: {
+        id: string;
+        ref: RefObject<HTMLDivElement | null>;
+        role: string;
+        'aria-orientation'?: undefined;
+        onMouseEnter?: undefined;
+        onMouseLeave?: undefined;
+        onFocus?: undefined;
+        onBlur?: undefined;
+    } | {
+        id: string;
+        ref: RefObject<HTMLDivElement | null>;
+        role: string;
+        'aria-orientation': string;
+        onMouseEnter?: undefined;
+        onMouseLeave?: undefined;
+        onFocus?: undefined;
+        onBlur?: undefined;
+    } | {
+        id: string;
+        ref: RefObject<HTMLDivElement | null>;
+        role: string;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        'aria-orientation'?: undefined;
+    };
+};
+export declare const usePopoverTrigger: () => Omit<HTMLProps<HTMLButtonElement>, "selected" | "active">;
+export {};

package/dist/components/popover/hooks.js

@@ -0,0 +1,187 @@
+"use client";
+import {
+  createContext,
+  use,
+  useMemo
+} from "react";
+import { useClickAway } from "./../../hooks/click-away";
+const PopoverContext = createContext(null);
+const PopoverProvider = PopoverContext;
+const usePopoverContext = () => {
+  const popover = use(PopoverContext);
+  if (!popover) {
+    throw new Error("usePopoverContext must be used within a Popover.Root");
+  }
+  return popover;
+};
+const useFloatingUIContext = () => {
+  const popover = usePopoverContext();
+  return useMemo(() => popover.context, [popover]);
+};
+const usePlacement = () => {
+  const popover = usePopoverContext();
+  return popover.placement;
+};
+const useOpenContext = () => {
+  const popover = usePopoverContext();
+  return useMemo(
+    () => ({
+      isOpen: popover.isOpen,
+      onOpen: popover.onOpen,
+      onClose: popover.onClose,
+      toggleOpen: popover.toggleOpen
+    }),
+    [popover.isOpen, popover.onClose, popover.onOpen, popover.toggleOpen]
+  );
+};
+const usePopoverContent = () => {
+  const popover = usePopoverContext();
+  const isHover = popover.type === "tooltip";
+  const ref = useClickAway((event) => {
+    if (!popover.isOpen) {
+      return;
+    }
+    if (popover.triggerRef.current?.contains(event.target)) {
+      return;
+    }
+    popover.onClose();
+  }, !isHover);
+  const itemProps = useMemo(() => {
+    switch (popover.type) {
+      case "dialog":
+        return {
+          id: `${popover.rootId}_list`,
+          ref,
+          role: "dialog"
+        };
+      case "menu":
+        return {
+          id: `${popover.rootId}_list`,
+          ref,
+          role: "menu",
+          "aria-orientation": "vertical"
+        };
+      case "tooltip":
+        return {
+          id: `${popover.rootId}_list`,
+          ref,
+          role: "tooltip",
+          onMouseEnter: popover.onOpen,
+          onMouseLeave: popover.onClose,
+          onFocus: popover.onOpen,
+          onBlur: popover.onClose
+        };
+      case "listbox":
+        return {
+          id: `${popover.rootId}_list`,
+          ref,
+          role: "listbox"
+        };
+    }
+  }, [popover.rootId, popover.type, ref, popover.onClose, popover.onOpen]);
+  return useMemo(
+    () => ({
+      id: `${popover.rootId}_list`,
+      ref,
+      isOpen: popover.isOpen,
+      isHover,
+      context: popover.context,
+      setContentRef: popover.setContentRef,
+      contentStyles: popover.contentStyles,
+      itemProps
+    }),
+    [
+      popover.rootId,
+      popover.isOpen,
+      popover.context,
+      popover.setContentRef,
+      popover.contentStyles,
+      ref,
+      isHover,
+      itemProps
+    ]
+  );
+};
+const usePopoverTrigger = () => {
+  const popover = usePopoverContext();
+  return useMemo(() => {
+    switch (popover.type) {
+      case "dialog":
+        return {
+          onClick: popover.toggleOpen,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              popover.toggleOpen();
+            }
+          },
+          "aria-haspopup": "dialog",
+          "aria-expanded": popover.isOpen,
+          "aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
+          ref: popover.setTriggerRef
+        };
+      case "tooltip":
+        return {
+          onMouseEnter: popover.onOpen,
+          onMouseLeave: popover.onClose,
+          onFocus: popover.onOpen,
+          onBlur: popover.onClose,
+          "aria-describedby": `${popover.rootId}_content`,
+          ref: popover.setTriggerRef
+        };
+      case "menu":
+        return {
+          onClick: popover.toggleOpen,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              popover.toggleOpen();
+            }
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              popover.onOpen();
+            }
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              popover.onOpen();
+            }
+          },
+          "aria-haspopup": "menu",
+          "aria-expanded": popover.isOpen,
+          "aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
+          ref: popover.setTriggerRef
+        };
+      case "listbox":
+        return {
+          onClick: popover.toggleOpen,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              popover.toggleOpen();
+            }
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              popover.onOpen();
+            }
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              popover.onOpen();
+            }
+          },
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": popover.isOpen,
+          "aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
+          ref: popover.setTriggerRef
+        };
+    }
+  }, [popover]);
+};
+export {
+  PopoverProvider,
+  useFloatingUIContext,
+  useOpenContext,
+  usePlacement,
+  usePopoverContent,
+  usePopoverTrigger
+};

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

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

package/dist/components/popover/index.js

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,18 @@
+import { type Placement } from '@floating-ui/react';
+import { type Variants } from 'motion/react';
+import { type FC, type HTMLProps, type PropsWithChildren, type ReactElement } from 'react';
+export { useOpenContext } from './hooks';
+export declare const Popover: {
+    Root: FC<PropsWithChildren<{
+        placement?: Placement;
+        type?: "dialog" | "menu" | "tooltip" | "listbox";
+        flipDisabled?: boolean;
+    }>>;
+    Content: FC<{
+        renderItem: (props: Record<string, unknown>) => ReactElement;
+        motionVariants?: Variants;
+    }>;
+    Trigger: FC<{
+        renderItem: (props: Omit<HTMLProps<HTMLButtonElement>, "selected" | "active" | "color">) => ReactElement;
+    }>;
+};

package/dist/components/popover/popover.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  FloatingPortal,
+  flip,
+  offset,
+  useFloating
+} from "@floating-ui/react";
+import { AnimatePresence } from "motion/react";
+import * as motion from "motion/react-client";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useState
+} from "react";
+import { usePortalRoot } from "../providers";
+import { PopoverProvider, usePopoverContent, usePopoverTrigger } from "./hooks";
+import { useOpenContext } from "./hooks";
+const Root = ({
+  children,
+  type = "menu",
+  placement = "bottom-start",
+  flipDisabled = false
+}) => {
+  const id = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    placement: computedPlacement
+  } = useFloating({
+    strategy: "fixed",
+    placement,
+    open: isOpen,
+    whileElementsMounted: autoUpdate,
+    // 要素と8pxだけ離す
+    middleware: [
+      offset(8),
+      !flipDisabled && flip({
+        fallbackAxisSideDirection: "end",
+        padding: 8
+      })
+    ],
+    transform: false
+  });
+  const toggleOpen = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    PopoverProvider,
+    {
+      value: {
+        rootId: id,
+        type,
+        isOpen,
+        toggleOpen,
+        onOpen,
+        onClose,
+        context,
+        placement: computedPlacement,
+        triggerRef: refs.domReference,
+        setTriggerRef: refs.setReference,
+        setContentRef: refs.setFloating,
+        contentStyles: floatingStyles
+      },
+      children
+    }
+  );
+};
+const contentMotionVariants = {
+  closed: {
+    scale: 0,
+    transition: {
+      delay: 0.1
+    }
+  },
+  open: {
+    scale: 1,
+    transition: {
+      type: "spring",
+      duration: 0.2
+    }
+  }
+};
+const Content = ({ renderItem, motionVariants = contentMotionVariants }) => {
+  const { isOpen, isHover, context, setContentRef, contentStyles, itemProps } = usePopoverContent();
+  const root = usePortalRoot();
+  const protalProps = root ? { root } : {};
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, { ...protalProps, children: /* @__PURE__ */ jsx(
+    FloatingFocusManager,
+    {
+      context,
+      disabled: isHover,
+      modal: false,
+      children: /* @__PURE__ */ jsx("div", { ref: setContentRef, style: contentStyles, children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: "open",
+          exit: "closed",
+          initial: "closed",
+          variants: motionVariants,
+          children: renderItem(itemProps)
+        }
+      ) })
+    }
+  ) }) });
+};
+const Trigger = ({ renderItem }) => {
+  const props = usePopoverTrigger();
+  return renderItem(props);
+};
+const Popover = {
+  Root,
+  Content,
+  Trigger
+};
+export {
+  Popover,
+  useOpenContext
+};

package/dist/components/popover/popover.stories.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../button";
+import { Popover } from "./popover";
+const meta = {
+  title: "components/popover",
+  component: Popover.Root,
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // https://github.com/floating-ui/floating-ui/pull/2298#issuecomment-1518101512
+          "aria-hidden-focus": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var popover_stories_default = meta;
+const Default = {
+  render: () => /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(
+      Popover.Trigger,
+      {
+        renderItem: (props) => /* @__PURE__ */ jsx(Button, { ...props, size: "md", type: "button", children: "Popover" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        renderItem: (props) => /* @__PURE__ */ jsx("div", { className: "rounded-sm bg-bg-mute p-4 shadow-md", ...props, children: /* @__PURE__ */ jsx("div", { role: "menuitem", children: "Popover content" }) })
+      }
+    )
+  ] }),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", {
+      name: "Popover"
+    });
+    trigger.focus();
+    await userEvent.keyboard("{Enter}");
+  }
+};
+export {
+  Default,
+  popover_stories_default as default
+};

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

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

package/dist/components/progress/index.js

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

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export declare const Progress: FC<{
+    progress: number;
+    maxProgress: number;
+    minProgress?: number;
+    label?: string;
+}>;

package/dist/components/progress/progress.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { toPrecision } from "./../../helpers/number";
+const Progress = ({ progress, maxProgress, minProgress = 0, label }) => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full rounded-sm bg-bg-emphasize", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
+      "aria-valuemax": maxProgress,
+      "aria-valuemin": minProgress,
+      "aria-valuenow": progress,
+      className: "h-4 rounded-sm bg-primary-fg",
+      role: "progressbar",
+      style: {
+        width: `${(progress / maxProgress * 100).toString()}%`
+      }
+    }
+  ) });
+};
+export {
+  Progress
+};

package/dist/components/progress/progress.stories.js

@@ -0,0 +1,16 @@
+import { Progress } from ".";
+const meta = {
+  title: "components/progress",
+  component: Progress
+};
+var progress_stories_default = meta;
+const Primary = {
+  args: {
+    progress: 50,
+    maxProgress: 100
+  }
+};
+export {
+  Primary,
+  progress_stories_default as default
+};

package/dist/components/providers/component-provider.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const ComponentProvider: FC<PropsWithChildren>;

package/dist/components/providers/component-provider.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { MotionConfig } from "motion/react";
+import { ToastProvider } from "../toast";
+const ComponentProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", children: /* @__PURE__ */ jsx(ToastProvider, { children }) });
+};
+export {
+  ComponentProvider
+};

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

@@ -0,0 +1,2 @@
+export * from './component-provider';
+export * from './portal-root';

package/dist/components/providers/index.js

@@ -0,0 +1,2 @@
+export * from "./component-provider";
+export * from "./portal-root";

package/dist/components/providers/portal-root.d.ts

@@ -0,0 +1,5 @@
+import { type FC, type PropsWithChildren, type RefObject } from 'react';
+export declare const usePortalRoot: () => RefObject<HTMLElement | null> | undefined;
+export declare const PortalRootProvider: FC<PropsWithChildren<{
+    value?: RefObject<HTMLElement | null> | undefined;
+}>>;

package/dist/components/providers/portal-root.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  use
+} from "react";
+const PortalRootContext = createContext(void 0);
+const usePortalRoot = () => {
+  return use(PortalRootContext);
+};
+const PortalRootProvider = ({ value, children }) => {
+  return /* @__PURE__ */ jsx(PortalRootContext, { value, children });
+};
+export {
+  PortalRootProvider,
+  usePortalRoot
+};

package/dist/components/scroll-linked/index.d.ts

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

package/dist/components/scroll-linked/index.js

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

package/dist/components/scroll-linked/scroll-linked.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const ScrollLinked: FC;

package/dist/components/scroll-linked/scroll-linked.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { motion, useScroll, useSpring } from "motion/react";
+const ScrollLinked = () => {
+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.01
+  });
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "fixed top-0 right-0 left-0 h-2 origin-left bg-primary-fg",
+      style: { scaleX }
+    }
+  );
+};
+export {
+  ScrollLinked
+};

package/dist/components/scroll-linked/scroll-linked.stories.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollLinked } from "./scroll-linked";
+const meta = {
+  title: "components/scroll-linked",
+  component: ScrollLinked
+};
+var scroll_linked_stories_default = meta;
+const NoScroll = {};
+const Scroll = {
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx("div", { className: "h-lvh overflow-y-scroll", children: /* @__PURE__ */ jsx(Story, {}) })
+  ]
+};
+export {
+  NoScroll,
+  Scroll,
+  scroll_linked_stories_default as default
+};

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

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

package/dist/components/separator/index.js

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

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+export declare const Separator: FC<{
+    orientation?: 'horizontal' | 'vertical';
+}>;

package/dist/components/separator/separator.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const Separator = ({ orientation = "horizontal" }) => {
+  const isVertical = orientation === "vertical";
+  const Element = isVertical ? "div" : "hr";
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "aria-orientation": isVertical ? "vertical" : void 0,
+      className: cn("bg-border-base", {
+        "h-full w-px": isVertical,
+        "h-px w-full": !isVertical
+      }),
+      role: isVertical ? "separator" : void 0
+    }
+  );
+};
+export {
+  Separator
+};