@novi-ui/raster 0.1.0

package/dist/checkbox/checkbox.styles.d.mts

@@ -0,0 +1,111 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/checkbox/checkbox.styles.d.ts
+/**
+ * Checkbox のスタイル定義。
+ *
+ * @example
+ * import { checkboxStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
+ */
+declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}>>;
+/**
+ * CheckboxGroup のスタイル定義。
+ *
+ * @example
+ * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
+ */
+declare const checkboxGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0];
+type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0];
+//#endregion
+export { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };
+//# sourceMappingURL=checkbox.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cAsEa,4CAAc;;IArCgB;;;IAsBC;IAAe;;;;;;;;;;IAtBhB;;;IAsBC;IAAe;;;;;;;;;;IAtBhB;;;IAsBC;IAAe;;;;;;;;;;;;;;;cAmC9C,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}

package/dist/checkbox/checkbox.styles.mjs

@@ -0,0 +1,89 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/checkbox/checkbox.styles.ts
+const slots = {
+	root: [
+		"inline-flex items-start gap-2",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	control: [
+		"shrink-0 inline-grid place-items-center",
+		"border border-[var(--novi-color-border-strong)]",
+		"rounded-[var(--novi-radius-none)]",
+		"bg-[var(--novi-color-bg)]",
+		"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)]",
+		"group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:border-[var(--c)]",
+		"group-data-[invalid]:border-[var(--novi-color-danger)]",
+		focusRing
+	].join(" "),
+	indicator: "text-[var(--c-fg)] pointer-events-none",
+	label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]"
+};
+/**
+* Checkbox のスタイル定義。
+*
+* @example
+* import { checkboxStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
+*/
+const checkboxStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]" },
+			success: { root: "[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]" },
+			warning: { root: "[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]" },
+			danger: { root: "[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]" }
+		},
+		size: {
+			sm: {
+				control: "size-4",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				control: "size-5",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				control: "size-6",
+				label: "text-[length:var(--novi-text-base)]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+/**
+* CheckboxGroup のスタイル定義。
+*
+* @example
+* const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
+*/
+const checkboxGroupStyles = tv({
+	slots: {
+		root: "flex flex-col gap-2",
+		label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+		list: "flex flex-col gap-2",
+		description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+		errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+	},
+	variants: { orientation: {
+		vertical: { list: "flex-col gap-2" },
+		horizontal: { list: "flex-row gap-4 flex-wrap" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { checkboxGroupStyles, checkboxStyles };
+
+//# sourceMappingURL=checkbox.styles.mjs.map

package/dist/checkbox/checkbox.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n  checkboxGroupRequiredSlots,\n  checkboxGroupSlots,\n  checkboxRequiredSlots,\n  checkboxSlots,\n  NoviColor,\n  NoviSize,\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: ['inline-flex items-start gap-2', 'cursor-pointer', disabledState].join(' '),\n  // 角丸 0 の四角。円にしない\n  control: [\n    'shrink-0 inline-grid place-items-center',\n    'border border-[var(--novi-color-border-strong)]',\n    'rounded-[var(--novi-radius-none)]',\n    'bg-[var(--novi-color-bg)]',\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    'group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:border-[var(--c)]',\n    'group-data-[invalid]:border-[var(--novi-color-danger)]',\n    focusRing,\n  ].join(' '),\n  indicator: 'text-[var(--c-fg)] pointer-events-none',\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 checkboxSlots, (typeof checkboxRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: {\n    root: '[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]',\n  },\n  primary: {\n    root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]',\n  },\n  secondary: {\n    root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]',\n  },\n  success: {\n    root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]',\n  },\n  warning: {\n    root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]',\n  },\n  danger: {\n    root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]',\n  },\n}\n\n/** 16 / 20 / 24px。いずれも実効タップ領域は root 側の余白で 24px 以上を確保する。 */\nconst size: VariantMap<NoviSize, { control: string; label: string }> = {\n  sm: { control: 'size-4', label: 'text-[length:var(--novi-text-sm)]' },\n  md: { control: 'size-5', label: 'text-[length:var(--novi-text-base)]' },\n  lg: { control: 'size-6', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })\n */\nexport const checkboxStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n  root: 'flex flex-col gap-2',\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  list: 'flex flex-col gap-2',\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 checkboxGroupSlots, (typeof checkboxGroupRequiredSlots)[number]>\n\n/**\n * CheckboxGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const checkboxGroupStyles = tv({\n  slots: groupSlots,\n  variants: {\n    orientation: {\n      vertical: { list: 'flex-col gap-2' },\n      horizontal: { list: 'flex-row gap-4 flex-wrap' },\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0]\nexport type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0]\n"],"mappings":";;;AAaA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAiC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAEjF,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;;;;AAuCA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAtCZ,SAAS,EACP,MAAM,2DACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,WAAW,EACT,MAAM,4EACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,QAAQ,EACN,MAAM,sEACR;EAqBY;EAAO;GAhBnB,IAAI;IAAE,SAAS;IAAU,OAAO;GAAoC;GACpE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;GACtE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;EAcnD;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;;;;;;;AAgBD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}

package/dist/checkbox/index.d.mts

@@ -0,0 +1,3 @@
+import { Checkbox, CheckboxGroup } from "./checkbox.mjs";
+import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
+export { Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };

package/dist/index.d.mts

@@ -0,0 +1,61 @@
+import { Accordion, AccordionItem, AccordionItemProps } from "./accordion/accordion.mjs";
+import { AccordionStyleProps, accordionStyles } from "./accordion/accordion.styles.mjs";
+import "./accordion/index.mjs";
+import { Avatar, initialsOf } from "./avatar/avatar.mjs";
+import { AvatarStyleProps, avatarStyles } from "./avatar/avatar.styles.mjs";
+import "./avatar/index.mjs";
+import { Badge } from "./badge/badge.mjs";
+import { BadgeStyleProps, badgeStyles } from "./badge/badge.styles.mjs";
+import "./badge/index.mjs";
+import { Breadcrumb, BreadcrumbProps, Breadcrumbs } from "./breadcrumbs/breadcrumbs.mjs";
+import { BreadcrumbsStyleProps, breadcrumbsStyles } from "./breadcrumbs/breadcrumbs.styles.mjs";
+import "./breadcrumbs/index.mjs";
+import { Button } from "./button/button.mjs";
+import { ButtonStyleProps, buttonStyles } from "./button/button.styles.mjs";
+import "./button/index.mjs";
+import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
+import { CardStyleProps, cardStyles } from "./card/card.styles.mjs";
+import "./card/index.mjs";
+import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
+import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
+import "./checkbox/index.mjs";
+import { Input } from "./input/input.mjs";
+import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
+import "./input/index.mjs";
+import { Menu, MenuItemComponent, MenuItemProps, MenuSection, MenuSeparator } from "./menu/menu.mjs";
+import { MenuStyleProps, menuStyles } from "./menu/menu.styles.mjs";
+import "./menu/index.mjs";
+import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
+import { ModalStyleProps, modalStyles } from "./modal/modal.styles.mjs";
+import "./modal/index.mjs";
+import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
+import { PopoverStyleProps, TooltipStyleProps, popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
+import "./popover/index.mjs";
+import { Progress } from "./progress/progress.mjs";
+import { ProgressStyleProps, progressStyles } from "./progress/progress.styles.mjs";
+import "./progress/index.mjs";
+import { Radio, RadioGroup } from "./radio/radio.mjs";
+import { RadioGroupStyleProps, RadioStyleProps, radioGroupStyles, radioStyles } from "./radio/radio.styles.mjs";
+import "./radio/index.mjs";
+import { Select, SelectItem, SelectItemProps } from "./select/select.mjs";
+import { SelectStyleProps, selectStyles } from "./select/select.styles.mjs";
+import "./select/index.mjs";
+import { Skeleton } from "./skeleton/skeleton.mjs";
+import { SkeletonStyleProps, skeletonStyles } from "./skeleton/skeleton.styles.mjs";
+import "./skeleton/index.mjs";
+import { Spinner } from "./spinner/spinner.mjs";
+import { SpinnerStyleProps, spinnerStyles } from "./spinner/spinner.styles.mjs";
+import "./spinner/index.mjs";
+import { Switch } from "./switch/switch.mjs";
+import { SwitchStyleProps, switchStyles } from "./switch/switch.styles.mjs";
+import "./switch/index.mjs";
+import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
+import { TabsStyleProps, tabsStyles } from "./tabs/tabs.styles.mjs";
+import "./tabs/index.mjs";
+import { TextArea } from "./textarea/textarea.mjs";
+import { TextareaStyleProps, textareaStyles } from "./textarea/textarea.styles.mjs";
+import "./textarea/index.mjs";
+import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
+import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
+import "./toast/index.mjs";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

package/dist/index.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { accordionStyles } from "./accordion/accordion.styles.mjs";
+import { Accordion, AccordionItem } from "./accordion/accordion.mjs";
+import { avatarStyles } from "./avatar/avatar.styles.mjs";
+import { Avatar, initialsOf } from "./avatar/avatar.mjs";
+import { badgeStyles } from "./badge/badge.styles.mjs";
+import { Badge } from "./badge/badge.mjs";
+import { breadcrumbsStyles } from "./breadcrumbs/breadcrumbs.styles.mjs";
+import { Breadcrumb, Breadcrumbs } from "./breadcrumbs/breadcrumbs.mjs";
+import { buttonStyles } from "./button/button.styles.mjs";
+import { Button } from "./button/button.mjs";
+import { cardStyles } from "./card/card.styles.mjs";
+import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
+import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
+import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
+import { inputStyles } from "./input/input.styles.mjs";
+import { Input } from "./input/input.mjs";
+import { menuStyles } from "./menu/menu.styles.mjs";
+import { Menu, MenuItemComponent, MenuSection, MenuSeparator } from "./menu/menu.mjs";
+import { modalStyles } from "./modal/modal.styles.mjs";
+import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
+import { popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
+import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
+import { progressStyles } from "./progress/progress.styles.mjs";
+import { Progress } from "./progress/progress.mjs";
+import { radioGroupStyles, radioStyles } from "./radio/radio.styles.mjs";
+import { Radio, RadioGroup } from "./radio/radio.mjs";
+import { selectStyles } from "./select/select.styles.mjs";
+import { Select, SelectItem } from "./select/select.mjs";
+import { skeletonStyles } from "./skeleton/skeleton.styles.mjs";
+import { Skeleton } from "./skeleton/skeleton.mjs";
+import { spinnerStyles } from "./spinner/spinner.styles.mjs";
+import { Spinner } from "./spinner/spinner.mjs";
+import { switchStyles } from "./switch/switch.styles.mjs";
+import { Switch } from "./switch/switch.mjs";
+import { tabsStyles } from "./tabs/tabs.styles.mjs";
+import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
+import { textareaStyles } from "./textarea/textarea.styles.mjs";
+import { TextArea } from "./textarea/textarea.mjs";
+import { toastStyles } from "./toast/toast.styles.mjs";
+import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
+export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

package/dist/input/index.d.mts

@@ -0,0 +1,3 @@
+import { Input } from "./input.mjs";
+import { InputStyleProps, inputStyles } from "./input.styles.mjs";
+export { Input, type InputStyleProps, inputStyles };

package/dist/input/input.d.mts

@@ -0,0 +1,20 @@
+import { InputProps } from "@novi-ui/core";
+//#region src/input/input.d.ts
+/**
+ * 1行テキスト入力。
+ *
+ * `onKeyDown` は IME 変換中のキーを受け取らない。
+ * 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。
+ *
+ * @example
+ * <Input
+ *   label="メールアドレス"
+ *   type="email"
+ *   isRequired
+ *   description="ログインに使用します"
+ * />
+ */
+declare function Input({ variant, size, radius, label, placeholder, description, errorMessage, type, name, value, defaultValue, onChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, startContent, endContent, className, classNames, id }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input };
+//# sourceMappingURL=input.d.mts.map

package/dist/input/input.d.mts.map

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

package/dist/input/input.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { inputStyles } from "./input.styles.mjs";
+import { FieldError, Group, Input, Label, Text, TextField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useImeSafeKeys } from "@novi-ui/core/client";
+//#region src/input/input.tsx
+/**
+* 1行テキスト入力。
+*
+* `onKeyDown` は IME 変換中のキーを受け取らない。
+* 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。
+*
+* @example
+* <Input
+*   label="メールアドレス"
+*   type="email"
+*   isRequired
+*   description="ログインに使用します"
+* />
+*/
+function Input$1({ variant, size, radius, label, placeholder, description, errorMessage, type = "text", name, value, defaultValue, onChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, startContent, endContent, className, classNames, id }) {
+	const s = inputStyles({
+		variant,
+		size,
+		radius
+	});
+	const keyProps = useImeSafeKeys(onKeyDown);
+	return /* @__PURE__ */ jsxs(TextField, {
+		id,
+		name,
+		type,
+		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__ */ jsxs(Group, {
+				"data-slot": "inputWrapper",
+				className: s.inputWrapper({ class: classNames?.inputWrapper }),
+				children: [
+					startContent !== void 0 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "startContent",
+						className: s.startContent({ class: classNames?.startContent }),
+						children: startContent
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						"data-slot": "input",
+						placeholder,
+						className: s.input({ class: classNames?.input }),
+						...keyProps
+					}),
+					endContent !== void 0 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "endContent",
+						className: s.endContent({ class: classNames?.endContent }),
+						children: endContent
+					})
+				]
+			}),
+			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 { Input$1 as Input };
+
+//# sourceMappingURL=input.mjs.map

package/dist/input/input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.mjs","names":["Input","RACInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport { FieldError, Group, Label, Input as RACInput, Text, TextField } from 'react-aria-components'\nimport { inputStyles } from './input.styles'\n\n/**\n * 1行テキスト入力。\n *\n * `onKeyDown` は IME 変換中のキーを受け取らない。\n * 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。\n *\n * @example\n * <Input\n *   label=\"メールアドレス\"\n *   type=\"email\"\n *   isRequired\n *   description=\"ログインに使用します\"\n * />\n */\nexport function Input({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder,\n  description,\n  errorMessage,\n  type = 'text',\n  name,\n  value,\n  defaultValue,\n  onChange,\n  onKeyDown,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  startContent,\n  endContent,\n  className,\n  classNames,\n  id,\n}: InputProps) {\n  const s = inputStyles({ variant, size, radius })\n  const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n  return (\n    <TextField\n      id={id}\n      name={name}\n      type={type}\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        {startContent !== undefined && (\n          <span\n            data-slot=\"startContent\"\n            className={s.startContent({ class: classNames?.startContent })}\n          >\n            {startContent}\n          </span>\n        )}\n\n        <RACInput\n          data-slot=\"input\"\n          placeholder={placeholder}\n          className={s.input({ class: classNames?.input })}\n          {...keyProps}\n        />\n\n        {endContent !== undefined && (\n          <span data-slot=\"endContent\" className={s.endContent({ class: classNames?.endContent })}>\n            {endContent}\n          </span>\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      {/* 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1） */}\n      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </TextField>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,SAAgBA,QAAM,EACpB,SACA,MACA,QACA,OACA,aACA,aACA,cACA,OAAO,QACP,MACA,OACA,cACA,UACA,WACA,YACA,YACA,YACA,WACA,cACA,YACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY;EAAE;EAAS;EAAM;CAAO,CAAC;CAC/C,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAAC,WAAD;EACM;EACE;EACA;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAZ5D,UAAA;GAcG,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;KAIG,iBAAiB,KAAA,KAChB,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;MAE5D,UAAA;KACG,CAAA;KAGR,oBAACC,OAAD;MACE,aAAU;MACG;MACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;MAC/C,GAAI;KACL,CAAA;KAEA,eAAe,KAAA,KACd,oBAAC,QAAD;MAAM,aAAU;MAAa,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;MACnF,UAAA;KACG,CAAA;IAEH;;GAEN,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAIR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}

package/dist/input/input.styles.d.mts

@@ -0,0 +1,81 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/input/input.styles.d.ts
+/**
+ * Input のスタイル定義。
+ *
+ * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。
+ *
+ * @example
+ * import { inputStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myInput = tv({
+ *   extend: inputStyles,
+ *   slots: { inputWrapper: 'font-mono' },
+ * })
+ */
+declare const inputStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: 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;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type InputStyleProps = Parameters<typeof inputStyles>[0];
+//#endregion
+export { InputStyleProps, inputStyles };
+//# sourceMappingURL=input.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;;;;;;cA6Fa,yCAAW;;IA9C+B;;;IAkBN;IAAe;;;IAMX;;;;;;;;;;;;;IAxBE;;;IAkBN;IAAe;;;IAMX;;;;;;;;;;;;;IAxBE;;;IAkBN;IAAe;;;IAMX;;;;;;;;;;;;KA4BzC,kBAAkB,kBAAkB"}

package/dist/input/input.styles.mjs

@@ -0,0 +1,83 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/input/input.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 gap-2 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(" "),
+	input: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)]",
+		"placeholder:text-[var(--novi-color-muted)]"
+	].join(" "),
+	startContent: "shrink-0 inline-flex text-[var(--novi-color-muted)]",
+	endContent: "shrink-0 inline-flex text-[var(--novi-color-muted)]",
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+};
+/**
+* Input のスタイル定義。
+*
+* 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。
+*
+* @example
+* import { inputStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myInput = tv({
+*   extend: inputStyles,
+*   slots: { inputWrapper: 'font-mono' },
+* })
+*/
+const inputStyles = 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 px-2.5",
+				input: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "h-10 px-3",
+				input: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-12 px-3.5",
+				input: "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 { inputStyles };
+
+//# sourceMappingURL=input.styles.mjs.map

package/dist/input/input.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n  inputRequiredSlots,\n  inputSlots,\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\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n  // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center gap-2 w-full',\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  startContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n  endContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n  description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n  // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * core の語彙定義（solid=塗りつぶしで最も強い / soft=淡い背景で境界線なし）に従って\n * 5つを視覚的に区別する。同じクラスを生む variant があると\n * 「テーマを切り替えても API が同じ」という約束が形だけになる。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  // 面 + 境界線。最も重い\n  solid: {\n    inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n  },\n  // 境界線のみ。背景は地のまま\n  outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  // 淡い面のみ。境界線なし\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n  // 下線だけ。表を詰めて並べるときに面を増やさない\n  ghost: {\n    inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n  },\n  // 完全に無装飾。インライン編集などで使う\n  plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n  sm: { inputWrapper: 'h-8 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n  md: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n  lg: { inputWrapper: 'h-12 px-3.5', input: 'text-[length:var(--novi-text-base)]' },\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 * Input のスタイル定義。\n *\n * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。\n *\n * @example\n * import { inputStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({\n *   extend: inputStyles,\n *   slots: { inputWrapper: 'font-mono' },\n * })\n */\nexport const inputStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'none' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;AAaA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO;CAGP,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;CACV,cAAc;CACd,YAAY;CACZ,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA9CZ,OAAO,EACL,cAAc,yEAChB;GAEA,SAAS,EAAE,cAAc,qEAAqE;GAE9F,MAAM,EAAE,cAAc,mDAAmD;GAEzE,OAAO,EACL,cAAc,+EAChB;GAEA,OAAO,EAAE,cAAc,oCAAoC;EAkC/C;EAAS;GA7BrB,IAAI;IAAE,cAAc;IAAc,OAAO;GAAoC;GAC7E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;GAC9E,IAAI;IAAE,cAAc;IAAe,OAAO;GAAsC;EA2B3D;EAAM;GAvB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAmB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAO;AACpE,CAAC"}

package/dist/menu/index.d.mts

@@ -0,0 +1,3 @@
+import { Menu, MenuItemComponent, MenuItemProps, MenuSection, MenuSeparator } from "./menu.mjs";
+import { MenuStyleProps, menuStyles } from "./menu.styles.mjs";
+export { Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, menuStyles };