@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/components/base/Render.tsx

@@ -1,31 +1,53 @@
 'use client'
 
-import type { ComponentProps, ElementType } from 'react'
-import { useRender } from '@base-ui/react/use-render'
+import type { ReactElement } from 'react'
+import { useRender, type HTMLProps } from '@base-ui/react/use-render'
+import { objectFromEntries } from 'ts-extras'
 
-export type RenderProps<
-  T extends ElementType = 'span',
-  State extends Record<string, unknown> = Record<string, unknown>,
-> = ComponentProps<T> & {
-  render: NonNullable<useRender.ComponentProps<T, State>['render']>
+export type RenderFnProps = HTMLProps
+export type RenderFnState = Record<string, unknown> | undefined
+
+export type RenderFn<State extends RenderFnState = undefined, ElementProps = unknown> = (
+  renderProps: RenderFnProps,
+  state: State,
+) => ReactElement<ElementProps>
+
+/**
+ * Type for a `render` prop that accepts either a React element or a render function.
+ *
+ * - **Element form**: Pass a React element to replace the default tag (e.g., `<strong />`).
+ * - **Function form**: Pass a callback `(props, state) => ReactElement` for full control.
+ *
+ * @template State - The state object passed to the render function.
+ * @template ElementProps - Optional constraint on the returned element's props (e.g., `{ disabled?:
+ *   boolean }`).
+ */
+export type RenderProp<State extends RenderFnState = undefined, ElementProps = unknown> =
+  | ReactElement<ElementProps>
+  | RenderFn<State, ElementProps>
+
+export interface RenderProps<State extends RenderFnState = undefined> {
+  render: RenderProp<State>
   state?: State | undefined
+  [key: string]: unknown
 }
 
 /**
  * A utility component that provides polymorphic rendering capabilities. It can render as any HTML
  * element or React component.
  */
-export function Render<
-  T extends ElementType = 'span',
-  State extends Record<string, unknown> = Record<string, unknown>,
->({ render, state, ...props }: RenderProps<T, State>) {
+export function Render<State extends RenderFnState>({
+  render,
+  state,
+  ...props
+}: RenderProps<State>) {
   return useRender({
     render,
-    state,
+    state: state !== undefined ? state : (undefined as never),
     props,
     // Do not automatically add data attributes for state properties
-    stateAttributesMapping: Object.fromEntries(
-      Object.keys(state ?? {}).map((stateProperty) => [stateProperty, (_value) => null] as const),
-    ) as Record<keyof State, (value: unknown) => null>,
+    stateAttributesMapping: objectFromEntries(
+      Object.keys(state ?? {}).map((stateProperty) => [stateProperty, () => null] as const),
+    ),
   })
 }

package/src/components/base/Transition.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const TransitionMeta = createComponent('Transition', {
+  isolate: 'allow-inheritance',
   vars: {
     'enter-opacity': '0',
     'enter-scale': '1',

package/src/components/base/Transition.tsx

@@ -108,7 +108,7 @@ export function Transition({
         ref={statePassedRef}
         data-layout={layout}
         className={cn(
-          `gds-transition isolate
+          `gds-transition
           u:state-[transition=idle]
           u:data-[layout=block]:block
           u:data-[layout=flex-col]:flex
@@ -130,7 +130,7 @@ export function Transition({
       data-layout={layout}
       data-animate-size={animateSize || undefined}
       className={cn(
-        `gds-transition isolate
+        `gds-transition
         u:state-[transition=idle]
         u:has-[>*>*>[inert]]:state-[transition=running]
         u:has-[>*>*>[inert]]:data-[animate-size=clip]:overflow-clip

package/src/components/base/index.ts

@@ -7,7 +7,6 @@ export {
   type ButtonOrLinkProps,
   type ButtonOrLinkState,
 } from './ButtonOrLink.tsx'
-export { ButtonOrLinkMeta } from './ButtonOrLink.meta.ts'
 export {
   Checkable,
   type CheckableLabelProps,
@@ -19,6 +18,14 @@ export { Field, type FieldProps, type FieldState } from './Field.tsx'
 export { FieldMeta } from './Field.meta.ts'
 export { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './MaybeButtonOrLink.tsx'
 export { Portal } from './Portal.tsx'
-export { Render, type RenderProps } from './Render.tsx'
+export { Presence, usePresence, type PresenceProps } from './Presence.tsx'
+export {
+  Render,
+  type RenderFnProps,
+  type RenderFnState,
+  type RenderFn,
+  type RenderProp,
+  type RenderProps,
+} from './Render.tsx'
 export { Transition, type TransitionProps } from './Transition.tsx'
 export { TransitionMeta } from './Transition.meta.ts'

package/src/components/index.ts

@@ -63,6 +63,16 @@ export {
 export { ModalMeta } from './Modal.meta.ts'
 export { OTCInput, type OTCInputProps } from './OTCInput.tsx'
 export { OTCInputMeta } from './OTCInput.meta.ts'
+export {
+  Pane,
+  usePane,
+  type PaneContainerProps,
+  type PaneProps,
+  type PaneProviderProps,
+  type PaneToggleButtonProps,
+  type UsePaneOptions,
+} from './Pane.tsx'
+export { PaneContainerMeta, PaneMeta } from './Pane.meta.ts'
 export { Radio, type RadioAreaProps, type RadioGroupProps, type RadioProps } from './Radio.tsx'
 export { RadioMeta } from './Radio.meta.ts'
 export { Search, type SearchProps } from './Search.tsx'
@@ -97,8 +107,7 @@ export { ToggleButton, type ToggleButtonProps } from './ToggleButton.tsx'
 export { ToggleButtonMeta } from './ToggleButton.meta.ts'
 export {
   Tooltip,
-  useCollectTooltip,
-  useCollectedTooltip,
+  useTooltipCollector,
   type TooltipProps,
   type TooltipCollectorProps,
   type TooltipContentProps,

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export { useCSSProps } from './useCSSProps.ts'
 export { useCSSPropsPolyfill } from './useCSSPropsPolyfill.ts'
 export { useCSSState } from './useCSSState.ts'
 export { useEffectWithRefDeps } from './useEffectWithRefDeps.ts'
+export { useFirstRender } from './useFirstRender.ts'
 export { useForceRerender } from './useForceRerender.ts'
 export { useMapWithInit } from './useMapWithInit.ts'
 export {

package/src/hooks/useCSSProp.ts

@@ -8,7 +8,7 @@ import {
   type GDSComponent,
 } from '@graphprotocol/gds-css'
 
-import { styleScheduler } from '../utils/styleScheduler.ts'
+import { styleScheduler } from '../utils/index.ts'
 
 /**
  * Returns a `ref` to set on an element, and an async function to get the current value of a CSS
@@ -21,17 +21,15 @@ export function useCSSProp<
   const { ref: passedRef } = options
   const elementRef = useRef<HTMLElement>(null)
   const callbackRef: RefCallback<HTMLElement> | null = useMergedRefs(elementRef, passedRef)
-  const prop = component.getCSSPropByName(propName)
+  const cssProp = component.getCSSPropByName(propName)
 
-  const getCSSProp = useCallback(async () => {
+  const getCSSPropValue = useCallback(async () => {
     if (typeof window === 'undefined' || !elementRef.current) return null
     const element = elementRef.current
     const computedStyle = await styleScheduler.getComputedStyle(element)
-    const rawValue = computedStyle.getPropertyValue(
-      `--gds-${component.kebabName}-${prop.kebabName}`,
-    )
-    return parseCSSPropValue(prop, rawValue) as CSSPropType<ComponentCSSPropsConfig<C>[P]>
-  }, [component, prop])
+    const rawValue = computedStyle.getPropertyValue(cssProp.cssProperty)
+    return parseCSSPropValue(cssProp, rawValue) as CSSPropType<ComponentCSSPropsConfig<C>[P]>
+  }, [cssProp])
 
-  return [callbackRef, getCSSProp] as const
+  return [callbackRef, getCSSPropValue] as const
 }

package/src/hooks/useCSSProps.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'react'
-import { objectEntries } from 'ts-extras'
+import { objectKeys } from 'ts-extras'
 
 import {
   parseCSSPropValue,
@@ -22,48 +22,39 @@ export type PropValues<P extends PassedValues<GDSComponent>> = {
 
 /**
  * Hook to observe and track CSS prop values from the DOM. Returns a callback ref, a map of prop
- * values that updates when CSS properties change, and metadata about each prop.
+ * values that updates when CSS properties change, and the array of CSS props.
  */
 export function useCSSProps<C extends GDSComponent, P extends PassedValues<C>>(
   component: C,
   passedValues: P,
   options: {
     ref?: Ref<HTMLElement> | undefined
-    disabled?: boolean
+    disabled?: boolean | undefined
   } = {},
 ) {
   const { ref, disabled = false } = options
 
-  const props = useRefWithInit(() =>
-    objectEntries(passedValues).map(([propName, passedValue]) => {
-      const cssProp = component.getCSSPropByName(propName)
-      return {
-        name: propName,
-        passedValue,
-        cssProp,
-        cssProperty: `--gds-${component.kebabName}-${cssProp.kebabName}`,
-        polyfillAttribute: `data-gds-prop-polyfill-${cssProp.kebabName}`,
-      }
-    }),
+  const cssProps = useRefWithInit(() =>
+    objectKeys(passedValues).map((propName) => component.getCSSPropByName(propName)),
   ).current
 
   const propValues = useMapWithInit(() =>
-    props.map((prop) => {
+    cssProps.map((cssProp) => {
       // Using the initial value for missing passed values could be wrong because it can be overridden in CSS, but it's just for the first render
-      const initialValue =
-        prop.passedValue !== undefined ? prop.passedValue : prop.cssProp.initialValue
-      return [prop.name, initialValue]
+      const passedValue = passedValues[cssProp.name]
+      const initialValue = passedValue !== undefined ? passedValue : cssProp.initialValue
+      return [cssProp.name, initialValue]
     }),
   )
 
-  const cssProperties = useRefWithInit(() => props.map((prop) => prop.cssProperty)).current
+  const cssProperties = useRefWithInit(() => cssProps.map((cssProp) => cssProp.cssProperty)).current
 
   const callbackRef = useStyleObserver(
     cssProperties,
     (records) => {
       for (const record of records) {
-        const prop = props.find((prop) => prop.cssProperty === record.property)!
-        const value = parseCSSPropValue(prop.cssProp, record.value)
+        const prop = cssProps.find((prop) => prop.cssProperty === record.property)!
+        const value = parseCSSPropValue(prop, record.value)
         if (propValues.get(prop.name) !== value) {
           propValues.set(prop.name, value)
         }
@@ -73,5 +64,5 @@ export function useCSSProps<C extends GDSComponent, P extends PassedValues<C>>(
     { ...(ref !== undefined && { ref }), immediate: true, disabled },
   )
 
-  return [callbackRef, Object.fromEntries(propValues) as PropValues<P>, props] as const
+  return [callbackRef, Object.fromEntries(propValues) as PropValues<P>, cssProps] as const
 }

package/src/hooks/useCSSPropsPolyfill.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, type Ref, type RefCallback } from 'react'
+import type { Ref, RefCallback } from 'react'
 
 import {
   getCSSPropRawValue,
@@ -9,7 +9,7 @@ import {
 } from '@graphprotocol/gds-css'
 
 import { useCSSProps, type PassedValues, type PropValues } from './useCSSProps.ts'
-import { useForceRerender } from './useForceRerender.ts'
+import { useFirstRender } from './useFirstRender.ts'
 
 type ExtractPolyfillValues<P extends CSSPropsConfig> = {
   [K in keyof P as P[K]['type'] extends 'values' ? K : never]: CSSPropType<P[K]> | undefined
@@ -68,19 +68,21 @@ export function useCSSPropsPolyfill<
   const allPassedValues = (() => {
     if (!returnPropValues) return passedValues
     if (returnPropValues === true) return passedValues
-    const merged = { ...passedValues }
-    for (const [key, value] of Object.entries(returnPropValues)) {
-      if (key in passedValues && passedValues[key as keyof typeof passedValues] !== value) {
+    const passed = passedValues as Record<string, unknown>
+    const merged = { ...passed }
+    for (const key of Object.keys(returnPropValues)) {
+      const value = returnPropValues[key]
+      if (key in passedValues && passed[key] !== value) {
         throw new Error(
-          `[useCSSPropsPolyfill] Conflicting values for prop \`${key}\`: ${passedValues[key as keyof typeof passedValues]} vs ${value}`,
+          `[useCSSPropsPolyfill] Conflicting values for prop \`${key}\`: ${String(passed[key])} vs ${value}`,
         )
       }
-      merged[key as keyof typeof merged] = value as (typeof merged)[keyof typeof merged]
+      merged[key] = value
     }
-    return merged
+    return merged as typeof passedValues
   })()
 
-  const [callbackRef, propValues, props] = useCSSProps(component, allPassedValues, {
+  const [callbackRef, propValues, cssProps] = useCSSProps(component, allPassedValues, {
     ref,
     disabled: !polyfillEnabled && !returnPropValues,
   })
@@ -92,30 +94,20 @@ export function useCSSPropsPolyfill<
    * to immediately rerender in browsers that support style queries); unfortunately, that would
    * cause a flash of missing styles in browsers that need the polyfill.
    */
-  const firstRender = useRef(true)
+  const firstRender = useFirstRender({ immediatelyRerender: !polyfillEnabled })
   const polyfillAttributes =
-    polyfillEnabled || firstRender.current
+    polyfillEnabled || firstRender
       ? Object.fromEntries(
-          props
+          cssProps
             .filter((prop) => prop.name in passedValues)
             .map((prop) => {
               const value = propValues[prop.name as keyof typeof propValues]
-              const rawValue = getCSSPropRawValue(prop.cssProp, value)
+              const rawValue = getCSSPropRawValue(prop, value)
               return [prop.polyfillAttribute, rawValue]
             }),
         )
       : {}
 
-  // If the polyfill is not needed, rerender to remove the polyfill attributes
-  const [rerender] = useForceRerender()
-  useLayoutEffect(() => {
-    firstRender.current = false
-    if (!polyfillEnabled) {
-      rerender()
-    }
-    // oxlint-disable-next-line exhaustive-deps
-  }, [])
-
   if (!returnPropValues) {
     return [callbackRef, polyfillAttributes] as const
   }

package/src/hooks/useCSSState.ts

@@ -56,15 +56,17 @@ export function useCSSState<
 
   const variables = useRefWithInit(() =>
     Object.keys(variableInitialValues).map((variableName) => {
-      const defaultValue =
-        variableName in cssStateVariables
-          ? cssStateVariables[variableName as CSSStateVariableName].defaultValue
-          : undefined
+      const isArbitrary = !(variableName in cssStateVariables)
+      const defaultValue = !isArbitrary
+        ? cssStateVariables[variableName as CSSStateVariableName].defaultValue
+        : undefined
       return {
         name: variableName,
         defaultValue,
         initialValue: variableInitialValues[variableName as keyof T] ?? defaultValue,
-        observedProperty: `--gds-observed-${variableName}`,
+        observedProperty: isArbitrary
+          ? `--gds-state-${variableName}`
+          : `--gds-observed-${variableName}`,
         exposedProperty: `--gds-exposed-${variableName}`,
         exposedAttribute: `data-gds-exposed-${variableName}`,
         polyfillAttribute: `data-gds-state-polyfill-${variableName}`,
@@ -105,7 +107,10 @@ export function useCSSState<
       for (const record of records) {
         if (propertyValues.get(record.property) !== record.value) {
           propertyValues.set(record.property, record.value)
-          if (record.property.startsWith('--gds-observed-')) {
+          if (
+            record.property.startsWith('--gds-state-') ||
+            record.property.startsWith('--gds-observed-')
+          ) {
             statePropertiesChanged = true
           }
         }

package/src/hooks/useControlled.ts

@@ -1,20 +1,28 @@
-import { useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 export function useControlled<T, OnChangeValue extends T = T, OnChangeArgs extends unknown[] = []>(
   controlledValue: T | undefined,
   defaultValue: T,
   onChange?: (value: OnChangeValue, ...args: OnChangeArgs) => void,
 ) {
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
   const [uncontrolledValue, setUncontrolledValue] = useState(
     controlledValue !== undefined ? controlledValue : defaultValue,
   )
+
   const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-  const setValue = (newValue: OnChangeValue, ...args: OnChangeArgs) => {
-    if (newValue === value) return
-    onChange?.(newValue, ...args)
-    if (controlledValue === undefined) {
-      setUncontrolledValue(newValue)
-    }
-  }
+  const setValue = useCallback(
+    (newValue: OnChangeValue, ...args: OnChangeArgs) => {
+      if (newValue === value) return
+      onChangeRef.current?.(newValue, ...args)
+      if (controlledValue === undefined) {
+        setUncontrolledValue(newValue)
+      }
+    },
+    [controlledValue, value],
+  )
+
   return [value, setValue] as const
 }

package/src/hooks/useEffectWithRefDeps.ts

@@ -20,7 +20,7 @@ export function useEffectWithRefDeps<T, RefDeps extends readonly Ref<T>[]>(
   effect: EffectCallback,
   regularDeps: unknown[],
   refDeps: [...RefDeps],
-  options: { deepCompare?: boolean; hook?: EffectHook } = {},
+  options: { deepCompare?: boolean | undefined; hook?: EffectHook | undefined } = {},
 ) {
   const { deepCompare = false, hook = useEffect } = options
 
@@ -53,7 +53,7 @@ export function useEffectWithRefDeps<T, RefDeps extends readonly Ref<T>[]>(
 
   const runEffectNextTick = useCallback(() => {
     const token = ++runEffectToken.current
-    queueMicrotask(() => {
+    window.queueMicrotask(() => {
       if (runEffectToken.current === token) {
         runEffect()
       }

package/src/hooks/useFirstRender.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react'
+
+import { useForceRerender } from './useForceRerender.ts'
+
+interface UseFirstRenderOptions {
+  /** Callback to run on first render. */
+  callback?: () => void
+  /**
+   * If true, immediately triggers a re-render after the first render.
+   *
+   * @default false
+   */
+  immediatelyRerender?: boolean | undefined
+}
+
+export function useFirstRender(callback?: () => void): boolean
+export function useFirstRender(options: UseFirstRenderOptions): boolean
+export function useFirstRender(callbackOrOptions?: (() => void) | UseFirstRenderOptions) {
+  const options = typeof callbackOrOptions === 'function' ? undefined : callbackOrOptions
+  const callback = typeof callbackOrOptions === 'function' ? callbackOrOptions : options?.callback
+
+  const firstRender = useRef(true)
+  const [rerender] = useForceRerender()
+
+  useEffect(() => {
+    if (!firstRender.current) return
+    firstRender.current = false
+    callback?.()
+    if (options?.immediatelyRerender) {
+      rerender()
+    }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return firstRender.current
+}

package/src/hooks/useGDS.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 
-import { GDSContext } from '../GDSProvider.tsx'
+import { GDSContext } from '../GDSContext.ts'
 
 /** Throws an error if used outside of a `GDSProvider`. */
 export function useGDS() {

package/src/hooks/usePrevious.ts

@@ -12,10 +12,12 @@ const NOT_SET = Symbol('NOT_SET')
  *
  * @example
  *
- *     const previous = usePrevious(someValue)
- *     if (previous.hasChanged) {
- *       // Value changed from `previous.value` to `someValue`
- *     }
+ * ```ts
+ * const previous = usePrevious(someValue)
+ * if (previous.hasChanged) {
+ *   // Value changed from `previous.value` to `someValue`
+ * }
+ * ```
  */
 export function usePrevious<T>(value: T) {
   const previousRenderValueRef = useRef<T | typeof NOT_SET>(NOT_SET)

package/src/hooks/useRefWithInit.ts

@@ -1,4 +1,4 @@
-import { useRef, type MutableRefObject } from 'react'
+import { useRef, type RefObject } from 'react'
 
 /**
  * Works like `useRef` but accepts an initializer function that runs once on the first render, like
@@ -11,5 +11,5 @@ export function useRefWithInit<T>(initFn: () => T) {
     ref.current = initFn()
   }
 
-  return ref as MutableRefObject<T>
+  return ref as RefObject<T>
 }

package/src/hooks/useStyleObserver.ts

@@ -2,7 +2,7 @@ import { useCallback, useLayoutEffect, useRef, type Ref } from 'react'
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import StyleObserver from 'style-observer'
 
-import { styleScheduler } from '../utils/styleScheduler.ts'
+import { styleScheduler } from '../utils/index.ts'
 import { useEffectWithRefDeps } from './useEffectWithRefDeps.ts'
 
 type Record<T extends string> = Parameters<ConstructorParameters<typeof StyleObserver>[0]>[0][0] & {
@@ -17,7 +17,11 @@ export function useStyleObserver<T extends string>(
   properties: T[],
   onChange: (records: Record<T>[]) => void,
   deps: unknown[],
-  options: { ref?: Ref<HTMLElement> | undefined; immediate?: boolean; disabled?: boolean } = {},
+  options: {
+    ref?: Ref<HTMLElement> | undefined
+    immediate?: boolean | undefined
+    disabled?: boolean | undefined
+  } = {},
 ) {
   const { ref: passedRef, immediate = false, disabled = false } = options
   const elementRef = useRef<HTMLElement>(null)

package/src/icons/CalendarDynamicIcon.tsx

@@ -2,17 +2,21 @@ import { useId } from 'react'
 
 import { Icon, type IconProps } from '../components/Icon.tsx'
 
-export interface CalendarDynamicIconProps extends IconProps {
+export interface CalendarDynamicIconProps extends Omit<IconProps, 'alt'> {
+  /** Defaults to a formatted version of `date`. */
+  alt?: string
   /**
-   * Day of the month.
+   * Day of the month, or a full date. If the latter, the icon will only display the day part, but
+   * the default `alt` will be the full formatted date.
    *
-   * @default new Date().getDate()
+   * @default new Date()
    */
-  date?: number
+  date?: number | Date
 }
 
 export function CalendarDynamicIcon({
-  date = new Date().getDate(),
+  alt,
+  date = new Date(),
   ...props
 }: CalendarDynamicIconProps) {
   const uniqueId = useId()
@@ -37,13 +41,19 @@ export function CalendarDynamicIcon({
                 fontSize="7px"
                 fontWeight="bold"
               >
-                {date}
+                {typeof date === 'number' ? date : date.getDate()}
               </text>
             </mask>
           </defs>
           <use href={`#${uniqueId}-calendar-path`} mask={`url(#${uniqueId}-text-mask)`} />
         </svg>
       }
+      alt={
+        alt ??
+        (typeof date === 'number'
+          ? `Day ${date} of the month`
+          : date.toLocaleDateString(undefined, { dateStyle: 'long' }))
+      }
       data-name="CalendarDynamic"
       {...props}
     />

package/src/icons/CopyInteractiveIcon.tsx

@@ -1,14 +1,19 @@
 import { useId } from 'react'
-import type { SetOptional } from 'type-fest'
 
 import { Icon, type IconProps } from '../components/Icon.tsx'
 
-export interface CopyInteractiveIconProps extends SetOptional<IconProps, 'alt'> {
+export interface CopyInteractiveIconProps extends Omit<IconProps, 'alt'> {
+  /** @default 'Copy' */
+  alt?: IconProps['alt']
   /** @default false */
-  copied?: boolean
+  copied?: boolean | undefined
 }
 
-export function CopyInteractiveIcon({ copied = false, ...props }: CopyInteractiveIconProps) {
+export function CopyInteractiveIcon({
+  alt = 'Copy',
+  copied = false,
+  ...props
+}: CopyInteractiveIconProps) {
   const uniqueId = useId()
 
   return (
@@ -85,7 +90,7 @@ export function CopyInteractiveIcon({ copied = false, ...props }: CopyInteractiv
           </g>
         </svg>
       }
-      alt="Copy"
+      alt={alt}
       data-name="CopyAnimated"
       {...props}
     />

package/src/icons/SidebarLeftInteractiveIcon.tsx

@@ -1,10 +1,14 @@
-import type { SetOptional } from 'type-fest'
-
 import { Icon, type IconProps } from '../components/Icon.tsx'
 
-export interface SidebarLeftInteractiveIconProps extends SetOptional<IconProps, 'alt'> {}
+export interface SidebarLeftInteractiveIconProps extends Omit<IconProps, 'alt'> {
+  /** @default 'Toggle sidebar' */
+  alt?: IconProps['alt']
+}
 
-export function SidebarLeftInteractiveIcon(props: SidebarLeftInteractiveIconProps) {
+export function SidebarLeftInteractiveIcon({
+  alt = 'Toggle sidebar',
+  ...props
+}: SidebarLeftInteractiveIconProps) {
   return (
     <Icon
       src={
@@ -19,7 +23,7 @@ export function SidebarLeftInteractiveIcon(props: SidebarLeftInteractiveIconProp
           />
         </svg>
       }
-      alt=""
+      alt={alt}
       data-name="SidebarLeftInteractive"
       {...props}
     />