@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/tooltip/Tooltip.js

@@ -17,7 +17,7 @@ function Tooltip$1({ content, children, placement = "top", delay = 600, isDisabl
 		children: [children, /* @__PURE__ */ jsx(Tooltip, {
 			placement,
 			offset: 6,
-			className: cx(Tooltip_module_default.tooltip, className),
+			className: cx("panneau-tooltip", Tooltip_module_default.tooltip, className),
 			UNSTABLE_portalContainer: container,
 			children: content
 		})]

package/dist/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["Tooltip","AriaTooltip","styles"],"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport {\n    Tooltip as AriaTooltip,\n    type TooltipProps as AriaTooltipProps,\n    TooltipTrigger,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n    /** Content of the tooltip. */\n    content: ReactNode;\n    /** The element that shows the tooltip on hover and focus: a focusable React Aria element. */\n    children: ReactElement;\n    placement?: AriaTooltipProps['placement'];\n    /** Delay before showing, in milliseconds. Defaults to 600. */\n    delay?: number;\n    isDisabled?: boolean;\n    className?: string;\n}\n\n/**\n * A tooltip on hover and keyboard focus. It only adds a description: never put information or\n * actions in it that aren't available otherwise, since touch screens don't show it.\n */\nexport function Tooltip({\n    content,\n    children,\n    placement = 'top',\n    delay = 600,\n    isDisabled = false,\n    className,\n}: TooltipProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return children;\n    }\n    return (\n        <TooltipTrigger delay={delay} isDisabled={isDisabled}>\n            {children}\n            <AriaTooltip\n                placement={placement}\n                offset={6}\n                className={cx(styles.tooltip, className)}\n                UNSTABLE_portalContainer={container}\n            >\n                {content}\n            </AriaTooltip>\n        </TooltipTrigger>\n    );\n}\n"],"mappings":";;;;;;;;;;AA2BA,SAAgBA,UAAQ,EACpB,SACA,UACA,YAAY,OACZ,QAAQ,KACR,aAAa,OACb,aACa;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,qBAAC,gBAAD;EAAuB;EAAmB;EAA1C,UAAA,CACK,UACD,oBAACC,SAAD;GACe;GACX,QAAQ;GACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;GACvC,0BAA0B;GAEzB,UAAA;EACQ,CAAA,CACD;;AAExB"}
+{"version":3,"file":"Tooltip.js","names":["Tooltip","AriaTooltip","styles"],"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport {\n    Tooltip as AriaTooltip,\n    type TooltipProps as AriaTooltipProps,\n    TooltipTrigger,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n    /** Content of the tooltip. */\n    content: ReactNode;\n    /** The element that shows the tooltip on hover and focus: a focusable React Aria element. */\n    children: ReactElement;\n    placement?: AriaTooltipProps['placement'];\n    /** Delay before showing, in milliseconds. Defaults to 600. */\n    delay?: number;\n    isDisabled?: boolean;\n    className?: string;\n}\n\n/**\n * A tooltip on hover and keyboard focus. It only adds a description: never put information or\n * actions in it that aren't available otherwise, since touch screens don't show it.\n */\nexport function Tooltip({\n    content,\n    children,\n    placement = 'top',\n    delay = 600,\n    isDisabled = false,\n    className,\n}: TooltipProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return children;\n    }\n    return (\n        <TooltipTrigger delay={delay} isDisabled={isDisabled}>\n            {children}\n            <AriaTooltip\n                placement={placement}\n                offset={6}\n                className={cx('panneau-tooltip', styles.tooltip, className)}\n                UNSTABLE_portalContainer={container}\n            >\n                {content}\n            </AriaTooltip>\n        </TooltipTrigger>\n    );\n}\n"],"mappings":";;;;;;;;;;AA2BA,SAAgBA,UAAQ,EACpB,SACA,UACA,YAAY,OACZ,QAAQ,KACR,aAAa,OACb,aACa;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,qBAAC,gBAAD;EAAuB;EAAmB;EAA1C,UAAA,CACK,UACD,oBAACC,SAAD;GACe;GACX,QAAQ;GACR,WAAW,GAAG,mBAAmBC,uBAAO,SAAS,SAAS;GAC1D,0BAA0B;GAEzB,UAAA;EACQ,CAAA,CACD;;AAExB"}

package/dist/tooltip/Tooltip.module.js

@@ -1,7 +1,7 @@
 import "./Tooltip.css";
 //#region src/tooltip/Tooltip.module.css
-var tooltip = "panneau-tooltip--CWkTN";
-var fade = "panneau-fade--CCbVC";
+var tooltip = "panneau-tooltip";
+var fade = "panneau-tooltip-fade";
 var Tooltip_module_default = {
 	tooltip,
 	fade

package/dist/tooltip/Tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n    max-width: min(20rem, calc(100vw - 2 * var(--panneau-space-4)));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-bg);\n    background-color: var(--panneau-color-text);\n    border-radius: var(--panneau-radius-sm);\n    box-shadow: var(--panneau-shadow-md);\n    z-index: var(--panneau-z-overlay);\n}\n\n.tooltip[data-entering] {\n    animation: fade var(--panneau-duration);\n}\n\n.tooltip[data-exiting] {\n    animation: fade var(--panneau-duration) reverse ease-in;\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n    max-width: min(20rem, calc(100vw - 2 * var(--panneau-space-4)));\n    padding: var(--panneau-tooltip-padding-y, var(--panneau-space-1))\n        var(--panneau-tooltip-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-tooltip-font-size, var(--panneau-font-size-sm));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-tooltip-color, var(--panneau-color-bg));\n    background-color: var(--panneau-tooltip-bg, var(--panneau-color-text));\n    border-radius: var(--panneau-tooltip-radius, var(--panneau-radius-sm));\n    box-shadow: var(--panneau-shadow-md);\n    z-index: var(--panneau-z-overlay);\n}\n\n.tooltip[data-entering] {\n    animation: fade var(--panneau-duration);\n}\n\n.tooltip[data-exiting] {\n    animation: fade var(--panneau-duration) reverse ease-in;\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n    }\n}\n"],"mappings":""}

package/dist/tooltip/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Tooltip. */
+export declare const tooltipTokens: import("..").ComponentTokens<"tooltip", "panneau-tooltip-color" | "panneau-tooltip-radius" | "panneau-tooltip-padding-y" | "panneau-tooltip-padding-x" | "panneau-tooltip-font-size" | "panneau-tooltip-bg">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tooltip/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tooltip/tokens.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,eAAO,MAAM,aAAa,8MAaxB,CAAC"}

package/dist/tooltip/tokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/tooltip/tokens.ts
+/** Tokens of Tooltip. */
+var tooltipTokens = defineComponentTokens("tooltip", {
+	/** Vertical padding. */
+	"padding-y": "var(--panneau-space-1)",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-2)",
+	/** Font size. */
+	"font-size": "var(--panneau-font-size-sm)",
+	/** Text color. */
+	color: "var(--panneau-color-bg)",
+	/** Background. */
+	bg: "var(--panneau-color-text)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-sm)"
+});
+//#endregion
+export { tooltipTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/tooltip/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/tooltip/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Tooltip. */\nexport const tooltipTokens = defineComponentTokens('tooltip', {\n    /** Vertical padding. */\n    'padding-y': 'var(--panneau-space-1)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-2)',\n    /** Font size. */\n    'font-size': 'var(--panneau-font-size-sm)',\n    /** Text color. */\n    color: 'var(--panneau-color-bg)',\n    /** Background. */\n    bg: 'var(--panneau-color-text)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-sm)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,aAAa;;CAEb,aAAa;;CAEb,aAAa;;CAEb,OAAO;;CAEP,IAAI;;CAEJ,QAAQ;AACZ,CAAC"}

package/dist/utils/cx.d.ts

@@ -1,3 +1,3 @@
-/** Joins class names, skipping empty ones. */
+/** Joins class names, skipping empty and repeated ones. */
 export declare function cx(...classNames: (string | false | null | undefined)[]): string;
 //# sourceMappingURL=cx.d.ts.map

package/dist/utils/cx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../../src/utils/cx.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE/E"}
+{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../../src/utils/cx.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAQ/E"}

package/dist/utils/cx.js

@@ -1,7 +1,7 @@
 //#region src/utils/cx.ts
-/** Joins class names, skipping empty ones. */
+/** Joins class names, skipping empty and repeated ones. */
 function cx(...classNames) {
-	return classNames.filter(Boolean).join(" ");
+	return [...new Set(classNames.flatMap((className) => typeof className === "string" ? className.split(/\s+/).filter(Boolean) : []))].join(" ");
 }
 //#endregion
 export { cx };

package/dist/utils/cx.js.map

@@ -1 +1 @@
-{"version":3,"file":"cx.js","names":[],"sources":["../../src/utils/cx.ts"],"sourcesContent":["/** Joins class names, skipping empty ones. */\nexport function cx(...classNames: (string | false | null | undefined)[]): string {\n    return classNames.filter(Boolean).join(' ');\n}\n"],"mappings":";;AACA,SAAgB,GAAG,GAAG,YAA2D;CAC7E,OAAO,WAAW,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC9C"}
+{"version":3,"file":"cx.js","names":[],"sources":["../../src/utils/cx.ts"],"sourcesContent":["/** Joins class names, skipping empty and repeated ones. */\nexport function cx(...classNames: (string | false | null | undefined)[]): string {\n    return [\n        ...new Set(\n            classNames.flatMap((className) =>\n                typeof className === 'string' ? className.split(/\\s+/).filter(Boolean) : [],\n            ),\n        ),\n    ].join(' ');\n}\n"],"mappings":";;AACA,SAAgB,GAAG,GAAG,YAA2D;CAC7E,OAAO,CACH,GAAG,IAAI,IACH,WAAW,SAAS,cAChB,OAAO,cAAc,WAAW,UAAU,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,IAAI,CAAA,CAC7E,CACJ,CAAC,CACJ,CAAC,KAAK,GAAG;AACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/ui",
-    "version": "5.0.0-alpha.1",
+    "version": "5.0.0-alpha.2",
     "description": "Design tokens, themes and accessible primitives of Panneau, built on React Aria Components.",
     "type": "module",
     "license": "MIT",
@@ -23,11 +23,20 @@
             "types": "./dist/locales/index.d.ts",
             "default": "./dist/locales/index.js"
         },
+        "./theme": {
+            "@panneau/source": "./src/theme/index.ts",
+            "types": "./dist/theme/index.d.ts",
+            "default": "./dist/theme/index.js"
+        },
         "./package.json": "./package.json"
     },
     "files": [
-        "dist"
+        "dist",
+        "bin"
     ],
+    "bin": {
+        "panneau-check-theme": "./bin/check-theme.js"
+    },
     "scripts": {
         "build": "vite build && tsc -p tsconfig.build.json",
         "typecheck": "tsc --noEmit",
@@ -43,7 +52,10 @@
         "react-intl": "^12.0.0"
     },
     "dependencies": {
-        "@panneau/intl": "5.0.0-alpha.1",
+        "@panneau/intl": "5.0.0-alpha.2",
         "lucide-react": "^1.57.0"
+    },
+    "devDependencies": {
+        "@panneau/protocol": "5.0.0-alpha.2"
     }
 }