@duro-app/ui 5.11.0 → 5.13.0

package/src/components/RadioGroup/RadioGroup.native.tsx

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {Root, useRadioGroup} from './group'
+
+interface ItemProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+/**
+ * Native radio item: RSD renders `<input type="radio">` as a text field on
+ * native, so the item is a button with the radio role, drawn like the web one.
+ */
+function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
+  const {value: groupValue, onSelect, disabled: groupDisabled} = useRadioGroup()
+  const isChecked = groupValue === value
+  const isDisabled = groupDisabled || itemDisabled
+  return (
+    <html.button
+      type="button"
+      role="radio"
+      aria-checked={isChecked}
+      disabled={isDisabled}
+      onClick={() => onSelect(value)}
+      style={[styles.item, styles.nativeItem, isDisabled && styles.itemDisabled]}
+    >
+      {/* div, not span: a native span is a Text, which draws no sized box. */}
+      <html.div
+        style={[
+          styles.circle,
+          styles.nativeFlex,
+          isChecked ? styles.circleChecked : styles.circleUnchecked,
+        ]}
+        aria-hidden
+      >
+        {isChecked && <html.div style={styles.dot} />}
+      </html.div>
+      {children && <html.span>{children}</html.span>}
+    </html.button>
+  )
+}
+
+export const RadioGroup = {
+  Root,
+  Item,
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
-import {css, html} from 'react-strict-dom'
+import {html} from 'react-strict-dom'
 import {RadioGroup} from './RadioGroup'
 
 const meta: Meta = {
@@ -81,3 +81,66 @@ export const Controlled: Story = {
     await expect(radios[0]).not.toBeChecked()
   },
 }
+
+const onPick = fn()
+
+export const OneChangePerPick: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="apple" onValueChange={onPick} aria-label="Fruit">
+      <RadioGroup.Item value="apple">Apple</RadioGroup.Item>
+      <RadioGroup.Item value="banana">Banana</RadioGroup.Item>
+      <RadioGroup.Item value="cherry">Cherry</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    onPick.mockClear()
+    // Clicking the visible label text…
+    await userEvent.click(canvas.getByText('Banana'))
+    await expect(onPick).toHaveBeenCalledTimes(1)
+    await expect(onPick).toHaveBeenLastCalledWith('banana')
+    // …and clicking the radio itself each report the pick exactly once.
+    await userEvent.click(canvas.getByRole('radio', {name: 'Cherry'}))
+    await expect(onPick).toHaveBeenCalledTimes(2)
+    await expect(onPick).toHaveBeenLastCalledWith('cherry')
+    // Re-picking the selected item is not a change.
+    await userEvent.click(canvas.getByText('Cherry'))
+    await expect(onPick).toHaveBeenCalledTimes(2)
+  },
+}
+
+export const SubmitsWithForm: Story = {
+  render: () => (
+    <html.form aria-label="Order">
+      <RadioGroup.Root name="fruit" defaultValue="apple" aria-label="Fruit">
+        <RadioGroup.Item value="apple">Apple</RadioGroup.Item>
+        <RadioGroup.Item value="banana">Banana</RadioGroup.Item>
+      </RadioGroup.Root>
+    </html.form>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const form = canvas.getByRole('form', {name: 'Order'}) as HTMLFormElement
+    await expect(new FormData(form).get('fruit')).toBe('apple')
+    await userEvent.click(canvas.getByText('Banana'))
+    await expect(new FormData(form).get('fruit')).toBe('banana')
+  },
+}
+
+export const ArrowKeysMoveSelection: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="sm" aria-label="Size">
+      <RadioGroup.Item value="sm">Small</RadioGroup.Item>
+      <RadioGroup.Item value="md">Medium</RadioGroup.Item>
+      <RadioGroup.Item value="lg">Large</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const group = canvas.getByRole('radiogroup', {name: 'Size'})
+    await expect(group).toBeInTheDocument()
+    // Arrow keys move the selection within the group, as native radios do.
+    const [sm, md] = canvas.getAllByRole('radio')
+    sm.focus()
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(md).toBeChecked()
+    await expect(md).toHaveFocus()
+  },
+}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,78 +1,8 @@
-import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
-import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
-import {useFieldGroupLabelling} from '../Field/FieldContext'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
-
-// --- Context ---
-
-interface RadioGroupContextValue {
-  value: string
-  onSelect: (value: string) => void
-  disabled: boolean
-}
-
-const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
-
-function useRadioGroup() {
-  const ctx = useContext(RadioGroupContext)
-  if (!ctx) {
-    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
-  }
-  return ctx
-}
-
-// --- Root ---
-
-interface RootProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  orientation?: 'horizontal' | 'vertical'
-  disabled?: boolean
-  /** Accessible name when the group is not inside a Field.Root (inside one,
-   *  the Field.Label names it). */
-  'aria-label'?: string
-  /** id of the element that names the group, when not inside a Field.Root. */
-  'aria-labelledby'?: string
-  children: ReactNode
-}
-
-function Root({
-  value: controlledValue,
-  defaultValue = '',
-  onValueChange,
-  orientation = 'vertical',
-  disabled = false,
-  children,
-  ...labelling
-}: RootProps) {
-  const a11y = useFieldGroupLabelling(labelling)
-  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
-
-  const onSelect = useCallback(
-    (itemValue: string) => {
-      if (!disabled) {
-        setValue(itemValue)
-      }
-    },
-    [disabled, setValue],
-  )
-
-  return (
-    <RadioGroupContext.Provider value={{value, onSelect, disabled}}>
-      <html.div
-        role="radiogroup"
-        aria-orientation={orientation}
-        {...a11y}
-        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
-      >
-        {children}
-      </html.div>
-    </RadioGroupContext.Provider>
-  )
-}
+import {Root, useRadioGroup} from './group'
 
 // --- Item ---
 
@@ -83,20 +13,18 @@ interface ItemProps {
 }
 
 function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
-  const {value: groupValue, onSelect, disabled: groupDisabled} = useRadioGroup()
+  const {value: groupValue, name, onSelect, disabled: groupDisabled} = useRadioGroup()
   const isChecked = groupValue === value
   const isDisabled = groupDisabled || itemDisabled
 
-  const handleClick = () => {
-    if (!isDisabled) {
-      onSelect(value)
-    }
-  }
-
+  // The native radio is the only source of a pick: a click on the label
+  // activates it, and onChange fires once, only when the selection changes.
+  // (A label onClick as well would report every pick twice.)
   return (
-    <html.label style={[styles.item, isDisabled && styles.itemDisabled]} onClick={handleClick}>
+    <html.label style={[styles.item, isDisabled && styles.itemDisabled]}>
       <html.input
         type="radio"
+        name={name}
         value={value}
         checked={isChecked}
         disabled={isDisabled}
@@ -114,9 +42,6 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
   )
 }
 
-// inside a Field.Root, the label names this group (see Field's `group`)
-Root.isFieldGroup = true as const
-
 export const RadioGroup = {
   Root,
   Item,

package/src/components/RadioGroup/group.tsx

@@ -0,0 +1,85 @@
+import {type ReactNode, createContext, useContext, useCallback, useId} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+import {useFieldGroupLabelling} from '../Field/FieldContext'
+
+// --- Context ---
+
+interface RadioGroupContextValue {
+  value: string
+  name: string
+  onSelect: (value: string) => void
+  disabled: boolean
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+export function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext)
+  if (!ctx) {
+    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  /** Form field name: every item's radio carries it, so the selection is
+   *  submitted with a native form. Generated when omitted (the radios still
+   *  form one group). */
+  name?: string
+  /** Accessible name when the group is not inside a Field.Root (inside one,
+   *  the Field.Label names it). */
+  'aria-label'?: string
+  /** id of the element that names the group, when not inside a Field.Root. */
+  'aria-labelledby'?: string
+  children: ReactNode
+}
+
+export function Root({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  name: nameProp,
+  children,
+  ...labelling
+}: RootProps) {
+  const a11y = useFieldGroupLabelling(labelling)
+  const generatedName = useId()
+  const name = nameProp ?? generatedName
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onSelect = useCallback(
+    (itemValue: string) => {
+      if (!disabled) {
+        setValue(itemValue)
+      }
+    },
+    [disabled, setValue],
+  )
+
+  return (
+    <RadioGroupContext.Provider value={{value, name, onSelect, disabled}}>
+      <html.div
+        role="radiogroup"
+        aria-orientation={orientation}
+        {...a11y}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </RadioGroupContext.Provider>
+  )
+}
+
+// inside a Field.Root, the label names this group (see Field's `group`)
+Root.isFieldGroup = true as const

package/src/components/RadioGroup/styles.css.ts

@@ -24,6 +24,14 @@ export const styles = css.create({
     color: colors.text,
     lineHeight: typography.lineHeight,
   },
+  // Native draws the item as a button: no button chrome, a flex row.
+  nativeItem: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    padding: 0,
+  },
   itemDisabled: {
     opacity: 0.5,
     cursor: 'not-allowed',
@@ -63,4 +71,9 @@ export const styles = css.create({
   input: {
     opacity: 0,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/ScrollArea/styles.css.ts

@@ -12,6 +12,8 @@ export const styles = css.create({
   },
   viewport: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     height: '100%',
     overflowX: 'auto',
     overflowY: 'auto',

package/src/components/SideNav/Chevron.native.tsx

@@ -0,0 +1,20 @@
+import Svg, {Path} from 'react-native-svg'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import type {ChevronProps} from './types'
+
+/** The web's chevron, drawn with react-native-svg in the trigger's resolved colour. */
+export function Chevron({color}: ChevronProps) {
+  const stroke = useResolvedColors()[color]
+  return (
+    <Svg width={SIZES_PX.glyphXs} height={SIZES_PX.glyphXs} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M9 18l6-6-6-6"
+        stroke={stroke}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}

package/src/components/SideNav/Chevron.tsx

@@ -0,0 +1,20 @@
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import type {ChevronProps} from './types'
+
+/** The group disclosure's chevron, drawn in the trigger's text colour. */
+export function Chevron(_props: ChevronProps) {
+  return (
+    <svg
+      width={SIZES_PX.glyphXs}
+      height={SIZES_PX.glyphXs}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  )
+}

package/src/components/SideNav/SideNav.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Vertical side navigation. `Section` is a labelled block that is always open — the default for primary navigation. `Group` is the same block behind a chevron (a disclosure) — reach for it only for a rare/advanced region, an unbounded data-driven list, or a rail long enough that flat stops reading as an overview; mixing the two in one rail is the healthy shape. `Item`s take an optional `icon` and show an active left-marker. Supports controlled and uncontrolled active item. Compound component — Root is required.',
+    'Vertical side navigation. `Section` is a labelled block that is always open — the default for primary navigation. `Group` is the same block behind a chevron (a disclosure) — reach for it only for a rare/advanced region, an unbounded data-driven list, or a rail long enough that flat stops reading as an overview; mixing the two in one rail is the healthy shape. `Item`s take an optional `icon` and show an active left-marker. Supports controlled and uncontrolled active item. Compound component — Root is required. On React Native the same parts render, and a Group knows whether it holds the active item from its Items, not from the DOM.',
   whenToUse: [
     'App-level sidebar navigation — flat `Section`s, every destination visible',
     'Settings navigation with labelled regions',

package/src/components/SideNav/SideNav.tsx

@@ -1,8 +1,22 @@
-import {type ReactNode, useState, useCallback, useRef, useEffect, useId} from 'react'
+import {
+  type ReactNode,
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useId,
+} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {SideNavContext, useSideNav} from './SideNavContext'
+import {isNative} from '../../platform'
+import {Chevron} from './Chevron'
+
+/** A Group's own items: each Item inside it registers its value here. */
+const GroupItemsContext = createContext<((value: string) => () => void) | null>(null)
 
 /**
  * SideNav has two ways to chunk a rail, and they are NOT interchangeable.
@@ -130,39 +144,40 @@ function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
   const key = groupKey ?? label
   const {expandedGroups, toggleGroup, expandGroup, activeValue} = useSideNav()
   const isExpanded = expandedGroups.has(key)
-  const groupRef = useRef<HTMLDivElement>(null)
   const triggerId = useId()
   const panelId = useId()
+  // The values of the Items inside, from props and state rather than a DOM
+  // query, so both platforms know whether the active item is in here.
+  const [values, setValues] = useState<ReadonlySet<string>>(() => new Set())
+  const registerValue = useCallback((value: string) => {
+    setValues((prev) => (prev.has(value) ? prev : new Set(prev).add(value)))
+    return () =>
+      setValues((prev) => {
+        if (!prev.has(value)) return prev
+        const next = new Set(prev)
+        next.delete(value)
+        return next
+      })
+  }, [])
+  const hasActiveChild = activeValue !== null && values.has(activeValue)
 
   // Auto-expand if this group contains the active item. Uses expandGroup (not
   // toggleGroup) so it never races the defaultExpanded effect into a closed
   // state when the active item lives in a defaultExpanded group.
   useEffect(() => {
-    if (!activeValue || expandedGroups.has(key)) return
-    const el = groupRef.current
-    if (!el) return
-    const activeBtn = el.querySelector(`[data-nav-value="${activeValue}"]`)
-    if (activeBtn) {
-      expandGroup(key)
-    }
-  }, [activeValue, key, expandedGroups, expandGroup])
+    if (hasActiveChild && !expandedGroups.has(key)) expandGroup(key)
+  }, [hasActiveChild, key, expandedGroups, expandGroup])
 
-  // Expand on first render if defaultExpanded (idempotent add, not a toggle).
+  // Expand once, on mount, if defaultExpanded (idempotent add, not a toggle).
+  const appliedDefault = useRef(false)
   useEffect(() => {
-    if (defaultExpanded) {
-      expandGroup(key)
-    }
-    // Only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const hasActiveChild = (() => {
-    if (!activeValue || !groupRef.current) return false
-    return !!groupRef.current.querySelector(`[data-nav-value="${activeValue}"]`)
-  })()
+    if (appliedDefault.current) return
+    appliedDefault.current = true
+    if (defaultExpanded) expandGroup(key)
+  }, [defaultExpanded, expandGroup, key])
 
   return (
-    <html.div ref={groupRef} style={styles.group}>
+    <html.div style={styles.group}>
       <html.button
         type="button"
         id={triggerId}
@@ -171,27 +186,26 @@ function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
         aria-expanded={isExpanded}
         aria-controls={isExpanded ? panelId : undefined}
       >
-        <html.span style={[styles.chevron, isExpanded && styles.chevronOpen]}>
-          <svg
-            width={10}
-            height={10}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M9 18l6-6-6-6" />
-          </svg>
+        <html.span
+          style={[styles.chevron, isNative && styles.nativeFlex, isExpanded && styles.chevronOpen]}
+        >
+          <Chevron color={hasActiveChild ? 'text' : 'textMuted'} />
         </html.span>
-        {label}
+        {/* Native refuses bare text beside the chevron's view; the web keeps it bare. */}
+        {isNative ? <html.span>{label}</html.span> : label}
       </html.button>
-      {isExpanded ? (
-        <html.div id={panelId} role="group" aria-labelledby={triggerId} style={styles.items}>
+      {/* Kept mounted while collapsed, so its Items stay registered with the group. */}
+      <GroupItemsContext.Provider value={registerValue}>
+        <html.div
+          id={panelId}
+          role="group"
+          aria-labelledby={triggerId}
+          hidden={isExpanded ? undefined : true}
+          style={[styles.items, !isExpanded && styles.itemsHidden]}
+        >
           {children}
         </html.div>
-      ) : null}
+      </GroupItemsContext.Provider>
     </html.div>
   )
 }
@@ -239,11 +253,13 @@ interface ItemProps {
 
 function Item({value, children, icon}: ItemProps) {
   const {activeValue, onSelect, registerItem} = useSideNav()
+  const registerInGroup = useContext(GroupItemsContext)
   const isActive = activeValue === value
 
   useEffect(() => {
     return registerItem(value)
   }, [value, registerItem])
+  useEffect(() => registerInGroup?.(value), [value, registerInGroup])
 
   return (
     <html.button
@@ -255,7 +271,7 @@ function Item({value, children, icon}: ItemProps) {
     >
       <html.span aria-hidden style={[styles.marker, isActive && styles.markerActive]} />
       {icon ? (
-        <html.span aria-hidden style={styles.itemIcon}>
+        <html.span aria-hidden style={[styles.itemIcon, isNative && styles.nativeFlex]}>
           {icon}
         </html.span>
       ) : null}

package/src/components/SideNav/styles.css.ts

@@ -137,6 +137,14 @@ export const styles = css.create({
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
   },
+  // A collapsed group's items stay mounted (they tell the group what it holds), unseen.
+  itemsHidden: {
+    display: 'none',
+  },
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
   markerActive: {
     height: sizes.navMarkerH,
   },

package/src/components/SideNav/types.ts

@@ -0,0 +1,6 @@
+import type {ColorToken} from '@duro-app/tokens/keys'
+
+export interface ChevronProps {
+  /** Native only: the web inherits the trigger's text colour. */
+  color: ColorToken
+}

package/src/components/Spinner/Spinner.native.tsx

@@ -0,0 +1,37 @@
+import {useEffect} from 'react'
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+import {html} from 'react-strict-dom'
+import {ring, TURN_MS} from './ring.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SpinnerProps} from './Spinner.types'
+
+export type {SpinnerProps, SpinnerSize} from './Spinner.types'
+
+/**
+ * Native Spinner: the web's ring, turned by Reanimated on the UI thread (RSD
+ * has no CSS animations on native), so a busy JS thread does not stall it.
+ */
+export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
+  const turn = useSharedValue(0)
+  useEffect(() => {
+    turn.value = withRepeat(withTiming(360, {duration: TURN_MS, easing: Easing.linear}), -1)
+    return () => cancelAnimation(turn)
+  }, [turn])
+  const turning = useAnimatedStyle(() => ({transform: [{rotate: `${turn.value}deg`}]}))
+
+  return (
+    <html.div role="status" style={[ring.root, ring.nativeRoot]}>
+      <Animated.View style={turning}>
+        <html.div style={[ring.ring, ring[size]]} aria-hidden />
+      </Animated.View>
+      <html.span style={[visuallyHidden.base, ring.srOnly]}>{label}</html.span>
+    </html.div>
+  )
+}

package/src/components/Spinner/Spinner.tsx

@@ -1,25 +1,16 @@
 import {html} from 'react-strict-dom'
+import {ring} from './ring.css'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SpinnerProps} from './Spinner.types'
 
-export type SpinnerSize = 'sm' | 'md' | 'lg'
-
-interface SpinnerProps {
-  size?: SpinnerSize
-  label?: string
-}
-
-const sizeMap = {
-  sm: styles.sm,
-  md: styles.md,
-  lg: styles.lg,
-} as const
+export type {SpinnerProps, SpinnerSize} from './Spinner.types'
 
 export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
   return (
-    <html.div role="status" style={styles.root}>
-      <html.div style={[styles.spinner, sizeMap[size]]} aria-hidden />
-      <html.span style={[visuallyHidden.base, styles.srOnly]}>{label}</html.span>
+    <html.div role="status" style={ring.root}>
+      <html.div style={[ring.ring, ring[size], styles.spinning]} aria-hidden />
+      <html.span style={[visuallyHidden.base, ring.srOnly]}>{label}</html.span>
     </html.div>
   )
 }

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,6 @@
+export type SpinnerSize = 'sm' | 'md' | 'lg'
+
+export interface SpinnerProps {
+  size?: SpinnerSize
+  label?: string
+}