@typestyles/react 0.0.0-unstable.f96b13308930 → 0.3.0

package/README.md

@@ -10,14 +10,14 @@ npm install @typestyles/react typestyles react react-dom
 
 ## `createStyled` / `styled`
 
-Thin React wrapper over `styles.component` with typed variant props via `ComponentVariants`:
+Thin React wrapper over `recipe` from `createTypeStyles` with typed variant props via `ComponentVariants`:
 
 ```tsx
-import { createStyles } from 'typestyles';
+import { createTypeStyles } from 'typestyles';
 import { createStyled, TypeStylesProvider } from '@typestyles/react';
 
-const styles = createStyles();
-const styled = createStyled(styles);
+const api = createTypeStyles({ scopeId: 'app' });
+const styled = createStyled(api);
 
 const Button = styled('button', {
   base: { padding: '8px 16px', border: 'none', borderRadius: '4px' },
@@ -32,7 +32,7 @@ const Button = styled('button', {
 
 function App() {
   return (
-    <TypeStylesProvider styles={styles}>
+    <TypeStylesProvider styles={api}>
       <Button intent="ghost">Click me</Button>
     </TypeStylesProvider>
   );
@@ -51,12 +51,12 @@ Point JSX at `@typestyles/react` and wrap your app in `TypeStylesProvider`:
 
 ```tsx
 /** @jsxImportSource @typestyles/react */
-import { styles } from './styles';
+import { api } from './styles';
 import { TypeStylesProvider } from '@typestyles/react';
 
 export function App() {
   return (
-    <TypeStylesProvider styles={styles}>
+    <TypeStylesProvider styles={api}>
       <div css={{ color: 'red', padding: '1rem' }}>Hello</div>
     </TypeStylesProvider>
   );
@@ -73,7 +73,7 @@ Or in `tsconfig.json`:
 }
 ```
 
-Inline style objects are converted to deterministic classes via `styles.hashClass` at runtime.
+Inline style objects are converted to deterministic classes via `hash` (or `hashClass` on a `createStyles()` instance) at runtime.
 
 ## Zero-runtime `css` prop (Babel)
 
@@ -102,13 +102,13 @@ Dynamic expressions (e.g. `css={condition && { color: 'red' }}`) are left unchan
 
 ## API
 
-| Export                          | Description                                                          |
-| ------------------------------- | -------------------------------------------------------------------- |
-| `createStyled(styles)`          | Returns a `styled(tag, config)` factory backed by `styles.component` |
-| `TypeStylesProvider`            | Supplies `styles` to the jsx runtime for `css` prop resolution       |
-| `resolveCssPropClass`           | Low-level helper: `css` object → merged `className`                  |
-| `@typestyles/react/jsx-runtime` | Drop-in jsx runtime with `css` prop support                          |
-| `@typestyles/react/babel`       | Babel plugin for zero-runtime static `css` props                     |
+| Export                          | Description                                                           |
+| ------------------------------- | --------------------------------------------------------------------- |
+| `createStyled(api)`             | Returns a `styled(tag, config)` factory backed by `recipe` on the API |
+| `TypeStylesProvider`            | Supplies the styles API to the jsx runtime for `css` prop resolution  |
+| `resolveCssPropClass`           | Low-level helper: `css` object → merged `className`                   |
+| `@typestyles/react/jsx-runtime` | Drop-in jsx runtime with `css` prop support                           |
+| `@typestyles/react/babel`       | Babel plugin for zero-runtime static `css` props                      |
 
 ## Future work
 

package/dist/{chunk-4BYX2HZ7.js → chunk-IHZMLPG2.js}

@@ -18,5 +18,5 @@ function resolveCssPropClass(hashClass, css, className) {
 }
 
 export { TypeStylesContext, TypeStylesProvider, resolveCssPropClass };
-//# sourceMappingURL=chunk-4BYX2HZ7.js.map
-//# sourceMappingURL=chunk-4BYX2HZ7.js.map
+//# sourceMappingURL=chunk-IHZMLPG2.js.map
+//# sourceMappingURL=chunk-IHZMLPG2.js.map

package/dist/chunk-IHZMLPG2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/css-prop.ts"],"names":[],"mappings":";;;;;AAGO,IAAM,iBAAA,GAAoB,cAAoC,IAAI;AAElE,SAAS,kBAAA,CAAmB;AAAA,EACjC,MAAA;AAAA,EACA;AACF,CAAA,EAIsB;AACpB,EAAA,2BAAQ,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,QAAS,QAAA,EAAS,CAAA;AAC9D;ACVO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAO,EAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAO,GAAG,SAAS,CAAA;AACrB","file":"chunk-IHZMLPG2.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { CssStylesHost } from './resolve-hash-class';\n\nexport const TypeStylesContext = createContext<CssStylesHost | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */\n  styles: CssStylesHost;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n"]}

package/dist/chunk-KM65VQPZ.js

@@ -0,0 +1,11 @@
+// src/resolve-hash-class.ts
+function resolveHashClass(api) {
+  if ("hash" in api && typeof api.hash === "function") {
+    return (properties, label) => api.hash(properties, { label });
+  }
+  return api.hashClass;
+}
+
+export { resolveHashClass };
+//# sourceMappingURL=chunk-KM65VQPZ.js.map
+//# sourceMappingURL=chunk-KM65VQPZ.js.map

package/dist/chunk-KM65VQPZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/resolve-hash-class.ts"],"names":[],"mappings":";AAQO,SAAS,iBAAiB,GAAA,EAAiC;AAChE,EAAA,IAAI,MAAA,IAAU,GAAA,IAAO,OAAO,GAAA,CAAI,SAAS,UAAA,EAAY;AACnD,IAAA,OAAO,CAAC,YAAY,KAAA,KAAU,GAAA,CAAI,KAAK,UAAA,EAAY,EAAE,OAAO,CAAA;AAAA,EAC9D;AACA,EAAA,OAAQ,GAAA,CAAkB,SAAA;AAC5B","file":"chunk-KM65VQPZ.js","sourcesContent":["import type { CSSProperties, StylesApi, TypeStylesApi } from 'typestyles';\n\n/** Styles host for the css prop / TypeStylesProvider. */\nexport type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;\n\nexport type HashClassFn = (properties: CSSProperties, label?: string) => string;\n\n/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */\nexport function resolveHashClass(api: CssStylesHost): HashClassFn {\n  if ('hash' in api && typeof api.hash === 'function') {\n    return (properties, label) => api.hash(properties, { label });\n  }\n  return (api as StylesApi).hashClass;\n}\n"]}

package/dist/chunk-TLEOUPD2.js

@@ -0,0 +1,10 @@
+import { resolveHashClass } from './chunk-KM65VQPZ.js';
+
+// src/css-prop-runtime.ts
+function cssProp(api, properties) {
+  return resolveHashClass(api)(properties);
+}
+
+export { cssProp };
+//# sourceMappingURL=chunk-TLEOUPD2.js.map
+//# sourceMappingURL=chunk-TLEOUPD2.js.map

package/dist/chunk-TLEOUPD2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/css-prop-runtime.ts"],"names":[],"mappings":";;;AAKO,SAAS,OAAA,CAAQ,KAAoB,UAAA,EAAmC;AAC7E,EAAA,OAAO,gBAAA,CAAiB,GAAG,CAAA,CAAE,UAAU,CAAA;AACzC","file":"chunk-TLEOUPD2.js","sourcesContent":["import type { CSSProperties } from 'typestyles';\nimport type { CssStylesHost } from './resolve-hash-class';\nimport { resolveHashClass } from './resolve-hash-class';\n\n/** Runtime helper used by the Babel plugin for static `css` props. */\nexport function cssProp(api: CssStylesHost, properties: CSSProperties): string {\n  return resolveHashClass(api)(properties);\n}\n"]}

package/dist/css-prop-runtime-DHYMbbZm.d.cts

@@ -0,0 +1,12 @@
+import { TypeStylesApi, StylesApi, CSSProperties } from 'typestyles';
+
+/** Styles host for the css prop / TypeStylesProvider. */
+type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;
+type HashClassFn = (properties: CSSProperties, label?: string) => string;
+/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */
+declare function resolveHashClass(api: CssStylesHost): HashClassFn;
+
+/** Runtime helper used by the Babel plugin for static `css` props. */
+declare function cssProp(api: CssStylesHost, properties: CSSProperties): string;
+
+export { type CssStylesHost as C, type HashClassFn as H, cssProp as c, resolveHashClass as r };

package/dist/css-prop-runtime-DHYMbbZm.d.ts

@@ -0,0 +1,12 @@
+import { TypeStylesApi, StylesApi, CSSProperties } from 'typestyles';
+
+/** Styles host for the css prop / TypeStylesProvider. */
+type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;
+type HashClassFn = (properties: CSSProperties, label?: string) => string;
+/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */
+declare function resolveHashClass(api: CssStylesHost): HashClassFn;
+
+/** Runtime helper used by the Babel plugin for static `css` props. */
+declare function cssProp(api: CssStylesHost, properties: CSSProperties): string;
+
+export { type CssStylesHost as C, type HashClassFn as H, cssProp as c, resolveHashClass as r };

package/dist/css-prop-runtime.cjs

@@ -1,8 +1,16 @@
 'use strict';
 
+// src/resolve-hash-class.ts
+function resolveHashClass(api) {
+  if ("hash" in api && typeof api.hash === "function") {
+    return (properties, label) => api.hash(properties, { label });
+  }
+  return api.hashClass;
+}
+
 // src/css-prop-runtime.ts
-function cssProp(styles, properties) {
-  return styles.hashClass(properties);
+function cssProp(api, properties) {
+  return resolveHashClass(api)(properties);
 }
 
 exports.cssProp = cssProp;

package/dist/css-prop-runtime.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css-prop-runtime.ts"],"names":[],"mappings":";;;AAEO,SAAS,OAAA,CACd,QACA,UAAA,EACQ;AACR,EAAA,OAAO,MAAA,CAAO,UAAU,UAAU,CAAA;AACpC","file":"css-prop-runtime.cjs","sourcesContent":["import type { CSSProperties } from 'typestyles';\n\nexport function cssProp(\n  styles: { hashClass: (properties: CSSProperties, label?: string) => string },\n  properties: CSSProperties,\n): string {\n  return styles.hashClass(properties);\n}\n"]}
+{"version":3,"sources":["../src/resolve-hash-class.ts","../src/css-prop-runtime.ts"],"names":[],"mappings":";;;AAQO,SAAS,iBAAiB,GAAA,EAAiC;AAChE,EAAA,IAAI,MAAA,IAAU,GAAA,IAAO,OAAO,GAAA,CAAI,SAAS,UAAA,EAAY;AACnD,IAAA,OAAO,CAAC,YAAY,KAAA,KAAU,GAAA,CAAI,KAAK,UAAA,EAAY,EAAE,OAAO,CAAA;AAAA,EAC9D;AACA,EAAA,OAAQ,GAAA,CAAkB,SAAA;AAC5B;;;ACRO,SAAS,OAAA,CAAQ,KAAoB,UAAA,EAAmC;AAC7E,EAAA,OAAO,gBAAA,CAAiB,GAAG,CAAA,CAAE,UAAU,CAAA;AACzC","file":"css-prop-runtime.cjs","sourcesContent":["import type { CSSProperties, StylesApi, TypeStylesApi } from 'typestyles';\n\n/** Styles host for the css prop / TypeStylesProvider. */\nexport type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;\n\nexport type HashClassFn = (properties: CSSProperties, label?: string) => string;\n\n/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */\nexport function resolveHashClass(api: CssStylesHost): HashClassFn {\n  if ('hash' in api && typeof api.hash === 'function') {\n    return (properties, label) => api.hash(properties, { label });\n  }\n  return (api as StylesApi).hashClass;\n}\n","import type { CSSProperties } from 'typestyles';\nimport type { CssStylesHost } from './resolve-hash-class';\nimport { resolveHashClass } from './resolve-hash-class';\n\n/** Runtime helper used by the Babel plugin for static `css` props. */\nexport function cssProp(api: CssStylesHost, properties: CSSProperties): string {\n  return resolveHashClass(api)(properties);\n}\n"]}

package/dist/css-prop-runtime.d.cts

@@ -1,7 +1,2 @@
-import { CSSProperties } from 'typestyles';
-
-declare function cssProp(styles: {
-    hashClass: (properties: CSSProperties, label?: string) => string;
-}, properties: CSSProperties): string;
-
-export { cssProp };
+import 'typestyles';
+export { c as cssProp } from './css-prop-runtime-DHYMbbZm.cjs';

package/dist/css-prop-runtime.d.ts

@@ -1,7 +1,2 @@
-import { CSSProperties } from 'typestyles';
-
-declare function cssProp(styles: {
-    hashClass: (properties: CSSProperties, label?: string) => string;
-}, properties: CSSProperties): string;
-
-export { cssProp };
+import 'typestyles';
+export { c as cssProp } from './css-prop-runtime-DHYMbbZm.js';

package/dist/css-prop-runtime.js

@@ -1,3 +1,4 @@
-export { cssProp } from './chunk-3YCUQVCM.js';
+export { cssProp } from './chunk-TLEOUPD2.js';
+import './chunk-KM65VQPZ.js';
 //# sourceMappingURL=css-prop-runtime.js.map
 //# sourceMappingURL=css-prop-runtime.js.map

package/dist/index.cjs

@@ -39,6 +39,10 @@ function getVariantKeysFromConfig(config) {
   }
   return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));
 }
+function resolveRecipeFactory(api) {
+  if ("recipe" in api) return api.recipe;
+  return api.component;
+}
 function resolveStyledArgs(tag, configOrNamespace, maybeConfig) {
   if (typeof configOrNamespace === "string" && maybeConfig != null) {
     return { tag, namespace: configOrNamespace, config: maybeConfig };
@@ -50,14 +54,15 @@ function resolveStyledArgs(tag, configOrNamespace, maybeConfig) {
     config: configOrNamespace
   };
 }
-function createStyled(styles) {
+function createStyled(api) {
+  const makeRecipe = resolveRecipeFactory(api);
   function styled(tag, configOrNamespace, maybeConfig) {
     const {
       tag: element,
       namespace,
       config
     } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);
-    const recipe = styles.component(namespace, config);
+    const recipe = makeRecipe(namespace, config);
     const variantKeys = getVariantKeysFromConfig(
       config
     );
@@ -95,9 +100,17 @@ function resolveCssPropClass(hashClass, css, className) {
   return typestyles.cx(className);
 }
 
+// src/resolve-hash-class.ts
+function resolveHashClass(api) {
+  if ("hash" in api && typeof api.hash === "function") {
+    return (properties, label) => api.hash(properties, { label });
+  }
+  return api.hashClass;
+}
+
 // src/css-prop-runtime.ts
-function cssProp(styles, properties) {
-  return styles.hashClass(properties);
+function cssProp(api, properties) {
+  return resolveHashClass(api)(properties);
 }
 
 exports.TypeStylesContext = TypeStylesContext;
@@ -105,5 +118,6 @@ exports.TypeStylesProvider = TypeStylesProvider;
 exports.createStyled = createStyled;
 exports.cssProp = cssProp;
 exports.resolveCssPropClass = resolveCssPropClass;
+exports.resolveHashClass = resolveHashClass;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-props.ts","../src/create-styled.tsx","../src/context.tsx","../src/css-prop.ts","../src/css-prop-runtime.ts"],"names":["forwardRef","cx","createContext","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["const RESERVED_CONFIG_KEYS = new Set([\n  'base',\n  'variants',\n  'compoundVariants',\n  'defaultVariants',\n  'slots',\n]);\n\nexport function splitVariantProps<P extends Record<string, unknown>>(\n  props: P,\n  variantKeys: readonly string[],\n): {\n  variants: Record<string, unknown>;\n  rest: Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>;\n} {\n  const variants: Record<string, unknown> = {};\n  const rest = { ...props } as Record<string, unknown>;\n\n  for (const key of variantKeys) {\n    if (key in rest) {\n      variants[key] = rest[key];\n      delete rest[key];\n    }\n  }\n\n  delete rest.className;\n  delete rest.css;\n\n  return {\n    variants,\n    rest: rest as Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>,\n  };\n}\n\nexport function getVariantKeysFromConfig(\n  config: Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n): readonly string[] {\n  if (typeof config === 'function') {\n    return [];\n  }\n\n  if ('variants' in config && config.variants && typeof config.variants === 'object') {\n    return Object.keys(config.variants);\n  }\n\n  return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));\n}\n","import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n} from 'react';\nimport type {\n  ComponentConfigInput,\n  ComponentReturn,\n  ComponentVariants,\n  FlatComponentConfigInput,\n  FlatComponentReturn,\n  StylesApi,\n  VariantDefinitions,\n} from 'typestyles';\nimport { cx } from 'typestyles';\nimport { getVariantKeysFromConfig, splitVariantProps } from './split-props';\n\ntype StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<\n  ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>\n>;\n\nexport type StyledFactory = {\n  <Tag extends ElementType, const V extends VariantDefinitions>(\n    tag: Tag,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const V extends VariantDefinitions, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const K extends string>(\n    tag: Tag,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n  <Tag extends ElementType, const K extends string, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n};\n\nfunction resolveStyledArgs(\n  tag: ElementType,\n  configOrNamespace:\n    | string\n    | ComponentConfigInput<VariantDefinitions>\n    | FlatComponentConfigInput<string>,\n  maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n): {\n  tag: ElementType;\n  namespace: string;\n  config: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>;\n} {\n  if (typeof configOrNamespace === 'string' && maybeConfig != null) {\n    return { tag, namespace: configOrNamespace, config: maybeConfig };\n  }\n\n  const namespace = typeof tag === 'string' ? tag : 'styled';\n  return {\n    tag,\n    namespace,\n    config: configOrNamespace as\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n  };\n}\n\nexport function createStyled(styles: StylesApi): StyledFactory {\n  function styled<Tag extends ElementType>(\n    tag: Tag,\n    configOrNamespace:\n      | string\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n    maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n  ) {\n    const {\n      tag: element,\n      namespace,\n      config,\n    } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);\n    const recipe = styles.component(namespace, config as ComponentConfigInput<VariantDefinitions>);\n    const variantKeys = getVariantKeysFromConfig(\n      config as Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n    );\n\n    const Component = forwardRef<Element, ComponentPropsWithoutRef<Tag> & Record<string, unknown>>(\n      function StyledComponent(props, ref) {\n        const { className, ...propsWithoutClassName } = props;\n        const { variants, rest } = splitVariantProps(\n          propsWithoutClassName as Record<string, unknown>,\n          variantKeys,\n        );\n        const mergedClassName = cx(\n          (recipe as (selections?: Record<string, unknown>) => string)(variants),\n          className,\n        );\n        const Element = element;\n\n        return <Element {...rest} ref={ref} className={mergedClassName} />;\n      },\n    );\n\n    Component.displayName = namespace.charAt(0).toUpperCase() + namespace.slice(1);\n\n    return Component;\n  }\n\n  return styled as StyledFactory;\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { StylesApi } from 'typestyles';\n\nexport const TypeStylesContext = createContext<StylesApi | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  styles: StylesApi;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import type { CSSProperties } from 'typestyles';\n\nexport function cssProp(\n  styles: { hashClass: (properties: CSSProperties, label?: string) => string },\n  properties: CSSProperties,\n): string {\n  return styles.hashClass(properties);\n}\n"]}
+{"version":3,"sources":["../src/split-props.ts","../src/create-styled.tsx","../src/context.tsx","../src/css-prop.ts","../src/resolve-hash-class.ts","../src/css-prop-runtime.ts"],"names":["forwardRef","cx","createContext","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["const RESERVED_CONFIG_KEYS = new Set([\n  'base',\n  'variants',\n  'compoundVariants',\n  'defaultVariants',\n  'slots',\n]);\n\nexport function splitVariantProps<P extends Record<string, unknown>>(\n  props: P,\n  variantKeys: readonly string[],\n): {\n  variants: Record<string, unknown>;\n  rest: Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>;\n} {\n  const variants: Record<string, unknown> = {};\n  const rest = { ...props } as Record<string, unknown>;\n\n  for (const key of variantKeys) {\n    if (key in rest) {\n      variants[key] = rest[key];\n      delete rest[key];\n    }\n  }\n\n  delete rest.className;\n  delete rest.css;\n\n  return {\n    variants,\n    rest: rest as Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>,\n  };\n}\n\nexport function getVariantKeysFromConfig(\n  config: Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n): readonly string[] {\n  if (typeof config === 'function') {\n    return [];\n  }\n\n  if ('variants' in config && config.variants && typeof config.variants === 'object') {\n    return Object.keys(config.variants);\n  }\n\n  return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));\n}\n","import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n} from 'react';\nimport type {\n  ComponentConfigInput,\n  ComponentReturn,\n  ComponentVariants,\n  FlatComponentConfigInput,\n  FlatComponentReturn,\n  StylesApi,\n  TypeStylesApi,\n  VariantDefinitions,\n} from 'typestyles';\nimport { cx } from 'typestyles';\nimport { getVariantKeysFromConfig, splitVariantProps } from './split-props';\n\ntype StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<\n  ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>\n>;\n\nexport type StyledFactory = {\n  <Tag extends ElementType, const V extends VariantDefinitions>(\n    tag: Tag,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const V extends VariantDefinitions, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const K extends string>(\n    tag: Tag,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n  <Tag extends ElementType, const K extends string, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n};\n\ntype RecipeFactory = StylesApi['component'];\n\n/** Accepts `createTypeStyles()` (preferred) or a lower-level `createStyles()` instance. */\nexport type StyledApi = Pick<TypeStylesApi, 'recipe'> | StylesApi;\n\nfunction resolveRecipeFactory(api: StyledApi): RecipeFactory {\n  if ('recipe' in api) return api.recipe;\n  return api.component;\n}\n\nfunction resolveStyledArgs(\n  tag: ElementType,\n  configOrNamespace:\n    | string\n    | ComponentConfigInput<VariantDefinitions>\n    | FlatComponentConfigInput<string>,\n  maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n): {\n  tag: ElementType;\n  namespace: string;\n  config: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>;\n} {\n  if (typeof configOrNamespace === 'string' && maybeConfig != null) {\n    return { tag, namespace: configOrNamespace, config: maybeConfig };\n  }\n\n  const namespace = typeof tag === 'string' ? tag : 'styled';\n  return {\n    tag,\n    namespace,\n    config: configOrNamespace as\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n  };\n}\n\nexport function createStyled(api: StyledApi): StyledFactory {\n  const makeRecipe = resolveRecipeFactory(api);\n\n  function styled<Tag extends ElementType>(\n    tag: Tag,\n    configOrNamespace:\n      | string\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n    maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n  ) {\n    const {\n      tag: element,\n      namespace,\n      config,\n    } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);\n    const recipe = makeRecipe(namespace, config as ComponentConfigInput<VariantDefinitions>);\n    const variantKeys = getVariantKeysFromConfig(\n      config as Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n    );\n\n    const Component = forwardRef<Element, ComponentPropsWithoutRef<Tag> & Record<string, unknown>>(\n      function StyledComponent(props, ref) {\n        const { className, ...propsWithoutClassName } = props;\n        const { variants, rest } = splitVariantProps(\n          propsWithoutClassName as Record<string, unknown>,\n          variantKeys,\n        );\n        const mergedClassName = cx(\n          (recipe as (selections?: Record<string, unknown>) => string)(variants),\n          className,\n        );\n        const Element = element;\n\n        return <Element {...rest} ref={ref} className={mergedClassName} />;\n      },\n    );\n\n    Component.displayName = namespace.charAt(0).toUpperCase() + namespace.slice(1);\n\n    return Component;\n  }\n\n  return styled as StyledFactory;\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { CssStylesHost } from './resolve-hash-class';\n\nexport const TypeStylesContext = createContext<CssStylesHost | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */\n  styles: CssStylesHost;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import type { CSSProperties, StylesApi, TypeStylesApi } from 'typestyles';\n\n/** Styles host for the css prop / TypeStylesProvider. */\nexport type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;\n\nexport type HashClassFn = (properties: CSSProperties, label?: string) => string;\n\n/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */\nexport function resolveHashClass(api: CssStylesHost): HashClassFn {\n  if ('hash' in api && typeof api.hash === 'function') {\n    return (properties, label) => api.hash(properties, { label });\n  }\n  return (api as StylesApi).hashClass;\n}\n","import type { CSSProperties } from 'typestyles';\nimport type { CssStylesHost } from './resolve-hash-class';\nimport { resolveHashClass } from './resolve-hash-class';\n\n/** Runtime helper used by the Babel plugin for static `css` props. */\nexport function cssProp(api: CssStylesHost, properties: CSSProperties): string {\n  return resolveHashClass(api)(properties);\n}\n"]}

package/dist/index.d.cts

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes, ReactNode } from 'react';
-import { VariantDefinitions, ComponentConfigInput, ComponentVariants, ComponentReturn, FlatComponentConfigInput, FlatComponentReturn, StylesApi, CSSProperties } from 'typestyles';
+import { TypeStylesApi, StylesApi, VariantDefinitions, ComponentConfigInput, ComponentVariants, ComponentReturn, FlatComponentConfigInput, FlatComponentReturn, CSSProperties } from 'typestyles';
+import { C as CssStylesHost } from './css-prop-runtime-DHYMbbZm.cjs';
+export { H as HashClassFn, c as cssProp, r as resolveHashClass } from './css-prop-runtime-DHYMbbZm.cjs';
 import { C as CssPropValue } from './types-_vEO6H8X.cjs';
 export { W as WithCssProp } from './types-_vEO6H8X.cjs';
-export { cssProp } from './css-prop-runtime.cjs';
 
 type StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>>;
 type StyledFactory = {
@@ -12,14 +13,17 @@ type StyledFactory = {
     <Tag extends ElementType, const K extends string>(tag: Tag, config: FlatComponentConfigInput<K>): StyledComponentType<Tag, FlatComponentReturn<K>>;
     <Tag extends ElementType, const K extends string, const N extends string>(tag: Tag, namespace: N, config: FlatComponentConfigInput<K>): StyledComponentType<Tag, FlatComponentReturn<K>>;
 };
-declare function createStyled(styles: StylesApi): StyledFactory;
+/** Accepts `createTypeStyles()` (preferred) or a lower-level `createStyles()` instance. */
+type StyledApi = Pick<TypeStylesApi, 'recipe'> | StylesApi;
+declare function createStyled(api: StyledApi): StyledFactory;
 
-declare const TypeStylesContext: react.Context<StylesApi | null>;
+declare const TypeStylesContext: react.Context<CssStylesHost | null>;
 declare function TypeStylesProvider({ styles, children, }: {
-    styles: StylesApi;
+    /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */
+    styles: CssStylesHost;
     children: ReactNode;
 }): React.JSX.Element;
 
 declare function resolveCssPropClass(hashClass: (properties: CSSProperties, label?: string) => string, css: CssPropValue | undefined, className?: string): string;
 
-export { CssPropValue, type StyledFactory, TypeStylesContext, TypeStylesProvider, createStyled, resolveCssPropClass };
+export { CssPropValue, CssStylesHost, type StyledApi, type StyledFactory, TypeStylesContext, TypeStylesProvider, createStyled, resolveCssPropClass };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes, ReactNode } from 'react';
-import { VariantDefinitions, ComponentConfigInput, ComponentVariants, ComponentReturn, FlatComponentConfigInput, FlatComponentReturn, StylesApi, CSSProperties } from 'typestyles';
+import { TypeStylesApi, StylesApi, VariantDefinitions, ComponentConfigInput, ComponentVariants, ComponentReturn, FlatComponentConfigInput, FlatComponentReturn, CSSProperties } from 'typestyles';
+import { C as CssStylesHost } from './css-prop-runtime-DHYMbbZm.js';
+export { H as HashClassFn, c as cssProp, r as resolveHashClass } from './css-prop-runtime-DHYMbbZm.js';
 import { C as CssPropValue } from './types-_vEO6H8X.js';
 export { W as WithCssProp } from './types-_vEO6H8X.js';
-export { cssProp } from './css-prop-runtime.js';
 
 type StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>>;
 type StyledFactory = {
@@ -12,14 +13,17 @@ type StyledFactory = {
     <Tag extends ElementType, const K extends string>(tag: Tag, config: FlatComponentConfigInput<K>): StyledComponentType<Tag, FlatComponentReturn<K>>;
     <Tag extends ElementType, const K extends string, const N extends string>(tag: Tag, namespace: N, config: FlatComponentConfigInput<K>): StyledComponentType<Tag, FlatComponentReturn<K>>;
 };
-declare function createStyled(styles: StylesApi): StyledFactory;
+/** Accepts `createTypeStyles()` (preferred) or a lower-level `createStyles()` instance. */
+type StyledApi = Pick<TypeStylesApi, 'recipe'> | StylesApi;
+declare function createStyled(api: StyledApi): StyledFactory;
 
-declare const TypeStylesContext: react.Context<StylesApi | null>;
+declare const TypeStylesContext: react.Context<CssStylesHost | null>;
 declare function TypeStylesProvider({ styles, children, }: {
-    styles: StylesApi;
+    /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */
+    styles: CssStylesHost;
     children: ReactNode;
 }): React.JSX.Element;
 
 declare function resolveCssPropClass(hashClass: (properties: CSSProperties, label?: string) => string, css: CssPropValue | undefined, className?: string): string;
 
-export { CssPropValue, type StyledFactory, TypeStylesContext, TypeStylesProvider, createStyled, resolveCssPropClass };
+export { CssPropValue, CssStylesHost, type StyledApi, type StyledFactory, TypeStylesContext, TypeStylesProvider, createStyled, resolveCssPropClass };

package/dist/index.js

@@ -1,5 +1,6 @@
-export { TypeStylesContext, TypeStylesProvider, resolveCssPropClass } from './chunk-4BYX2HZ7.js';
-export { cssProp } from './chunk-3YCUQVCM.js';
+export { TypeStylesContext, TypeStylesProvider, resolveCssPropClass } from './chunk-IHZMLPG2.js';
+export { cssProp } from './chunk-TLEOUPD2.js';
+export { resolveHashClass } from './chunk-KM65VQPZ.js';
 import { forwardRef } from 'react';
 import { cx } from 'typestyles';
 import { jsx } from 'react/jsx-runtime';
@@ -37,6 +38,10 @@ function getVariantKeysFromConfig(config) {
   }
   return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));
 }
+function resolveRecipeFactory(api) {
+  if ("recipe" in api) return api.recipe;
+  return api.component;
+}
 function resolveStyledArgs(tag, configOrNamespace, maybeConfig) {
   if (typeof configOrNamespace === "string" && maybeConfig != null) {
     return { tag, namespace: configOrNamespace, config: maybeConfig };
@@ -48,14 +53,15 @@ function resolveStyledArgs(tag, configOrNamespace, maybeConfig) {
     config: configOrNamespace
   };
 }
-function createStyled(styles) {
+function createStyled(api) {
+  const makeRecipe = resolveRecipeFactory(api);
   function styled(tag, configOrNamespace, maybeConfig) {
     const {
       tag: element,
       namespace,
       config
     } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);
-    const recipe = styles.component(namespace, config);
+    const recipe = makeRecipe(namespace, config);
     const variantKeys = getVariantKeysFromConfig(
       config
     );

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-props.ts","../src/create-styled.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["const RESERVED_CONFIG_KEYS = new Set([\n  'base',\n  'variants',\n  'compoundVariants',\n  'defaultVariants',\n  'slots',\n]);\n\nexport function splitVariantProps<P extends Record<string, unknown>>(\n  props: P,\n  variantKeys: readonly string[],\n): {\n  variants: Record<string, unknown>;\n  rest: Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>;\n} {\n  const variants: Record<string, unknown> = {};\n  const rest = { ...props } as Record<string, unknown>;\n\n  for (const key of variantKeys) {\n    if (key in rest) {\n      variants[key] = rest[key];\n      delete rest[key];\n    }\n  }\n\n  delete rest.className;\n  delete rest.css;\n\n  return {\n    variants,\n    rest: rest as Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>,\n  };\n}\n\nexport function getVariantKeysFromConfig(\n  config: Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n): readonly string[] {\n  if (typeof config === 'function') {\n    return [];\n  }\n\n  if ('variants' in config && config.variants && typeof config.variants === 'object') {\n    return Object.keys(config.variants);\n  }\n\n  return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));\n}\n","import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n} from 'react';\nimport type {\n  ComponentConfigInput,\n  ComponentReturn,\n  ComponentVariants,\n  FlatComponentConfigInput,\n  FlatComponentReturn,\n  StylesApi,\n  VariantDefinitions,\n} from 'typestyles';\nimport { cx } from 'typestyles';\nimport { getVariantKeysFromConfig, splitVariantProps } from './split-props';\n\ntype StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<\n  ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>\n>;\n\nexport type StyledFactory = {\n  <Tag extends ElementType, const V extends VariantDefinitions>(\n    tag: Tag,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const V extends VariantDefinitions, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const K extends string>(\n    tag: Tag,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n  <Tag extends ElementType, const K extends string, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n};\n\nfunction resolveStyledArgs(\n  tag: ElementType,\n  configOrNamespace:\n    | string\n    | ComponentConfigInput<VariantDefinitions>\n    | FlatComponentConfigInput<string>,\n  maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n): {\n  tag: ElementType;\n  namespace: string;\n  config: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>;\n} {\n  if (typeof configOrNamespace === 'string' && maybeConfig != null) {\n    return { tag, namespace: configOrNamespace, config: maybeConfig };\n  }\n\n  const namespace = typeof tag === 'string' ? tag : 'styled';\n  return {\n    tag,\n    namespace,\n    config: configOrNamespace as\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n  };\n}\n\nexport function createStyled(styles: StylesApi): StyledFactory {\n  function styled<Tag extends ElementType>(\n    tag: Tag,\n    configOrNamespace:\n      | string\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n    maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n  ) {\n    const {\n      tag: element,\n      namespace,\n      config,\n    } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);\n    const recipe = styles.component(namespace, config as ComponentConfigInput<VariantDefinitions>);\n    const variantKeys = getVariantKeysFromConfig(\n      config as Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n    );\n\n    const Component = forwardRef<Element, ComponentPropsWithoutRef<Tag> & Record<string, unknown>>(\n      function StyledComponent(props, ref) {\n        const { className, ...propsWithoutClassName } = props;\n        const { variants, rest } = splitVariantProps(\n          propsWithoutClassName as Record<string, unknown>,\n          variantKeys,\n        );\n        const mergedClassName = cx(\n          (recipe as (selections?: Record<string, unknown>) => string)(variants),\n          className,\n        );\n        const Element = element;\n\n        return <Element {...rest} ref={ref} className={mergedClassName} />;\n      },\n    );\n\n    Component.displayName = namespace.charAt(0).toUpperCase() + namespace.slice(1);\n\n    return Component;\n  }\n\n  return styled as StyledFactory;\n}\n"]}
+{"version":3,"sources":["../src/split-props.ts","../src/create-styled.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["const RESERVED_CONFIG_KEYS = new Set([\n  'base',\n  'variants',\n  'compoundVariants',\n  'defaultVariants',\n  'slots',\n]);\n\nexport function splitVariantProps<P extends Record<string, unknown>>(\n  props: P,\n  variantKeys: readonly string[],\n): {\n  variants: Record<string, unknown>;\n  rest: Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>;\n} {\n  const variants: Record<string, unknown> = {};\n  const rest = { ...props } as Record<string, unknown>;\n\n  for (const key of variantKeys) {\n    if (key in rest) {\n      variants[key] = rest[key];\n      delete rest[key];\n    }\n  }\n\n  delete rest.className;\n  delete rest.css;\n\n  return {\n    variants,\n    rest: rest as Omit<P, (typeof variantKeys)[number] | 'className' | 'css'>,\n  };\n}\n\nexport function getVariantKeysFromConfig(\n  config: Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n): readonly string[] {\n  if (typeof config === 'function') {\n    return [];\n  }\n\n  if ('variants' in config && config.variants && typeof config.variants === 'object') {\n    return Object.keys(config.variants);\n  }\n\n  return Object.keys(config).filter((key) => !RESERVED_CONFIG_KEYS.has(key));\n}\n","import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n} from 'react';\nimport type {\n  ComponentConfigInput,\n  ComponentReturn,\n  ComponentVariants,\n  FlatComponentConfigInput,\n  FlatComponentReturn,\n  StylesApi,\n  TypeStylesApi,\n  VariantDefinitions,\n} from 'typestyles';\nimport { cx } from 'typestyles';\nimport { getVariantKeysFromConfig, splitVariantProps } from './split-props';\n\ntype StyledComponentType<Tag extends ElementType, Recipe> = ForwardRefExoticComponent<\n  ComponentPropsWithoutRef<Tag> & ComponentVariants<Recipe> & RefAttributes<Element>\n>;\n\nexport type StyledFactory = {\n  <Tag extends ElementType, const V extends VariantDefinitions>(\n    tag: Tag,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const V extends VariantDefinitions, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: ComponentConfigInput<V>,\n  ): StyledComponentType<Tag, ComponentReturn<V>>;\n  <Tag extends ElementType, const K extends string>(\n    tag: Tag,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n  <Tag extends ElementType, const K extends string, const N extends string>(\n    tag: Tag,\n    namespace: N,\n    config: FlatComponentConfigInput<K>,\n  ): StyledComponentType<Tag, FlatComponentReturn<K>>;\n};\n\ntype RecipeFactory = StylesApi['component'];\n\n/** Accepts `createTypeStyles()` (preferred) or a lower-level `createStyles()` instance. */\nexport type StyledApi = Pick<TypeStylesApi, 'recipe'> | StylesApi;\n\nfunction resolveRecipeFactory(api: StyledApi): RecipeFactory {\n  if ('recipe' in api) return api.recipe;\n  return api.component;\n}\n\nfunction resolveStyledArgs(\n  tag: ElementType,\n  configOrNamespace:\n    | string\n    | ComponentConfigInput<VariantDefinitions>\n    | FlatComponentConfigInput<string>,\n  maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n): {\n  tag: ElementType;\n  namespace: string;\n  config: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>;\n} {\n  if (typeof configOrNamespace === 'string' && maybeConfig != null) {\n    return { tag, namespace: configOrNamespace, config: maybeConfig };\n  }\n\n  const namespace = typeof tag === 'string' ? tag : 'styled';\n  return {\n    tag,\n    namespace,\n    config: configOrNamespace as\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n  };\n}\n\nexport function createStyled(api: StyledApi): StyledFactory {\n  const makeRecipe = resolveRecipeFactory(api);\n\n  function styled<Tag extends ElementType>(\n    tag: Tag,\n    configOrNamespace:\n      | string\n      | ComponentConfigInput<VariantDefinitions>\n      | FlatComponentConfigInput<string>,\n    maybeConfig?: ComponentConfigInput<VariantDefinitions> | FlatComponentConfigInput<string>,\n  ) {\n    const {\n      tag: element,\n      namespace,\n      config,\n    } = resolveStyledArgs(tag, configOrNamespace, maybeConfig);\n    const recipe = makeRecipe(namespace, config as ComponentConfigInput<VariantDefinitions>);\n    const variantKeys = getVariantKeysFromConfig(\n      config as Record<string, unknown> | ((ctx: unknown) => Record<string, unknown>),\n    );\n\n    const Component = forwardRef<Element, ComponentPropsWithoutRef<Tag> & Record<string, unknown>>(\n      function StyledComponent(props, ref) {\n        const { className, ...propsWithoutClassName } = props;\n        const { variants, rest } = splitVariantProps(\n          propsWithoutClassName as Record<string, unknown>,\n          variantKeys,\n        );\n        const mergedClassName = cx(\n          (recipe as (selections?: Record<string, unknown>) => string)(variants),\n          className,\n        );\n        const Element = element;\n\n        return <Element {...rest} ref={ref} className={mergedClassName} />;\n      },\n    );\n\n    Component.displayName = namespace.charAt(0).toUpperCase() + namespace.slice(1);\n\n    return Component;\n  }\n\n  return styled as StyledFactory;\n}\n"]}

package/dist/jsx-dev-runtime.cjs

@@ -14,15 +14,23 @@ function resolveCssPropClass(hashClass, css, className) {
 }
 var TypeStylesContext = react.createContext(null);
 
+// src/resolve-hash-class.ts
+function resolveHashClass(api) {
+  if ("hash" in api && typeof api.hash === "function") {
+    return (properties, label) => api.hash(properties, { label });
+  }
+  return api.hashClass;
+}
+
 // src/jsx-dev-runtime.ts
-function processCssProp(props, styles) {
+function processCssProp(props, hashClass) {
   if (props.css == null) {
     return props;
   }
   const { css, className, ...rest } = props;
   const nextProps = {
     ...rest,
-    className: resolveCssPropClass(styles.hashClass, css, className)
+    className: resolveCssPropClass(hashClass, css, className)
   };
   return nextProps;
 }
@@ -31,10 +39,10 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   const styles = react.useContext(TypeStylesContext);
   if (props.css != null && styles == null) {
     throw new Error(
-      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props."
+      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props."
     );
   }
-  const nextProps = styles ? processCssProp(props, styles) : props;
+  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : props;
   return jsxDevRuntime.jsxDEV(type, nextProps, key, isStaticChildren, source, self);
 }
 

package/dist/jsx-dev-runtime.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css-prop.ts","../src/context.tsx","../src/jsx-dev-runtime.ts"],"names":["cx","createContext","ReactFragment","useContext","reactJsxDEV"],"mappings":";;;;;;;;AAIO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAOA,aAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAOA,cAAG,SAAS,CAAA;AACrB;ACVO,IAAM,iBAAA,GAAoBC,oBAAgC,IAAI,CAAA;;;ACGrE,SAAS,cAAA,CACP,OACA,MAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,MAAA,CAAO,SAAA,EAAW,KAAK,SAAS;AAAA,GACjE;AAEA,EAAA,OAAO,SAAA;AACT;AAEO,IAAM,QAAA,GAAWC;AAEjB,SAAS,OACd,IAAA,EACA,KAAA,EACA,GAAA,EACA,gBAAA,EACA,QACA,IAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAASC,iBAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,GAAS,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA,GAAK,KAAA;AAC5D,EAAA,OAAOC,qBAAY,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,gBAAA,EAAkB,QAAQ,IAAI,CAAA;AACzE","file":"jsx-dev-runtime.cjs","sourcesContent":["import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { StylesApi } from 'typestyles';\n\nexport const TypeStylesContext = createContext<StylesApi | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  styles: StylesApi;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsxDEV as reactJsxDEV, Fragment as ReactFragment } from 'react/jsx-dev-runtime';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  styles: NonNullable<React.ContextType<typeof TypeStylesContext>>,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(styles.hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsxDEV<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key: React.Key | undefined,\n  isStaticChildren: boolean,\n  source: object | undefined,\n  self: unknown,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, styles) : (props as P);\n  return reactJsxDEV(type, nextProps, key, isStaticChildren, source, self);\n}\n\nexport type { ReactNode };\n"]}
+{"version":3,"sources":["../src/css-prop.ts","../src/context.tsx","../src/resolve-hash-class.ts","../src/jsx-dev-runtime.ts"],"names":["cx","createContext","ReactFragment","useContext","reactJsxDEV"],"mappings":";;;;;;;;AAIO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAOA,aAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAOA,cAAG,SAAS,CAAA;AACrB;ACVO,IAAM,iBAAA,GAAoBC,oBAAoC,IAAI,CAAA;;;ACKlE,SAAS,iBAAiB,GAAA,EAAiC;AAChE,EAAA,IAAI,MAAA,IAAU,GAAA,IAAO,OAAO,GAAA,CAAI,SAAS,UAAA,EAAY;AACnD,IAAA,OAAO,CAAC,YAAY,KAAA,KAAU,GAAA,CAAI,KAAK,UAAA,EAAY,EAAE,OAAO,CAAA;AAAA,EAC9D;AACA,EAAA,OAAQ,GAAA,CAAkB,SAAA;AAC5B;;;ACLA,SAAS,cAAA,CACP,OACA,SAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,SAAA,EAAW,GAAA,EAAK,SAAS;AAAA,GAC1D;AAEA,EAAA,OAAO,SAAA;AACT;AAEO,IAAM,QAAA,GAAWC;AAEjB,SAAS,OACd,IAAA,EACA,KAAA,EACA,GAAA,EACA,gBAAA,EACA,QACA,IAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAASC,iBAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,YAAY,MAAA,GAAS,cAAA,CAAe,OAAO,gBAAA,CAAiB,MAAM,CAAC,CAAA,GAAK,KAAA;AAC9E,EAAA,OAAOC,qBAAY,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,gBAAA,EAAkB,QAAQ,IAAI,CAAA;AACzE","file":"jsx-dev-runtime.cjs","sourcesContent":["import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { CssStylesHost } from './resolve-hash-class';\n\nexport const TypeStylesContext = createContext<CssStylesHost | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */\n  styles: CssStylesHost;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties, StylesApi, TypeStylesApi } from 'typestyles';\n\n/** Styles host for the css prop / TypeStylesProvider. */\nexport type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;\n\nexport type HashClassFn = (properties: CSSProperties, label?: string) => string;\n\n/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */\nexport function resolveHashClass(api: CssStylesHost): HashClassFn {\n  if ('hash' in api && typeof api.hash === 'function') {\n    return (properties, label) => api.hash(properties, { label });\n  }\n  return (api as StylesApi).hashClass;\n}\n","import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsxDEV as reactJsxDEV, Fragment as ReactFragment } from 'react/jsx-dev-runtime';\nimport type { CSSProperties } from 'typestyles';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport { resolveHashClass } from './resolve-hash-class';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  hashClass: (properties: CSSProperties, label?: string) => string,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsxDEV<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key: React.Key | undefined,\n  isStaticChildren: boolean,\n  source: object | undefined,\n  self: unknown,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : (props as P);\n  return reactJsxDEV(type, nextProps, key, isStaticChildren, source, self);\n}\n\nexport type { ReactNode };\n"]}

package/dist/jsx-dev-runtime.js

@@ -1,15 +1,16 @@
-import { TypeStylesContext, resolveCssPropClass } from './chunk-4BYX2HZ7.js';
+import { TypeStylesContext, resolveCssPropClass } from './chunk-IHZMLPG2.js';
+import { resolveHashClass } from './chunk-KM65VQPZ.js';
 import { useContext } from 'react';
 import { Fragment as Fragment$1, jsxDEV as jsxDEV$1 } from 'react/jsx-dev-runtime';
 
-function processCssProp(props, styles) {
+function processCssProp(props, hashClass) {
   if (props.css == null) {
     return props;
   }
   const { css, className, ...rest } = props;
   const nextProps = {
     ...rest,
-    className: resolveCssPropClass(styles.hashClass, css, className)
+    className: resolveCssPropClass(hashClass, css, className)
   };
   return nextProps;
 }
@@ -18,10 +19,10 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   const styles = useContext(TypeStylesContext);
   if (props.css != null && styles == null) {
     throw new Error(
-      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props."
+      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props."
     );
   }
-  const nextProps = styles ? processCssProp(props, styles) : props;
+  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : props;
   return jsxDEV$1(type, nextProps, key, isStaticChildren, source, self);
 }
 

package/dist/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/jsx-dev-runtime.ts"],"names":["ReactFragment","reactJsxDEV"],"mappings":";;;;AAMA,SAAS,cAAA,CACP,OACA,MAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,MAAA,CAAO,SAAA,EAAW,KAAK,SAAS;AAAA,GACjE;AAEA,EAAA,OAAO,SAAA;AACT;AAEO,IAAM,QAAA,GAAWA;AAEjB,SAAS,OACd,IAAA,EACA,KAAA,EACA,GAAA,EACA,gBAAA,EACA,QACA,IAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,GAAS,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA,GAAK,KAAA;AAC5D,EAAA,OAAOC,SAAY,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,gBAAA,EAAkB,QAAQ,IAAI,CAAA;AACzE","file":"jsx-dev-runtime.js","sourcesContent":["import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsxDEV as reactJsxDEV, Fragment as ReactFragment } from 'react/jsx-dev-runtime';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  styles: NonNullable<React.ContextType<typeof TypeStylesContext>>,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(styles.hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsxDEV<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key: React.Key | undefined,\n  isStaticChildren: boolean,\n  source: object | undefined,\n  self: unknown,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, styles) : (props as P);\n  return reactJsxDEV(type, nextProps, key, isStaticChildren, source, self);\n}\n\nexport type { ReactNode };\n"]}
+{"version":3,"sources":["../src/jsx-dev-runtime.ts"],"names":["ReactFragment","reactJsxDEV"],"mappings":";;;;;AAQA,SAAS,cAAA,CACP,OACA,SAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,SAAA,EAAW,GAAA,EAAK,SAAS;AAAA,GAC1D;AAEA,EAAA,OAAO,SAAA;AACT;AAEO,IAAM,QAAA,GAAWA;AAEjB,SAAS,OACd,IAAA,EACA,KAAA,EACA,GAAA,EACA,gBAAA,EACA,QACA,IAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,YAAY,MAAA,GAAS,cAAA,CAAe,OAAO,gBAAA,CAAiB,MAAM,CAAC,CAAA,GAAK,KAAA;AAC9E,EAAA,OAAOC,SAAY,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,gBAAA,EAAkB,QAAQ,IAAI,CAAA;AACzE","file":"jsx-dev-runtime.js","sourcesContent":["import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsxDEV as reactJsxDEV, Fragment as ReactFragment } from 'react/jsx-dev-runtime';\nimport type { CSSProperties } from 'typestyles';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport { resolveHashClass } from './resolve-hash-class';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  hashClass: (properties: CSSProperties, label?: string) => string,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsxDEV<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key: React.Key | undefined,\n  isStaticChildren: boolean,\n  source: object | undefined,\n  self: unknown,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : (props as P);\n  return reactJsxDEV(type, nextProps, key, isStaticChildren, source, self);\n}\n\nexport type { ReactNode };\n"]}

package/dist/jsx-runtime.cjs

@@ -13,15 +13,23 @@ function resolveCssPropClass(hashClass, css, className) {
 }
 var TypeStylesContext = react.createContext(null);
 
+// src/resolve-hash-class.ts
+function resolveHashClass(api) {
+  if ("hash" in api && typeof api.hash === "function") {
+    return (properties, label) => api.hash(properties, { label });
+  }
+  return api.hashClass;
+}
+
 // src/jsx-runtime.ts
-function processCssProp(props, styles) {
+function processCssProp(props, hashClass) {
   if (props.css == null) {
     return props;
   }
   const { css, className, ...rest } = props;
   const nextProps = {
     ...rest,
-    className: resolveCssPropClass(styles.hashClass, css, className)
+    className: resolveCssPropClass(hashClass, css, className)
   };
   return nextProps;
 }
@@ -29,10 +37,10 @@ function wrapJsx(factory, type, props, key) {
   const styles = react.useContext(TypeStylesContext);
   if (props.css != null && styles == null) {
     throw new Error(
-      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props."
+      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props."
     );
   }
-  const nextProps = styles ? processCssProp(props, styles) : props;
+  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : props;
   return factory(type, nextProps, key);
 }
 var Fragment = jsxRuntime.Fragment;

package/dist/jsx-runtime.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css-prop.ts","../src/context.tsx","../src/jsx-runtime.ts"],"names":["cx","createContext","useContext","ReactFragment","jsx","reactJsx","reactJsxs"],"mappings":";;;;;;;AAIO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAOA,aAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAOA,cAAG,SAAS,CAAA;AACrB;ACVO,IAAM,iBAAA,GAAoBC,oBAAgC,IAAI,CAAA;;;ACGrE,SAAS,cAAA,CACP,OACA,MAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,MAAA,CAAO,SAAA,EAAW,KAAK,SAAS;AAAA,GACjE;AAEA,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,OAAA,CACP,OAAA,EACA,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAASC,iBAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,GAAS,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA,GAAK,KAAA;AAC5D,EAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,SAAA,EAAW,GAAG,CAAA;AACrC;AAEO,IAAM,QAAA,GAAWC;AAEjB,SAASC,IAAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,cAAA,EAAU,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC3C;AAEO,SAAS,IAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,eAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC5C","file":"jsx-runtime.cjs","sourcesContent":["import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { StylesApi } from 'typestyles';\n\nexport const TypeStylesContext = createContext<StylesApi | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  styles: StylesApi;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsx as reactJsx, jsxs as reactJsxs, Fragment as ReactFragment } from 'react/jsx-runtime';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  styles: NonNullable<React.ContextType<typeof TypeStylesContext>>,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(styles.hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nfunction wrapJsx<P extends Record<string, unknown>>(\n  factory: typeof reactJsx,\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, styles) : (props as P);\n  return factory(type, nextProps, key);\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsx<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsx, type, props, key);\n}\n\nexport function jsxs<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsxs, type, props, key);\n}\n\nexport type { ReactNode };\n"]}
+{"version":3,"sources":["../src/css-prop.ts","../src/context.tsx","../src/resolve-hash-class.ts","../src/jsx-runtime.ts"],"names":["cx","createContext","useContext","ReactFragment","jsx","reactJsx","reactJsxs"],"mappings":";;;;;;;AAIO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAOA,aAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAOA,cAAG,SAAS,CAAA;AACrB;ACVO,IAAM,iBAAA,GAAoBC,oBAAoC,IAAI,CAAA;;;ACKlE,SAAS,iBAAiB,GAAA,EAAiC;AAChE,EAAA,IAAI,MAAA,IAAU,GAAA,IAAO,OAAO,GAAA,CAAI,SAAS,UAAA,EAAY;AACnD,IAAA,OAAO,CAAC,YAAY,KAAA,KAAU,GAAA,CAAI,KAAK,UAAA,EAAY,EAAE,OAAO,CAAA;AAAA,EAC9D;AACA,EAAA,OAAQ,GAAA,CAAkB,SAAA;AAC5B;;;ACLA,SAAS,cAAA,CACP,OACA,SAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,SAAA,EAAW,GAAA,EAAK,SAAS;AAAA,GAC1D;AAEA,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,OAAA,CACP,OAAA,EACA,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAASC,iBAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,YAAY,MAAA,GAAS,cAAA,CAAe,OAAO,gBAAA,CAAiB,MAAM,CAAC,CAAA,GAAK,KAAA;AAC9E,EAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,SAAA,EAAW,GAAG,CAAA;AACrC;AAEO,IAAM,QAAA,GAAWC;AAEjB,SAASC,IAAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,cAAA,EAAU,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC3C;AAEO,SAAS,IAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,eAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC5C","file":"jsx-runtime.cjs","sourcesContent":["import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n","import { createContext, type ReactNode } from 'react';\nimport type { CssStylesHost } from './resolve-hash-class';\n\nexport const TypeStylesContext = createContext<CssStylesHost | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  /** Prefer a `createTypeStyles()` result; `createStyles()` instances also work. */\n  styles: CssStylesHost;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties, StylesApi, TypeStylesApi } from 'typestyles';\n\n/** Styles host for the css prop / TypeStylesProvider. */\nexport type CssStylesHost = Pick<TypeStylesApi, 'hash'> | StylesApi;\n\nexport type HashClassFn = (properties: CSSProperties, label?: string) => string;\n\n/** Normalize `hash` (createTypeStyles) and `hashClass` (createStyles). */\nexport function resolveHashClass(api: CssStylesHost): HashClassFn {\n  if ('hash' in api && typeof api.hash === 'function') {\n    return (properties, label) => api.hash(properties, { label });\n  }\n  return (api as StylesApi).hashClass;\n}\n","import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsx as reactJsx, jsxs as reactJsxs, Fragment as ReactFragment } from 'react/jsx-runtime';\nimport type { CSSProperties } from 'typestyles';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport { resolveHashClass } from './resolve-hash-class';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  hashClass: (properties: CSSProperties, label?: string) => string,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nfunction wrapJsx<P extends Record<string, unknown>>(\n  factory: typeof reactJsx,\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : (props as P);\n  return factory(type, nextProps, key);\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsx<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsx, type, props, key);\n}\n\nexport function jsxs<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsxs, type, props, key);\n}\n\nexport type { ReactNode };\n"]}

package/dist/jsx-runtime.js

@@ -1,15 +1,16 @@
-import { TypeStylesContext, resolveCssPropClass } from './chunk-4BYX2HZ7.js';
+import { TypeStylesContext, resolveCssPropClass } from './chunk-IHZMLPG2.js';
+import { resolveHashClass } from './chunk-KM65VQPZ.js';
 import { useContext } from 'react';
 import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
 
-function processCssProp(props, styles) {
+function processCssProp(props, hashClass) {
   if (props.css == null) {
     return props;
   }
   const { css, className, ...rest } = props;
   const nextProps = {
     ...rest,
-    className: resolveCssPropClass(styles.hashClass, css, className)
+    className: resolveCssPropClass(hashClass, css, className)
   };
   return nextProps;
 }
@@ -17,10 +18,10 @@ function wrapJsx(factory, type, props, key) {
   const styles = useContext(TypeStylesContext);
   if (props.css != null && styles == null) {
     throw new Error(
-      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props."
+      "[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props."
     );
   }
-  const nextProps = styles ? processCssProp(props, styles) : props;
+  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : props;
   return factory(type, nextProps, key);
 }
 var Fragment = Fragment$1;

package/dist/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/jsx-runtime.ts"],"names":["ReactFragment","reactJsx","reactJsxs"],"mappings":";;;;AAMA,SAAS,cAAA,CACP,OACA,MAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,MAAA,CAAO,SAAA,EAAW,KAAK,SAAS;AAAA,GACjE;AAEA,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,OAAA,CACP,OAAA,EACA,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,GAAS,cAAA,CAAe,KAAA,EAAO,MAAM,CAAA,GAAK,KAAA;AAC5D,EAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,SAAA,EAAW,GAAG,CAAA;AACrC;AAEO,IAAM,QAAA,GAAWA;AAEjB,SAAS,GAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,KAAA,EAAU,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC3C;AAEO,SAAS,IAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,MAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC5C","file":"jsx-runtime.js","sourcesContent":["import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsx as reactJsx, jsxs as reactJsxs, Fragment as ReactFragment } from 'react/jsx-runtime';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  styles: NonNullable<React.ContextType<typeof TypeStylesContext>>,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(styles.hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nfunction wrapJsx<P extends Record<string, unknown>>(\n  factory: typeof reactJsx,\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a `styles` instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={styles}>`, or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, styles) : (props as P);\n  return factory(type, nextProps, key);\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsx<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsx, type, props, key);\n}\n\nexport function jsxs<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsxs, type, props, key);\n}\n\nexport type { ReactNode };\n"]}
+{"version":3,"sources":["../src/jsx-runtime.ts"],"names":["ReactFragment","reactJsx","reactJsxs"],"mappings":";;;;;AAQA,SAAS,cAAA,CACP,OACA,SAAA,EACG;AACH,EAAA,IAAI,KAAA,CAAM,OAAO,IAAA,EAAM;AACrB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACpC,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,SAAA,EAAW,mBAAA,CAAoB,SAAA,EAAW,GAAA,EAAK,SAAS;AAAA,GAC1D;AAEA,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,OAAA,CACP,OAAA,EACA,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,IAAI,KAAA,CAAM,GAAA,IAAO,IAAA,IAAQ,MAAA,IAAU,IAAA,EAAM;AACvC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,MAAM,YAAY,MAAA,GAAS,cAAA,CAAe,OAAO,gBAAA,CAAiB,MAAM,CAAC,CAAA,GAAK,KAAA;AAC9E,EAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,SAAA,EAAW,GAAG,CAAA;AACrC;AAEO,IAAM,QAAA,GAAWA;AAEjB,SAAS,GAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,KAAA,EAAU,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC3C;AAEO,SAAS,IAAA,CACd,IAAA,EACA,KAAA,EACA,GAAA,EACoB;AACpB,EAAA,OAAO,OAAA,CAAQC,MAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,CAAA;AAC5C","file":"jsx-runtime.js","sourcesContent":["import { useContext, type ElementType, type ReactNode } from 'react';\nimport { jsx as reactJsx, jsxs as reactJsxs, Fragment as ReactFragment } from 'react/jsx-runtime';\nimport type { CSSProperties } from 'typestyles';\nimport { resolveCssPropClass } from './css-prop';\nimport { TypeStylesContext } from './context';\nimport { resolveHashClass } from './resolve-hash-class';\nimport type { WithCssProp } from './types';\n\nfunction processCssProp<P extends Record<string, unknown>>(\n  props: WithCssProp<P>,\n  hashClass: (properties: CSSProperties, label?: string) => string,\n): P {\n  if (props.css == null) {\n    return props as P;\n  }\n\n  const { css, className, ...rest } = props;\n  const nextProps = {\n    ...rest,\n    className: resolveCssPropClass(hashClass, css, className),\n  } as unknown as P;\n\n  return nextProps;\n}\n\nfunction wrapJsx<P extends Record<string, unknown>>(\n  factory: typeof reactJsx,\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  const styles = useContext(TypeStylesContext);\n\n  if (props.css != null && styles == null) {\n    throw new Error(\n      '[@typestyles/react] The `css` prop requires a `TypeStylesProvider` with a styles instance. ' +\n        'Wrap your app in `<TypeStylesProvider styles={api}>` (from `createTypeStyles()`), or use the Babel plugin for zero-runtime css props.',\n    );\n  }\n\n  const nextProps = styles ? processCssProp(props, resolveHashClass(styles)) : (props as P);\n  return factory(type, nextProps, key);\n}\n\nexport const Fragment = ReactFragment;\n\nexport function jsx<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsx, type, props, key);\n}\n\nexport function jsxs<P extends Record<string, unknown>>(\n  type: ElementType,\n  props: WithCssProp<P>,\n  key?: React.Key,\n): React.ReactElement {\n  return wrapJsx(reactJsxs, type, props, key);\n}\n\nexport type { ReactNode };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typestyles/react",
-  "version": "0.0.0-unstable.f96b13308930",
+  "version": "0.3.0",
   "description": "React integration for typestyles — styled API and css prop",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -99,9 +99,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tsup": "^8.0.0",
-    "typestyles": "0.0.0-unstable.f96b13308930",
     "typescript": "^5.4.0",
-    "vitest": "^3.0.0"
+    "vitest": "^3.0.0",
+    "typestyles": "1.0.0"
   },
   "scripts": {
     "build": "tsup",

package/dist/chunk-3YCUQVCM.js

@@ -1,8 +0,0 @@
-// src/css-prop-runtime.ts
-function cssProp(styles, properties) {
-  return styles.hashClass(properties);
-}
-
-export { cssProp };
-//# sourceMappingURL=chunk-3YCUQVCM.js.map
-//# sourceMappingURL=chunk-3YCUQVCM.js.map

package/dist/chunk-3YCUQVCM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/css-prop-runtime.ts"],"names":[],"mappings":";AAEO,SAAS,OAAA,CACd,QACA,UAAA,EACQ;AACR,EAAA,OAAO,MAAA,CAAO,UAAU,UAAU,CAAA;AACpC","file":"chunk-3YCUQVCM.js","sourcesContent":["import type { CSSProperties } from 'typestyles';\n\nexport function cssProp(\n  styles: { hashClass: (properties: CSSProperties, label?: string) => string },\n  properties: CSSProperties,\n): string {\n  return styles.hashClass(properties);\n}\n"]}

package/dist/chunk-4BYX2HZ7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/context.tsx","../src/css-prop.ts"],"names":[],"mappings":";;;;;AAGO,IAAM,iBAAA,GAAoB,cAAgC,IAAI;AAE9D,SAAS,kBAAA,CAAmB;AAAA,EACjC,MAAA;AAAA,EACA;AACF,CAAA,EAGsB;AACpB,EAAA,2BAAQ,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,QAAS,QAAA,EAAS,CAAA;AAC9D;ACTO,SAAS,mBAAA,CACd,SAAA,EACA,GAAA,EACA,SAAA,EACQ;AACR,EAAA,IAAI,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AAClC,IAAA,OAAO,EAAA,CAAG,SAAA,CAAU,GAAG,CAAA,EAAG,SAAS,CAAA;AAAA,EACrC;AACA,EAAA,OAAO,GAAG,SAAS,CAAA;AACrB","file":"chunk-4BYX2HZ7.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { StylesApi } from 'typestyles';\n\nexport const TypeStylesContext = createContext<StylesApi | null>(null);\n\nexport function TypeStylesProvider({\n  styles,\n  children,\n}: {\n  styles: StylesApi;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <TypeStylesContext.Provider value={styles}>{children}</TypeStylesContext.Provider>;\n}\n","import type { CSSProperties } from 'typestyles';\nimport { cx } from 'typestyles';\nimport type { CssPropValue } from './types';\n\nexport function resolveCssPropClass(\n  hashClass: (properties: CSSProperties, label?: string) => string,\n  css: CssPropValue | undefined,\n  className?: string,\n): string {\n  if (css && typeof css === 'object') {\n    return cx(hashClass(css), className);\n  }\n  return cx(className);\n}\n"]}