chore(release): 1.1.0

# [1.1.0](v1.0.1...v1.1.0) (2022-09-02)

### Features

* add a useCSS hook ([#13](#13)) ([5fd1ed9](5fd1ed9))

Author: semantic-release-bot

CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.1.0](https://github.com/dash-ui/react/compare/v1.0.1...v1.1.0) (2022-09-02)
+
+### Features
+
+- add a useCSS hook ([#13](https://github.com/dash-ui/react/issues/13)) ([5fd1ed9](https://github.com/dash-ui/react/commit/5fd1ed9790ad1828fda2bc963814713563b5f950))
+
 ## [1.0.1](https://github.com/dash-ui/react/compare/v1.0.0...v1.0.1) (2022-08-18)
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dash-ui/react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React components and hooks for dash-ui",
   "license": "MIT",
   "author": "Jared Lunde <[email protected]> (https://jaredLunde.com)",

types/index.d.ts

@@ -1,4 +1,12 @@
-import type { DashThemes, DashTokens, Falsy, StyleCallback, StyleObject, Styles } from "@dash-ui/styles";
+import type {
+  DashThemes,
+  DashTokens,
+  Falsy,
+  StyleCallback,
+  StyleObject,
+  Styles,
+  StyleValue,
+} from "@dash-ui/styles";
 import * as React from "react";
 /**
  * A component for creating an inline `<style>` tag that is unmounted when
@@ -8,19 +16,25 @@ import * as React from "react";
  * @param root0.css
  * @param root0.styles
  */
-export declare function Inline<Tokens extends DashTokens, Themes extends DashThemes>({ styles, css: input, }: InlineProps<Tokens, Themes>): JSX.Element | null;
-export interface InlineProps<Tokens extends DashTokens, Themes extends DashThemes> {
-    /**
-     * A Dash `styles` instance
-     */
-    styles: Styles<Tokens, Themes>;
-    /**
-     * The CSS you want to inline in the DOM.
-     *
-     * @example
-     * const Component => <Inline css={({color}) => `html { color: ${color.text}; }`}/>
-     */
-    css: string | StyleCallback<Tokens, Themes> | StyleObject;
+export declare function Inline<
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+>({ styles, css: input }: InlineProps<Tokens, Themes>): JSX.Element | null;
+export interface InlineProps<
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+> {
+  /**
+   * A Dash `styles` instance
+   */
+  styles: Styles<Tokens, Themes>;
+  /**
+   * The CSS you want to inline in the DOM.
+   *
+   * @example
+   * const Component => <Inline css={({color}) => `html { color: ${color.text}; }`}/>
+   */
+  css: string | StyleCallback<Tokens, Themes> | StyleObject;
 }
 /**
  * A hook for inserting transient global styles into the DOM. These styles
@@ -43,7 +57,21 @@ export interface InlineProps<Tokens extends DashTokens, Themes extends DashTheme
  *   )
  * }
  */
-export declare function useGlobal<Tokens extends DashTokens, Themes extends DashThemes>(styles: Styles<Tokens, Themes>, value: string | StyleCallback<Tokens, Themes> | StyleObject | null | 0 | undefined | false, deps?: React.DependencyList): void;
+export declare function useGlobal<
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+>(
+  styles: Styles<Tokens, Themes>,
+  value:
+    | string
+    | StyleCallback<Tokens, Themes>
+    | StyleObject
+    | null
+    | 0
+    | undefined
+    | false,
+  deps?: React.DependencyList
+): void;
 /**
  * A hook for inserting transient CSS tokens into the DOM. These tokens
  * will be injected when the hook mounts and flushed when the hook unmounts.
@@ -62,7 +90,14 @@ export declare function useGlobal<Tokens extends DashTokens, Themes extends Dash
  *   )
  * }
  */
-export declare function useTokens<Tokens extends DashTokens, Themes extends DashThemes>(styles: Styles<Tokens, Themes>, value: Parameters<Styles<Tokens, Themes>["insertTokens"]>[0] | Falsy, deps?: React.DependencyList): void;
+export declare function useTokens<
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+>(
+  styles: Styles<Tokens, Themes>,
+  value: Parameters<Styles<Tokens, Themes>["insertTokens"]>[0] | Falsy,
+  deps?: React.DependencyList
+): void;
 /**
  * A hook for inserting transient CSS theme tokens into the DOM. These tokens
  * will be injected when the hook mounts and flushed when the hook unmounts.
@@ -83,4 +118,51 @@ export declare function useTokens<Tokens extends DashTokens, Themes extends Dash
  *   )
  * }
  */
-export declare function useThemes<Tokens extends DashTokens, Themes extends DashThemes>(styles: Styles<Tokens, Themes>, value: Parameters<Styles<Tokens, Themes>["insertThemes"]>[0] | Falsy, deps?: React.DependencyList): void;
+export declare function useThemes<
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+>(
+  styles: Styles<Tokens, Themes>,
+  value: Parameters<Styles<Tokens, Themes>["insertThemes"]>[0] | Falsy,
+  deps?: React.DependencyList
+): void;
+/**
+ * A hook for performantly and reliably inserting CSS into the DOM in React 18 using the
+ * `useInsertionEffect` hook.
+ *
+ * @param styles - A Dash `styles` instance
+ * @param classNames - A map of class names to CSS generators
+ * @see https://github.com/reactwg/react-18/discussions/110
+ * @example
+ * ```tsx
+ * const classes = useCSS(styles, {
+ *  root: styles.one({ display: 'flex' })
+ * })
+ *
+ * return <div className={classes.root}/>
+ * ```
+ */
+export declare function useCSS<
+  ClassNames extends string,
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+>(
+  styles: Styles<Tokens, Themes>,
+  classNames: ClassNamesStyleMap<ClassNames, Tokens, Themes>
+): UseCSSResult<ClassNames>;
+export declare type ClassNamesStyleMap<
+  ClassNames extends string,
+  Tokens extends DashTokens,
+  Themes extends DashThemes
+> = Record<
+  ClassNames,
+  | {
+      (): string;
+      css(): string;
+    }
+  | StyleValue<Tokens, Themes>
+>;
+export declare type UseCSSResult<ClassNames extends string> = Record<
+  ClassNames,
+  string
+>;