@prizmui/components 0.0.1

package/dist/components/Button/Button.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAMlC,CAAC"}

package/dist/components/Button/Button.js

@@ -0,0 +1,8 @@
+import { useButton } from './useButton';
+import { renderButton } from './renderButton';
+import { useButtonStyles } from './useButtonStyles.styles';
+export const Button = (props) => {
+    const state = useButton(props);
+    useButtonStyles(state);
+    return renderButton(state);
+};

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

@@ -0,0 +1,24 @@
+import type { ARIAButtonSlotProps, ComponentProps, ComponentState, Slot } from '../../utilities';
+export type ButtonSlots = {
+    root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
+};
+export type ButtonProps = ComponentProps<ButtonSlots> & {
+    /**
+     * @default 'secondary'
+     */
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'circular' | 'square';
+    /**
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};
+export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+//# sourceMappingURL=Button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEjG,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD;;OAEG;IAEH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;IAE5D;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE1C;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GACjD,QAAQ,CACJ,IAAI,CACA,WAAW,EACX,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAC/C,CACJ,CAAC"}

package/dist/components/Button/Button.types.js

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

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

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
+export { buttonClassNames } from './useButtonStyles.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export { buttonClassNames } from './useButtonStyles.styles';

package/dist/components/Button/renderButton.d.ts

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

package/dist/components/Button/renderButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE/D,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,UAQjD,CAAC"}

package/dist/components/Button/renderButton.js

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

package/dist/components/Button/useButton.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps, ButtonState } from './Button.types';
+export declare const useButton: (props: ButtonProps) => ButtonState;
+//# sourceMappingURL=useButton.d.ts.map

package/dist/components/Button/useButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE/D,eAAO,MAAM,SAAS,GAAI,OAAO,WAAW,KAAG,WAiB9C,CAAC"}

package/dist/components/Button/useButton.js

@@ -0,0 +1,14 @@
+export const useButton = (props) => {
+    const { appearance, disabled, shape, size } = props;
+    const state = {
+        appearance: appearance ?? 'secondary',
+        disabled: disabled ?? false,
+        shape: shape ?? 'rounded',
+        size: size ?? 'medium',
+        components: { root: 'button' },
+        root: {
+            type: props.as !== 'a' ? 'button' : undefined
+        }
+    };
+    return state;
+};

package/dist/components/Button/useButtonStyles.styles.d.ts

@@ -0,0 +1,5 @@
+import type { SlotClassNames } from '../../utilities';
+import type { ButtonSlots, ButtonState } from './Button.types';
+export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
+export declare const useButtonStyles: (state: ButtonState) => ButtonState;
+//# sourceMappingURL=useButtonStyles.styles.d.ts.map

package/dist/components/Button/useButtonStyles.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/useButtonStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG/D,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,WAAW,CAExD,CAAC;AA0JF,eAAO,MAAM,eAAe,GAAI,OAAO,WAAW,KAAG,WAsBpD,CAAC"}

package/dist/components/Button/useButtonStyles.styles.js

@@ -0,0 +1,137 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from 'calame';
+import { tokens } from '@prizmui/tokens';
+export const buttonClassNames = {
+    root: 'c-button',
+};
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    margin: 0,
+    overflow: 'hidden',
+    cursor: 'pointer',
+    outlineStyle: 'none',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: tokens.lineHeightBase300,
+    padding: `5px ${tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: tokens.borderRadiusMedium,
+    transitionDuration: tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: tokens.curveEasyEase,
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        color: tokens.colorNeutralForeground1,
+    },
+    ':active': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        color: tokens.colorNeutralForeground1,
+    },
+});
+const useRootStyles = makeStyles({
+    primary: {
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand,
+        },
+        ':active': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand,
+        },
+    },
+    secondary: {},
+    tertiary: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground1,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            ...shorthands.borderColor('transparent'),
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            ...shorthands.borderColor('transparent'),
+        },
+    },
+    ghost: {
+        backgroundColor: 'transparent',
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorBrandForeground1,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorBrandForeground2,
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorBrandForeground2,
+        },
+    },
+    rounded: {},
+    circular: {
+        borderRadius: tokens.borderRadiusCircular,
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone,
+    },
+    small: {
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200,
+        padding: `3px ${tokens.spacingHorizontalS}`,
+        minWidth: '64px',
+    },
+    medium: {},
+    large: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+        padding: `8px ${tokens.spacingHorizontalL}`,
+        minWidth: '96px',
+    },
+});
+const useRootDisabledStyles = makeStyles({
+    base: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled,
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled,
+        },
+    },
+    primary: {},
+    secondary: {},
+    tertiary: {},
+    ghost: {},
+});
+export const useButtonStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const { appearance, disabled, shape, size } = state;
+    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, rootStyles[appearance], rootStyles[shape], rootStyles[size], disabled && rootDisabledStyles.base, disabled && rootDisabledStyles[appearance], state.root.className);
+    return state;
+};

package/dist/components/FluidProvider/FluidProvider.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FluidProvider.d.ts","sourceRoot":"","sources":["../../../src/components/FluidProvider/FluidProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAgChE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAGhD,CAAC"}

package/dist/components/FluidProvider/FluidProvider.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+const injectedThemes = new Map();
+function hashTheme(theme) {
+    const str = Object.entries(theme).join('');
+    let h = 5381;
+    for (let i = 0; i < str.length; i++) {
+        h = ((h << 5) + h) ^ str.charCodeAt(i);
+    }
+    return (h >>> 0).toString(36);
+}
+function getThemeClassName(theme) {
+    const hash = hashTheme(theme);
+    const className = `fluid-${hash}`;
+    if (!injectedThemes.has(className)) {
+        const vars = Object.entries(theme)
+            .map(([key, value]) => `--${key}: ${value}`)
+            .join('; ');
+        const style = document.createElement('style');
+        style.textContent = `.${className} { ${vars} }`;
+        document.head.appendChild(style);
+        injectedThemes.set(className, hash);
+    }
+    return className;
+}
+export const FluidProvider = ({ theme, children }) => {
+    const className = getThemeClassName(theme);
+    return _jsx("div", { className: className, children: children });
+};

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

@@ -0,0 +1,7 @@
+import type { ElementChild } from 'jsx-framework-test-pb';
+import type { Theme } from '@fluidui/tokens';
+export type FluidProviderProps = {
+    theme: Theme;
+    children?: ElementChild | ElementChild[];
+};
+//# sourceMappingURL=FluidProvider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FluidProvider.types.d.ts","sourceRoot":"","sources":["../../../src/components/FluidProvider/FluidProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CAC5C,CAAC"}

package/dist/components/FluidProvider/FluidProvider.types.js

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

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

@@ -0,0 +1,3 @@
+export { FluidProvider } from './FluidProvider';
+export type { FluidProviderProps } from './FluidProvider.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FluidProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/FluidProvider/index.js

@@ -0,0 +1 @@
+export { FluidProvider } from './FluidProvider';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrizmProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAgChE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAGhD,CAAC"}

package/dist/components/PrizmProvider/PrizmProvider.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+const injectedThemes = new Map();
+function hashTheme(theme) {
+    const str = Object.entries(theme).join('');
+    let h = 5381;
+    for (let i = 0; i < str.length; i++) {
+        h = ((h << 5) + h) ^ str.charCodeAt(i);
+    }
+    return (h >>> 0).toString(36);
+}
+function getThemeClassName(theme) {
+    const hash = hashTheme(theme);
+    const className = `fluid-${hash}`;
+    if (!injectedThemes.has(className)) {
+        const vars = Object.entries(theme)
+            .map(([key, value]) => `--${key}: ${value}`)
+            .join('; ');
+        const style = document.createElement('style');
+        style.textContent = `.${className} { ${vars} }`;
+        document.head.appendChild(style);
+        injectedThemes.set(className, hash);
+    }
+    return className;
+}
+export const PrizmProvider = ({ theme, children }) => {
+    const className = getThemeClassName(theme);
+    return _jsx("div", { className: className, children: children });
+};

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

@@ -0,0 +1,7 @@
+import type { ElementChild } from 'jsx-framework-test-pb';
+import type { Theme } from '@prizmui/tokens';
+export type PrizmProviderProps = {
+    theme: Theme;
+    children?: ElementChild | ElementChild[];
+};
+//# sourceMappingURL=PrizmProvider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrizmProvider.types.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CAC5C,CAAC"}

package/dist/components/PrizmProvider/PrizmProvider.types.js

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

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

@@ -0,0 +1,3 @@
+export { PrizmProvider } from './PrizmProvider';
+export type { PrizmProviderProps } from './PrizmProvider.types';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/PrizmProvider/index.js

@@ -0,0 +1 @@
+export { PrizmProvider } from './PrizmProvider';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { PrizmProvider } from './components/PrizmProvider';
+export type { PrizmProviderProps } from './components/PrizmProvider';
+export { Button, buttonClassNames } from './components/Button';
+export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { PrizmProvider } from './components/PrizmProvider';
+export { Button, buttonClassNames } from './components/Button';

package/dist/utilities/assertSlots.d.ts

@@ -0,0 +1,31 @@
+import type { FC } from 'jsx-framework-test-pb';
+import type { ComponentState, SlotPropsRecord } from './types';
+/**
+ * Transforms each slot in `state` from a props object into a callable FC,
+ * then asserts the new type so TypeScript accepts `<state.root>` directly in JSX.
+ *
+ * **Why this is needed:**
+ * TypeScript only accepts a value as a JSX tag if it has call signatures (i.e. it
+ * is a function or class). Without this transformation `state.root` is a plain
+ * props object — TypeScript falls back to React class-component checking and
+ * emits "react/jsx-runtime not found". After `assertSlots`, every slot IS a
+ * function, so that check never runs.
+ *
+ * **Runtime behaviour:**
+ * - Replaces `state.root` (props object) with `(extraProps) => jsx(component, { ...slotProps, ...extraProps })`.
+ * - Explicit JSX children override baked-in children only when they are not `undefined`,
+ *   so `<state.root>{children}</state.root>` works whether or not `children` is defined.
+ * - Null slots (intentionally hidden) are left as-is.
+ * - Throws if any component slot has not been assigned in `state.components`.
+ *
+ * @example
+ * export const renderButton = (state: ButtonState): JSXElement => {
+ *     const { children } = state.root as Record<string, unknown>;
+ *     assertSlots<ButtonSlots>(state);
+ *     return <state.root>{children}</state.root>;
+ * };
+ */
+export declare function assertSlots<TSlots extends SlotPropsRecord>(state: ComponentState<TSlots>): asserts state is ComponentState<TSlots> & {
+    [K in keyof TSlots]: FC<Record<string, unknown>>;
+};
+//# sourceMappingURL=assertSlots.d.ts.map

package/dist/utilities/assertSlots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assertSlots.d.ts","sourceRoot":"","sources":["../../src/utilities/assertSlots.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,MAAM,SAAS,eAAe,EACtD,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAC9B,OAAO,CAAC,KAAK,IAAI,cAAc,CAAC,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAAE,CA6BhG"}

package/dist/utilities/assertSlots.js

@@ -0,0 +1,52 @@
+import { jsx } from 'jsx-framework-test-pb/jsx-runtime';
+/**
+ * Transforms each slot in `state` from a props object into a callable FC,
+ * then asserts the new type so TypeScript accepts `<state.root>` directly in JSX.
+ *
+ * **Why this is needed:**
+ * TypeScript only accepts a value as a JSX tag if it has call signatures (i.e. it
+ * is a function or class). Without this transformation `state.root` is a plain
+ * props object — TypeScript falls back to React class-component checking and
+ * emits "react/jsx-runtime not found". After `assertSlots`, every slot IS a
+ * function, so that check never runs.
+ *
+ * **Runtime behaviour:**
+ * - Replaces `state.root` (props object) with `(extraProps) => jsx(component, { ...slotProps, ...extraProps })`.
+ * - Explicit JSX children override baked-in children only when they are not `undefined`,
+ *   so `<state.root>{children}</state.root>` works whether or not `children` is defined.
+ * - Null slots (intentionally hidden) are left as-is.
+ * - Throws if any component slot has not been assigned in `state.components`.
+ *
+ * @example
+ * export const renderButton = (state: ButtonState): JSXElement => {
+ *     const { children } = state.root as Record<string, unknown>;
+ *     assertSlots<ButtonSlots>(state);
+ *     return <state.root>{children}</state.root>;
+ * };
+ */
+export function assertSlots(state) {
+    for (const slotName of Object.keys(state.components)) {
+        const Component = state.components[slotName];
+        const slotProps = state[slotName];
+        if (Component === null || Component === undefined) {
+            throw new Error(`assertSlots: slot "${slotName}" has no component in state.components. ` +
+                `Make sure every slot is assigned in the use* hook.`);
+        }
+        // Null slot = intentionally hidden — leave as null, skip transformation
+        if (slotProps === null || slotProps === undefined)
+            continue;
+        // Replace the props object with an FC that renders the actual element.
+        // Explicit JSX children (extraProps.children) only override baked-in
+        // children when they are not undefined, so callers can safely write
+        // <state.root>{someVar}</state.root> even when someVar is undefined.
+        state[slotName] =
+            (extraProps = {}) => {
+                const { children: explicitChildren, ...otherExtra } = extraProps;
+                return jsx(Component, {
+                    ...slotProps,
+                    ...otherExtra,
+                    ...(explicitChildren !== undefined && { children: explicitChildren }),
+                });
+            };
+    }
+}

package/dist/utilities/index.d.ts

@@ -0,0 +1,3 @@
+export type { DistributiveOmit, IntrinsicElementTag, IntrinsicElementProps, ElementType, IntrinsicShorthandProps, Slot, SlotPropsRecord, ComponentsRecord, ComponentProps, ComponentState, SlotClassNames, ARIAButtonSlotProps, JSXElement, } from './types';
+export { assertSlots } from './assertSlots';
+//# sourceMappingURL=index.d.ts.map

package/dist/utilities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACR,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,uBAAuB,EACvB,IAAI,EACJ,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,UAAU,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/utilities/index.js

@@ -0,0 +1 @@
+export { assertSlots } from './assertSlots';

package/dist/utilities/types.d.ts

@@ -0,0 +1,117 @@
+import type { FC, ElementChild } from 'jsx-framework-test-pb';
+/**
+ * Like `Omit`, but distributes over union types so each union member is omitted
+ * independently — preventing the intersection from collapsing the union.
+ *
+ * @example
+ * type A = { x: 1; y: 2 } | { x: 3; z: 4 };
+ * type B = DistributiveOmit<A, 'x'>; // { y: 2 } | { z: 4 }
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never;
+/** Any valid intrinsic JSX element tag name (`'button'`, `'div'`, `'a'`, …). */
+export type IntrinsicElementTag = keyof JSX.IntrinsicElements;
+/** The props object for a given intrinsic element tag. */
+export type IntrinsicElementProps<T extends IntrinsicElementTag> = JSX.IntrinsicElements[T];
+/**
+ * A component type: either an intrinsic element tag string or a function component.
+ * Used for the `components` map in `ComponentState`.
+ */
+export type ElementType<TProps extends object = Record<string, unknown>> = IntrinsicElementTag | FC<TProps>;
+/**
+ * Props for an intrinsic element slot with an optional `as` prop to swap the
+ * rendered element type.
+ *
+ * The second generic `TFallbackAs` is distributed over union types, producing a
+ * proper discriminated union for each fallback element.
+ *
+ * @example
+ * type RootSlot = IntrinsicShorthandProps<'button', 'a' | 'div'>;
+ * // { as?: 'button'; disabled?: boolean; … }
+ * // | { as: 'a'; href?: string; … }
+ * // | { as: 'div'; … }
+ */
+export type IntrinsicShorthandProps<TDefaultAs extends IntrinsicElementTag, TFallbackAs extends IntrinsicElementTag = TDefaultAs> = (IntrinsicElementProps<TDefaultAs> & {
+    as?: TDefaultAs;
+}) | (TFallbackAs extends IntrinsicElementTag ? IntrinsicElementProps<TFallbackAs> & {
+    as: TFallbackAs;
+} : never);
+/**
+ * A slot value — can be:
+ * - An object of props for the slot element (including optional `as` to change type)
+ * - `null` — explicitly suppress the slot (don't render it)
+ * - `undefined` — optional slot not provided by the consumer
+ */
+export type Slot<TProps extends object> = TProps | null | undefined;
+/**
+ * The shape of a component's slot definitions.
+ * `root` is always required; additional slots are optional.
+ */
+export type SlotPropsRecord = {
+    root: object;
+    [key: string]: object | null | undefined;
+};
+/**
+ * Maps each slot name to the element type that will render it.
+ * Resolved in the `use*` hook from defaults + the consumer's `as` prop.
+ */
+export type ComponentsRecord<TSlots extends SlotPropsRecord> = {
+    [K in keyof TSlots]: ElementType;
+};
+/**
+ * Extracts the public-facing props for a component from its slot definitions:
+ * - Spreads the primary slot's props onto the top level (minus `children`)
+ * - Adds each non-primary slot as an optional prop key
+ * - Re-adds `children` with the framework's `ElementChild` type
+ *
+ * @example
+ * type ButtonSlots = { root: ARIAButtonSlotProps; icon?: Slot<HTMLAttributes> };
+ * type ButtonProps = ComponentProps<ButtonSlots> & { appearance?: ButtonAppearance };
+ */
+export type ComponentProps<TSlots extends SlotPropsRecord, TPrimarySlot extends keyof TSlots = 'root'> = DistributiveOmit<TSlots[TPrimarySlot], 'children'> & {
+    [K in Exclude<keyof TSlots, TPrimarySlot>]?: TSlots[K];
+} & {
+    children?: ElementChild | ElementChild[];
+};
+/**
+ * The internal state object returned by a `use*` hook.
+ *
+ * Contains:
+ * - `components` — resolved element type per slot (what will actually render)
+ * - One resolved prop object per slot (`undefined` is removed; `null` means "don't render")
+ *
+ * @example
+ * type ButtonState = ComponentState<ButtonSlots> & { appearance: ButtonAppearance };
+ */
+export type ComponentState<TSlots extends SlotPropsRecord> = {
+    components: ComponentsRecord<TSlots>;
+} & {
+    [K in keyof TSlots]: Exclude<TSlots[K], undefined>;
+};
+/**
+ * Root slot props for a button-like element that can render as:
+ * - `<button>` (default) — native disabled support
+ * - `<a>` — uses `aria-disabled`, supports `href`/`target`
+ * - `<div>` — uses `aria-disabled`, needs `role` + `tabIndex` for accessibility
+ *
+ * Used as the root slot of any interactive/pressable component.
+ */
+export type ARIAButtonSlotProps<TFallbackAs extends 'a' | 'div' = 'a' | 'div'> = IntrinsicShorthandProps<'button', TFallbackAs>;
+/**
+ * Maps each slot name to a stable BEM-style CSS class name string.
+ * Exported from the styles file so consumers can target individual slots.
+ *
+ * @example
+ * export const buttonClassNames: SlotClassNames<ButtonSlots> = {
+ *     root: 'c-button',
+ *     icon: 'c-button__icon',
+ * };
+ */
+export type SlotClassNames<TSlots extends SlotPropsRecord> = {
+    [K in keyof TSlots]: string;
+};
+/**
+ * The return type of a JSX expression / render function.
+ * Alias for `JSX.Element` so components don't need to import from the framework directly.
+ */
+export type JSXElement = JSX.Element;
+//# sourceMappingURL=types.d.ts.map

package/dist/utilities/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utilities/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI9D;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,IAAI,CAAC,SAAS,OAAO,GAClE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,KAAK,CAAC;AAIZ,gFAAgF;AAChF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAC;AAE9D,0DAA0D;AAC1D,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,mBAAmB,IAC3D,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAE7B;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACnE,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;AAIrC;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,uBAAuB,CAC/B,UAAU,SAAS,mBAAmB,EACtC,WAAW,SAAS,mBAAmB,GAAG,UAAU,IAElD,CAAC,qBAAqB,CAAC,UAAU,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC,GACzD,CAAC,WAAW,SAAS,mBAAmB,GAClC,qBAAqB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,EAAE,WAAW,CAAA;CAAE,GACxD,KAAK,CAAC,CAAC;AAEnB;;;;;GAKG;AACH,MAAM,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAIpE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,MAAM,SAAS,eAAe,IAAI;KAC1D,CAAC,IAAI,MAAM,MAAM,GAAG,WAAW;CACnC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,CACtB,MAAM,SAAS,eAAe,EAC9B,YAAY,SAAS,MAAM,MAAM,GAAG,MAAM,IAC1C,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,GAClD;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;CAAE,GAC1D;IAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAAE,CAAC;AAEjD;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,eAAe,IAAI;IACzD,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACxC,GAAG;KAAG,CAAC,IAAI,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAAE,CAAC;AAI3D;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,CAAC,WAAW,SAAS,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,KAAK,IACzE,uBAAuB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAInD;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,eAAe,IAAI;KACxD,CAAC,IAAI,MAAM,MAAM,GAAG,MAAM;CAC9B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC"}

package/dist/utilities/types.js

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

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@prizmui/components",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "calame": "workspace:*",
+        "@prizmui/tokens": "workspace:*"
+    },
+    "peerDependencies": {
+        "jsx-framework-test-pb": "*"
+    },
+    "devDependencies": {
+        "jsx-framework-test-pb": "latest",
+        "typescript": "^5.9.3"
+    }
+}