@prizmui/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,8 @@
+import type { StateObject } from 'jsx-framework-test-pb';
+export type PopoverContextValue = {
+    open: StateObject<boolean>;
+    triggerId: string;
+    contentId: string;
+};
+export declare const PopoverContext: import("jsx-framework-test-pb").Context<PopoverContextValue | null>;
+//# sourceMappingURL=Popover.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.context.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,qEAAkD,CAAC"}

package/dist/components/Popover/Popover.context.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIpD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAepC,CAAC"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+import { state } from 'jsx-framework-test-pb';
+import { PopoverContext } from './Popover.context';
+let _popoverId = 0;
+export const Popover = (props) => {
+    const { children, defaultOpen = false } = props;
+    const open = state(defaultOpen);
+    const id = ++_popoverId;
+    return (_jsx(PopoverContext.Provider, { value: {
+            open,
+            triggerId: `c-popover-trigger-${id}`,
+            contentId: `c-popover-content-${id}`,
+        }, children: children }));
+};

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

@@ -0,0 +1,22 @@
+import type { ComponentProps, ComponentState, Slot, ARIAButtonSlotProps } 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 PopoverContentSlots = {
+    root: NonNullable<Slot<'div'>>;
+};
+export type PopoverContentProps = ComponentProps<PopoverContentSlots>;
+export type PopoverContentState = ComponentState<PopoverContentSlots>;
+//# sourceMappingURL=Popover.types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/dist/components/Popover/PopoverContent.js

@@ -0,0 +1,8 @@
+import { usePopoverContent } from './usePopoverContent';
+import { usePopoverContentStyles } from './usePopoverContentStyles.styles';
+import { renderPopoverContent } from './renderPopoverContent';
+export const PopoverContent = (props) => {
+    const state = usePopoverContent(props);
+    usePopoverContentStyles(state);
+    return renderPopoverContent(state);
+};

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

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

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

@@ -0,0 +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"}

package/dist/components/Popover/PopoverTrigger.js

@@ -0,0 +1,6 @@
+import { usePopoverTrigger } from './usePopoverTrigger';
+import { renderPopoverTrigger } from './renderPopoverTrigger';
+export const PopoverTrigger = (props) => {
+    const state = usePopoverTrigger(props);
+    return renderPopoverTrigger(state);
+};

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

@@ -0,0 +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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Popover/index.js

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

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

@@ -0,0 +1,4 @@
+import type { JSXElement } from '../../utilities';
+import type { PopoverContentState } from './Popover.types';
+export declare const renderPopoverContent: (state: PopoverContentState) => JSXElement;
+//# sourceMappingURL=renderPopoverContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderPopoverContent.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/renderPopoverContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,eAAO,MAAM,oBAAoB,GAAI,OAAO,mBAAmB,KAAG,UAOjE,CAAC"}

package/dist/components/Popover/renderPopoverContent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+import { createPortal } from 'jsx-framework-test-pb';
+import { assertSlots } from '../../utilities';
+export const renderPopoverContent = (state) => {
+    assertSlots(state);
+    return createPortal(_jsx(state.root, { children: state.root.children }), document.body);
+};

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

@@ -0,0 +1,4 @@
+import type { JSXElement } from '../../utilities';
+import type { PopoverTriggerState } from './Popover.types';
+export declare const renderPopoverTrigger: (state: PopoverTriggerState) => JSXElement;
+//# sourceMappingURL=renderPopoverTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderPopoverTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/renderPopoverTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAuB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,eAAO,MAAM,oBAAoB,GAAI,OAAO,mBAAmB,KAAG,UAQjE,CAAC"}

package/dist/components/Popover/renderPopoverTrigger.js

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

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

@@ -0,0 +1,3 @@
+import type { PopoverContentProps, PopoverContentState } from './Popover.types';
+export declare const usePopoverContent: (props: PopoverContentProps) => PopoverContentState;
+//# sourceMappingURL=usePopoverContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverContent.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopoverContent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGhF,eAAO,MAAM,iBAAiB,GAAI,OAAO,mBAAmB,KAAG,mBAqC9D,CAAC"}

package/dist/components/Popover/usePopoverContent.js

@@ -0,0 +1,39 @@
+import { useContext } from 'jsx-framework-test-pb';
+import { getIntrinsicElementProps, slot } from '../../utilities';
+import { PopoverContext } from './Popover.context';
+export const usePopoverContent = (props) => {
+    const context = useContext(PopoverContext);
+    const { style: userStyle, ...restProps } = props;
+    const positionStyle = context
+        ? {
+            position: 'fixed',
+            display: () => (context.open.val ? '' : 'none'),
+            top: () => {
+                if (!context.open.val)
+                    return '0';
+                const trigger = document.getElementById(context.triggerId);
+                if (!trigger)
+                    return '0';
+                return `${trigger.getBoundingClientRect().bottom + 8}px`;
+            },
+            left: () => {
+                if (!context.open.val)
+                    return '0';
+                const trigger = document.getElementById(context.triggerId);
+                if (!trigger)
+                    return '0';
+                return `${trigger.getBoundingClientRect().left}px`;
+            },
+        }
+        : { position: 'fixed', display: 'none' };
+    return {
+        components: { root: 'div' },
+        root: slot.always({
+            ...getIntrinsicElementProps('div', {
+                ...restProps,
+                ...(context ? { id: context.contentId } : {}),
+            }),
+            style: { ...userStyle, ...positionStyle },
+        }, { elementType: 'div' }),
+    };
+};

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

@@ -0,0 +1,5 @@
+import type { SlotClassNames } from '../../utilities';
+import type { PopoverContentSlots, PopoverContentState } from './Popover.types';
+export declare const popoverContentClassNames: SlotClassNames<PopoverContentSlots>;
+export declare const usePopoverContentStyles: (state: PopoverContentState) => PopoverContentState;
+//# sourceMappingURL=usePopoverContentStyles.styles.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import { makeResetStyles, mergeClasses } from 'calame';
+import { tokens } from '@prizmui/tokens';
+export const popoverContentClassNames = {
+    root: 'c-popover-content',
+};
+const useRootBaseClassName = makeResetStyles({
+    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',
+    zIndex: '1000',
+});
+export const usePopoverContentStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(popoverContentClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

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

@@ -0,0 +1,3 @@
+import type { PopoverTriggerProps, PopoverTriggerState } from './Popover.types';
+export declare const usePopoverTrigger: (props: PopoverTriggerProps) => PopoverTriggerState;
+//# sourceMappingURL=usePopoverTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopoverTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGhF,eAAO,MAAM,iBAAiB,GAAI,OAAO,mBAAmB,KAAG,mBA+B9D,CAAC"}

package/dist/components/Popover/usePopoverTrigger.js

@@ -0,0 +1,31 @@
+import { useContext } from 'jsx-framework-test-pb';
+import { useARIAButtonProps, slot } from '../../utilities';
+import { PopoverContext } from './Popover.context';
+export const usePopoverTrigger = (props) => {
+    const context = useContext(PopoverContext);
+    const disabled = props.disabled ?? false;
+    const { onClick: userOnClick, ...restProps } = props;
+    const contextProps = context
+        ? {
+            id: context.triggerId,
+            'aria-expanded': () => context.open.val,
+            'aria-controls': context.contentId,
+            'aria-haspopup': 'true',
+            onClick: (e) => {
+                if (!disabled)
+                    context.open.val = !context.open.val;
+                if (typeof userOnClick === 'function')
+                    userOnClick(e);
+            },
+        }
+        : {};
+    return {
+        disabled,
+        components: { root: 'button' },
+        root: slot.always(useARIAButtonProps('button', {
+            ...restProps,
+            ...contextProps,
+            disabled,
+        }), { elementType: 'button' }),
+    };
+};

package/dist/index.d.ts

@@ -4,4 +4,6 @@ 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';
 //# 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"}
+{"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prizmui/components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,14 +14,14 @@
     "dist"
   ],
   "dependencies": {
-    "calame": "0.0.6",
-    "@prizmui/tokens": "0.0.4"
+    "@prizmui/tokens": "0.0.5",
+    "calame": "0.0.6"
   },
   "peerDependencies": {
     "jsx-framework-test-pb": "*"
   },
   "devDependencies": {
-    "jsx-framework-test-pb": "latest",
+    "jsx-framework-test-pb": "0.4.1",
     "typescript": "^5.9.3"
   },
   "scripts": {