@gridui/overlay 1.0.0 → 1.1.1

package/README.md

@@ -1,8 +1,22 @@
 # @gridui/overlay
 
-Core family. Public API: `OverlayOpen`, `RetainedLayer`, `RetainedLayerProps`, `useOverlayState`.
+Core family. Public API: `OverlayOpen`, `RetainedLayer`, `RetainedLayerProps`, `useOverlayState`, `overlaySurfaceStyles`, `overlayBackdropStyles`.
 
 Import components from `@gridui/overlay` and load `@gridui/overlay/styles.css` after Theme.
 Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
 
 See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).
+
+## Surface presentation
+
+`overlaySurfaceStyles({ kind })` shares the surface border, colors, motion, and
+reduced-motion behavior. `kind` is `popup` (default), `tooltip`, or `dialog`.
+`overlayBackdropStyles({ pace })` shares backdrop fades at `normal` (default)
+or `deliberate` pace. Load this stylesheet before the consuming family.
+
+Each family maps its own positioning origin to `--gridui-overlay-origin`.
+Popup motion follows `data-side`; `data-side="none"` disables surface motion for
+item-aligned Select. Open/closed and Tooltip's instant/delayed open states are
+supported. Families keep dimensions, stacking, positioning, portals, focus,
+and dismissal. Drawer retains its directional panel motion and uses only the
+shared backdrop. Theme continues to own motion tokens and keyframes.

package/dist/index.d.ts

@@ -7,4 +7,5 @@
 export type { RetainedLayerProps } from "./retained-layer/retained-layer";
 export { OverlayOpen } from "./retained-layer/retained-layer";
 export { RetainedLayer } from "./retained-layer/retained-layer";
+export { overlayBackdropStyles, overlaySurfaceStyles } from "./shared/style";
 export { useOverlayState } from "./shared/use-overlay-state";

package/dist/index.js

@@ -14,6 +14,28 @@ var RetainedLayer = (props) => {
   );
 };
 
+// src/shared/style.ts
+import { cva } from "class-variance-authority";
+var overlaySurfaceStyles = cva("gridui-overlay-surface border border-solid border-border bg-background text-foreground", {
+  variants: {
+    kind: {
+      popup: "gridui-overlay-floating rounded-control",
+      tooltip: "gridui-overlay-tooltip rounded-control",
+      dialog: "gridui-overlay-dialog"
+    }
+  },
+  defaultVariants: { kind: "popup" }
+});
+var overlayBackdropStyles = cva("gridui-overlay-backdrop", {
+  variants: {
+    pace: {
+      normal: null,
+      deliberate: "gridui-overlay-backdrop-deliberate"
+    }
+  },
+  defaultVariants: { pace: "normal" }
+});
+
 // src/shared/use-overlay-state.ts
 import { useState } from "react";
 var useOverlayState = (options) => {
@@ -34,6 +56,8 @@ var useOverlayState = (options) => {
 export {
   OverlayOpen,
   RetainedLayer,
+  overlayBackdropStyles,
+  overlaySurfaceStyles,
   useOverlayState
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/retained-layer/retained-layer.tsx", "../src/shared/use-overlay-state.ts"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Overlay\n * @namespace RetainedLayer\n * @description Retained Layer\n */\n\nimport { Activity, createContext, type FC, type ReactNode, useContext } from \"react\";\n\nexport const OverlayOpen = createContext(false);\n\nexport type RetainedLayerProps = {\n    readonly children: ReactNode;\n};\n\nexport const RetainedLayer: FC<RetainedLayerProps> = (props: RetainedLayerProps) => {\n    const { children } = props;\n    const open = useContext(OverlayOpen);\n    return (<Activity\n        mode={!open ? \"hidden\" : \"visible\"}\n    >\n        {children}\n    </Activity>);\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Overlay State\n */\n\nimport { useState } from \"react\";\n\ntype OverlayStateOptions = {\n    readonly open?: boolean | undefined;\n    readonly defaultOpen?: boolean | undefined;\n    readonly onOpenChange?: ((open: boolean) => void) | undefined;\n};\n\nexport const useOverlayState = (options: OverlayStateOptions) => {\n    const [\n        localOpen,\n        setLocalOpen,\n    ] = useState(options.defaultOpen ?? false);\n    return {\n        open: options.open ?? localOpen,\n        onOpenChange: (open: boolean): void => {\n            if (options.open === undefined) {\n                setLocalOpen(open);\n            }\n            options.onOpenChange?.(open);\n        },\n    };\n};\n"],
-  "mappings": ";AAOA,SAAS,UAAU,eAAwC,kBAAkB;AAWjE;AATL,IAAM,cAAc,cAAc,KAAK;AAMvC,IAAM,gBAAwC,CAAC,UAA8B;AAChF,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,OAAO,WAAW,WAAW;AACnC,SAAQ;AAAA,IAAC;AAAA;AAAA,MACL,MAAM,CAAC,OAAO,WAAW;AAAA,MAExB;AAAA;AAAA,EACL;AACJ;;;AChBA,SAAS,gBAAgB;AAQlB,IAAM,kBAAkB,CAAC,YAAiC;AAC7D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,EACJ,IAAI,SAAS,QAAQ,eAAe,KAAK;AACzC,SAAO;AAAA,IACH,MAAM,QAAQ,QAAQ;AAAA,IACtB,cAAc,CAAC,SAAwB;AACnC,UAAI,QAAQ,SAAS,QAAW;AAC5B,qBAAa,IAAI;AAAA,MACrB;AACA,cAAQ,eAAe,IAAI;AAAA,IAC/B;AAAA,EACJ;AACJ;",
+  "sources": ["../src/retained-layer/retained-layer.tsx", "../src/shared/style.ts", "../src/shared/use-overlay-state.ts"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Overlay\n * @namespace RetainedLayer\n * @description Retained Layer\n */\n\nimport { Activity, createContext, type FC, type ReactNode, useContext } from \"react\";\n\nexport const OverlayOpen = createContext(false);\n\nexport type RetainedLayerProps = {\n    readonly children: ReactNode;\n};\n\nexport const RetainedLayer: FC<RetainedLayerProps> = (props: RetainedLayerProps) => {\n    const { children } = props;\n    const open = useContext(OverlayOpen);\n    return (<Activity\n        mode={!open ? \"hidden\" : \"visible\"}\n    >\n        {children}\n    </Activity>);\n};\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Style\n */\n\nimport { cva } from \"class-variance-authority\";\n\nexport const overlaySurfaceStyles = cva(\"gridui-overlay-surface border border-solid border-border bg-background text-foreground\", {\n    variants: {\n        kind: {\n            popup: \"gridui-overlay-floating rounded-control\",\n            tooltip: \"gridui-overlay-tooltip rounded-control\",\n            dialog: \"gridui-overlay-dialog\",\n        },\n    },\n    defaultVariants: { kind: \"popup\" },\n});\n\nexport const overlayBackdropStyles = cva(\"gridui-overlay-backdrop\", {\n    variants: {\n        pace: {\n            normal: null,\n            deliberate: \"gridui-overlay-backdrop-deliberate\",\n        },\n    },\n    defaultVariants: { pace: \"normal\" },\n});\n", "/**\n * @author WMXPY\n * @package Overlay\n * @namespace Shared\n * @description Use Overlay State\n */\n\nimport { useState } from \"react\";\n\ntype OverlayStateOptions = {\n    readonly open?: boolean | undefined;\n    readonly defaultOpen?: boolean | undefined;\n    readonly onOpenChange?: ((open: boolean) => void) | undefined;\n};\n\nexport const useOverlayState = (options: OverlayStateOptions) => {\n    const [\n        localOpen,\n        setLocalOpen,\n    ] = useState(options.defaultOpen ?? false);\n    return {\n        open: options.open ?? localOpen,\n        onOpenChange: (open: boolean): void => {\n            if (options.open === undefined) {\n                setLocalOpen(open);\n            }\n            options.onOpenChange?.(open);\n        },\n    };\n};\n"],
+  "mappings": ";AAOA,SAAS,UAAU,eAAwC,kBAAkB;AAWjE;AATL,IAAM,cAAc,cAAc,KAAK;AAMvC,IAAM,gBAAwC,CAAC,UAA8B;AAChF,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,OAAO,WAAW,WAAW;AACnC,SAAQ;AAAA,IAAC;AAAA;AAAA,MACL,MAAM,CAAC,OAAO,WAAW;AAAA,MAExB;AAAA;AAAA,EACL;AACJ;;;AChBA,SAAS,WAAW;AAEb,IAAM,uBAAuB,IAAI,0FAA0F;AAAA,EAC9H,UAAU;AAAA,IACN,MAAM;AAAA,MACF,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACZ;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,MAAM,QAAQ;AACrC,CAAC;AAEM,IAAM,wBAAwB,IAAI,2BAA2B;AAAA,EAChE,UAAU;AAAA,IACN,MAAM;AAAA,MACF,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,MAAM,SAAS;AACtC,CAAC;;;ACrBD,SAAS,gBAAgB;AAQlB,IAAM,kBAAkB,CAAC,YAAiC;AAC7D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,EACJ,IAAI,SAAS,QAAQ,eAAe,KAAK;AACzC,SAAO;AAAA,IACH,MAAM,QAAQ,QAAQ;AAAA,IACtB,cAAc,CAAC,SAAwB;AACnC,UAAI,QAAQ,SAAS,QAAW;AAC5B,qBAAa,IAAI;AAAA,MACrB;AACA,cAAQ,eAAe,IAAI;AAAA,IAC/B;AAAA,EACJ;AACJ;",
   "names": []
 }

package/dist/shared/style.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Overlay
+ * @namespace Shared
+ * @description Style
+ */
+export declare const overlaySurfaceStyles: (props?: ({
+    kind?: "popup" | "tooltip" | "dialog" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const overlayBackdropStyles: (props?: ({
+    pace?: "normal" | "deliberate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/styles.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
   .visible {
@@ -7,4 +8,94 @@
   .hidden {
     display: none;
   }
+  .rounded-control {
+    border-radius: var(--gridui-control-radius);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-border {
+    border-color: var(--gridui-border);
+  }
+  .bg-background {
+    background-color: var(--gridui-background);
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+}
+@layer components {
+  .gridui-overlay-surface {
+    --gridui-surface-offset-x: 0px;
+    --gridui-surface-offset-y: 0px;
+    --gridui-overlay-enter-duration: var(--gridui-motion-duration-normal);
+    --gridui-overlay-fill-mode: both;
+    transform-origin: var(--gridui-overlay-origin, center);
+  }
+  .gridui-overlay-dialog {
+    --gridui-overlay-fill-mode: none;
+    transform-origin: center;
+  }
+  .gridui-overlay-tooltip {
+    --gridui-overlay-enter-duration: var(--gridui-motion-duration-quick);
+  }
+  .gridui-overlay-floating[data-side="bottom"] {
+    --gridui-surface-offset-y: calc(-1 * var(--gridui-motion-distance));
+  }
+  .gridui-overlay-floating[data-side="top"] {
+    --gridui-surface-offset-y: var(--gridui-motion-distance);
+  }
+  .gridui-overlay-floating[data-side="left"] {
+    --gridui-surface-offset-x: var(--gridui-motion-distance);
+  }
+  .gridui-overlay-floating[data-side="right"] {
+    --gridui-surface-offset-x: calc(-1 * var(--gridui-motion-distance));
+  }
+  .gridui-overlay-surface[data-state="closed"] {
+    pointer-events: none;
+  }
+  .gridui-overlay-surface:not([data-side="none"]):is([data-state="open"], [data-state="delayed-open"], [data-state="instant-open"]) {
+    animation: gridui-surface-enter var(--gridui-overlay-enter-duration) var(--gridui-motion-ease-out) var(--gridui-overlay-fill-mode);
+  }
+  .gridui-overlay-surface:not([data-side="none"])[data-state="closed"] {
+    animation: gridui-surface-exit var(--gridui-motion-duration-quick) var(--gridui-motion-ease-in) var(--gridui-overlay-fill-mode);
+  }
+  .gridui-overlay-backdrop {
+    --gridui-overlay-enter-duration: var(--gridui-motion-duration-normal);
+    --gridui-overlay-exit-duration: var(--gridui-motion-duration-quick);
+    --gridui-overlay-fill-mode: none;
+  }
+  .gridui-overlay-backdrop-deliberate {
+    --gridui-overlay-enter-duration: var(--gridui-motion-duration-deliberate);
+    --gridui-overlay-exit-duration: var(--gridui-motion-duration-normal);
+    --gridui-overlay-fill-mode: both;
+  }
+  .gridui-overlay-backdrop[data-state="open"] {
+    animation: gridui-fade-enter var(--gridui-overlay-enter-duration) var(--gridui-motion-ease-out) var(--gridui-overlay-fill-mode);
+  }
+  .gridui-overlay-backdrop[data-state="closed"] {
+    animation: gridui-fade-exit var(--gridui-overlay-exit-duration) var(--gridui-motion-ease-in) var(--gridui-overlay-fill-mode);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gridui-overlay-surface:not([data-side="none"])[data-state], .gridui-overlay-backdrop[data-state] {
+      animation: none;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/overlay",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "GridUI React overlay",
   "license": "UNLICENSED",
   "type": "module",
@@ -26,13 +26,14 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/theme": "^2.1.2"
+    "@gridui/theme": "^2.2.1",
+    "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
-    "@gridui-internal/configuration": "0.0.0",
+    "@gridui-internal/configuration": "0.0.0-internal",
     "@jest/globals": "30.5.2",
     "@types/jest": "30.0.0",
-    "@types/node": "26.6.5",
+    "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jest": "30.5.2",