@novi-ui/tactile 0.1.0

package/dist/button/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.mjs","names":["Button","RACButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["'use client'\n\nimport type { ButtonProps } from '@novi-ui/core'\nimport { Button as RACButton } from 'react-aria-components'\nimport { buttonStyles } from './button.styles'\n\n/**\n * ボタン。\n *\n * 押すと少し沈み、`solid` では影が消える。指で触れている手応えを返すため。\n * 実効タップ領域は視覚寸法と独立に 44px 以上を保つ。\n *\n * @example\n * <Button variant=\"solid\" color=\"primary\" onPress={() => save()}>\n *   保存\n * </Button>\n */\nexport function Button({\n  variant,\n  size,\n  color,\n  radius,\n  isDisabled,\n  isLoading,\n  type = 'button',\n  onPress,\n  startContent,\n  endContent,\n  children,\n  className,\n  classNames,\n  id,\n}: ButtonProps) {\n  const s = buttonStyles({ variant, size, color, radius })\n\n  return (\n    <RACButton\n      id={id}\n      type={type}\n      // 読み込み中は押せないようにする。見た目だけ変えて押せる状態にしない\n      isDisabled={isDisabled === true || isLoading === true}\n      onPress={onPress}\n      data-slot=\"root\"\n      data-loading={isLoading === true ? true : undefined}\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {isLoading === true && (\n        <span\n          data-slot=\"spinner\"\n          className={s.spinner({ class: classNames?.spinner })}\n          aria-hidden=\"true\"\n        >\n          <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\"0.25\" />\n            <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" />\n          </svg>\n        </span>\n      )}\n\n      {startContent !== undefined && (\n        <span\n          data-slot=\"startContent\"\n          className={s.startContent({ class: classNames?.startContent })}\n        >\n          {startContent}\n        </span>\n      )}\n\n      <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n        {children}\n      </span>\n\n      {endContent !== undefined && (\n        <span data-slot=\"endContent\" className={s.endContent({ class: classNames?.endContent })}>\n          {endContent}\n        </span>\n      )}\n    </RACButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAgBA,SAAO,EACrB,SACA,MACA,OACA,QACA,YACA,WACA,OAAO,UACP,SACA,cACA,YACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAS;EAAM;EAAO;CAAO,CAAC;CAEvD,OACE,qBAACC,QAAD;EACM;EACE;EAEN,YAAY,eAAe,QAAQ,cAAc;EACxC;EACT,aAAU;EACV,gBAAc,cAAc,OAAO,OAAO,KAAA;EAC1C,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAR5D,UAAA;GAUG,cAAc,QACb,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IACnD,eAAY;IAEZ,UAAA,qBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;KAAM,QAAO;KAAM,MAAK;KAAO,eAAY;KAA1E,UAAA,CACE,oBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAI,QAAO;MAAe,aAAY;MAAI,SAAQ;KAAQ,CAAA,GAClF,oBAAC,QAAD;MAAM,GAAE;MAAsB,QAAO;MAAe,aAAY;KAAK,CAAA,CAClE;;GACD,CAAA;GAGP,iBAAiB,KAAA,KAChB,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACG,CAAA;GAGR,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA;GAEL,eAAe,KAAA,KACd,oBAAC,QAAD;IAAM,aAAU;IAAa,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IACnF,UAAA;GACG,CAAA;EAEC;;AAEf"}

package/dist/button/button.styles.d.mts

@@ -0,0 +1,82 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/button/button.styles.d.ts
+/**
+ * Button のスタイル定義。
+ *
+ * `tv({ extend: buttonStyles })` で拡張できるよう named export する。
+ * npm 配布の「コードを所有できない」という不満への回答（FR-04）。
+ *
+ * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。
+ * `base` は黙って無視される。
+ *
+ * @example
+ * import { buttonStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myButton = tv({
+ *   extend: buttonStyles,
+ *   slots: { root: 'uppercase tracking-widest' },
+ * })
+ */
+declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}>>;
+type ButtonStyleProps = Parameters<typeof buttonStyles>[0];
+//#endregion
+export { ButtonStyleProps, buttonStyles };
+//# sourceMappingURL=button.styles.d.mts.map

package/dist/button/button.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.mts","names":[],"sources":["../../src/button/button.styles.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;cA8Ja,0CAAY;;IA7GkB;;;IAwDF;;;IAMI;;;IAcE;;;;;;;;;;IA5EJ;;;IAwDF;;;IAMI;;;IAcE;;;;;;;;;;IA5EJ;;;IAwDF;;;IAMI;;;IAcE;;;;;;;;;KAwCnC,mBAAmB,kBAAkB"}

package/dist/button/button.styles.mjs

@@ -0,0 +1,136 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tapTarget } from "../styles/tap-target.mjs";
+import { tv } from "tailwind-variants";
+//#region src/button/button.styles.ts
+const slots = {
+	root: [
+		"inline-flex items-center justify-center gap-2",
+		"font-medium whitespace-nowrap select-none",
+		"border border-transparent",
+		"transition-[background-color,border-color,color,opacity,scale,box-shadow]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[pressed]:scale-[0.97]",
+		"motion-reduce:data-[pressed]:scale-100",
+		focusRing,
+		disabledState,
+		tapTarget
+	].join(" "),
+	label: "truncate",
+	startContent: "shrink-0 inline-flex",
+	endContent: "shrink-0 inline-flex",
+	spinner: "shrink-0 inline-flex"
+};
+/**
+* 色は「役割ごとのローカル変数」に落としてから variant が参照する。
+* こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。
+*
+* - `--c`      面の色（solid の背景）
+* - `--c-fg`   その面に乗る文字色
+* - `--c-text` 面を持たない variant での文字色
+* - `--c-line` 境界線の色
+*/
+const color = {
+	default: { root: [
+		"[--c:var(--novi-color-default)]",
+		"[--c-fg:var(--novi-color-default-fg)]",
+		"[--c-text:var(--novi-color-fg)]",
+		"[--c-line:var(--novi-color-border-strong)]"
+	].join(" ") },
+	primary: { root: [
+		"[--c:var(--novi-color-primary)]",
+		"[--c-fg:var(--novi-color-primary-fg)]",
+		"[--c-text:var(--novi-color-primary)]",
+		"[--c-line:var(--novi-color-primary)]"
+	].join(" ") },
+	secondary: { root: [
+		"[--c:var(--novi-color-secondary)]",
+		"[--c-fg:var(--novi-color-secondary-fg)]",
+		"[--c-text:var(--novi-color-secondary)]",
+		"[--c-line:var(--novi-color-secondary)]"
+	].join(" ") },
+	success: { root: [
+		"[--c:var(--novi-color-success)]",
+		"[--c-fg:var(--novi-color-success-fg)]",
+		"[--c-text:var(--novi-color-success)]",
+		"[--c-line:var(--novi-color-success)]"
+	].join(" ") },
+	warning: { root: [
+		"[--c:var(--novi-color-warning)]",
+		"[--c-fg:var(--novi-color-warning-fg)]",
+		"[--c-text:var(--novi-color-warning)]",
+		"[--c-line:var(--novi-color-warning)]"
+	].join(" ") },
+	danger: { root: [
+		"[--c:var(--novi-color-danger)]",
+		"[--c-fg:var(--novi-color-danger-fg)]",
+		"[--c-text:var(--novi-color-danger)]",
+		"[--c-line:var(--novi-color-danger)]"
+	].join(" ") }
+};
+/**
+* 高さは 40 / 48 / 56px（Raster は 32 / 40 / 48）。
+* 最小段でも 40px あり、擬似要素と合わせて実効タップ領域が 44px を割らない。
+* 水平余白も広い — 指の接触面は文字の幅より大きい。
+*/
+const size = {
+	sm: { root: "h-10 px-4 text-[length:var(--novi-text-sm)]" },
+	md: { root: "h-12 px-5 text-[length:var(--novi-text-base)]" },
+	lg: { root: "h-14 px-6 text-[length:var(--novi-text-base)]" }
+};
+const radius = {
+	none: { root: "rounded-[var(--novi-radius-none)]" },
+	sm: { root: "rounded-[var(--novi-radius-sm)]" },
+	md: { root: "rounded-[var(--novi-radius-md)]" },
+	lg: { root: "rounded-[var(--novi-radius-lg)]" },
+	full: { root: "rounded-[var(--novi-radius-full)]" }
+};
+/**
+* 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-04-2）。
+*
+* `solid` だけが影を持ち、押下すると影が消える。**持ち上がっていた面が沈む**という
+* 一連の動きで、Tactile は押した手応えを作る（Raster は色の変化だけで示す）。
+*/
+const variant = {
+	solid: { root: ["bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90", "shadow-[var(--novi-shadow-sm)] data-[pressed]:shadow-[var(--novi-shadow-none)]"].join(" ") },
+	outline: { root: "border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]" },
+	soft: { root: "bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95" },
+	ghost: { root: "text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]" },
+	plain: { root: "text-[var(--c-text)] underline-offset-4 hover:underline" }
+};
+/**
+* Button のスタイル定義。
+*
+* `tv({ extend: buttonStyles })` で拡張できるよう named export する。
+* npm 配布の「コードを所有できない」という不満への回答（FR-04）。
+*
+* slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。
+* `base` は黙って無視される。
+*
+* @example
+* import { buttonStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myButton = tv({
+*   extend: buttonStyles,
+*   slots: { root: 'uppercase tracking-widest' },
+* })
+*/
+const buttonStyles = tv({
+	slots,
+	variants: {
+		color,
+		size,
+		radius,
+		variant
+	},
+	defaultVariants: {
+		color: "default",
+		variant: "solid",
+		size: "md",
+		radius: "md"
+	}
+});
+//#endregion
+export { buttonStyles };
+
+//# sourceMappingURL=button.styles.mjs.map

package/dist/button/button.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n  buttonRequiredSlots,\n  buttonSlots,\n  NoviColor,\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { tapTarget } from '../styles/tap-target'\n\n// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる（ADR-R5）。\nconst slots = {\n  root: [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium whitespace-nowrap select-none',\n    'border border-transparent',\n    // 押下フィードバック。指の下で沈む感触を作る。\n    // scale はここでしか使わない（装飾目的の scale は禁止・ADR-T5）\n    'transition-[background-color,border-color,color,opacity,scale,box-shadow]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.97]',\n    // 沈む動きが不快になりうる利用者には出さない（AC-09-2）\n    'motion-reduce:data-[pressed]:scale-100',\n    focusRing,\n    disabledState,\n    // 視覚寸法が 44px を満たしていても付けてよい。max() なので当たり判定は広がらない\n    tapTarget,\n  ].join(' '),\n  label: 'truncate',\n  startContent: 'shrink-0 inline-flex',\n  endContent: 'shrink-0 inline-flex',\n  spinner: 'shrink-0 inline-flex',\n} satisfies SlotMap<typeof buttonSlots, (typeof buttonRequiredSlots)[number]>\n\n/**\n * 色は「役割ごとのローカル変数」に落としてから variant が参照する。\n * こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。\n *\n * - `--c`      面の色（solid の背景）\n * - `--c-fg`   その面に乗る文字色\n * - `--c-text` 面を持たない variant での文字色\n * - `--c-line` 境界線の色\n */\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: {\n    root: [\n      '[--c:var(--novi-color-default)]',\n      '[--c-fg:var(--novi-color-default-fg)]',\n      '[--c-text:var(--novi-color-fg)]',\n      '[--c-line:var(--novi-color-border-strong)]',\n    ].join(' '),\n  },\n  primary: {\n    root: [\n      '[--c:var(--novi-color-primary)]',\n      '[--c-fg:var(--novi-color-primary-fg)]',\n      '[--c-text:var(--novi-color-primary)]',\n      '[--c-line:var(--novi-color-primary)]',\n    ].join(' '),\n  },\n  secondary: {\n    root: [\n      '[--c:var(--novi-color-secondary)]',\n      '[--c-fg:var(--novi-color-secondary-fg)]',\n      '[--c-text:var(--novi-color-secondary)]',\n      '[--c-line:var(--novi-color-secondary)]',\n    ].join(' '),\n  },\n  success: {\n    root: [\n      '[--c:var(--novi-color-success)]',\n      '[--c-fg:var(--novi-color-success-fg)]',\n      '[--c-text:var(--novi-color-success)]',\n      '[--c-line:var(--novi-color-success)]',\n    ].join(' '),\n  },\n  warning: {\n    root: [\n      '[--c:var(--novi-color-warning)]',\n      '[--c-fg:var(--novi-color-warning-fg)]',\n      '[--c-text:var(--novi-color-warning)]',\n      '[--c-line:var(--novi-color-warning)]',\n    ].join(' '),\n  },\n  danger: {\n    root: [\n      '[--c:var(--novi-color-danger)]',\n      '[--c-fg:var(--novi-color-danger-fg)]',\n      '[--c-text:var(--novi-color-danger)]',\n      '[--c-line:var(--novi-color-danger)]',\n    ].join(' '),\n  },\n}\n\n/**\n * 高さは 40 / 48 / 56px（Raster は 32 / 40 / 48）。\n * 最小段でも 40px あり、擬似要素と合わせて実効タップ領域が 44px を割らない。\n * 水平余白も広い — 指の接触面は文字の幅より大きい。\n */\nconst size: VariantMap<NoviSize, { root: string }> = {\n  sm: { root: 'h-10 px-4 text-[length:var(--novi-text-sm)]' },\n  md: { root: 'h-12 px-5 text-[length:var(--novi-text-base)]' },\n  lg: { root: 'h-14 px-6 text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる（AC-04-2）。\n *\n * `solid` だけが影を持ち、押下すると影が消える。**持ち上がっていた面が沈む**という\n * 一連の動きで、Tactile は押した手応えを作る（Raster は色の変化だけで示す）。\n */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n  solid: {\n    root: [\n      'bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90',\n      'shadow-[var(--novi-shadow-sm)] data-[pressed]:shadow-[var(--novi-shadow-none)]',\n    ].join(' '),\n  },\n  outline: {\n    root: 'border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n  },\n  soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95' },\n  ghost: { root: 'text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]' },\n  plain: { root: 'text-[var(--c-text)] underline-offset-4 hover:underline' },\n}\n\n/**\n * Button のスタイル定義。\n *\n * `tv({ extend: buttonStyles })` で拡張できるよう named export する。\n * npm 配布の「コードを所有できない」という不満への回答（FR-04）。\n *\n * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。\n * `base` は黙って無視される。\n *\n * @example\n * import { buttonStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myButton = tv({\n *   extend: buttonStyles,\n *   slots: { root: 'uppercase tracking-widest' },\n * })\n */\nexport const buttonStyles = tv({\n  slots,\n  // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n  variants: { color, size, radius, variant },\n  defaultVariants: { color: 'default', variant: 'solid', size: 'md', radius: 'md' },\n})\n\nexport type ButtonStyleProps = Parameters<typeof buttonStyles>[0]\n"],"mappings":";;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,cAAc;CACd,YAAY;CACZ,SAAS;AACX;;;;;;;;;;AAWA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;AAOA,MAAM,OAA+C;CACnD,IAAI,EAAE,MAAM,8CAA8C;CAC1D,IAAI,EAAE,MAAM,gDAAgD;CAC5D,IAAI,EAAE,MAAM,gDAAgD;AAC9D;AAEA,MAAM,SAAmD;CACvD,MAAM,EAAE,MAAM,oCAAoC;CAClD,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,IAAI,EAAE,MAAM,kCAAkC;CAC9C,MAAM,EAAE,MAAM,oCAAoC;AACpD;;;;;;;AAQA,MAAM,UAAqD;CACzD,OAAO,EACL,MAAM,CACJ,qDACA,gFACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM,kFACR;CACA,MAAM,EAAE,MAAM,yEAAyE;CACvF,OAAO,EAAE,MAAM,2DAA2D;CAC1E,OAAO,EAAE,MAAM,0DAA0D;AAC3E;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,eAAe,GAAG;CAC7B;CAEA,UAAU;EAAE;EAAO;EAAM;EAAQ;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAS,MAAM;EAAM,QAAQ;CAAK;AAClF,CAAC"}

package/dist/button/index.d.mts

@@ -0,0 +1,3 @@
+import { Button } from "./button.mjs";
+import { ButtonStyleProps, buttonStyles } from "./button.styles.mjs";
+export { Button, type ButtonStyleProps, buttonStyles };

package/dist/card/card.d.mts

@@ -0,0 +1,51 @@
+import { ImgHTMLAttributes, ReactNode } from "react";
+import { CardProps } from "@novi-ui/core";
+//#region src/card/card.d.ts
+interface PartProps {
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Card の見出し部分。下端が境界線で仕切られる。
+ *
+ * @example
+ * <CardHeader>売上</CardHeader>
+ */
+declare function CardHeader({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Card の本体。
+ *
+ * @example
+ * <CardBody>¥1,240,000</CardBody>
+ */
+declare function CardBody({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Card の脚部。上端が境界線で仕切られる。
+ *
+ * @example
+ * <CardFooter>前月比 +12%</CardFooter>
+ */
+declare function CardFooter({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Card の上部に置く画像。
+ *
+ * @example
+ * <CardImage src="/thumb.jpg" alt="" />
+ */
+declare function CardImage({ className, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>): import("react").JSX.Element;
+/**
+ * 情報のまとまりを囲む器。
+ *
+ * 影は使わず、1px の境界線と余白だけで面を作る。
+ * `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。
+ *
+ * @example
+ * <Card>
+ *   <CardHeader>売上</CardHeader>
+ *   <CardBody>¥1,240,000</CardBody>
+ * </Card>
+ */
+declare function Card({ variant, radius, onPress, isDisabled, children, className, classNames, id }: CardProps): import("react").JSX.Element;
+//#endregion
+export { Card, CardBody, CardFooter, CardHeader, CardImage };
+//# sourceMappingURL=card.d.mts.map

package/dist/card/card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.mts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;UAOU;EACR,WAAW;EACX;;;;;;;;iBASc,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc7C,WAAW,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc3C,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc7C,YAAY,WAAW,QAAa,SAAS,kBAAkB,oCAAiB,IAAA;;;;;;;;;;;;;iBAuBhF,OACd,SACA,QACA,SACA,YACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}

package/dist/card/card.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { cardStyles } from "./card.styles.mjs";
+import { Button } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/card.tsx
+/**
+* Card の見出し部分。下端が境界線で仕切られる。
+*
+* @example
+* <CardHeader>売上</CardHeader>
+*/
+function CardHeader({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "header",
+		className: cardStyles().header({ class: className }),
+		children
+	});
+}
+/**
+* Card の本体。
+*
+* @example
+* <CardBody>¥1,240,000</CardBody>
+*/
+function CardBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "body",
+		className: cardStyles().body({ class: className }),
+		children
+	});
+}
+/**
+* Card の脚部。上端が境界線で仕切られる。
+*
+* @example
+* <CardFooter>前月比 +12%</CardFooter>
+*/
+function CardFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "footer",
+		className: cardStyles().footer({ class: className }),
+		children
+	});
+}
+/**
+* Card の上部に置く画像。
+*
+* @example
+* <CardImage src="/thumb.jpg" alt="" />
+*/
+function CardImage({ className, alt = "", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		alt,
+		"data-slot": "image",
+		className: cardStyles().image({ class: className })
+	});
+}
+/**
+* 情報のまとまりを囲む器。
+*
+* 影は使わず、1px の境界線と余白だけで面を作る。
+* `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。
+*
+* @example
+* <Card>
+*   <CardHeader>売上</CardHeader>
+*   <CardBody>¥1,240,000</CardBody>
+* </Card>
+*/
+function Card({ variant, radius, onPress, isDisabled, children, className, classNames, id }) {
+	const isPressable = onPress !== void 0;
+	const rootClass = cardStyles({
+		variant,
+		radius,
+		isPressable
+	}).root({ class: [className, classNames?.root] });
+	if (isPressable) return /* @__PURE__ */ jsx(Button, {
+		id,
+		onPress,
+		isDisabled,
+		"data-slot": "root",
+		className: rootClass,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		"data-slot": "root",
+		className: rootClass,
+		children
+	});
+}
+//#endregion
+export { Card, CardBody, CardFooter, CardHeader, CardImage };
+
+//# sourceMappingURL=card.mjs.map

package/dist/card/card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.mjs","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["'use client'\n\nimport type { CardProps } from '@novi-ui/core'\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\nimport { Button } from 'react-aria-components'\nimport { cardStyles } from './card.styles'\n\ninterface PartProps {\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Card の見出し部分。下端が境界線で仕切られる。\n *\n * @example\n * <CardHeader>売上</CardHeader>\n */\nexport function CardHeader({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"header\" className={cardStyles().header({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の本体。\n *\n * @example\n * <CardBody>¥1,240,000</CardBody>\n */\nexport function CardBody({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"body\" className={cardStyles().body({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の脚部。上端が境界線で仕切られる。\n *\n * @example\n * <CardFooter>前月比 +12%</CardFooter>\n */\nexport function CardFooter({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"footer\" className={cardStyles().footer({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の上部に置く画像。\n *\n * @example\n * <CardImage src=\"/thumb.jpg\" alt=\"\" />\n */\nexport function CardImage({ className, alt = '', ...props }: ImgHTMLAttributes<HTMLImageElement>) {\n  return (\n    <img\n      {...props}\n      alt={alt}\n      data-slot=\"image\"\n      className={cardStyles().image({ class: className })}\n    />\n  )\n}\n\n/**\n * 情報のまとまりを囲む器。\n *\n * 影は使わず、1px の境界線と余白だけで面を作る。\n * `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。\n *\n * @example\n * <Card>\n *   <CardHeader>売上</CardHeader>\n *   <CardBody>¥1,240,000</CardBody>\n * </Card>\n */\nexport function Card({\n  variant,\n  radius,\n  onPress,\n  isDisabled,\n  children,\n  className,\n  classNames,\n  id,\n}: CardProps) {\n  const isPressable = onPress !== undefined\n  const s = cardStyles({ variant, radius, isPressable })\n  const rootClass = s.root({ class: [className, classNames?.root] })\n\n  if (isPressable) {\n    return (\n      <Button\n        id={id}\n        onPress={onPress}\n        isDisabled={isDisabled}\n        data-slot=\"root\"\n        className={rootClass}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <div id={id} data-slot=\"root\" className={rootClass}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,SAAS,EAAE,UAAU,aAAwB;CAC3D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,WAAW,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACpE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,UAAU,EAAE,WAAW,MAAM,IAAI,GAAG,SAA8C;CAChG,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,WAAW,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;CACnD,CAAA;AAEL;;;;;;;;;;;;;AAcA,SAAgB,KAAK,EACnB,SACA,QACA,SACA,YACA,UACA,WACA,YACA,MACY;CACZ,MAAM,cAAc,YAAY,KAAA;CAEhC,MAAM,YADI,WAAW;EAAE;EAAS;EAAQ;CAAY,CAClC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;CAEjE,IAAI,aACF,OACE,oBAAC,QAAD;EACM;EACK;EACG;EACZ,aAAU;EACV,WAAW;EAEV;CACK,CAAA;CAIZ,OACE,oBAAC,OAAD;EAAS;EAAI,aAAU;EAAO,WAAW;EACtC;CACE,CAAA;AAET"}

package/dist/card/card.styles.d.mts

@@ -0,0 +1,70 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/card/card.styles.d.ts
+/**
+ * Card のスタイル定義。
+ *
+ * @example
+ * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
+ */
+declare const cardStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}>>;
+type CardStyleProps = Parameters<typeof cardStyles>[0];
+//#endregion
+export { CardStyleProps, cardStyles };
+//# sourceMappingURL=card.styles.d.mts.map

package/dist/card/card.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;cAiDa,wCAAU;;IAtBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAoCjC,iBAAiB,kBAAkB"}

package/dist/card/card.styles.mjs

@@ -0,0 +1,61 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/card/card.styles.ts
+const slots = {
+	root: [
+		"text-[var(--novi-color-fg)]",
+		"flex flex-col",
+		"bg-[var(--novi-color-bg)]",
+		"shadow-[var(--novi-shadow-sm)]",
+		"overflow-hidden"
+	].join(" "),
+	header: "px-4 py-3 border-b border-[var(--novi-color-border)]",
+	body: "px-4 py-4 flex-1",
+	footer: "px-4 py-3 border-t border-[var(--novi-color-border)]",
+	image: "w-full object-cover"
+};
+/**
+* Card のスタイル定義。
+*
+* @example
+* const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
+*/
+const cardStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { root: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
+			outline: { root: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
+			soft: { root: "bg-[var(--novi-color-subtle)] border-transparent" },
+			ghost: { root: "bg-transparent border-transparent" },
+			plain: { root: "bg-transparent border-transparent" }
+		},
+		radius: {
+			none: { root: "rounded-[var(--novi-radius-none)]" },
+			sm: { root: "rounded-[var(--novi-radius-sm)]" },
+			md: { root: "rounded-[var(--novi-radius-md)]" },
+			lg: { root: "rounded-[var(--novi-radius-lg)]" },
+			full: { root: "rounded-[var(--novi-radius-full)]" }
+		},
+		isPressable: {
+			true: { root: [
+				"text-left cursor-pointer",
+				"transition-[border-color]",
+				"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+				"hover:border-[var(--novi-color-border-strong)]",
+				focusRing,
+				disabledState
+			].join(" ") },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		radius: "lg",
+		isPressable: false
+	}
+});
+//#endregion
+export { cardStyles };
+
+//# sourceMappingURL=card.styles.mjs.map

package/dist/card/card.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n  cardRequiredSlots,\n  cardSlots,\n  NoviRadius,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n  // 影は使わない。面の区切りは 1px の境界線だけで表す\n  root: [\n    'text-[var(--novi-color-fg)]',\n    'flex flex-col',\n    'bg-[var(--novi-color-bg)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'overflow-hidden',\n  ].join(' '),\n  // header と footer は境界線で仕切る。背景色を変えて面を増やさない\n  header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n  body: 'px-4 py-4 flex-1',\n  footer: 'px-4 py-3 border-t border-[var(--novi-color-border)]',\n  image: 'w-full object-cover',\n} satisfies SlotMap<typeof cardSlots, (typeof cardRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n  solid: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n  outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  soft: { root: 'bg-[var(--novi-color-subtle)] border-transparent' },\n  ghost: { root: 'bg-transparent border-transparent' },\n  plain: { root: 'bg-transparent border-transparent' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Card のスタイル定義。\n *\n * @example\n * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })\n */\nexport const cardStyles = tv({\n  slots,\n  variants: {\n    variant,\n    radius,\n    isPressable: {\n      true: {\n        root: [\n          'text-left cursor-pointer',\n          'transition-[border-color]',\n          'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n          'hover:border-[var(--novi-color-border-strong)]',\n          focusRing,\n          disabledState,\n        ].join(' '),\n      },\n      false: {},\n    },\n  },\n  defaultVariants: { variant: 'outline', radius: 'lg', isPressable: false },\n})\n\nexport type CardStyleProps = Parameters<typeof cardStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAEZ,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,OAAO;AACT;;;;;;;AAwBA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EACR;GAxBF,OAAO,EAAE,MAAM,kEAAkE;GACjF,SAAS,EAAE,MAAM,qEAAqE;GACtF,MAAM,EAAE,MAAM,mDAAmD;GACjE,OAAO,EAAE,MAAM,oCAAoC;GACnD,OAAO,EAAE,MAAM,oCAAoC;EAoBjD;EACA;GAjBF,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAahD;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,QAAQ;EAAM,aAAa;CAAM;AAC1E,CAAC"}

package/dist/card/index.d.mts

@@ -0,0 +1,3 @@
+import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card.mjs";
+import { CardStyleProps, cardStyles } from "./card.styles.mjs";
+export { Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, cardStyles };

package/dist/checkbox/checkbox.d.mts

@@ -0,0 +1,24 @@
+import { CheckboxGroupProps, CheckboxProps } from "@novi-ui/core";
+//#region src/checkbox/checkbox.d.ts
+/**
+ * チェックボックス。
+ *
+ * @example
+ * <Checkbox isSelected={agreed} onChange={setAgreed}>
+ *   利用規約に同意する
+ * </Checkbox>
+ */
+declare function Checkbox({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }: CheckboxProps): import("react").JSX.Element;
+/**
+ * チェックボックスのグループ。ラベルとエラーをまとめて扱う。
+ *
+ * @example
+ * <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
+ *   <Checkbox value="email">メール</Checkbox>
+ *   <Checkbox value="sms">SMS</Checkbox>
+ * </CheckboxGroup>
+ */
+declare function CheckboxGroup({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxGroup };
+//# sourceMappingURL=checkbox.d.mts.map

package/dist/checkbox/checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;iBAiCgB,WACd,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACC,gCAAa,IAAA;;;;;;;;;;iBA2DA,gBACd,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,qCAAkB,IAAA"}