@zenkigen-inc/component-ui 1.19.2 → 1.19.4

package/dist/index.js

@@ -146,7 +146,7 @@ function Avatar({ size = "medium", ...props }) {
 // src/breadcrumb/breadcrumb-item.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline [&_a]:active:text-activeLink02 [&_a]:active:underline", children });
 };
 
 // src/breadcrumb/breadcrumb.tsx
@@ -1408,9 +1408,9 @@ var FileInput = (0, import_react17.forwardRef)(
       {
         "border-uiBorder03 bg-white text-text01": !isDisabled && !isDragOver && !hasErrors,
         "border-activeInput bg-activeInput/5": !isDisabled && isDragOver && !hasErrors,
-        "border-supportDanger bg-white": hasErrors && !isDisabled,
+        "border-supportDanger bg-uiBackground01": hasErrors && !isDisabled,
         "cursor-pointer hover:bg-hover02 active:bg-active02": !isDisabled,
-        "hover:bg-uiBackgroundError active:bg-red-red20": !isDisabled && hasErrors,
+        "hover:bg-hoverUiError active:bg-activeUiError": !isDisabled && hasErrors,
         "border-disabled01 bg-disabled02 text-textPlaceholder cursor-not-allowed": isDisabled
       }
     );
@@ -1818,6 +1818,8 @@ function Modal({
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
+          role: "dialog",
+          "aria-modal": "true",
           className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
           style: { width: renderWidth, height: renderHeight, maxWidth },
           children
@@ -2273,7 +2275,7 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var TextInputErrorMessage = (0, import_react31.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
-    const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = inputProps.isError === true;
     if (!shouldRender) {
       return null;
@@ -2290,7 +2292,7 @@ var import_react32 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TextInputHelperMessage = (0, import_react32.forwardRef)((props, ref) => {
   const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
-  const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = (0, import_clsx26.clsx)(typographyClass, "text-text02");
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
@@ -2377,7 +2379,7 @@ function TextInputInner({
     "pr-2": size === "medium" && hasTrailingElement,
     "pr-3": size === "large" && hasTrailingElement
   });
-  const inputClasses = (0, import_clsx27.clsx)("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx27.clsx)("flex-1 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
     ["typography-label14regular min-h-8 px-2"]: size === "medium",
     ["typography-label16regular min-h-10 px-3"]: size === "large",
     "text-text01": !isError,
@@ -2599,7 +2601,7 @@ var Search = (0, import_react39.forwardRef)(({ width = "100%", size = "medium",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = (0, import_clsx29.clsx)("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx29.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -3168,7 +3170,7 @@ var import_jsx_runtime58 = require("react/jsx-runtime");
 var TextAreaErrorMessage = (0, import_react47.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
-    const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = textAreaProps.isError === true;
     if (!shouldRender) {
       return null;
@@ -3185,7 +3187,7 @@ var import_react48 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var TextAreaHelperMessage = (0, import_react48.forwardRef)((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
-  const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = (0, import_clsx42.clsx)(typographyClass, "text-text02");
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
@@ -3270,10 +3272,10 @@ function TextAreaInner({
     className
   );
   const textAreaClassName = (0, import_clsx43.clsx)(
-    "w-full border-none bg-uiBackground01 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+    "w-full border-none bg-uiBackground01 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder",
     {
       "typography-body14regular px-2 py-2": size === "medium",
-      "text-4 leading-normal px-3.5 py-2.5": size === "large",
+      "typography-body16regular px-3 py-2": size === "large",
       "field-sizing-content": autoHeight,
       "text-text01": !isError,
       "text-supportError": isError,

package/dist/index.mjs

@@ -69,7 +69,7 @@ function Avatar({ size = "medium", ...props }) {
 // src/breadcrumb/breadcrumb-item.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ jsx3("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ jsx3("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline [&_a]:active:text-activeLink02 [&_a]:active:underline", children });
 };
 
 // src/breadcrumb/breadcrumb.tsx
@@ -1341,9 +1341,9 @@ var FileInput = forwardRef4(
       {
         "border-uiBorder03 bg-white text-text01": !isDisabled && !isDragOver && !hasErrors,
         "border-activeInput bg-activeInput/5": !isDisabled && isDragOver && !hasErrors,
-        "border-supportDanger bg-white": hasErrors && !isDisabled,
+        "border-supportDanger bg-uiBackground01": hasErrors && !isDisabled,
         "cursor-pointer hover:bg-hover02 active:bg-active02": !isDisabled,
-        "hover:bg-uiBackgroundError active:bg-red-red20": !isDisabled && hasErrors,
+        "hover:bg-hoverUiError active:bg-activeUiError": !isDisabled && hasErrors,
         "border-disabled01 bg-disabled02 text-textPlaceholder cursor-not-allowed": isDisabled
       }
     );
@@ -1751,6 +1751,8 @@ function Modal({
       /* @__PURE__ */ jsx25(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx25("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx25(
         "div",
         {
+          role: "dialog",
+          "aria-modal": "true",
           className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
           style: { width: renderWidth, height: renderHeight, maxWidth },
           children
@@ -2206,7 +2208,7 @@ import { jsx as jsx33 } from "react/jsx-runtime";
 var TextInputErrorMessage = forwardRef6(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
-    const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = inputProps.isError === true;
     if (!shouldRender) {
       return null;
@@ -2223,7 +2225,7 @@ import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var TextInputHelperMessage = forwardRef7((props, ref) => {
   const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
-  const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = clsx26(typographyClass, "text-text02");
   return /* @__PURE__ */ jsx34("div", { ref, className: helperMessageClassName, ...props });
 });
@@ -2310,7 +2312,7 @@ function TextInputInner({
     "pr-2": size === "medium" && hasTrailingElement,
     "pr-3": size === "large" && hasTrailingElement
   });
-  const inputClasses = clsx27("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+  const inputClasses = clsx27("flex-1 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
     ["typography-label14regular min-h-8 px-2"]: size === "medium",
     ["typography-label16regular min-h-10 px-3"]: size === "large",
     "text-text01": !isError,
@@ -2532,7 +2534,7 @@ var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) =
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = clsx29("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = clsx29("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -3101,7 +3103,7 @@ import { jsx as jsx56 } from "react/jsx-runtime";
 var TextAreaErrorMessage = forwardRef11(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
-    const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = textAreaProps.isError === true;
     if (!shouldRender) {
       return null;
@@ -3118,7 +3120,7 @@ import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var TextAreaHelperMessage = forwardRef12((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
-  const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = clsx42(typographyClass, "text-text02");
   return /* @__PURE__ */ jsx57("div", { ref, className: helperMessageClassName, ...props });
 });
@@ -3203,10 +3205,10 @@ function TextAreaInner({
     className
   );
   const textAreaClassName = clsx43(
-    "w-full border-none bg-uiBackground01 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+    "w-full border-none bg-uiBackground01 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder",
     {
       "typography-body14regular px-2 py-2": size === "medium",
-      "text-4 leading-normal px-3.5 py-2.5": size === "large",
+      "typography-body16regular px-3 py-2": size === "large",
       "field-sizing-content": autoHeight,
       "text-text01": !isError,
       "text-supportError": isError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.19.2",
+  "version": "1.19.4",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.27.16",
-    "@zenkigen-inc/component-config": "1.19.2",
-    "@zenkigen-inc/component-icons": "1.19.2",
-    "@zenkigen-inc/component-theme": "1.19.2",
+    "@zenkigen-inc/component-config": "1.19.4",
+    "@zenkigen-inc/component-icons": "1.19.4",
+    "@zenkigen-inc/component-theme": "1.19.4",
     "clsx": "2.1.1",
     "react-day-picker": "9.13.0"
   }