@novi-ui/raster 0.1.0

package/dist/switch/switch.styles.mjs

@@ -0,0 +1,80 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/switch/switch.styles.ts
+/**
+* Raster の Switch は**ピル型ではなく矩形**（ADR-R3）。
+*
+* 一般的なピル型トグルは「角を立てる」という Raster の原則と正面から衝突する。
+* ここが「テーマ差は色と角丸ではなく構造」であることの最も分かりやすい実例になる。
+*
+* 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。
+*/
+const slots = {
+	root: [
+		"inline-flex items-center gap-2",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	track: [
+		"shrink-0 inline-flex items-center",
+		"rounded-[var(--novi-radius-none)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"bg-[var(--novi-color-subtle)]",
+		"transition-[background-color,border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]",
+		focusRing
+	].join(" "),
+	thumb: [
+		"rounded-[var(--novi-radius-none)]",
+		"bg-[var(--novi-color-bg)]",
+		"transition-transform",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]"
+};
+/**
+* Switch のスタイル定義。
+*
+* @example
+* const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })
+*/
+const switchStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)]" },
+			success: { root: "[--c:var(--novi-color-success)]" },
+			warning: { root: "[--c:var(--novi-color-warning)]" },
+			danger: { root: "[--c:var(--novi-color-danger)]" }
+		},
+		size: {
+			sm: {
+				track: "h-4 w-7 p-0.5",
+				thumb: "size-3 group-data-[selected]:translate-x-3",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				track: "h-5 w-9 p-0.5",
+				thumb: "size-4 group-data-[selected]:translate-x-4",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				track: "h-6 w-11 p-0.5",
+				thumb: "size-5 group-data-[selected]:translate-x-5",
+				label: "text-[length:var(--novi-text-base)]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { switchStyles };
+
+//# sourceMappingURL=switch.styles.mjs.map

package/dist/switch/switch.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviSize,\n  SlotMap,\n  switchRequiredSlots,\n  switchSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Switch は**ピル型ではなく矩形**（ADR-R3）。\n *\n * 一般的なピル型トグルは「角を立てる」という Raster の原則と正面から衝突する。\n * ここが「テーマ差は色と角丸ではなく構造」であることの最も分かりやすい実例になる。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n  root: ['inline-flex items-center gap-2', 'cursor-pointer', disabledState].join(' '),\n  track: [\n    'shrink-0 inline-flex items-center',\n    'rounded-[var(--novi-radius-none)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'bg-[var(--novi-color-subtle)]',\n    'transition-[background-color,border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]',\n    focusRing,\n  ].join(' '),\n  // サムも矩形。translate で滑らせる（scale や rotate は使わない）\n  thumb: [\n    'rounded-[var(--novi-radius-none)]',\n    'bg-[var(--novi-color-bg)]',\n    'transition-transform',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\n  label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n  description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof switchSlots, (typeof switchRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: { root: '[--c:var(--novi-color-fg)]' },\n  primary: { root: '[--c:var(--novi-color-primary)]' },\n  secondary: { root: '[--c:var(--novi-color-secondary)]' },\n  success: { root: '[--c:var(--novi-color-success)]' },\n  warning: { root: '[--c:var(--novi-color-warning)]' },\n  danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n  sm: {\n    track: 'h-4 w-7 p-0.5',\n    thumb: 'size-3 group-data-[selected]:translate-x-3',\n    label: 'text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    track: 'h-5 w-9 p-0.5',\n    thumb: 'size-4 group-data-[selected]:translate-x-4',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    track: 'h-6 w-11 p-0.5',\n    thumb: 'size-5 group-data-[selected]:translate-x-5',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\n}\n\n/**\n * Switch のスタイル定義。\n *\n * @example\n * const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })\n */\nexport const switchStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SwitchStyleProps = Parameters<typeof switchStyles>[0]\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAkC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAClF,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AAmCA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAlCZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EA6BrC;EAAO;GAzBnB,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;EAWmB;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}

package/dist/tabs/index.d.mts

@@ -0,0 +1,3 @@
+import { TabContent, TabItem, TabItems, Tabs } from "./tabs.mjs";
+import { TabsStyleProps, tabsStyles } from "./tabs.styles.mjs";
+export { TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, tabsStyles };

package/dist/tabs/tabs.d.mts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { TabsProps } from "@novi-ui/core";
+//#region src/tabs/tabs.d.ts
+/**
+ * Tabs の見出し列。`Tab` を並べる。
+ *
+ * @example
+ * <TabItems>
+ *   <TabItem id="profile">プロフィール</TabItem>
+ * </TabItems>
+ */
+declare function TabItems({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * Tabs の見出し1つ。
+ *
+ * @example
+ * <TabItem id="profile">プロフィール</TabItem>
+ */
+declare function TabItem({ id, isDisabled, children, className }: {
+  id: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * Tabs の中身1つ。`id` を見出しと合わせる。
+ *
+ * @example
+ * <TabContent id="profile">…</TabContent>
+ */
+declare function TabContent({ id, children, className }: {
+  id: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。
+ *
+ * Raster では選択中を**下線1本と文字色**だけで示す。背景は変えない（ADR-R4）。
+ *
+ * @example
+ * <Tabs selectedKey={tab} onSelectionChange={setTab}>
+ *   <TabItems>
+ *     <TabItem id="profile">プロフィール</TabItem>
+ *   </TabItems>
+ *   <TabContent id="profile">…</TabContent>
+ * </Tabs>
+ */
+declare function Tabs({ variant, size, orientation, selectedKey, defaultSelectedKey, onSelectionChange, isDisabled, disabledKeys, children, className, classNames, id }: TabsProps): import("react").JSX.Element;
+//#endregion
+export { TabContent, TabItem, TabItems, Tabs };
+//# sourceMappingURL=tabs.d.mts.map

package/dist/tabs/tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;;;;;;;iBAegB,WAAW,UAAU;EAAe,WAAW;EAAW;oBAAoB,IAAA;;;;;;;iBAc9E,UACd,IACA,YACA,UACA;EAEA;EACA;EACA,WAAW;EACX;oBACD,IAAA;;;;;;;iBAmBe,aACd,IACA,UACA;EAEA;EACA,WAAW;EACX;oBACD,IAAA;;;;;;;;;;;;;;iBAqBe,OACd,SACA,MACA,aACA,aACA,oBACA,mBACA,YACA,cACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}

package/dist/tabs/tabs.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { tabsStyles } from "./tabs.styles.mjs";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/tabs/tabs.tsx
+/**
+* Tabs の見出し列。`Tab` を並べる。
+*
+* @example
+* <TabItems>
+*   <TabItem id="profile">プロフィール</TabItem>
+* </TabItems>
+*/
+function TabItems({ children, className }) {
+	return /* @__PURE__ */ jsx(TabList, {
+		"data-slot": "list",
+		className: tabsStyles().list({ class: className }),
+		children
+	});
+}
+/**
+* Tabs の見出し1つ。
+*
+* @example
+* <TabItem id="profile">プロフィール</TabItem>
+*/
+function TabItem({ id, isDisabled, children, className }) {
+	return /* @__PURE__ */ jsx(Tab, {
+		id,
+		isDisabled,
+		"data-slot": "tab",
+		className: tabsStyles().tab({ class: className }),
+		children
+	});
+}
+/**
+* Tabs の中身1つ。`id` を見出しと合わせる。
+*
+* @example
+* <TabContent id="profile">…</TabContent>
+*/
+function TabContent({ id, children, className }) {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		id,
+		"data-slot": "panel",
+		className: tabsStyles().panel({ class: className }),
+		children
+	});
+}
+/**
+* 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。
+*
+* Raster では選択中を**下線1本と文字色**だけで示す。背景は変えない（ADR-R4）。
+*
+* @example
+* <Tabs selectedKey={tab} onSelectionChange={setTab}>
+*   <TabItems>
+*     <TabItem id="profile">プロフィール</TabItem>
+*   </TabItems>
+*   <TabContent id="profile">…</TabContent>
+* </Tabs>
+*/
+function Tabs$1({ variant, size, orientation, selectedKey, defaultSelectedKey, onSelectionChange, isDisabled, disabledKeys, children, className, classNames, id }) {
+	const s = tabsStyles({
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(Tabs, {
+		id,
+		orientation,
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: (key) => onSelectionChange?.(String(key)),
+		isDisabled,
+		disabledKeys,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children
+	});
+}
+//#endregion
+export { TabContent, TabItem, TabItems, Tabs$1 as Tabs };
+
+//# sourceMappingURL=tabs.mjs.map

package/dist/tabs/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":["Tabs","RACTabs"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["'use client'\n\nimport type { TabsProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport { Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components'\nimport { tabsStyles } from './tabs.styles'\n\n/**\n * Tabs の見出し列。`Tab` を並べる。\n *\n * @example\n * <TabItems>\n *   <TabItem id=\"profile\">プロフィール</TabItem>\n * </TabItems>\n */\nexport function TabItems({ children, className }: { children?: ReactNode; className?: string }) {\n  return (\n    <TabList data-slot=\"list\" className={tabsStyles().list({ class: className })}>\n      {children}\n    </TabList>\n  )\n}\n\n/**\n * Tabs の見出し1つ。\n *\n * @example\n * <TabItem id=\"profile\">プロフィール</TabItem>\n */\nexport function TabItem({\n  id,\n  isDisabled,\n  children,\n  className,\n}: {\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}) {\n  return (\n    <Tab\n      id={id}\n      isDisabled={isDisabled}\n      data-slot=\"tab\"\n      className={tabsStyles().tab({ class: className })}\n    >\n      {children}\n    </Tab>\n  )\n}\n\n/**\n * Tabs の中身1つ。`id` を見出しと合わせる。\n *\n * @example\n * <TabContent id=\"profile\">…</TabContent>\n */\nexport function TabContent({\n  id,\n  children,\n  className,\n}: {\n  id: string\n  children?: ReactNode\n  className?: string\n}) {\n  return (\n    <TabPanel id={id} data-slot=\"panel\" className={tabsStyles().panel({ class: className })}>\n      {children}\n    </TabPanel>\n  )\n}\n\n/**\n * 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。\n *\n * Raster では選択中を**下線1本と文字色**だけで示す。背景は変えない（ADR-R4）。\n *\n * @example\n * <Tabs selectedKey={tab} onSelectionChange={setTab}>\n *   <TabItems>\n *     <TabItem id=\"profile\">プロフィール</TabItem>\n *   </TabItems>\n *   <TabContent id=\"profile\">…</TabContent>\n * </Tabs>\n */\nexport function Tabs({\n  variant,\n  size,\n  orientation,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  isDisabled,\n  disabledKeys,\n  children,\n  className,\n  classNames,\n  id,\n}: TabsProps) {\n  const s = tabsStyles({ variant, size })\n\n  return (\n    <RACTabs\n      id={id}\n      orientation={orientation}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(String(key))}\n      isDisabled={isDisabled}\n      disabledKeys={disabledKeys}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {children}\n    </RACTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,SAAS,EAAE,UAAU,aAA2D;CAC9F,OACE,oBAAC,SAAD;EAAS,aAAU;EAAO,WAAW,WAAW,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACxE;CACM,CAAA;AAEb;;;;;;;AAQA,SAAgB,QAAQ,EACtB,IACA,YACA,UACA,aAMC;CACD,OACE,oBAAC,KAAD;EACM;EACQ;EACZ,aAAU;EACV,WAAW,WAAW,CAAC,CAAC,IAAI,EAAE,OAAO,UAAU,CAAC;EAE/C;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,WAAW,EACzB,IACA,UACA,aAKC;CACD,OACE,oBAAC,UAAD;EAAc;EAAI,aAAU;EAAQ,WAAW,WAAW,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;EACnF;CACO,CAAA;AAEd;;;;;;;;;;;;;;AAeA,SAAgBA,OAAK,EACnB,SACA,MACA,aACA,aACA,oBACA,mBACA,YACA,cACA,UACA,WACA,YACA,MACY;CACZ,MAAM,IAAI,WAAW;EAAE;EAAS;CAAK,CAAC;CAEtC,OACE,oBAACC,MAAD;EACM;EACS;EACA;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,OAAO,GAAG,CAAC;EAC/C;EACE;EACd,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEzD;CACM,CAAA;AAEb"}

package/dist/tabs/tabs.styles.d.mts

@@ -0,0 +1,55 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/tabs/tabs.styles.d.ts
+/**
+ * Tabs のスタイル定義。
+ *
+ * @example
+ * const myTabs = tv({ extend: tabsStyles, slots: { list: 'gap-6' } })
+ */
+declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    tab: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    tab: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    tab: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}>>;
+type TabsStyleProps = Parameters<typeof tabsStyles>[0];
+//#endregion
+export { TabsStyleProps, tabsStyles };
+//# sourceMappingURL=tabs.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;cAyDa,wCAAU;;IAZiB;;;IARO;IAAa;;;;;;;;;;IAQpB;;;IARO;IAAa;;;;;;;;;;IAQpB;;;IARO;IAAa;;;;;;;;;KA0BhD,iBAAiB,kBAAkB"}

package/dist/tabs/tabs.styles.mjs

@@ -0,0 +1,73 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/tabs/tabs.styles.ts
+/**
+* Raster の Tabs は**アクティブを下線1本と文字色だけで示す**（ADR-R4）。
+*
+* 背景の塗り分けはミニマルの原則（面を増やさない）に反するので使わない。
+* 下線は非テキストコントラスト 3:1 を満たす色を使う。
+*/
+const slots = {
+	root: "flex flex-col gap-4",
+	list: "flex gap-1 border-b border-[var(--novi-color-border)]",
+	tab: [
+		"relative cursor-pointer outline-none whitespace-nowrap",
+		"text-[var(--novi-color-muted)]",
+		"border-b border-transparent -mb-px",
+		"transition-[color,border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"hover:text-[var(--novi-color-fg)]",
+		"data-[selected]:text-[var(--novi-color-fg)]",
+		"data-[selected]:border-[var(--novi-color-fg)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		focusRing
+	].join(" "),
+	indicator: "hidden",
+	panel: "outline-none text-[var(--novi-color-fg)]"
+};
+/**
+* Tabs のスタイル定義。
+*
+* @example
+* const myTabs = tv({ extend: tabsStyles, slots: { list: 'gap-6' } })
+*/
+const tabsStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: { tab: "px-2.5 py-1.5 text-[length:var(--novi-text-sm)]" },
+			md: { tab: "px-3 py-2 text-[length:var(--novi-text-base)]" },
+			lg: { tab: "px-4 py-2.5 text-[length:var(--novi-text-base)]" }
+		},
+		variant: {
+			solid: {
+				list: "bg-[var(--novi-color-subtle)] p-1 border-transparent",
+				tab: "border-b-0"
+			},
+			outline: {
+				list: "border-b border-[var(--novi-color-border)]",
+				tab: ""
+			},
+			soft: {
+				list: "bg-[var(--novi-color-subtle)] border-transparent",
+				tab: ""
+			},
+			ghost: {
+				list: "border-transparent",
+				tab: ""
+			},
+			plain: {
+				list: "border-transparent gap-4",
+				tab: "border-b-0"
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md"
+	}
+});
+//#endregion
+export { tabsStyles };
+
+//# sourceMappingURL=tabs.styles.mjs.map

package/dist/tabs/tabs.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.mjs","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"sourcesContent":["import type {\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  tabsRequiredSlots,\n  tabsSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Tabs は**アクティブを下線1本と文字色だけで示す**（ADR-R4）。\n *\n * 背景の塗り分けはミニマルの原則（面を増やさない）に反するので使わない。\n * 下線は非テキストコントラスト 3:1 を満たす色を使う。\n */\nconst slots = {\n  root: 'flex flex-col gap-4',\n  list: 'flex gap-1 border-b border-[var(--novi-color-border)]',\n  tab: [\n    'relative cursor-pointer outline-none whitespace-nowrap',\n    'text-[var(--novi-color-muted)]',\n    'border-b border-transparent -mb-px',\n    'transition-[color,border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'hover:text-[var(--novi-color-fg)]',\n    // 背景は変えない。文字色と下線だけで示す\n    'data-[selected]:text-[var(--novi-color-fg)]',\n    'data-[selected]:border-[var(--novi-color-fg)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    focusRing,\n  ].join(' '),\n  indicator: 'hidden',\n  panel: 'outline-none text-[var(--novi-color-fg)]',\n} satisfies SlotMap<typeof tabsSlots, (typeof tabsRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { list: string; tab: string }> = {\n  solid: { list: 'bg-[var(--novi-color-subtle)] p-1 border-transparent', tab: 'border-b-0' },\n  outline: { list: 'border-b border-[var(--novi-color-border)]', tab: '' },\n  soft: { list: 'bg-[var(--novi-color-subtle)] border-transparent', tab: '' },\n  ghost: { list: 'border-transparent', tab: '' },\n  plain: { list: 'border-transparent gap-4', tab: 'border-b-0' },\n}\n\nconst size: VariantMap<NoviSize, { tab: string }> = {\n  sm: { tab: 'px-2.5 py-1.5 text-[length:var(--novi-text-sm)]' },\n  md: { tab: 'px-3 py-2 text-[length:var(--novi-text-base)]' },\n  lg: { tab: 'px-4 py-2.5 text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Tabs のスタイル定義。\n *\n * @example\n * const myTabs = tv({ extend: tabsStyles, slots: { list: 'gap-6' } })\n */\nexport const tabsStyles = tv({\n  slots,\n  variants: { size, variant },\n  defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type TabsStyleProps = Parameters<typeof tabsStyles>[0]\n"],"mappings":";;;;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CACN,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;AACT;;;;;;;AAsBA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EAAE;GAbZ,IAAI,EAAE,KAAK,kDAAkD;GAC7D,IAAI,EAAE,KAAK,gDAAgD;GAC3D,IAAI,EAAE,KAAK,kDAAkD;EAWjD;EAAM;GArBlB,OAAO;IAAE,MAAM;IAAwD,KAAK;GAAa;GACzF,SAAS;IAAE,MAAM;IAA8C,KAAK;GAAG;GACvE,MAAM;IAAE,MAAM;IAAoD,KAAK;GAAG;GAC1E,OAAO;IAAE,MAAM;IAAsB,KAAK;GAAG;GAC7C,OAAO;IAAE,MAAM;IAA4B,KAAK;GAAa;EAiB3C;CAAQ;CAC1B,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC"}

package/dist/textarea/index.d.mts

@@ -0,0 +1,3 @@
+import { TextArea } from "./textarea.mjs";
+import { TextareaStyleProps, textareaStyles } from "./textarea.styles.mjs";
+export { TextArea, type TextareaStyleProps, textareaStyles };

package/dist/textarea/textarea.d.mts

@@ -0,0 +1,15 @@
+import { TextareaProps } from "@novi-ui/core";
+//#region src/textarea/textarea.d.ts
+/**
+ * 複数行テキスト入力。
+ *
+ * `onKeyDown` は IME 変換中のキーを受け取らない。
+ * 横方向のリサイズは許可しない（レイアウトが崩れるため）。
+ *
+ * @example
+ * <TextArea label="備考" rows={4} maxLength={500} />
+ */
+declare function TextArea({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, onKeyDown, rows, maxLength, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }: TextareaProps): import("react").JSX.Element;
+//#endregion
+export { TextArea };
+//# sourceMappingURL=textarea.d.mts.map

package/dist/textarea/textarea.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.mts","names":[],"sources":["../../src/textarea/textarea.tsx"],"mappings":";;;;;;;;;;;iBAuBgB,WACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,WACA,MACA,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACC,gCAAa,IAAA"}

package/dist/textarea/textarea.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { textareaStyles } from "./textarea.styles.mjs";
+import { FieldError, Group, Label, Text, TextArea, TextField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useImeSafeKeys } from "@novi-ui/core/client";
+//#region src/textarea/textarea.tsx
+/**
+* 複数行テキスト入力。
+*
+* `onKeyDown` は IME 変換中のキーを受け取らない。
+* 横方向のリサイズは許可しない（レイアウトが崩れるため）。
+*
+* @example
+* <TextArea label="備考" rows={4} maxLength={500} />
+*/
+function TextArea$1({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, onKeyDown, rows = 3, maxLength, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }) {
+	const s = textareaStyles({
+		variant,
+		size,
+		radius
+	});
+	const keyProps = useImeSafeKeys(onKeyDown);
+	return /* @__PURE__ */ jsxs(TextField, {
+		id,
+		name,
+		value,
+		defaultValue,
+		onChange,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx(Label, {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Group, {
+				"data-slot": "inputWrapper",
+				className: s.inputWrapper({ class: classNames?.inputWrapper }),
+				children: /* @__PURE__ */ jsx(TextArea, {
+					"data-slot": "textarea",
+					placeholder,
+					rows,
+					maxLength,
+					className: s.textarea({ class: classNames?.textarea }),
+					...keyProps
+				})
+			}),
+			description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "errorMessage",
+				className: s.errorMessage({ class: classNames?.errorMessage }),
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+export { TextArea$1 as TextArea };
+
+//# sourceMappingURL=textarea.mjs.map

package/dist/textarea/textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.mjs","names":["TextArea","RACTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport {\n  FieldError,\n  Group,\n  Label,\n  TextArea as RACTextArea,\n  Text,\n  TextField,\n} from 'react-aria-components'\nimport { textareaStyles } from './textarea.styles'\n\n/**\n * 複数行テキスト入力。\n *\n * `onKeyDown` は IME 変換中のキーを受け取らない。\n * 横方向のリサイズは許可しない（レイアウトが崩れるため）。\n *\n * @example\n * <TextArea label=\"備考\" rows={4} maxLength={500} />\n */\nexport function TextArea({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder,\n  description,\n  errorMessage,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  onKeyDown,\n  rows = 3,\n  maxLength,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  className,\n  classNames,\n  id,\n}: TextareaProps) {\n  const s = textareaStyles({ variant, size, radius })\n  const keyProps = useImeSafeKeys<HTMLTextAreaElement>(onKeyDown)\n\n  return (\n    <TextField\n      id={id}\n      name={name}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={onChange}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {label !== undefined && (\n        <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </Label>\n      )}\n\n      <Group\n        data-slot=\"inputWrapper\"\n        className={s.inputWrapper({ class: classNames?.inputWrapper })}\n      >\n        <RACTextArea\n          data-slot=\"textarea\"\n          placeholder={placeholder}\n          rows={rows}\n          maxLength={maxLength}\n          className={s.textarea({ class: classNames?.textarea })}\n          {...keyProps}\n        />\n      </Group>\n\n      {description !== undefined && (\n        <Text\n          slot=\"description\"\n          data-slot=\"description\"\n          className={s.description({ class: classNames?.description })}\n        >\n          {description}\n        </Text>\n      )}\n\n      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </TextField>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAgBA,WAAS,EACvB,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,WACA,OAAO,GACP,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAS;EAAM;CAAO,CAAC;CAClD,MAAM,WAAW,eAAoC,SAAS;CAE9D,OACE,qBAAC,WAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE7D,UAAA,oBAACC,UAAD;KACE,aAAU;KACG;KACP;KACK;KACX,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;KACrD,GAAI;IACL,CAAA;GACI,CAAA;GAEN,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}

package/dist/textarea/textarea.styles.d.mts

@@ -0,0 +1,73 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/textarea/textarea.styles.d.ts
+/**
+ * TextArea のスタイル定義。
+ *
+ * @example
+ * import { textareaStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myTextarea = tv({
+ *   extend: textareaStyles,
+ *   slots: { textarea: 'font-mono' },
+ * })
+ */
+declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type TextareaStyleProps = Parameters<typeof textareaStyles>[0];
+//#endregion
+export { TextareaStyleProps, textareaStyles };
+//# sourceMappingURL=textarea.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;;;;cA8Ea,4CAAc;;IAvC4B;;;IAaN;IAAkB;;;IAMd;;;;;;;;;;;IAnBE;;;IAaN;IAAkB;;;IAMd;;;;;;;;;;;IAnBE;;;IAaN;IAAkB;;;IAMd;;;;;;;;;;KA0BzC,qBAAqB,kBAAkB"}

package/dist/textarea/textarea.styles.mjs

@@ -0,0 +1,81 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/textarea/textarea.styles.ts
+const slots = {
+	root: "flex flex-col gap-1.5",
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	inputWrapper: [
+		"text-[var(--novi-color-fg)]",
+		"flex w-full",
+		"bg-[var(--novi-color-bg)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"transition-[border-color,opacity]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[invalid]:border-[var(--novi-color-danger)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	textarea: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)]",
+		"placeholder:text-[var(--novi-color-muted)]",
+		"resize-y",
+		"leading-[var(--novi-leading-body)]"
+	].join(" "),
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+};
+/**
+* TextArea のスタイル定義。
+*
+* @example
+* import { textareaStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myTextarea = tv({
+*   extend: textareaStyles,
+*   slots: { textarea: 'font-mono' },
+* })
+*/
+const textareaStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { inputWrapper: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]" },
+			outline: { inputWrapper: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
+			soft: { inputWrapper: "bg-[var(--novi-color-subtle)] border-transparent" },
+			ghost: { inputWrapper: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
+			plain: { inputWrapper: "bg-transparent border-transparent" }
+		},
+		size: {
+			sm: {
+				inputWrapper: "px-2.5 py-1.5",
+				textarea: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "px-3 py-2",
+				textarea: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "px-3.5 py-2.5",
+				textarea: "text-[length:var(--novi-text-base)]"
+			}
+		},
+		radius: {
+			none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
+			sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
+			md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
+			lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
+			full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md",
+		radius: "none"
+	}
+});
+//#endregion
+export { textareaStyles };
+
+//# sourceMappingURL=textarea.styles.mjs.map