@tolokoban/ui 0.22.0 → 0.22.2

package/lib/dist/info.d.ts

@@ -1,5 +1,5 @@
 export declare const name = "@tolokoban/ui";
-export declare const version = "0.22.0";
+export declare const version = "0.22.2";
 export declare const description = "React components with theme";
 export declare const homepage = "https://tolokoban.github.io/ui";
 //# sourceMappingURL=info.d.ts.map

package/lib/dist/info.js

@@ -1,5 +1,5 @@
 export const name = "@tolokoban/ui";
-export const version = "0.22.0";
+export const version = "0.22.2";
 export const description = "React components with theme";
 export const homepage = "https://tolokoban.github.io/ui";
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmZvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxlQUFlLENBQUE7QUFDbkMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQTtBQUMvQixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsNkJBQTZCLENBQUE7QUFDeEQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLGdDQUFnQyxDQUFBIn0=

package/lib/dist/util/customize.d.ts

@@ -1,2 +1,2 @@
-export declare function customizeView<T>(View: React.FC<T>, defaultProps: Partial<T>): React.FC<T>;
+export declare function customizeView<T, S extends Partial<T>>(View: React.FC<T>, defaultProps: S): React.FC<T>;
 //# sourceMappingURL=customize.d.ts.map

package/lib/dist/util/customize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customize.d.ts","sourceRoot":"","sources":["../../src/util/customize.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,EAC3B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EACjB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GACzB,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAQb"}
+{"version":3,"file":"customize.d.ts","sourceRoot":"","sources":["../../src/util/customize.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,EACjD,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EACjB,YAAY,EAAE,CAAC,GAChB,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAQb"}

package/lib/dist/util/customize.js

@@ -5,4 +5,4 @@ export function customizeView(View, defaultProps) {
         return _jsx(View, Object.assign({}, mergedProps));
     };
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9taXplLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWwvY3VzdG9taXplLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLGFBQWEsQ0FDekIsSUFBaUIsRUFDakIsWUFBd0I7SUFFeEIsT0FBTyxDQUFDLEtBQVEsRUFBRSxFQUFFO1FBQ2hCLE1BQU0sV0FBVyxtQ0FDVixZQUFZLEdBQ1osS0FBSyxDQUNYLENBQUE7UUFDRCxPQUFPLEtBQUMsSUFBSSxvQkFBSyxXQUFXLEVBQUksQ0FBQTtJQUNwQyxDQUFDLENBQUE7QUFDTCxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9taXplLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWwvY3VzdG9taXplLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLGFBQWEsQ0FDekIsSUFBaUIsRUFDakIsWUFBZTtJQUVmLE9BQU8sQ0FBQyxLQUF1QixFQUFFLEVBQUU7UUFDL0IsTUFBTSxXQUFXLEdBQUcsZ0NBQ2IsWUFBWSxHQUNaLEtBQUssQ0FDK0IsQ0FBQTtRQUMzQyxPQUFPLEtBQUMsSUFBSSxvQkFBSyxXQUFXLEVBQUksQ0FBQTtJQUNwQyxDQUFDLENBQUE7QUFDTCxDQUFDIn0=

package/lib/dist/view/Tooltip/Tooltip.d.ts

@@ -7,6 +7,7 @@ export interface tooltipProps extends ChildStyleProps, PositionStyleProps, Dimen
     className?: string;
     content?: React.ReactNode;
     children?: React.ReactNode;
+    attach?: "top" | "top-left" | "top-right" | "bottom";
 }
 export declare function ViewTooltip(props: tooltipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/lib/dist/view/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/view/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,OAAO,EACH,eAAe,EACf,eAAe,EAIlB,MAAM,aAAa,CAAA;AACpB,OAAO,EACH,mBAAmB,EAEtB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAiB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAc,MAAM,0BAA0B,CAAA;AAItE,MAAM,WAAW,YACb,SAAQ,eAAe,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,eAAe;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,2CAmC9C"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/view/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,OAAO,EACH,eAAe,EACf,eAAe,EAIlB,MAAM,aAAa,CAAA;AACpB,OAAO,EACH,mBAAmB,EAEtB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAiB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAc,MAAM,0BAA0B,CAAA;AAItE,MAAM,WAAW,YACb,SAAQ,eAAe,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,eAAe;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;CACvD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,2CAwC9C"}

package/lib/dist/view/Tooltip/Tooltip.js

@@ -8,9 +8,9 @@ import Styles from "./Tooltip.module.css";
 export function ViewTooltip(props) {
     const id = useId();
     const styleContainer = Object.assign(Object.assign({}, stylePosition(props)), styleChild(props));
-    const styleContent = Object.assign(Object.assign(Object.assign({}, styleDimension(props)), styleColor(Object.assign({ backColor: "primary-8" }, props))), styleSpace(Object.assign({ padding: "M", borderRadius: "S" }, props)));
+    const styleContent = Object.assign(Object.assign(Object.assign({}, styleDimension(props)), styleColor(Object.assign({ shadow: 3, color: "primary-8" }, props))), styleSpace(Object.assign({ padding: "M", borderRadius: "S" }, props)));
     styleContent["--custom-back"] = styleContent.backgroundColor;
-    const { content, children } = props;
-    return (_jsxs("div", { className: Theme.classNames.join(props.className, Styles.tooltip), style: styleContainer, "aria-details": id, children: [children, content && (_jsx("div", { className: Styles.content, style: styleContent, id: id, children: content }))] }));
+    const { content, children, attach = "top" } = props;
+    return (_jsxs("div", { className: Theme.classNames.join(props.className, Styles.tooltip), style: styleContainer, "aria-details": id, children: [children, content && (_jsx("div", { className: [Styles.content, Styles[attach]].join(" "), style: styleContent, id: id, children: content }))] }));
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L1Rvb2x0aXAvVG9vbHRpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQWMsRUFBRSxLQUFLLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFcEMsT0FBTyxFQUdILFVBQVUsRUFDVixVQUFVLEVBQ1YsS0FBSyxHQUNSLE1BQU0sYUFBYSxDQUFBO0FBQ3BCLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0sOEJBQThCLENBQUE7QUFDckMsT0FBTyxFQUFzQixhQUFhLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQTtBQUMvRSxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXRFLE9BQU8sTUFBTSxNQUFNLHNCQUFzQixDQUFBO0FBYXpDLE1BQU0sVUFBVSxXQUFXLENBQUMsS0FBbUI7SUFDM0MsTUFBTSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7SUFDbEIsTUFBTSxjQUFjLG1DQUNiLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FDcEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUN2QixDQUFBO0lBQ0QsTUFBTSxZQUFZLGlEQUNYLGNBQWMsQ0FBQyxLQUFLLENBQUMsR0FDckIsVUFBVSxpQkFDVCxTQUFTLEVBQUUsV0FBVyxJQUNuQixLQUFLLEVBQ1YsR0FDQyxVQUFVLGlCQUNULE9BQU8sRUFBRSxHQUFHLEVBQ1osWUFBWSxFQUFFLEdBQUcsSUFDZCxLQUFLLEVBQ1YsQ0FDTCxDQUFBO0lBQ0QsWUFBWSxDQUFDLGVBQWUsQ0FBQyxHQUFHLFlBQVksQ0FBQyxlQUFlLENBQUE7SUFDNUQsTUFBTSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsR0FBRyxLQUFLLENBQUE7SUFFbkMsT0FBTyxDQUNILGVBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUNqRSxLQUFLLEVBQUUsY0FBYyxrQkFDUCxFQUFFLGFBRWYsUUFBUSxFQUNSLE9BQU8sSUFBSSxDQUNSLGNBQUssU0FBUyxFQUFFLE1BQU0sQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxFQUFFLEVBQUUsRUFBRSxZQUN0RCxPQUFPLEdBQ04sQ0FDVCxJQUNDLENBQ1QsQ0FBQTtBQUNMLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L1Rvb2x0aXAvVG9vbHRpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQWMsRUFBRSxLQUFLLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFcEMsT0FBTyxFQUdILFVBQVUsRUFDVixVQUFVLEVBQ1YsS0FBSyxHQUNSLE1BQU0sYUFBYSxDQUFBO0FBQ3BCLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0sOEJBQThCLENBQUE7QUFDckMsT0FBTyxFQUFzQixhQUFhLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQTtBQUMvRSxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXRFLE9BQU8sTUFBTSxNQUFNLHNCQUFzQixDQUFBO0FBY3pDLE1BQU0sVUFBVSxXQUFXLENBQUMsS0FBbUI7SUFDM0MsTUFBTSxFQUFFLEdBQUcsS0FBSyxFQUFFLENBQUE7SUFDbEIsTUFBTSxjQUFjLG1DQUNiLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FDcEIsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUN2QixDQUFBO0lBQ0QsTUFBTSxZQUFZLGlEQUNYLGNBQWMsQ0FBQyxLQUFLLENBQUMsR0FDckIsVUFBVSxpQkFDVCxNQUFNLEVBQUUsQ0FBQyxFQUNULEtBQUssRUFBRSxXQUFXLElBQ2YsS0FBSyxFQUNWLEdBQ0MsVUFBVSxpQkFDVCxPQUFPLEVBQUUsR0FBRyxFQUNaLFlBQVksRUFBRSxHQUFHLElBQ2QsS0FBSyxFQUNWLENBQ0wsQ0FBQTtJQUNELFlBQVksQ0FBQyxlQUFlLENBQUMsR0FBRyxZQUFZLENBQUMsZUFBZSxDQUFBO0lBQzVELE1BQU0sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sR0FBRyxLQUFLLEVBQUUsR0FBRyxLQUFLLENBQUE7SUFFbkQsT0FBTyxDQUNILGVBQ0ksU0FBUyxFQUFFLEtBQUssQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUNqRSxLQUFLLEVBQUUsY0FBYyxrQkFDUCxFQUFFLGFBRWYsUUFBUSxFQUNSLE9BQU8sSUFBSSxDQUNSLGNBQ0ksU0FBUyxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQ3JELEtBQUssRUFBRSxZQUFZLEVBQ25CLEVBQUUsRUFBRSxFQUFFLFlBRUwsT0FBTyxHQUNOLENBQ1QsSUFDQyxDQUNULENBQUE7QUFDTCxDQUFDIn0=

package/lib/dist/view/Tooltip/Tooltip.module.css

@@ -5,10 +5,14 @@
 
 .tooltip > div.content {
     position: absolute;
-    bottom: calc(-1em - 100%);
-    left: -1em;
+    top: auto;
+    bottom: 0;
+    left: 50%;
+    right: auto;
+    width: max-content;
     background: inherit;
     background-color: inherit;
+    transform: translate(-50%, calc(1em + 100%));
     z-index: 999999;
     pointer-events: none;
     transition: opacity 0.2s;
@@ -26,7 +30,45 @@
     position: absolute;
     width: 0;
     height: 0;
-    left: 1em;
+    left: 50%;
+    right: auto;
     top: -2em;
+    bottom: auto;
+    margin-left: -1em;
     transform: scale(0.5, 1);
 }
+
+.tooltip > div.content.top-left {
+    left: max(calc(100% - 1em), 50%);
+    right: auto;
+    transform: translate(calc(-1em), calc(1em + 100%));
+}
+
+.tooltip > div.content.top-left::after {
+    left: 1em;
+    right: auto;
+}
+
+.tooltip > div.content.top-right {
+    left: auto;
+    right: max(calc(100% - 1em), 50%);
+    transform: translate(1em, calc(1em + 100%));
+}
+
+.tooltip > div.content.top-right::after {
+    left: auto;
+    right: 0;
+}
+
+.tooltip > div.content.bottom {
+    top: 0;
+    bottom: auto;
+    transform: translate(-50%, calc(-1em - 100%));
+}
+
+.tooltip > div.content.bottom::after {
+    border: 1em solid transparent;
+    border-top: 1em solid var(--custom-back);
+    top: auto;
+    bottom: -2em;
+}

package/lib/dist/view/index.js

@@ -1,4 +1,4 @@
-// This file has been generated on Thu, 17 Jul 2025 14:19:55 GMT
+// This file has been generated on Fri, 18 Jul 2025 13:50:04 GMT
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
 export * from "./CodeHighlighter/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tolokoban/ui",
-    "version": "0.22.0",
+    "version": "0.22.2",
     "description": "React components with theme",
     "homepage": "https://tolokoban.github.io/ui",
     "main": "./lib/dist/index.js",