@prizmui/components 0.1.4 → 0.1.6

package/dist/components/Popover/Popover.types.d.ts

@@ -1,22 +1,15 @@
-import type { ComponentProps, ComponentState, Slot, ARIAButtonSlotProps } from '../../utilities';
+import type { ComponentProps, ComponentState, Slot } from '../../utilities';
 export type PopoverProps = {
     children?: any;
     /** @default false */
     defaultOpen?: boolean;
 };
-export type PopoverTriggerSlots = {
-    root: NonNullable<Slot<ARIAButtonSlotProps<'a' | 'div'>>>;
-};
-export type PopoverTriggerProps = ComponentProps<PopoverTriggerSlots> & {
-    /** @default false */
-    disabled?: boolean;
-};
-export type PopoverTriggerState = ComponentState<PopoverTriggerSlots> & {
-    disabled: boolean;
+export type PopoverTriggerProps = {
+    children?: any;
 };
-export type PopoverContentSlots = {
+export type PopoverSurfaceSlots = {
     root: NonNullable<Slot<'div'>>;
 };
-export type PopoverContentProps = ComponentProps<PopoverContentSlots>;
-export type PopoverContentState = ComponentState<PopoverContentSlots>;
+export type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
+export type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots>;
 //# sourceMappingURL=Popover.types.d.ts.map

package/dist/components/Popover/Popover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIjG,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,qBAAqB;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,GAAG;IACpE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,GAAG;IACpE,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAI5E,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,qBAAqB;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/components/Popover/PopoverSurface.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'jsx-framework-test-pb';
+import type { PopoverSurfaceProps } from './Popover.types';
+export declare const PopoverSurface: FC<PopoverSurfaceProps>;
+//# sourceMappingURL=PopoverSurface.d.ts.map

package/dist/components/Popover/PopoverSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverSurface.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAMhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA6ClD,CAAC"}

package/dist/components/Popover/PopoverSurface.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+import { useContext } from 'jsx-framework-test-pb';
+import { PrizmProvider } from '../PrizmProvider/PrizmProvider';
+import { ThemeContext } from '../PrizmProvider/ThemeContext';
+import { PopoverContext } from './Popover.context';
+import { usePopoverSurfaceStyles, popoverSurfaceClassNames } from './usePopoverSurfaceStyles.styles';
+export const PopoverSurface = (props) => {
+    const context = useContext(PopoverContext);
+    const theme = useContext(ThemeContext);
+    const surfaceStyles = usePopoverSurfaceStyles();
+    const { children } = props;
+    // Return a reactive function — the framework calls createReactiveChild on it,
+    // so the surface is added to / removed from the DOM as open.val changes.
+    return (() => {
+        if (!context?.open.val || !theme)
+            return null;
+        const trigger = document.getElementById(context.triggerId);
+        const rect = trigger?.getBoundingClientRect();
+        return (_jsx(PrizmProvider, { theme: theme, style: {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                zIndex: '1000000',
+                backgroundColor: 'transparent',
+                // Catches all clicks — those outside the surface close the popover
+                pointerEvents: 'auto',
+            }, onClick: () => { context.open.val = false; }, children: _jsx("div", { className: `${popoverSurfaceClassNames.root} ${surfaceStyles.root}`, style: {
+                    position: 'absolute',
+                    top: rect ? `${rect.bottom + 8}px` : '0',
+                    left: rect ? `${rect.left}px` : '0',
+                }, onClick: (e) => e.stopPropagation(), children: children }) }));
+    });
+};

package/dist/components/Popover/PopoverTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAIlD,CAAC"}
+{"version":3,"file":"PopoverTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAIhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2BlD,CAAC"}

package/dist/components/Popover/PopoverTrigger.js

@@ -1,6 +1,28 @@
-import { usePopoverTrigger } from './usePopoverTrigger';
-import { renderPopoverTrigger } from './renderPopoverTrigger';
+import { useContext, isElement } from 'jsx-framework-test-pb';
+import { PopoverContext } from './Popover.context';
 export const PopoverTrigger = (props) => {
-    const state = usePopoverTrigger(props);
-    return renderPopoverTrigger(state);
+    const context = useContext(PopoverContext);
+    const children = Array.isArray(props.children) ? props.children : [props.children];
+    const child = children[0];
+    if (!isElement(child))
+        return child;
+    if (!context)
+        return child;
+    const { open, triggerId, contentId } = context;
+    const existingOnClick = child.props.onClick;
+    return {
+        ...child,
+        props: {
+            ...child.props,
+            id: triggerId,
+            'aria-expanded': () => open.val,
+            'aria-controls': contentId,
+            'aria-haspopup': 'true',
+            onClick: (e) => {
+                open.val = !open.val;
+                if (typeof existingOnClick === 'function')
+                    existingOnClick(e);
+            },
+        },
+    };
 };

package/dist/components/Popover/index.d.ts

@@ -1,8 +1,8 @@
 export { Popover } from './Popover';
 export type { PopoverProps } from './Popover.types';
 export { PopoverTrigger } from './PopoverTrigger';
-export type { PopoverTriggerProps, PopoverTriggerSlots, PopoverTriggerState } from './Popover.types';
-export { PopoverContent } from './PopoverContent';
-export type { PopoverContentProps, PopoverContentSlots, PopoverContentState } from './Popover.types';
-export { popoverContentClassNames } from './usePopoverContentStyles.styles';
+export type { PopoverTriggerProps } from './Popover.types';
+export { PopoverSurface } from './PopoverSurface';
+export type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './Popover.types';
+export { popoverSurfaceClassNames } from './usePopoverSurfaceStyles.styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAErG,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/components/Popover/index.js

@@ -1,4 +1,4 @@
 export { Popover } from './Popover';
 export { PopoverTrigger } from './PopoverTrigger';
-export { PopoverContent } from './PopoverContent';
-export { popoverContentClassNames } from './usePopoverContentStyles.styles';
+export { PopoverSurface } from './PopoverSurface';
+export { popoverSurfaceClassNames } from './usePopoverSurfaceStyles.styles';

package/dist/components/Popover/usePopoverSurfaceStyles.styles.d.ts

@@ -0,0 +1,5 @@
+import type { SlotClassNames } from '../../utilities';
+import type { PopoverSurfaceSlots } from './Popover.types';
+export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+export declare const usePopoverSurfaceStyles: (options?: import("calame").MakeStylesOptions) => Record<"root", string>;
+//# sourceMappingURL=usePopoverSurfaceStyles.styles.d.ts.map

package/dist/components/Popover/usePopoverSurfaceStyles.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverSurfaceStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopoverSurfaceStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,wBAAwB,EAAE,cAAc,CAAC,mBAAmB,CAExE,CAAC;AAEF,eAAO,MAAM,uBAAuB,0EASlC,CAAC"}

package/dist/components/Popover/usePopoverSurfaceStyles.styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from 'calame';
+import { tokens } from '@prizmui/tokens';
+export const popoverSurfaceClassNames = {
+    root: 'c-PopoverSurface',
+};
+export const usePopoverSurfaceStyles = makeStyles({
+    root: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: '0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12)',
+        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+        minWidth: '160px',
+    },
+});

package/dist/components/PrizmProvider/ThemeContext.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from '@prizmui/tokens';
+export declare const ThemeContext: import("jsx-framework-test-pb").Context<Theme | null>;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/components/PrizmProvider/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,eAAO,MAAM,YAAY,uDAAoC,CAAC"}

package/dist/components/PrizmProvider/ThemeContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'jsx-framework-test-pb';
+export const ThemeContext = createContext(null);

package/dist/components/PrizmProvider/index.d.ts

@@ -1,4 +1,5 @@
 export { PrizmProvider, } from './PrizmProvider';
 export { prizmProviderClassNames } from './useProviderStyles.styles';
 export type { PrizmProviderProps, PrizmProviderSlots, PrizmProviderState } from './PrizmProvider.types';
+export { ThemeContext } from './ThemeContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/PrizmProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,GAAG,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,GAAG,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/PrizmProvider/index.js

@@ -1,2 +1,3 @@
 export { PrizmProvider, } from './PrizmProvider';
 export { prizmProviderClassNames } from './useProviderStyles.styles';
+export { ThemeContext } from './ThemeContext';

package/dist/components/PrizmProvider/renderProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/renderProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAsB,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEpF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,UAQ1D,CAAC"}
+{"version":3,"file":"renderProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/renderProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAsB,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGpF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,UAU1D,CAAC"}

package/dist/components/PrizmProvider/renderProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
 import { assertSlots } from '../../utilities';
+import { ThemeContext } from './ThemeContext';
 export const renderProvider = (state) => {
     assertSlots(state);
-    return (_jsx(state.root, { children: state.root.children }));
+    return (_jsx(ThemeContext.Provider, { value: state.theme, children: _jsx(state.root, { children: state.root.children }) }));
 };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Button, buttonClassNames } from './components/Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button';
 export { Text, textClassNames } from './components/Text';
 export type { TextProps, TextSlots, TextState } from './components/Text';
-export { Popover, PopoverTrigger, PopoverContent, popoverContentClassNames } from './components/Popover';
-export type { PopoverProps, PopoverTriggerProps, PopoverTriggerSlots, PopoverTriggerState, PopoverContentProps, PopoverContentSlots, PopoverContentState } from './components/Popover';
+export { Popover, PopoverTrigger, PopoverSurface, popoverSurfaceClassNames } from './components/Popover';
+export type { PopoverProps, PopoverTriggerProps, PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './components/Popover';
+export { ThemeContext } from './components/PrizmProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACpF,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAE7G,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzG,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACpF,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAE7G,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACzG,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE7I,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { PrizmProvider, prizmProviderClassNames } from './components/PrizmProvider';
 export { Button, buttonClassNames } from './components/Button';
 export { Text, textClassNames } from './components/Text';
-export { Popover, PopoverTrigger, PopoverContent, popoverContentClassNames } from './components/Popover';
+export { Popover, PopoverTrigger, PopoverSurface, popoverSurfaceClassNames } from './components/Popover';
+export { ThemeContext } from './components/PrizmProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prizmui/components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",