@tempots/ui 0.1.0 → 0.2.0

package/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import { type ButtonVariant } from '../StyleProvider/StyleProvider';
 export interface ButtonProps {
     children?: JSX.DOMNode;
     disabled?: Signal<boolean>;
-    onClick?: () => void;
+    onClick?: (e: MouseEvent) => void;
     size?: Signal<Size>;
     variant?: Signal<ButtonVariant>;
     compact?: Signal<boolean>;

package/components/Button/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal, ClassName } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { Signal, ClassName } from '@tempots/dom';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 export function Button({ children, size, disabled, onClick, variant, compact }) {
-    return (_jsx(Consumer, { mark: StyleMarker, children: (theme) => {
+    return (_jsx(StyleConsumer, { children: (theme) => {
             const cls = Signal.combine([
                 theme.styles,
                 size ?? Signal.of('md'),

package/components/Control/Control.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { Signal } from '@tempots/dom';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 export const Control = (props) => {
     const { children, size, spacing } = props;
-    return (_jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
+    return (_jsx(StyleConsumer, { children: ({ styles }) => {
             const cls = Signal.combine([
                 styles,
                 size ?? Signal.of('md'),

package/components/Group/Group.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { Signal } from '@tempots/dom';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 import { Sx } from '../styling/Sx';
 export const Group = (props) => {
     const { children, align, grow, noWrap, position, spacing } = props;
-    return (_jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
+    return (_jsx(StyleConsumer, { children: ({ styles }) => {
             return (_jsxs("div", { children: [_jsx(Sx, { sx: {
                             display: 'flex',
                             flexDirection: 'row',

package/components/Popover/Popover.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal, Attribute } from '@tempots/dom';
+import { Signal, Attribute } from '@tempots/dom';
 import { UnstyledPopover } from '../Popover';
 import { onTargetClickMount, onTargetOverMount } from '../Popover/UnstyledPopover';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 import { Sx } from '../styling/Sx';
 const ARROW_SIZE = 8;
 export function Popover({ children, openStrategy, maxWidth, opened }) {
-    return (_jsx(_Fragment, { children: _jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
+    return (_jsx(_Fragment, { children: _jsx(StyleConsumer, { children: ({ styles }) => {
                 const at = styles.at('styles').at;
                 return (_jsxs(UnstyledPopover, { opened: opened, arrowOver: true, onTargetMount: openStrategy === 'hover' ? onTargetOverMount : onTargetClickMount, placement: Signal.of('bottom'), offset: Signal.of(ARROW_SIZE), arrow: _jsx("div", { children: _jsx(Sx, { sx: {
                                 backgroundColor: at('background').at('color'),

package/components/Stack/Stack.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal } from '@tempots/dom';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { Signal } from '@tempots/dom';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 import { Sx } from '../styling/Sx';
 export const Stack = (props) => {
     const { children, align, justify, spacing } = props;
-    return (_jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
+    return (_jsx(StyleConsumer, { children: ({ styles }) => {
             return (_jsxs("div", { children: [_jsx(Sx, { sx: {
                             display: 'flex',
                             flexDirection: 'column',

package/components/StyleProvider/StyleProvider.d.ts

@@ -14,6 +14,10 @@ export interface StyleProviderProps {
 }
 export declare const StyleMarker: symbol;
 export declare const StyleProvider: ({ children }: StyleProviderProps) => JSX.DOMNode;
+export interface StyleConsumerProps {
+    children?: (theme: UITheme) => JSX.DOMNode;
+}
+export declare function StyleConsumer({ children }: StyleConsumerProps): JSX.DOMNode;
 export type ComponentClasses<T> = (options: T) => string;
 export interface UIComponentStyles {
     button: {

package/components/StyleProvider/StyleProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@tempots/dom/jsx-runtime";
 import { css } from '@emotion/css';
-import { Portal, Prop, OnRemove, Provider, makeProviderMark, When } from '@tempots/dom';
+import { Portal, Prop, OnRemove, Provider, makeProviderMark, When, Consumer } from '@tempots/dom';
 import { resetCss } from '../../styles/reset';
 import { getRadiusSize, getSize } from '../../styles/size';
 import { defaultDarkStyles, defaultLightStyles } from '../../styles/ui-styles';
@@ -26,6 +26,9 @@ export const StyleProvider = ({ children }) => {
     counter.update(v => v + 1);
     return (_jsxs(Provider, { value: { styles, isLight }, mark: StyleMarker, children: [_jsx(Sx, { sx: { backgroundColor: styles.map(v => v.styles.background.color) } }), _jsx(When, { is: counter.map(v => v > 0), children: _jsx(Portal, { selector: "head", children: _jsx("style", { children: resetCss }) }) }), children, _jsx(OnRemove, { clear: () => { counter.update(v => v - 1); } })] }));
 };
+export function StyleConsumer({ children }) {
+    return _jsx(Consumer, { mark: StyleMarker, children: children });
+}
 export const defaultComponentStyle = ({ font, border, spacing, background, control }) => {
     return {
         button: {

package/components/Tooltip/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@tempots/dom/jsx-runtime";
-import { Consumer, Signal, Attribute } from '@tempots/dom';
+import { Signal, Attribute } from '@tempots/dom';
 import { UnstyledPopover } from '../Popover';
 import { onTargetOverMount } from '../Popover/UnstyledPopover';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 import { Sx } from '../styling/Sx';
 const ARROW_SIZE = 8;
 export function Tooltip({ children }) {
-    return (_jsx(_Fragment, { children: _jsx(Consumer, { mark: StyleMarker, children: ({ styles }) => {
+    return (_jsx(_Fragment, { children: _jsx(StyleConsumer, { children: ({ styles }) => {
                 const at = styles.at('styles').at;
                 return (_jsxs(UnstyledPopover, { onTargetMount: onTargetOverMount, placement: Signal.of('top'), arrow: _jsx("div", { children: _jsx(Sx, { sx: {
                                 backgroundColor: at('background').at('inverseColor'),

package/components/styling/Spacing.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@tempots/dom/jsx-runtime";
-import { Signal, ClassName, Consumer } from '@tempots/dom';
+import { Signal, ClassName } from '@tempots/dom';
 import { getSizeOrNull } from '../../styles/size';
 import { objectOfPropertiesToSignalOfObject, sxToClassProp } from '../../styles/sx';
-import { StyleMarker } from '../StyleProvider/StyleProvider';
+import { StyleConsumer } from '../StyleProvider/StyleProvider';
 const map = {
     m: ['margin'],
     mt: ['marginTop'],
@@ -28,7 +28,7 @@ const map = {
     pv: ['paddingTop', 'paddingBottom']
 };
 export const Spacing = (props) => {
-    return (_jsx(Consumer, { mark: StyleMarker, children: (theme) => {
+    return (_jsx(StyleConsumer, { children: (theme) => {
             const keys = Object.keys(props).filter(k => k !== 'children');
             if (keys.length === 0)
                 return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "@emotion/css": "^11.10.6",
     "@floating-ui/dom": "^1.2.6",
-    "@tempots/dom": "^5.0.2",
+    "@tempots/dom": "^6.0.0",
     "@tempots/std": "^0.9.7"
   },
   "devDependencies": {