docs updates

docs/api/react.condition.md

@@ -4,7 +4,7 @@
 
 ## Condition type
 
-A condition consisting of a single `S` value or a logical combination of multiple `S` values
+Represents a condition consisting of a single `S` value or a logical combination of multiple `S` values.
 
 **Signature:**
 

docs/api/react.conditions.md

@@ -4,7 +4,7 @@
 
 ## Conditions type
 
-A record of conditions that map to hook ids or combinations using `and`<!-- -->, `or`<!-- -->, and `not` operators.
+A record of condition names, each mapping to a hook id or a logical combination using `and`<!-- -->, `or`<!-- -->, and `not` operators.
 
 **Signature:**
 

docs/api/react.createcomponent.md

@@ -4,32 +4,23 @@
 
 ## createComponent() function
 
-Creates a polymorphic component that can be styled using first-class props and CSS hooks.
+Creates a polymorphic component with first-class style props and conditional styling using CSS hooks.
 
 **Signature:**
 
 ```typescript
 export declare function createComponent<
-StyleProps,
-Conds,
+C extends string,
+P,
 DefaultAs extends
 | keyof JSX.IntrinsicElements
 | JSXElementConstructor<any> = "div", // eslint-disable-line @typescript-eslint/no-explicit-any
 >(config: {
     displayName?: string;
     defaultAs?: DefaultAs;
     defaultStyle?: CSSProperties;
-    styleProps?: StyleProps & {
-        [P in keyof StyleProps]: ValidStylePropName<P> &
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ((value: any) => {
-            [Q in keyof ReturnType<
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            StyleProps[P] extends (value: any) => unknown ? StyleProps[P] : never
-            >]: Q extends keyof CSSProperties ? CSSProperties[Q] : never;
-        });
-    };
-    conditions?: Conds;
+    styleProps?: StyleProps<P>;
+    conditions?: Conditions<C>;
     fallback?: "revert-layer" | "unset";
 }): <
 As extends
@@ -39,31 +30,26 @@ LocalConditionName extends string = never,
 >(
 props: {
     as?: As;
-} & Omit<
-JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>,
-never
-> & {
-    [P in Conds extends Conditions<string>
-    ? "conditions"
-    : never]?: Conds extends Conditions<infer ConditionName>
-    ? {
-        [P in LocalConditionName]: ValidConditionName<P> &
-        Condition<ConditionName>;
-    }
-    : never;
-} & Partial<{
-    [P in
-    | keyof StyleProps
-    | `${
-    | (Conds extends Conditions<infer ConditionName>
-    ? ConditionName
-    : never)
-    | LocalConditionName}:${keyof StyleProps extends string ? keyof StyleProps : never}`]: P extends `${`${string}:` | ""}${infer PropertyName}`
-    ? PropertyName extends keyof StyleProps
-    ? StyleProps[PropertyName] extends (value: any) => unknown // eslint-disable-line @typescript-eslint/no-explicit-any
-    ? Parameters<StyleProps[PropertyName]>[0]
-    : never
+} & Omit<JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>, never> &
+(string extends C
+? unknown
+: {
+    conditions?: {
+        [Name in LocalConditionName]: ValidConditionName<Name> &
+        Condition<C>;
+    };
+}) &
+Partial<{
+    [PropName in
+    | keyof P
+    | (keyof P extends string
+    ? `${C | LocalConditionName}:${keyof P}`
+    : never)]: PropName extends `${C | LocalConditionName}:${infer BasePropName}`
+    ? BasePropName extends keyof P
+    ? P[BasePropName]
     : never
+    : PropName extends keyof P
+    ? P[PropName]
     : never;
 }>,
 ) => JSX.Element;
@@ -94,7 +80,7 @@ config
 
 </td><td>
 
-{ displayName?: string; defaultAs?: DefaultAs; defaultStyle?: CSSProperties; styleProps?: StyleProps &amp; { \[P in keyof StyleProps\]: [ValidStylePropName](./react.validstylepropname.md)<!-- -->&lt;P&gt; &amp; // eslint-disable-next-line @typescript-eslint/no-explicit-any ((value: any) =&gt; { \[Q in keyof ReturnType&lt; // eslint-disable-next-line @typescript-eslint/no-explicit-any StyleProps\[P\] extends (value: any) =&gt; unknown ? StyleProps\[P\] : never &gt;\]: Q extends keyof CSSProperties ? CSSProperties\[Q\] : never; }); }; conditions?: Conds; fallback?: "revert-layer" \| "unset"; }
+{ displayName?: string; defaultAs?: DefaultAs; defaultStyle?: CSSProperties; styleProps?: [StyleProps](./react.styleprops.md)<!-- -->&lt;P&gt;; conditions?: [Conditions](./react.conditions.md)<!-- -->&lt;C&gt;; fallback?: "revert-layer" \| "unset"; }
 
 
 </td><td>
@@ -106,7 +92,7 @@ The configuration object for creating the component.
 </tbody></table>
 **Returns:**
 
-&lt; As extends \| keyof JSX.IntrinsicElements \| React.JSXElementConstructor&lt;any&gt; = DefaultAs, // eslint-disable-line @typescript-eslint/no-explicit-any LocalConditionName extends string = never, &gt;( props: { as?: As; } &amp; Omit&lt; JSX.LibraryManagedAttributes&lt;As, [ComponentPropsWithRef](./react.componentpropswithref.md)<!-- -->&lt;As&gt;&gt;, never &gt; &amp; { \[P in Conds extends [Conditions](./react.conditions.md)<!-- -->&lt;string&gt; ? "conditions" : never\]?: Conds extends [Conditions](./react.conditions.md)<!-- -->&lt;infer ConditionName&gt; ? { \[P in LocalConditionName\]: [ValidConditionName](./react.validconditionname.md)<!-- -->&lt;P&gt; &amp; [Condition](./react.condition.md)<!-- -->&lt;ConditionName&gt;; } : never; } &amp; Partial&lt;{ \[P in \| keyof StyleProps \| \`${ \| (Conds extends [Conditions](./react.conditions.md)<!-- -->&lt;infer ConditionName&gt; ? ConditionName : never) \| LocalConditionName}:${keyof StyleProps extends string ? keyof StyleProps : never}\`\]: P extends \`${\`${string}:\` \| ""}${infer PropertyName}\` ? PropertyName extends keyof StyleProps ? StyleProps\[PropertyName\] extends (value: any) =&gt; unknown // eslint-disable-line @typescript-eslint/no-explicit-any ? Parameters&lt;StyleProps\[PropertyName\]&gt;\[0\] : never : never : never; }&gt;, ) =&gt; JSX.Element
+&lt; As extends \| keyof JSX.IntrinsicElements \| React.JSXElementConstructor&lt;any&gt; = DefaultAs, // eslint-disable-line @typescript-eslint/no-explicit-any LocalConditionName extends string = never, &gt;( props: { as?: As; } &amp; Omit&lt;JSX.LibraryManagedAttributes&lt;As, [ComponentPropsWithRef](./react.componentpropswithref.md)<!-- -->&lt;As&gt;&gt;, never&gt; &amp; (string extends C ? unknown : { conditions?: { \[Name in LocalConditionName\]: [ValidConditionName](./react.validconditionname.md)<!-- -->&lt;Name&gt; &amp; [Condition](./react.condition.md)<!-- -->&lt;C&gt;; }; }) &amp; Partial&lt;{ \[PropName in \| keyof P \| (keyof P extends string ? \`${C \| LocalConditionName}:${keyof P}\` : never)\]: PropName extends \`${C \| LocalConditionName}:${infer BasePropName}\` ? BasePropName extends keyof P ? P\[BasePropName\] : never : PropName extends keyof P ? P\[PropName\] : never; }&gt;, ) =&gt; JSX.Element
 
-A polymorphic React component.
+A polymorphic React component with style props
 

docs/api/react.createconditions.md

@@ -4,14 +4,14 @@
 
 ## createConditions() function
 
-Creates the specified conditions based on available hooks.
+Creates reusable conditions based on the provided hooks, each consisting of either a hook id or a logical combination using the `and`<!-- -->, `or`<!-- -->, and `not` operators.
 
 **Signature:**
 
 ```typescript
-export declare function createConditions<Hooks extends Record<string, HookId>, ConditionsConfig extends Record<string, unknown>>(hooks: Hooks, conditions: ConditionsConfig & {
-    [ConditionName in keyof ConditionsConfig]: ValidConditionName<ConditionName> & Condition<keyof Hooks>;
-}): keyof ConditionsConfig extends string ? Conditions<keyof ConditionsConfig> : never;
+export declare function createConditions<AvailableHooks extends Hooks<Selector>, ConditionName extends string, S extends keyof AvailableHooks = AvailableHooks extends Hooks<infer S> ? S : never>(hooks: AvailableHooks, conditions: {
+    [Name in ConditionName]: ValidConditionName<Name> & Condition<S>;
+}): Conditions<ConditionName>;
 ```
 
 ## Parameters
@@ -39,12 +39,12 @@ hooks
 
 </td><td>
 
-Hooks
+AvailableHooks
 
 
 </td><td>
 
-The hooks available as the basis for conditions.
+The hooks available for use in conditions
 
 
 </td></tr>
@@ -55,19 +55,19 @@ conditions
 
 </td><td>
 
-ConditionsConfig &amp; { \[ConditionName in keyof ConditionsConfig\]: [ValidConditionName](./react.validconditionname.md)<!-- -->&lt;ConditionName&gt; &amp; [Condition](./react.condition.md)<!-- -->&lt;keyof Hooks&gt;; }
+{ \[Name in ConditionName\]: [ValidConditionName](./react.validconditionname.md)<!-- -->&lt;Name&gt; &amp; [Condition](./react.condition.md)<!-- -->&lt;S&gt;; }
 
 
 </td><td>
 
-The conditions to create based on the available hooks.
+The conditions to create
 
 
 </td></tr>
 </tbody></table>
 **Returns:**
 
-keyof ConditionsConfig extends string ? [Conditions](./react.conditions.md)<!-- -->&lt;keyof ConditionsConfig&gt; : never
+[Conditions](./react.conditions.md)<!-- -->&lt;ConditionName&gt;
 
-The conditions available for use by a component.
+The conditions available for use by a component
 

docs/api/react.createhooks.md

@@ -4,17 +4,12 @@
 
 ## createHooks() function
 
-Creates the specified CSS hooks.
+Creates hooks from the provided selectors.
 
 **Signature:**
 
 ```typescript
-export declare function createHooks<Selectors extends Selector[]>(selectors: Selectors): {
-    StyleSheet(): JSX.Element;
-    hooks: {
-        [Hook in Selectors[number]]: HookId;
-    };
-};
+export declare function createHooks<S extends Selector>(selectors: S[]): CreateHooksResult<S>;
 ```
 
 ## Parameters
@@ -42,19 +37,19 @@ selectors
 
 </td><td>
 
-Selectors
+S\[\]
 
 
 </td><td>
 
-The selector logic for each hook
+The selector logic used for each hook
 
 
 </td></tr>
 </tbody></table>
 **Returns:**
 
-{ StyleSheet(): JSX.Element; hooks: { \[Hook in Selectors\[number\]\]: [HookId](./react.hookid.md)<!-- -->; }; }
+[CreateHooksResult](./react.createhooksresult.md)<!-- -->&lt;S&gt;
 
-A set of hooks implementing the specified selector logic along with the `StyleSheet` component required to support them
+A set of hooks implementing the specified selector logic along with the `StyleSheet` component needed to support them
 

docs/api/react.createhooksresult.hooks.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@embellish/react](./react.md) &gt; [CreateHooksResult](./react.createhooksresult.md) &gt; [hooks](./react.createhooksresult.hooks.md)
+
+## CreateHooksResult.hooks property
+
+Hooks implementing the specified selector logic and represented in the corresponding style sheet
+
+**Signature:**
+
+```typescript
+hooks: Hooks<S>;
+```

docs/api/react.createhooksresult.md

@@ -0,0 +1,76 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@embellish/react](./react.md) &gt; [CreateHooksResult](./react.createhooksresult.md)
+
+## CreateHooksResult interface
+
+Values returned from the [createHooks()](./react.createhooks.md) function
+
+**Signature:**
+
+```typescript
+export declare interface CreateHooksResult<S extends Selector> 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[hooks](./react.createhooksresult.hooks.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Hooks](./react.hooks.md)<!-- -->&lt;S&gt;
+
+
+</td><td>
+
+Hooks implementing the specified selector logic and represented in the corresponding style sheet
+
+
+</td></tr>
+<tr><td>
+
+[StyleSheet](./react.createhooksresult.stylesheet.md)
+
+
+</td><td>
+
+
+</td><td>
+
+() =&gt; JSX.Element
+
+
+</td><td>
+
+A component that renders a `style` element containing the style sheet required to support the hooks. This should be rendered at the entry point or in the root layout component of the application.
+
+
+</td></tr>
+</tbody></table>

docs/api/react.createhooksresult.stylesheet.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@embellish/react](./react.md) &gt; [CreateHooksResult](./react.createhooksresult.md) &gt; [StyleSheet](./react.createhooksresult.stylesheet.md)
+
+## CreateHooksResult.StyleSheet property
+
+A component that renders a `style` element containing the style sheet required to support the hooks. This should be rendered at the entry point or in the root layout component of the application.
+
+**Signature:**
+
+```typescript
+StyleSheet: () => JSX.Element;
+```

docs/api/react.createstyleprops.md

@@ -4,14 +4,16 @@
 
 ## createStyleProps() function
 
-Generates a set of style prop definitions for the given CSS property names.
+Creates style props, with each entry either enabling a standard CSS property or defining a custom CSS property.
 
 **Signature:**
 
 ```typescript
-export declare function createStyleProps<const Properties extends (keyof CSSProperties)[]>(properties: Properties): {
-    [P in Properties[number]]: (value: Required<CSSProperties>[P]) => Pick<Required<CSSProperties>, P>;
-};
+export declare function createStyleProps<StylePropConfig>(styleProps: StylePropConfig & {
+    [P in keyof StylePropConfig]: (P extends keyof CSSProperties ? true : never) | (ValidStylePropName<P> & ((value: any) => {
+        [Q in keyof ReturnType<StylePropConfig[P] extends (value: any) => unknown ? StylePropConfig[P] : never>]: Q extends keyof CSSProperties ? CSSProperties[Q] : never;
+    }));
+}): StyleProps<{ [P in keyof StylePropConfig]: P extends keyof CSSProperties ? CSSProperties[P] : StylePropConfig[P] extends (value: infer Value) => unknown ? Value : never; }>;
 ```
 
 ## Parameters
@@ -34,24 +36,24 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-properties
+styleProps
 
 
 </td><td>
 
-Properties
+StylePropConfig &amp; { \[P in keyof StylePropConfig\]: (P extends keyof CSSProperties ? true : never) \| ([ValidStylePropName](./react.validstylepropname.md)<!-- -->&lt;P&gt; &amp; ((value: any) =&gt; { \[Q in keyof ReturnType&lt;StylePropConfig\[P\] extends (value: any) =&gt; unknown ? StylePropConfig\[P\] : never&gt;\]: Q extends keyof CSSProperties ? CSSProperties\[Q\] : never; })); }
 
 
 </td><td>
 
-An array of standard React CSS property names for which to create prop functions.
+The style props to create
 
 
 </td></tr>
 </tbody></table>
 **Returns:**
 
-{ \[P in Properties\[number\]\]: (value: Required&lt;CSSProperties&gt;\[P\]) =&gt; Pick&lt;Required&lt;CSSProperties&gt;, P&gt;; }
+[StyleProps](./react.styleprops.md)<!-- -->&lt;{ \[P in keyof StylePropConfig\]: P extends keyof CSSProperties ? CSSProperties\[P\] : StylePropConfig\[P\] extends (value: infer Value) =&gt; unknown ? Value : never; }&gt;
 
-An object where each key is a CSS property name from the input array, and each value is a function that takes a value for that property and returns an object with the property and its value.
+The set of style props defined in the provided configuration and available for use in a component