@k8o/arte-odyssey 0.0.0

package/dist/components/form/textarea/textarea.stories.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { Textarea } from "./textarea";
+const meta = {
+  title: "components/form/textarea",
+  component: Textarea,
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx("div", { className: "h-screen", children: /* @__PURE__ */ jsx(Story, {}) })
+  ],
+  args: {
+    id: "textarea",
+    describedbyId: "textarea-feedback",
+    value: "10",
+    onChange: (e) => {
+      console.log(e.target.value);
+    }
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // TextArea単体ではラベルを付随しない
+          label: { enabled: false },
+          "label-title-only": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var textarea_stories_default = meta;
+const Default = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+const FullHeight = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    fullHeight: true
+  }
+};
+const AutoResize = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    autoResize: true
+  }
+};
+const Rows = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    rows: 10
+  }
+};
+const Placeholder = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    placeholder: "10\u9032\u6570"
+  }
+};
+const Invalid = {
+  args: {
+    isDisabled: false,
+    isInvalid: true,
+    isRequired: false
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+export {
+  AutoResize,
+  Default,
+  Disabled,
+  FullHeight,
+  Invalid,
+  Placeholder,
+  Rows,
+  textarea_stories_default as default
+};

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    id?: string;
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    lineClamp?: number;
+}>;
+export declare const Heading: FC<Props>;
+export {};

package/dist/components/heading/heading.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const Heading = ({ children, id, type, lineClamp }) => {
+  if (type === "h1") {
+    return /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn("font-bold text-2xl md:text-3xl", {
+          [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+        }),
+        id,
+        children
+      }
+    );
+  }
+  if (type === "h2") {
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: cn("font-bold text-xl md:text-2xl", {
+          [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+        }),
+        id,
+        children
+      }
+    );
+  }
+  if (type === "h3") {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: cn("font-bold text-lg md:text-xl", {
+          [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+        }),
+        id,
+        children
+      }
+    );
+  }
+  if (type === "h4") {
+    return /* @__PURE__ */ jsx(
+      "h4",
+      {
+        className: cn("font-bold text-md md:text-lg", {
+          [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+        }),
+        id,
+        children
+      }
+    );
+  }
+  if (type === "h5") {
+    return /* @__PURE__ */ jsx(
+      "h5",
+      {
+        className: cn("font-bold text-sm md:text-md", {
+          [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+        }),
+        id,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "h6",
+    {
+      className: cn("font-bold text-xs md:text-sm", {
+        [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp
+      }),
+      id,
+      children
+    }
+  );
+};
+export {
+  Heading
+};

package/dist/components/heading/heading.stories.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { Heading } from "./heading";
+const meta = {
+  title: "components/heading",
+  component: Heading
+};
+var heading_stories_default = meta;
+const H1 = {
+  args: {
+    type: "h1"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+const H2 = {
+  args: {
+    type: "h2"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+const H3 = {
+  args: {
+    type: "h3"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+const H4 = {
+  args: {
+    type: "h4"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+const H5 = {
+  args: {
+    type: "h5"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+const H6 = {
+  args: {
+    type: "h6"
+  },
+  render: (args) => /* @__PURE__ */ jsx(Heading, { ...args, children: "k8o" })
+};
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  heading_stories_default as default
+};

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

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

package/dist/components/heading/index.js

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

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

@@ -0,0 +1,8 @@
+import type { FC, HTMLProps } from 'react';
+type Props = {
+    size?: 'sm' | 'md' | 'lg';
+    bg?: 'transparent' | 'base' | 'primary';
+    label: string;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+export declare const IconButton: FC<Props>;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+const IconButton = ({
+  ref,
+  size = "md",
+  bg = "transparent",
+  label,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": props.role ? label : void 0,
+      className: cn(
+        "inline-flex rounded-full bg-transparent",
+        "hover:bg-bg-subtle",
+        "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize",
+        bg === "base" && "bg-bg-base/90",
+        bg === "transparent" && "bg-transparent",
+        bg === "primary" && "bg-primary-bg/90 hover:bg-primary-bg active:bg-primary-bg-emphasize",
+        size === "sm" && "p-1",
+        size === "md" && "p-2",
+        size === "lg" && "p-3",
+        props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"
+      ),
+      ref,
+      ...props,
+      children: [
+        !props.role && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        children
+      ]
+    }
+  );
+};
+export {
+  IconButton
+};

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

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { CopyIcon } from "../icons";
+import { IconButton } from "./icon-button";
+const meta = {
+  title: "components/button/icon-button",
+  component: IconButton,
+  args: {
+    onClick: () => {
+      console.log("clicked");
+    },
+    label: "Copy",
+    children: /* @__PURE__ */ jsx(CopyIcon, {})
+  }
+};
+var icon_button_stories_default = meta;
+const Large = {
+  args: {
+    size: "lg"
+  }
+};
+const Medium = {
+  args: {
+    size: "md"
+  }
+};
+const Small = {
+  args: {
+    size: "sm"
+  }
+};
+const Disabled = {
+  args: {
+    disabled: true
+  }
+};
+const BgBase = {
+  args: {
+    bg: "base"
+  }
+};
+const BgPrimary = {
+  args: {
+    bg: "primary"
+  }
+};
+export {
+  BgBase,
+  BgPrimary,
+  Disabled,
+  Large,
+  Medium,
+  Small,
+  icon_button_stories_default as default
+};

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

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

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

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

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

@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+type IconLinkProps = PropsWithChildren<{
+    size?: 'sm' | 'md' | 'lg';
+    bg?: 'transparent' | 'base';
+    label?: string;
+    href: string;
+    openInNewTab?: boolean;
+    renderAnchor?: (props: {
+        href: string;
+        className: string;
+        target?: string;
+        rel?: string;
+        children: ReactNode;
+    }) => ReactNode;
+}>;
+export declare const IconLink: FC<IconLinkProps>;
+export {};

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

@@ -0,0 +1,37 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../helpers/cn";
+import { isInternalRoute } from "./../../helpers/is-internal-route";
+const IconLink = ({
+  size = "md",
+  bg = "transparent",
+  label,
+  href,
+  children,
+  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"
+  };
+  return renderAnchor({
+    href,
+    className: cn(
+      "inline-flex rounded-full hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info",
+      bg === "base" && "bg-bg-base/90",
+      bg === "transparent" && "bg-transparent",
+      size === "sm" && "p-1",
+      size === "md" && "p-2",
+      size === "lg" && "p-3"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+      children
+    ] })
+  });
+};
+export {
+  IconLink
+};

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

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { CopyIcon } from "../icons";
+import { IconLink } from "./icon-link";
+const meta = {
+  title: "components/icon-link",
+  component: IconLink,
+  args: {
+    href: "https://example.com",
+    children: /* @__PURE__ */ jsx(CopyIcon, {}),
+    label: "Copy to clipboard"
+  }
+};
+var icon_link_stories_default = meta;
+const Large = {
+  args: {
+    size: "lg"
+  }
+};
+const Medium = {
+  args: {
+    size: "md"
+  }
+};
+const Small = {
+  args: {
+    size: "sm"
+  }
+};
+const BgBase = {
+  args: {
+    bg: "base"
+  }
+};
+export {
+  BgBase,
+  Large,
+  Medium,
+  Small,
+  icon_link_stories_default as default
+};

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

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

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

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

package/dist/components/icons/arte-odyssey.d.ts

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