@novi-ui/raster 0.5.0 → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yuuto22009911-hash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -9,6 +9,9 @@ Novi UI のテーマ1。**ミニマル / スイス系。**
 pnpm add @novi-ui/raster @novi-ui/core react-aria-components
 ```
 
+> **Tailwind CSS v4 が必要です。** テーマの CSS はトークン定義だけで、コンポーネントのクラスは利用側の Tailwind が生成します。
+> `globals.css` に `@source "../node_modules/@novi-ui/raster/dist";` を足してください（パスは CSS ファイルからの相対）。
+
 ```tsx
 import '@novi-ui/core/base.css'
 import '@novi-ui/raster/raster.css'

package/dist/avatar/avatar.styles.d.mts

@@ -10,7 +10,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -22,7 +22,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -34,7 +34,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {

package/dist/badge/badge.styles.d.mts

@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -32,7 +32,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -50,7 +50,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

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

@@ -28,7 +28,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -47,7 +47,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -66,7 +66,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {

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

@@ -10,7 +10,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   isPressable: {
@@ -29,7 +29,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   isPressable: {
@@ -48,7 +48,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
   isPressable: {

package/dist/combo-box/combo-box.d.mts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { ComboBoxProps } from "@novi-ui/core";
+//#region src/combo-box/combo-box.d.ts
+interface ComboBoxItemProps {
+  /** 選択値。`onSelectionChange` に渡る */
+  id: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * ComboBox の選択肢。`ComboBox` の子として置く。
+ *
+ * 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する
+ * 文字列を持てないため、絞り込みの対象にならない。
+ *
+ * @example
+ * <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
+ */
+declare function ComboBoxItem({ id, isDisabled, children, className }: ComboBoxItemProps): import("react").JSX.Element;
+/**
+ * 文字を打って絞り込み、一覧から1つ選ぶ。
+ *
+ * 一覧は入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。
+ * IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。
+ *
+ * @example
+ * <ComboBox label="都道府県" onSelectionChange={setPref}>
+ *   <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
+ *   <ComboBoxItem id="osaka">大阪府</ComboBoxItem>
+ * </ComboBox>
+ */
+declare function ComboBox({ variant, size, radius, label, placeholder, description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger, onOpenChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: ComboBoxProps): import("react").JSX.Element;
+//#endregion
+export { ComboBox, ComboBoxItem, ComboBoxItemProps };
+//# sourceMappingURL=combo-box.d.mts.map

package/dist/combo-box/combo-box.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.d.mts","names":[],"sources":["../../src/combo-box/combo-box.tsx"],"mappings":";;;UA4BiB;;EAEf;EACA;EACA,WAAW;EACX;;;;;;;;;;;iBAYc,eAAe,IAAI,YAAY,UAAU,aAAa,oCAAiB,IAAA;;;;;;;;;;;;;iBA0BvE,WACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,aACA,oBACA,mBACA,YACA,mBACA,eACA,mBACA,aACA,cACA,WACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,gCAAa,IAAA"}

package/dist/combo-box/combo-box.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { comboBoxStyles } from "./combo-box.styles.mjs";
+import { Button, ComboBox, FieldError, Group, Input, Label, ListBox, ListBoxItem, Popover, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useImeSafeKeys } from "@novi-ui/core/client";
+//#region src/combo-box/combo-box.tsx
+/** 開閉を示す記号。Select と同じ上下の線。 */
+function TriggerIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "0.75em",
+		height: "0.75em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 6.5l4 4 4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})
+	});
+}
+/**
+* ComboBox の選択肢。`ComboBox` の子として置く。
+*
+* 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する
+* 文字列を持てないため、絞り込みの対象にならない。
+*
+* @example
+* <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
+*/
+function ComboBoxItem({ id, isDisabled, children, className }) {
+	return /* @__PURE__ */ jsx(ListBoxItem, {
+		id,
+		isDisabled,
+		textValue: typeof children === "string" ? children : void 0,
+		"data-slot": "option",
+		className: className ?? comboBoxStyles().option(),
+		children
+	});
+}
+/**
+* 文字を打って絞り込み、一覧から1つ選ぶ。
+*
+* 一覧は入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。
+* IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。
+*
+* @example
+* <ComboBox label="都道府県" onSelectionChange={setPref}>
+*   <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
+*   <ComboBoxItem id="osaka">大阪府</ComboBoxItem>
+* </ComboBox>
+*/
+function ComboBox$1({ variant, size, radius, label, placeholder, description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger, onOpenChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
+	const s = comboBoxStyles({
+		variant,
+		size,
+		radius
+	});
+	const keyProps = useImeSafeKeys(onKeyDown);
+	return /* @__PURE__ */ jsxs(ComboBox, {
+		id,
+		name,
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: (key) => onSelectionChange?.(key === null ? null : String(key)),
+		inputValue,
+		defaultInputValue,
+		onInputChange,
+		allowsCustomValue,
+		menuTrigger,
+		onOpenChange,
+		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__ */ jsxs(Group, {
+				"data-slot": "inputWrapper",
+				className: s.inputWrapper({ class: classNames?.inputWrapper }),
+				children: [/* @__PURE__ */ jsx(Input, {
+					"data-slot": "input",
+					placeholder,
+					className: s.input({ class: classNames?.input }),
+					...keyProps
+				}), /* @__PURE__ */ jsx(Button, {
+					"data-slot": "trigger",
+					className: s.trigger({ class: classNames?.trigger }),
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "icon",
+						className: s.icon({ class: classNames?.icon }),
+						children: /* @__PURE__ */ jsx(TriggerIcon, {})
+					})
+				})]
+			}),
+			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
+			}),
+			/* @__PURE__ */ jsx(Popover, {
+				"data-slot": "popover",
+				className: s.popover({ class: classNames?.popover }),
+				children: /* @__PURE__ */ jsx(ListBox, {
+					"data-slot": "listbox",
+					className: s.listbox({ class: classNames?.listbox }),
+					children
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ComboBox$1 as ComboBox, ComboBoxItem };
+
+//# sourceMappingURL=combo-box.mjs.map

package/dist/combo-box/combo-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.mjs","names":["ComboBox","RACComboBox"],"sources":["../../src/combo-box/combo-box.tsx"],"sourcesContent":["'use client'\n\nimport type { ComboBoxProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport type { ReactNode } from 'react'\nimport {\n  Button,\n  FieldError,\n  Group,\n  Input,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Popover,\n  ComboBox as RACComboBox,\n  Text,\n} from 'react-aria-components'\nimport { comboBoxStyles } from './combo-box.styles'\n\n/** 開閉を示す記号。Select と同じ上下の線。 */\nfunction TriggerIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6.5l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** 選択値。`onSelectionChange` に渡る */\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * ComboBox の選択肢。`ComboBox` の子として置く。\n *\n * 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する\n * 文字列を持てないため、絞り込みの対象にならない。\n *\n * @example\n * <ComboBoxItem id=\"tokyo\">東京都</ComboBoxItem>\n */\nexport function ComboBoxItem({ id, isDisabled, children, className }: ComboBoxItemProps) {\n  return (\n    <ListBoxItem\n      id={id}\n      isDisabled={isDisabled}\n      textValue={typeof children === 'string' ? children : undefined}\n      data-slot=\"option\"\n      className={className ?? comboBoxStyles().option()}\n    >\n      {children}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 文字を打って絞り込み、一覧から1つ選ぶ。\n *\n * 一覧は入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。\n * IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。\n *\n * @example\n * <ComboBox label=\"都道府県\" onSelectionChange={setPref}>\n *   <ComboBoxItem id=\"tokyo\">東京都</ComboBoxItem>\n *   <ComboBoxItem id=\"osaka\">大阪府</ComboBoxItem>\n * </ComboBox>\n */\nexport function ComboBox({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder,\n  description,\n  errorMessage,\n  name,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  inputValue,\n  defaultInputValue,\n  onInputChange,\n  allowsCustomValue,\n  menuTrigger,\n  onOpenChange,\n  onKeyDown,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: ComboBoxProps) {\n  const s = comboBoxStyles({ variant, size, radius })\n  const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n  return (\n    <RACComboBox\n      id={id}\n      name={name}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(key === null ? null : String(key))}\n      inputValue={inputValue}\n      defaultInputValue={defaultInputValue}\n      onInputChange={onInputChange}\n      allowsCustomValue={allowsCustomValue}\n      menuTrigger={menuTrigger}\n      onOpenChange={onOpenChange}\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        <Input\n          data-slot=\"input\"\n          placeholder={placeholder}\n          className={s.input({ class: classNames?.input })}\n          {...keyProps}\n        />\n        <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n          <span data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n            <TriggerIcon />\n          </span>\n        </Button>\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\n      <Popover data-slot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </Popover>\n    </RACComboBox>\n  )\n}\n"],"mappings":";;;;;;;AAoBA,SAAS,cAAc;CACrB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAiB,QAAO;GAAe,aAAY;EAAO,CAAA;CAC/D,CAAA;AAET;;;;;;;;;;AAmBA,SAAgB,aAAa,EAAE,IAAI,YAAY,UAAU,aAAgC;CACvF,OACE,oBAAC,aAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,aAAa,eAAe,CAAC,CAAC,OAAO;EAE/C;CACU,CAAA;AAEjB;;;;;;;;;;;;;AAcA,SAAgBA,WAAS,EACvB,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,aACA,oBACA,mBACA,YACA,mBACA,eACA,mBACA,aACA,cACA,WACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAS;EAAM;CAAO,CAAC;CAClD,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAACC,UAAD;EACM;EACE;EACO;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC;EACrE;EACO;EACJ;EACI;EACN;EACC;EACF;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAjB5D,UAAA;GAmBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,OAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAF/D,UAAA,CAIE,oBAAC,OAAD;KACE,aAAU;KACG;KACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;KAC/C,GAAI;IACL,CAAA,GACD,oBAAC,QAAD;KAAQ,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E,UAAA,oBAAC,QAAD;MAAM,aAAU;MAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;MAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;KACV,CAAA;IACA,CAAA,CACH;;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;GAEZ,oBAAC,SAAD;IAAS,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAC9E,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACF,CAAA;EACE;;AAEjB"}

package/dist/combo-box/combo-box.styles.d.mts

@@ -0,0 +1,88 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/combo-box/combo-box.styles.d.ts
+/**
+ * ComboBox のスタイル定義。
+ *
+ * @example
+ * import { comboBoxStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })
+ */
+declare const comboBoxStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: 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;
+    input: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type ComboBoxStyleProps = Parameters<typeof comboBoxStyles>[0];
+//#endregion
+export { ComboBoxStyleProps, comboBoxStyles };
+//# sourceMappingURL=combo-box.styles.d.mts.map

package/dist/combo-box/combo-box.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.styles.d.mts","names":[],"sources":["../../src/combo-box/combo-box.styles.ts"],"mappings":";;;;;;;;;;;cAsHa,4CAAc;;IAhD4B;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;;IA/BE;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;;IA/BE;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;KAuBzC,qBAAqB,kBAAkB"}

package/dist/combo-box/combo-box.styles.mjs

@@ -0,0 +1,110 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/combo-box/combo-box.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 items-center w-full overflow-hidden",
+		"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(" "),
+	input: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)]",
+		"placeholder:text-[var(--novi-color-muted)]"
+	].join(" "),
+	trigger: [
+		"shrink-0 self-stretch inline-flex items-center justify-center w-8",
+		"text-[var(--novi-color-muted)]",
+		"border-l border-[var(--novi-color-border)]",
+		"outline-none",
+		"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
+		"data-[focus-visible]:text-[var(--novi-color-fg)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		"transition-[color,background-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	icon: "shrink-0 inline-flex",
+	popover: [
+		"bg-[var(--novi-color-bg)]",
+		"text-[var(--novi-color-fg)]",
+		"border border-[var(--novi-color-border)]",
+		"rounded-[var(--novi-radius-lg)]",
+		"shadow-[var(--novi-shadow-md)]",
+		"w-[var(--trigger-width)]",
+		"overflow-auto max-h-64"
+	].join(" "),
+	listbox: "outline-none p-1 flex flex-col",
+	option: [
+		"flex items-center justify-between gap-[var(--novi-gap-inline)]",
+		"px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"data-[focused]:bg-[var(--novi-color-subtle)]",
+		"data-[selected]:font-medium",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
+	].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)]"
+};
+/**
+* ComboBox のスタイル定義。
+*
+* @example
+* import { comboBoxStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })
+*/
+const comboBoxStyles = 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: "h-8",
+				input: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
+				option: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "h-10",
+				input: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
+				option: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-12",
+				input: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
+				option: "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: "md"
+	}
+});
+//#endregion
+export { comboBoxStyles };
+
+//# sourceMappingURL=combo-box.styles.mjs.map

package/dist/combo-box/combo-box.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.styles.mjs","names":[],"sources":["../../src/combo-box/combo-box.styles.ts"],"sourcesContent":["import type {\n  comboBoxRequiredSlots,\n  comboBoxSlots,\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'\n\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  // Input と同じ枠。開くボタンを枠の縁まで届かせるため、左右の余白は input 側に置く\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center w-full overflow-hidden',\n    'bg-[var(--novi-color-bg)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'transition-[border-color,opacity]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[invalid]:border-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  input: [\n    'w-full min-w-0 bg-transparent outline-none',\n    'text-[var(--novi-color-fg)]',\n    'placeholder:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  // 開くボタン。1px の縦線で区切るだけで面は持たない（NumberField の増減と同じ型）\n  trigger: [\n    'shrink-0 self-stretch inline-flex items-center justify-center w-8',\n    'text-[var(--novi-color-muted)]',\n    'border-l border-[var(--novi-color-border)]',\n    'outline-none',\n    'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n    'data-[focus-visible]:text-[var(--novi-color-fg)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    'transition-[color,background-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\n  icon: 'shrink-0 inline-flex',\n  // 影を使わず、1px の境界線と背景の差だけで浮かせる（Select と同じ）\n  popover: [\n    'bg-[var(--novi-color-bg)]',\n    'text-[var(--novi-color-fg)]',\n    'border border-[var(--novi-color-border)]',\n    'rounded-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-md)]',\n    // 入力欄と同じ幅に揃える\n    'w-[var(--trigger-width)]',\n    'overflow-auto max-h-64',\n  ].join(' '),\n  listbox: 'outline-none p-1 flex flex-col',\n  option: [\n    'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n    'px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:font-medium',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n  ].join(' '),\n  description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof comboBoxSlots, (typeof comboBoxRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  solid: {\n    inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n  },\n  outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n  ghost: {\n    inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n  },\n  plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button / Input と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string; option: string }> = {\n  sm: {\n    inputWrapper: 'h-8',\n    input: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n    option: 'text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    inputWrapper: 'h-10',\n    input: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n    option: 'text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    inputWrapper: 'h-12',\n    input: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n    option: 'text-[length:var(--novi-text-base)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n  none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n  sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n  md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n  lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n  full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * ComboBox のスタイル定義。\n *\n * @example\n * import { comboBoxStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })\n */\nexport const comboBoxStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type ComboBoxStyleProps = Parameters<typeof comboBoxStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CAEP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AAkDA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAjDZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAyC/C;EAAS;GApCrB,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;GACA,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;GACA,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAc/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}

package/dist/combo-box/index.d.mts

@@ -0,0 +1,3 @@
+import { ComboBox, ComboBoxItem, ComboBoxItemProps } from "./combo-box.mjs";
+import { ComboBoxStyleProps, comboBoxStyles } from "./combo-box.styles.mjs";
+export { ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxStyleProps, comboBoxStyles };

package/dist/date-picker/date-picker.d.mts

@@ -0,0 +1,15 @@
+import { DatePickerProps } from "@novi-ui/core";
+//#region src/date-picker/date-picker.d.ts
+/**
+ * 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。
+ *
+ * カレンダーは入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。
+ * 値は `@internationalized/date` の `CalendarDate`（ADR-B6）。
+ *
+ * @example
+ * <DatePicker label="出荷日" value={date} onChange={setDate} minValue={today} />
+ */
+declare function DatePicker({ variant, size, radius, label, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, placeholderValue, isOpen, defaultOpen, onOpenChange, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }: DatePickerProps): import("react").JSX.Element;
+//#endregion
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.mts.map

package/dist/date-picker/date-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../src/date-picker/date-picker.tsx"],"mappings":";;;;;;;;;;;iBAgDgB,aACd,SACA,MACA,QACA,OACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,mBACA,kBACA,QACA,aACA,cACA,YACA,YACA,YACA,WACA,WACA,YACA,MACC,kCAAe,IAAA"}