@edgeandnode/eds-react 1.0.2 → 1.1.0

package/src/components/Button.tsx

@@ -168,6 +168,10 @@ export function Button({
                 u:*:transition-opacity
                 u:*:@state-disabled/button:opacity-disabled
                 u:*:@state-disabled/button:grayscale
+                u:*:@prop-variant-inverse/button:scheme-only-dark
+                u:*:@prop-variant-inverse/button:dark:scheme-only-light
+                u:*:@prop-variant-primary/button:scheme-only-dark
+                u:*:@prop-variant-danger/button:scheme-only-dark
                 u:@prop-size-xsmall/button:addon-small
                 u:@prop-size-small/button:addon-small
                 u:@prop-size-medium/button:addon-medium

package/src/components/Card.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useId, type ReactNode } from 'react'
+import { useId, type ElementType, type ReactNode, type Ref } from 'react'
 import { mergeProps } from '@base-ui/react'
+import type { DistributedOmit } from 'type-fest'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { ArrowUpRightInteractiveIcon } from '@edgeandnode/eds-react/icons'
@@ -32,20 +33,24 @@ export declare namespace CardProps {
      */
     autoIcon?: boolean | undefined
   }
+  interface CommonProps extends EDSComponentProps<typeof CardMeta> {
+    /** Attached to the card's outer element, even when the card is a button or link. */
+    ref?: Ref<HTMLElement> | undefined
+  }
   interface ButtonProps
     extends
-      EDSComponentProps<typeof CardMeta>,
+      CommonProps,
       ClickableProps,
-      MaybeButtonOrLinkProps.ButtonProps,
+      Omit<MaybeButtonOrLinkProps.ButtonProps, 'ref' | 'render'>,
       MaybeButtonOrLinkProps.DisableableProps {}
   interface LinkProps
     extends
-      EDSComponentProps<typeof CardMeta>,
+      CommonProps,
       ClickableProps,
-      MaybeButtonOrLinkProps.LinkProps,
+      Omit<MaybeButtonOrLinkProps.LinkProps, 'ref' | 'render'>,
       MaybeButtonOrLinkProps.DisableableProps {}
   interface OtherElementProps
-    extends EDSComponentProps<typeof CardMeta>, MaybeButtonOrLinkProps.OtherElementProps {}
+    extends CommonProps, Omit<MaybeButtonOrLinkProps.OtherElementProps, 'ref' | 'render'> {}
 }
 
 export type CardProps = CardProps.ButtonProps | CardProps.LinkProps | CardProps.OtherElementProps
@@ -57,7 +62,7 @@ export function Card({ ref: passedRef, as, variant, disabled, children, ...props
     interactiveContent = false,
     autoIcon = true,
     ...remainingProps
-  } = props as CardProps.ButtonProps | CardProps.LinkProps
+  } = props as DistributedOmit<CardProps.ButtonProps | CardProps.LinkProps, 'ref'>
   const { rootProps, nestedProps } = splitProps(remainingProps)
 
   const [statePassedRef, state] = useCSSState(
@@ -75,7 +80,8 @@ export function Card({ ref: passedRef, as, variant, disabled, children, ...props
     { ref: statePassedRef },
   )
 
-  const Element = as ?? 'div'
+  // The union of every HTML tag name is too complex a type for JSX
+  const Element = (as ?? 'div') as ElementType
   const uniqueId = useId()
 
   return (

package/src/components/Cluster.tsx

@@ -11,11 +11,13 @@ import { ClusterMeta } from './Cluster.meta.ts'
 
 export declare namespace ClusterProps {
   interface ButtonProps
-    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.ButtonProps {}
+    extends EDSComponentProps<typeof ClusterMeta>, Omit<MaybeButtonOrLinkProps.ButtonProps, 'as'> {}
   interface LinkProps
-    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.LinkProps {}
+    extends EDSComponentProps<typeof ClusterMeta>, Omit<MaybeButtonOrLinkProps.LinkProps, 'as'> {}
   interface OtherElementProps
-    extends EDSComponentProps<typeof ClusterMeta>, MaybeButtonOrLinkProps.OtherElementProps {}
+    extends
+      EDSComponentProps<typeof ClusterMeta>,
+      Omit<MaybeButtonOrLinkProps.OtherElementProps, 'as'> {}
 }
 
 export type ClusterProps =

package/src/components/Keyboard.tsx

@@ -54,7 +54,7 @@ export function Keyboard({ ref: passedRef, size, children, ...props }: KeyboardP
     >
       <span
         className={cn(
-          `inline-flex h-(--height) min-w-(--height) items-center justify-center rounded-4 border border-default
+          `inline-flex h-(--height) min-w-(--height) items-center justify-center rounded-4 border border-current/15
           @prop-size-small/keyboard:gap-0.5
           @prop-size-small/keyboard:px-0.75
           @prop-size-small/keyboard:text-10

package/src/components/LocalTheme.tsx

@@ -1,39 +1,47 @@
 'use client'
 
-import type { ComponentProps, ElementType } from 'react'
 import { mergeProps } from '@base-ui/react'
+import type { DistributedOmit } from 'type-fest'
 
 import { LocalThemeContext, THEME_CLASSES, type ResolvedTheme } from '../EDSContext.ts'
+import { Render, type AsOrRenderProps, type HTMLElementProps } from './base/Render.tsx'
 
-export interface LocalThemeProps extends ComponentProps<'div'> {
-  /** @default 'div' */
-  as?: ElementType | undefined
+export declare namespace LocalThemeProps {
+  interface CommonProps extends HTMLElementProps {
+    /** The theme to render the content in. */
+    theme: ResolvedTheme
+  }
 }
 
-function LocalTheme({
-  theme,
-  as: Element = 'div',
-  ...props
-}: LocalThemeProps & { theme: ResolvedTheme }) {
+export type LocalThemeProps = LocalThemeProps.CommonProps & AsOrRenderProps
+export type DarkProps = DistributedOmit<LocalThemeProps, 'theme'>
+export type LightProps = DistributedOmit<LocalThemeProps, 'theme'>
+
+/**
+ * Renders its content in the given theme, whatever the page's theme is. Unlike switching between
+ * `Dark` and `Light`, changing `theme` doesn't remount the content. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export function LocalTheme({ theme, ...props }: LocalThemeProps) {
   return (
     <LocalThemeContext.Provider value={theme}>
-      <Element {...mergeProps({ className: THEME_CLASSES[theme] }, props)} />
+      <Render {...mergeProps({ className: THEME_CLASSES[theme] }, props)} />
     </LocalThemeContext.Provider>
   )
 }
 
 /**
  * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
- * the theme in JavaScript can read it with `useEDS().localTheme`.
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
-export function Dark(props: LocalThemeProps) {
+export function Dark(props: DarkProps) {
   return <LocalTheme theme="dark" {...props} />
 }
 
 /**
  * Renders its content in the light theme, whatever the page's theme is. Components that need to
- * know the theme in JavaScript can read it with `useEDS().localTheme`.
+ * know the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
-export function Light(props: LocalThemeProps) {
+export function Light(props: LightProps) {
   return <LocalTheme theme="light" {...props} />
 }