type fixes and slight API change on primitives

packages/brandeur-plugin-enforce-longhand/src/index.js

@@ -109,7 +109,7 @@ function getPropertyPriority({
   )
 }
 
-export default function enforceLonghand(borderMode = 'none') {
+export default function enforceLonghandPlugin(borderMode = 'none') {
   const propertyPriority = getPropertyPriority({
     borderDirectional: borderMode === 'directional' ? 3 : 2,
     borderLonghand: borderMode === 'longhand' ? 3 : 2,

packages/brandeur-primitives/index.d.ts

@@ -4,11 +4,13 @@ declare module 'brandeur-primitives' {
     ComponentProps,
     ComponentType,
     ComponentPropsWithRef,
+    PropsWithChildren,
     ElementType,
     RefAttributes,
     JSX,
   } from 'react'
 
+  type Merge<T, U> = Omit<T, keyof U> & U
   type DistributiveOmit<T, E extends PropertyKey> = T extends any
     ? Omit<T, E>
     : never
@@ -22,17 +24,20 @@ declare module 'brandeur-primitives' {
   > &
     RefAttributes<any>
 
-  type Options<T> = {
-    css: T
+  type Options = {
     baselineGrid?: number
   }
 
-  export function createSystem<T>(config: Options<T>): {
+  export function createSystem<S = Style, T>(
+    css: T,
+    config?: Options
+  ): {
     El: <E extends ElementType>(
       props: ElProps<E, Parameters<T>[0]>
     ) => JSX.Element
     styleSheet: string
     css: T
+    __type: S
   }
 
   type SystemStyle<T> = ComponentProps<T['El']>['style']
@@ -84,37 +89,54 @@ declare module 'brandeur-primitives' {
     marginBottom?: T['marginBottom']
     marginLeft?: T['marginLeft']
   }
-  export function createBox<S = Style, System>(
+  export function createBox<System>(
     system: System
   ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & BoxProps<S>
+    props: Merge<ElProps<E, SystemStyle<System>>, BoxProps<System['__type']>>
   ) => JSX.Element
 
   type GridProps<T> = {
     columns?: T['gridTemplateColumns']
     gap?: T['gap']
     areas?: T['gridTemplateAreas']
   }
-  export function createGrid<S = Style, System>(
+  export function createGrid<System>(
     system: System
   ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & GridProps<S>
+    props: Merge<ElProps<E, SystemStyle<System>>, GridProps<System['__type']>>
   ) => JSX.Element
 
-  type ClickButtonProps = {
-    disabled?: HTMLButtonElement['disabled']
-    type?: HTMLButtonElement['type']
+  type ClickActionButtonProps<A> = {
+    action: A
+  }
+  type ClickFormButtonProps = {
+    action: null
+    type: 'submit' | 'reset'
   }
-  type ClickLinkProps<T extends ElementType> = {
-    action: ComponentProps<T>['href']
-    target?: HTMLAnchorElement['target']
+
+  type ClickButtonProps<A> = A extends null
+    ? ClickFormButtonProps
+    : ClickActionButtonProps<A>
+  type ClickLinkProps<A> = {
+    action: A
   }
-  type ClickProps<T extends ElementType> = ClickButtonProps | ClickLinkProps<T>
+
   export function createClick<System, L extends ElementType = 'a'>(
     system: System,
     linkComponent?: L
-  ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & ClickProps<L>
+  ): <A extends ComponentProps<L>['href'] | HTMLButtonElement['onclick']>(
+    props: Merge<
+      Omit<
+        ElProps<
+          A extends ComponentProps<L>['href'] ? L : 'button',
+          SystemStyle<System>
+        >,
+        'as'
+      >,
+      ComponentProps<L>['href'] extends A
+        ? ClickLinkProps<A>
+        : ClickButtonProps<A>
+    >
   ) => JSX.Element
 
   type OverlayProps<T> = {
@@ -126,10 +148,13 @@ declare module 'brandeur-primitives' {
     left?: T['left']
     inset?: T['inset']
   }
-  export function createOverlay<S = Style, System>(
+  export function createOverlay<System>(
     system: System
   ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & OverlayProps<S>
+    props: Merge<
+      ElProps<E, SystemStyle<System>>,
+      OverlayProps<System['__type']>
+    >
   ) => JSX.Element
 
   type Typography = {
@@ -144,23 +169,27 @@ declare module 'brandeur-primitives' {
     size?: T['fontSize']
     height?: T['lineHeight']
   }
-  export function createText<S = Style, System, Typography>(
+  export function createText<System, Typography>(
     system: System,
     typography: Typography
   ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & TextProps<S, Typography>
+    props: Merge<
+      ElProps<E, SystemStyle<System>>,
+      TextProps<System['__type'], Typography>
+    >
   ) => JSX.Element
 
   type SpacerProps<T> = {
     size: T['width']
   }
-  export function createSpacer<S = Style, System>(
+  export function createSpacer<System>(
     system: System
-  ): <E extends ElementType>(
-    props: ElProps<E, SystemStyle<System>> & SpacerProps<S>
-  ) => JSX.Element
+  ): ComponentType<SpacerProps<System['__type']>>
 
+  type VisuallyHiddenProps = {
+    as?: keyof JSX.IntrinsicElements
+  }
   export function createVisuallyHidden<System>(
     system: System
-  ): ComponentType<PropsWithChildren>
+  ): ComponentType<PropsWithChildren<VisuallyHiddenProps>>
 }

packages/brandeur-primitives/package.json

@@ -46,6 +46,7 @@
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.0.0",
     "brandeur": "workspace:*",
+    "brandeur-plugin-responsive-value": "workspace:*",
     "cross-env": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/brandeur-primitives/src/components/createVisuallyHidden.js

@@ -13,7 +13,11 @@ const style = {
 }
 
 export default function createVisuallyHidden({ El }) {
-  return function VisuallyHidden({ children }) {
-    return <El style={style}>{children}</El>
+  return function VisuallyHidden({ as = 'div', children }) {
+    return (
+      <El as={as} style={style}>
+        {children}
+      </El>
+    )
   }
 }

packages/brandeur-primitives/src/createSystem.js

@@ -2,7 +2,7 @@ import { createHooks } from 'brandeur'
 
 import createEl from './components/createEl.js'
 
-export default function createSystem({ css, baselineGrid = 1 } = {}) {
+export default function createSystem(css, { baselineGrid = 1 } = {}) {
   const El = createEl(css)
 
   return {

packages/brandeur/index.d.ts

@@ -15,7 +15,7 @@ declare module 'brandeur' {
     typeof createBaseHooks<Hooks>
   >[0]
 
-  type Plugin<T = any> = (style: T) => T
+  type Plugin<T = Style> = (style: T) => T
 
   export type Config<Hooks extends string, Theme> = {
     hooks: HookOptions<Hooks>
@@ -49,7 +49,7 @@ declare module 'brandeur' {
 
   export function fallbackValue(
     property: Fallback['property'],
-    value: Fallback['value'],
+    values: Fallback['values'],
     match?: Fallback['match']
   ): Fallback
 }