@k8o/arte-odyssey 0.0.0

package/dist/styles/index.css

@@ -0,0 +1,394 @@
+@import 'tailwindcss';
+@source '../components';
+
+@layer base {
+  body:has(dialog[open]) {
+    overflow: hidden;
+  }
+
+  dialog,
+  [popover] {
+    overscroll-behavior-block: contain;
+    color: var(--color-fg-base);
+  }
+
+  body {
+    text-spacing-trim: trim-start;
+    text-autospace: normal;
+    line-break: strict;
+    overflow-wrap: anywhere;
+    scrollbar-gutter: stable;
+    font-size: var(--text-md);
+    line-height: var(--text-md--line-height);
+  }
+
+  pre {
+    text-spacing-trim: space-all;
+    text-autospace: no-autospace;
+  }
+
+  time {
+    text-autospace: no-autospace;
+  }
+
+  input:not([type='button'], [type='submit'], [type='reset']),
+  textarea,
+  [contenteditable] {
+    text-autospace: no-autospace;
+  }
+
+  b,
+  strong,
+  em {
+    font-weight: unset;
+  }
+
+  i,
+  cite,
+  em,
+  dfn,
+  var,
+  address {
+    font-style: unset;
+  }
+
+  button,
+  [type='button'],
+  [type='submit'],
+  [type='reset'],
+  ::file-selector-button {
+    touch-action: manipulation;
+  }
+}
+
+/* dark・light themeの値を使うための宣言 */
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+
+:root {
+  --white: #ffffff;
+  --gray-50: #fafafa;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-400: #a1a1aa;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #991919;
+  --red-800: #511111;
+  --red-900: #300c0c;
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #a41752;
+  --pink-800: #6d0e34;
+  --pink-900: #45061f;
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-200: #e9d5ff;
+  --purple-300: #d8b4fe;
+  --purple-400: #c084fc;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --purple-700: #641ba3;
+  --purple-800: #4a1772;
+  --purple-900: #2f0553;
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0c5c72;
+  --cyan-800: #134152;
+  --cyan-900: #072a38;
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #a3cfff;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #173da6;
+  --blue-800: #1a3478;
+  --blue-900: #14204a;
+  --teal-50: #f0fdfa;
+  --teal-100: #ccfbf1;
+  --teal-200: #99f6e4;
+  --teal-300: #5eead4;
+  --teal-400: #2dd4bf;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9488;
+  --teal-700: #0c5d56;
+  --teal-800: #114240;
+  --teal-900: #032726;
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #bbf7d0;
+  --green-300: #86efac;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #116932;
+  --green-800: #124a28;
+  --green-900: #042713;
+  --yellow-50: #fefce8;
+  --yellow-100: #fef9c3;
+  --yellow-200: #fef08a;
+  --yellow-300: #fde047;
+  --yellow-400: #facc15;
+  --yellow-500: #eab308;
+  --yellow-600: #ca8a04;
+  --yellow-700: #845209;
+  --yellow-800: #713f12;
+  --yellow-900: #422006;
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #92310a;
+  --orange-800: #6c2710;
+  --orange-900: #3b1106;
+
+  --fg-base: var(--gray-900);
+  --fg-subtle: var(--gray-400);
+  --fg-mute: var(--gray-700);
+  --fg-inverse: var(--gray-50);
+  --fg-info: var(--blue-700);
+  --fg-success: var(--green-700);
+  --fg-warning: var(--yellow-700);
+  --fg-error: var(--red-700);
+
+  --bg-base: var(--white);
+  --bg-subtle: var(--gray-100);
+  --bg-mute: var(--gray-200);
+  --bg-emphasize: var(--gray-300);
+  --bg-inverse: var(--gray-900);
+  --bg-info: var(--blue-100);
+  --bg-success: var(--green-100);
+  --bg-warning: var(--yellow-100);
+  --bg-error: var(--red-100);
+
+  --border-base: var(--gray-400);
+  --border-subtle: var(--gray-100);
+  --border-mute: var(--gray-200);
+  --border-emphasize: var(--gray-500);
+  --border-inverse: var(--gray-700);
+  --border-info: var(--blue-500);
+  --border-success: var(--green-500);
+  --border-warning: var(--yellow-500);
+  --border-error: var(--red-500);
+
+  --primary-fg: var(--teal-700);
+  --primary-bg: var(--teal-300);
+  --primary-bg-subtle: var(--teal-100);
+  --primary-bg-mute: var(--teal-200);
+  --primary-bg-emphasize: var(--teal-300);
+  --primary-border: var(--teal-600);
+
+  --secondary-fg: var(--cyan-700);
+  --secondary-bg: var(--cyan-300);
+  --secondary-bg-subtle: var(--cyan-100);
+  --secondary-bg-mute: var(--cyan-200);
+  --secondary-bg-emphasize: var(--cyan-300);
+  --secondary-border: var(--cyan-600);
+
+  --back-drop: rgb(0, 0, 0, 0.5);
+
+  /* TODO: 上の変数の一環として使えるようにする */
+  --group-primary: var(--teal-700);
+  --group-secondary: var(--cyan-700);
+  --group-tertiary: var(--pink-700);
+  --group-quaternary: var(--purple-700);
+}
+.dark {
+  --fg-base: var(--gray-50);
+  --fg-subtle: var(--gray-500);
+  --fg-mute: var(--gray-300);
+  --fg-inverse: var(--gray-900);
+  --fg-info: var(--blue-300);
+  --fg-success: var(--green-300);
+  --fg-warning: var(--yellow-300);
+  --fg-error: var(--red-300);
+
+  --bg-base: var(--gray-900);
+  --bg-subtle: var(--gray-800);
+  --bg-mute: var(--gray-700);
+  --bg-emphasize: var(--gray-600);
+  --bg-inverse: var(--white);
+  --bg-info: var(--blue-900);
+  --bg-success: var(--green-900);
+  --bg-warning: var(--yellow-900);
+  --bg-error: var(--red-900);
+
+  --border-base: var(--gray-600);
+  --border-subtle: var(--gray-900);
+  --border-mute: var(--gray-800);
+  --border-emphasize: var(--gray-500);
+  --border-inverse: var(--gray-300);
+  --border-info: var(--blue-400);
+  --border-success: var(--green-400);
+  --border-warning: var(--yellow-400);
+  --border-error: var(--red-400);
+
+  --primary-fg: var(--teal-300);
+  --primary-bg: var(--teal-700);
+  --primary-bg-subtle: var(--teal-900);
+  --primary-bg-mute: var(--teal-800);
+  --primary-bg-emphasize: var(--teal-700);
+  --primary-border: var(--teal-600);
+
+  --secondary-fg: var(--cyan-300);
+  --secondary-bg: var(--cyan-700);
+  --secondary-bg-subtle: var(--cyan-900);
+  --secondary-bg-mute: var(--cyan-800);
+  --secondary-bg-emphasize: var(--cyan-700);
+  --secondary-border: var(--cyan-600);
+
+  /* TODO: 上の変数の一環として使えるようにする */
+  --group-primary: var(--teal-300);
+  --group-secondary: var(--cyan-300);
+  --group-tertiary: var(--pink-300);
+  --group-quaternary: var(--purple-300);
+}
+
+@theme inline {
+  /* TODO: spacingをもっと定義する */
+  --spacing-lg: 32rem;
+
+  --color-*: initial;
+  --color-fg-base: var(--fg-base);
+  --color-fg-subtle: var(--fg-subtle);
+  --color-fg-mute: var(--fg-mute);
+  --color-fg-inverse: var(--fg-inverse);
+  --color-fg-info: var(--fg-info);
+  --color-fg-success: var(--fg-success);
+  --color-fg-warning: var(--fg-warning);
+  --color-fg-error: var(--fg-error);
+
+  --color-bg-base: var(--bg-base);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-mute: var(--bg-mute);
+  --color-bg-emphasize: var(--bg-emphasize);
+  --color-bg-inverse: var(--bg-inverse);
+  --color-bg-info: var(--bg-info);
+  --color-bg-success: var(--bg-success);
+  --color-bg-warning: var(--bg-warning);
+  --color-bg-error: var(--bg-error);
+
+  --color-border-base: var(--border-base);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-mute: var(--border-mute);
+  --color-border-emphasize: var(--border-emphasize);
+  --color-border-inverse: var(--border-inverse);
+  --color-border-info: var(--border-info);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-error: var(--border-error);
+
+  --color-primary-fg: var(--primary-fg);
+  --color-primary-bg: var(--primary-bg);
+  --color-primary-bg-subtle: var(--primary-bg-subtle);
+  --color-primary-bg-mute: var(--primary-bg-mute);
+  --color-primary-bg-emphasize: var(--primary-bg-emphasize);
+  --color-primary-border: var(--primary-border);
+
+  --color-secondary-fg: var(--secondary-fg);
+  --color-secondary-bg: var(--secondary-bg);
+  --color-secondary-bg-subtle: var(--secondary-bg-subtle);
+  --color-secondary-bg-mute: var(--secondary-bg-mute);
+  --color-secondary-bg-emphasize: var(--secondary-bg-emphasize);
+  --color-secondary-border: var(--secondary-border);
+
+  --color-transparent: transparent;
+  --color-back-drop: var(--back-drop);
+
+  /* group */
+  --color-group-primary: var(--group-primary);
+  --color-group-secondary: var(--group-secondary);
+  --color-group-tertiary: var(--group-tertiary);
+  --color-group-quaternary: var(--group-quaternary);
+
+  --radius-*: initial;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  --font-*: initial;
+  --font-noto-sans-jp: var(--font-noto-sans-jp);
+  --font-m-plus-2: var(--font-m-plus-2);
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-md: 1rem;
+  --text-md--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-emphasize: 3rem;
+  --text-emphasize--line-height: 1;
+  --text-highlight: 6rem;
+  --text-highlight--line-height: 1;
+
+  --font-weight-*: initial;
+  --font-weight-medium: 450;
+  --font-weight-bold: 700;
+
+  --tracking-*: initial;
+  --tracking-none: 0em;
+  --tracking-normal: 0.025em;
+}
+
+@utility grid-cols-auto-fill-* {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}
+
+@utility grid-cols-auto-fit-* {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}
+
+@utility grid-rows-auto-fill-* {
+  grid-template-rows: repeat(
+    auto-fill,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}
+
+@utility grid-rows-auto-fit-* {
+  grid-template-rows: repeat(
+    auto-fit,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}

package/dist/types/variables.d.ts

@@ -0,0 +1,6 @@
+export type Status = 'success' | 'info' | 'warning' | 'error';
+export type Direction = 'up' | 'down' | 'right' | 'left';
+export type Option = Readonly<{
+    value: string;
+    label: string;
+}>;

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@k8o/arte-odyssey",
+  "version": "0.0.0",
+  "description": "k8o's react ui library",
+  "author": "k8o <kosakanoki@gmail.com>",
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "k8o",
+    "components",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/k35o/arte-odyssey.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "bugs": {
+    "url": "https://github.com/k35o/arte-odyssey/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./hooks/*": {
+      "import": {
+        "types": "./dist/hooks/*/index.d.ts",
+        "default": "./dist/hooks/*/index.js"
+      }
+    },
+    "./styles.css": "./dist/styles/index.css",
+    "./*": {
+      "import": {
+        "types": "./dist/components/*/index.d.ts",
+        "default": "./dist/components/*/index.js"
+      }
+    }
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "0.27.15",
+    "baseline-status": "1.0.11",
+    "clsx": "2.1.1",
+    "esbuild": "0.25.8",
+    "lucide-react": "0.539.0",
+    "motion": "12.23.12",
+    "tailwind-merge": "3.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "4.1.0",
+    "@storybook/addon-a11y": "9.1.1",
+    "@storybook/addon-docs": "9.1.1",
+    "@storybook/addon-vitest": "9.1.1",
+    "@storybook/react-vite": "9.1.1",
+    "@tailwindcss/postcss": "4.1.11",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
+    "@vitejs/plugin-react-swc": "4.0.0",
+    "@vitest/browser": "3.2.4",
+    "@vitest/ui": "3.2.4",
+    "postcss": "8.5.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-error-boundary": "6.0.0",
+    "storybook": "9.1.1",
+    "storybook-addon-mock-date": "1.0.1",
+    "tailwindcss": "4.1.11",
+    "vite": "7.1.1",
+    "vitest": "3.2.4"
+  },
+  "peerDependencies": {
+    "@types/react": ">=19.0.0",
+    "@types/react-dom": ">=19.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwindcss": ">=4.0.0",
+    "typescript": ">=5.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:clean && pnpm build:js && pnpm build:css",
+    "build:js": "node scripts/esbuild.js && pnpm build:js:types",
+    "build:js:types": "tsc --project tsconfig.build.json",
+    "build:css": "mkdir -p dist/styles && cp src/styles/index.css dist/styles/index.css",
+    "build:clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:ui": "vitest --ui --coverage",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "check": "biome check",
+    "check:write": "biome check --write"
+  }
+}