@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/lib/morph-part.tsx

@@ -0,0 +1,49 @@
+/*
+ * Local addition (not part of Fluid Functionalism): shared parts for morphing
+ * overlays. A part inside the trigger and its twin inside the overlay share a
+ * motion `layoutId`, so the part flies from one to the other while the surface
+ * morphs, like motion-primitives' morphing dialog image and title
+ * (github.com/ibelick/motion-primitives `components/core/morphing-dialog.tsx`
+ * @ 120f64f6ca60348e251f929e9c81f11ccbe45eda — MIT © 2024 ibelick, notice:
+ * LICENSE.motion-primitives).
+ */
+
+import { motion } from 'motion/react'
+import { createContext, type ReactNode, useContext } from 'react'
+import { useReduceMotion } from './reduced-motion'
+import { spring } from './springs'
+
+/** Set by an overlay root: the id its parts are scoped to and whether it is open. */
+const MorphPartScope = createContext<{ id: string; open: boolean } | null>(null)
+
+/** True inside an overlay's surface (`MorphSurface` provides it). */
+const MorphPartInOverlay = createContext(false)
+
+const { exit: _exit, ...enter } = spring.slow
+
+interface MorphPartProps {
+  /** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
+  id: string
+  /** Classes for the part's box. */
+  className?: string
+  /** The part's content: an image, a title. */
+  children?: ReactNode
+}
+
+function MorphPart({ id, className, children }: MorphPartProps) {
+  const scope = useContext(MorphPartScope)
+  const inOverlay = useContext(MorphPartInOverlay)
+  const reduced = useReduceMotion()
+  // The overlay's twin lets go of the id as soon as the close starts, so the
+  // trigger's part flies back while Base UI still shows the closing overlay.
+  const layoutId = scope && !reduced && (scope.open || !inOverlay) ? `${scope.id}-${id}` : undefined
+
+  return (
+    <motion.div layoutId={layoutId} transition={enter} className={className}>
+      {children}
+    </motion.div>
+  )
+}
+
+export type { MorphPartProps }
+export { MorphPart, MorphPartInOverlay, MorphPartScope }

package/lib/popup.ts

@@ -0,0 +1,52 @@
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/popup.ts` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `popupMotionClass` (the side-aware transform origin and slide offset of
+ *   the old `scaleY` enter/exit) dropped: the dropdown, select and combobox
+ *   popups now morph out of their trigger through `lib/use-morph.ts`.
+ */
+
+// ---------------------------------------------------------------------------
+// Shared popup chrome for the dropdown, select, and combobox popups: the
+// ScrollArea sizing the list scrolls inside. One definition, so the three
+// popups never drift apart.
+// ---------------------------------------------------------------------------
+
+/**
+ * Popup lists scroll inside ScrollArea: the hover-revealed thumb instead of
+ * the platform scrollbar, and a scroll-aware fade on the viewport. The popup
+ * is only max-height constrained, so the viewport's percentage height can't
+ * resolve — it inherits the max-height instead (the ScrollArea root inherits
+ * it from the popup) and sizes to its rows up to that. The scroll primitive's
+ * inline-styled sizer is forced back to a plain block so rows can shrink and
+ * truncate; the `[style]` qualifier keeps that off the rows' own wrapper on
+ * touch devices, where ScrollArea renders no sizer.
+ */
+export const popupScrollAreaClass = 'min-h-0 flex-1 max-h-[inherit]'
+export const popupViewportClass =
+  '!h-auto max-h-[inherit] [&>div[style]]:!block [&>div[style]]:!min-w-0 [--scroll-fade-size:32px]'
+
+/** Keys that count as keyboard navigation inside a popup (earn the ring). */
+export const POPUP_NAV_KEYS = [
+  'ArrowDown',
+  'ArrowUp',
+  'ArrowLeft',
+  'ArrowRight',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+  'Tab',
+]
+
+/**
+ * Rows the fluid hover must skip: a disabled row is neither a target
+ * nor a hover stop, whichever attribute the primitive marks it with.
+ */
+export function isDisabledRow(el: HTMLElement): boolean {
+  return el.getAttribute('aria-disabled') === 'true' || el.hasAttribute('data-disabled')
+}

package/lib/reduced-motion.ts

@@ -0,0 +1,19 @@
+/*
+ * Local addition (not part of Fluid Functionalism): the one reduced-motion
+ * read for the morph layer and the liquid indicators.
+ */
+
+import { useReducedMotion, useReducedMotionConfig } from 'motion/react'
+
+/**
+ * Reduce motion when the OS asks for it or a surrounding `MotionConfig` does.
+ * motion's `useReducedMotionConfig` alone follows the OS only under
+ * `<MotionConfig reducedMotion="user">`; without that wrapper it defaults to
+ * "never", so a page that sets none would animate for a user who turned
+ * motion off.
+ */
+export function useReduceMotion() {
+  const os = useReducedMotion() ?? false
+  const config = useReducedMotionConfig() ?? false
+  return os || config
+}

package/lib/row-index.tsx

@@ -0,0 +1,29 @@
+/*
+ * Local addition (not part of Fluid Functionalism): numbers a group's rows in
+ * order (Checkbox.Group, Radio.Group, Switch.Group), so a row needs no
+ * `index` for the fluid hover and the group's index-keyed state.
+ */
+
+import { Children, createContext, isValidElement, type ReactNode, useContext } from 'react'
+
+const RowIndexContext = createContext(0)
+
+/** Gives each element child its position among them. */
+function IndexedRows({ children }: { children: ReactNode }) {
+  let index = 0
+  return (
+    <>
+      {Children.map(children, child =>
+        isValidElement(child) ? <RowIndexContext.Provider value={index++}>{child}</RowIndexContext.Provider> : child,
+      )}
+    </>
+  )
+}
+
+/** A row's index: its own `index`, else its position in the group. */
+function useRowIndex(own?: number) {
+  const position = useContext(RowIndexContext)
+  return own ?? position
+}
+
+export { IndexedRows, useRowIndex }

package/lib/row-order.tsx

@@ -0,0 +1,115 @@
+/*
+ * Local addition (not part of Fluid Functionalism): numbers a menu's rows in
+ * document order, so a `Dropdown.Item` needs no `index` for the fluid hover,
+ * the keyboard ring and the selection backgrounds. Unlike `lib/row-index.tsx`
+ * (direct children only) it reaches rows anywhere below the panel: inside a
+ * `Dropdown.Group`, behind a condition, out of a `map`. Labels, separators and
+ * groups take a number too without registering a rect, so a selection run
+ * never melts across them.
+ */
+
+import {
+  createContext,
+  type RefObject,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
+
+interface Slot {
+  element: HTMLElement
+  /** The row's own `index`; the numbering starts after the highest one. */
+  explicit?: number
+  /** A label, separator or group: numbered, never a row. */
+  gap?: boolean
+}
+
+interface RowOrder {
+  register: (id: string, slot: Slot) => () => void
+  order: ReadonlyMap<string, number>
+  /** The first row's number: the inline panel's roving tab stop. */
+  first?: number
+}
+
+const EMPTY: ReadonlyMap<string, number> = new Map()
+
+const RowOrderContext = createContext<RowOrder | null>(null)
+
+const before = (a: Slot, b: Slot) =>
+  a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+
+function number(slots: Map<string, Slot>) {
+  let next = 0
+  for (const slot of slots.values()) if (slot.explicit !== undefined) next = Math.max(next, slot.explicit + 1)
+  const order = new Map<string, number>()
+  let first: number | undefined
+  for (const [id, slot] of [...slots].sort(([, a], [, b]) => before(a, b))) {
+    if (slot.explicit !== undefined) continue
+    if (!slot.gap) first ??= next
+    order.set(id, next++)
+  }
+  return { order, first }
+}
+
+interface Numbering {
+  order: ReadonlyMap<string, number>
+  first?: number
+}
+
+function same({ order: a, first: firstA }: Numbering, { order: b, first: firstB }: Numbering) {
+  if (firstA !== firstB || a.size !== b.size) return false
+  for (const [id, index] of a) if (b.get(id) !== index) return false
+  return true
+}
+
+/** A panel's numbering. Provide the result through `RowOrderContext`. */
+function useRowOrder(): RowOrder {
+  const slots = useRef(new Map<string, Slot>())
+  const [numbering, setNumbering] = useState<Numbering>({ order: EMPTY })
+  const [, changed] = useReducer((n: number) => n + 1, 0)
+
+  const register = useCallback((id: string, slot: Slot) => {
+    slots.current.set(id, slot)
+    changed()
+    return () => {
+      slots.current.delete(id)
+      changed()
+    }
+  }, [])
+
+  // Every render: a re-ordered list moves no row in or out, so only the DOM
+  // knows. Rows register in their own layout effects, which run first.
+  useLayoutEffect(() => {
+    const next = number(slots.current)
+    setNumbering(prev => (same(prev, next) ? prev : next))
+  })
+
+  return useMemo(() => ({ register, ...numbering }), [register, numbering])
+}
+
+/**
+ * Takes a place in the surrounding panel's order and returns the row's index
+ * (`explicit` when given, else its position; undefined until the first layout
+ * pass, and outside a panel) and the panel's first row.
+ */
+function useRowSlot(ref: RefObject<HTMLElement | null>, explicit?: number, gap?: boolean) {
+  const ctx = useContext(RowOrderContext)
+  const id = useId()
+  const register = ctx?.register
+
+  useLayoutEffect(() => {
+    const element = ref.current
+    if (!register || !element) return
+    return register(id, { element, explicit, gap })
+  }, [register, id, explicit, gap, ref])
+
+  return { index: explicit ?? ctx?.order.get(id), firstRow: ctx?.first }
+}
+
+export type { RowOrder }
+export { RowOrderContext, useRowOrder, useRowSlot }

package/lib/scroll-column.tsx

@@ -0,0 +1,244 @@
+/*
+ * Local addition (not part of Fluid Functionalism): the scrolling option list
+ * the date and time pickers stack beside their calendar (months, years,
+ * hours, minutes), or lay out as a strip above it on a narrow panel.
+ */
+
+import { type KeyboardEvent, type ReactNode, useEffect, useRef } from 'react'
+import { FluidHoverHighlight } from './fluid-hover-highlight'
+import { useReduceMotion } from './reduced-motion'
+import { useShape } from './shape-context'
+import { useSize } from './size-context'
+import { useFluidHover, useRegisterFluidHoverItem } from './use-fluid-hover'
+import { cn } from './utils'
+
+interface ScrollColumnOption<T extends number | string> {
+  value: T
+  label: ReactNode
+  disabled?: boolean
+}
+
+interface ScrollColumnProps<T extends number | string> {
+  /** Accessible name of the list ("Month", "Hour"). */
+  label: string
+  options: ScrollColumnOption<T>[]
+  /** The picked option: a dot and a heavier weight. */
+  value: T | null
+  onValueChange: (value: T) => void
+  /** Options to band, as a scrollbar thumb would (the months the calendar shows). */
+  inView?: (value: T) => boolean
+  /** The option kept centred. Defaults to `value`. */
+  follow?: T | null
+  /** A column, or a strip on a narrow panel. Defaults to `'vertical'`. */
+  orientation?: 'vertical' | 'horizontal'
+  className?: string
+}
+
+/**
+ * Scrolls `list` so `item` sits in its middle, on whichever axis it scrolls.
+ * Measured in layout pixels: a panel still scaled by its opening morph
+ * reports shrunken client rects.
+ */
+function centre(list: HTMLElement, item: HTMLElement, behavior: ScrollBehavior) {
+  const l = list.getBoundingClientRect()
+  const i = item.getBoundingClientRect()
+  const sx = l.width / list.offsetWidth || 1
+  const sy = l.height / list.offsetHeight || 1
+  list.scrollTo({
+    top: list.scrollTop + (i.top - l.top) / sy - (list.clientHeight - item.offsetHeight) / 2,
+    left: list.scrollLeft + (i.left - l.left) / sx - (list.clientWidth - item.offsetWidth) / 2,
+    behavior,
+  })
+}
+
+/** For a row of columns: a hairline between neighbours. */
+const dividedColumns = 'flex [&>*+*]:border-s [&>*]:border-border'
+
+const STEP: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }
+
+function ScrollColumn<T extends number | string>({
+  label,
+  options,
+  value,
+  onValueChange,
+  inView,
+  follow = value,
+  orientation = 'vertical',
+  className,
+}: ScrollColumnProps<T>) {
+  const listRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const pointerInside = useRef(false)
+  const centred = useRef(false)
+  const reduceMotion = useReduceMotion()
+  const horizontal = orientation === 'horizontal'
+  const hover = useFluidHover(containerRef, { axis: horizontal ? 'x' : 'y' })
+  const shape = useShape()
+
+  // Recentres only when the followed option (or the axis) changes.
+  const axis = useRef(horizontal)
+  useEffect(() => {
+    const list = listRef.current
+    const item = list?.querySelector<HTMLElement>(`[data-value="${follow}"]`)
+    if (!list || !item || pointerInside.current) return
+    // A jump when the list opens or turns: it lands on its option.
+    const glide = centred.current && axis.current === horizontal && !reduceMotion
+    centre(list, item, glide ? 'smooth' : 'instant')
+    centred.current = true
+    axis.current = horizontal
+  }, [follow, horizontal])
+
+  // A resize (the panel settling its width, a strip turning into a column)
+  // moves the followed option off centre: put it back at once.
+  const followed = useRef(follow)
+  followed.current = follow
+  useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+    const observer = new ResizeObserver(() => {
+      const item = list.querySelector<HTMLElement>(`[data-value="${followed.current}"]`)
+      if (item && !pointerInside.current) centre(list, item, 'instant')
+    })
+    observer.observe(list)
+    return () => observer.disconnect()
+  }, [])
+
+  // A run of banded options reads as one band: only its ends are rounded.
+  const banded = options.map(o => inView?.(o.value) ?? false)
+
+  const tabStop = options.some(o => o.value === value) ? value : (follow ?? options[0]?.value)
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const items = [
+      ...(containerRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]:not(:disabled)') ?? []),
+    ]
+    const at = items.indexOf(document.activeElement as HTMLButtonElement)
+    const next =
+      e.key === 'Home' ? 0 : e.key === 'End' ? items.length - 1 : STEP[e.key] ? at + (STEP[e.key] ?? 0) : undefined
+    if (next === undefined) return
+    e.preventDefault()
+    const item = items[Math.max(0, Math.min(items.length - 1, next))]
+    item?.focus({ preventScroll: true })
+    if (item && listRef.current) centre(listRef.current, item, reduceMotion ? 'instant' : 'smooth')
+  }
+
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      aria-label={label}
+      aria-orientation={orientation}
+      onKeyDown={onKeyDown}
+      onPointerEnter={() => {
+        pointerInside.current = true
+      }}
+      onPointerLeave={() => {
+        pointerInside.current = false
+      }}
+      className={cn(
+        'scrollbar-hide [--scroll-fade-size:24px]',
+        horizontal
+          ? 'overflow-x-auto overflow-y-hidden scroll-fade-x'
+          : 'overflow-y-auto overflow-x-hidden scroll-fade',
+        className,
+      )}
+    >
+      {/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: the fluid hover tracks the pointer here; the options inside are the buttons. */}
+      <div
+        ref={containerRef}
+        onMouseMove={hover.handlers.onMouseMove}
+        onMouseEnter={hover.handlers.onMouseEnter}
+        onMouseLeave={hover.handlers.onMouseLeave}
+        onClick={hover.handlers.onClick}
+        className={cn('relative flex p-1', horizontal ? 'w-max flex-row' : 'flex-col')}
+      >
+        <FluidHoverHighlight hover={hover} className={shape.bg} />
+        {options.map((option, index) => (
+          <ScrollColumnItem
+            key={option.value}
+            index={index}
+            registerItem={hover.registerItem}
+            option={option}
+            selected={option.value === value}
+            band={
+              !banded[index]
+                ? undefined
+                : banded[index - 1]
+                  ? banded[index + 1]
+                    ? 'middle'
+                    : 'end'
+                  : banded[index + 1]
+                    ? 'start'
+                    : 'single'
+            }
+            horizontal={horizontal}
+            tabStop={option.value === tabStop}
+            onSelect={() => onValueChange(option.value)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ScrollColumnItem<T extends number | string>({
+  index,
+  registerItem,
+  option,
+  selected,
+  band,
+  horizontal,
+  tabStop,
+  onSelect,
+}: {
+  index: number
+  registerItem: (index: number, element: HTMLElement | null) => void
+  option: ScrollColumnOption<T>
+  selected: boolean
+  band?: 'start' | 'middle' | 'end' | 'single'
+  horizontal: boolean
+  tabStop: boolean
+  onSelect: () => void
+}) {
+  const ref = useRef<HTMLButtonElement>(null)
+  useRegisterFluidHoverItem(registerItem, index, ref)
+  const shape = useShape()
+  const sizeClasses = useSize()
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="option"
+      aria-selected={selected}
+      tabIndex={tabStop ? 0 : -1}
+      disabled={option.disabled}
+      data-value={option.value}
+      data-fluid-hover-index={index}
+      onClick={onSelect}
+      className={cn(
+        'relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none',
+        'transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring',
+        'disabled:opacity-50 disabled:pointer-events-none',
+        sizeClasses.segmentItem,
+        sizeClasses.text,
+        shape.item,
+        // FF's tint for a passive region (Accordion's open row); the pick is Select's checked row.
+        band && !selected && 'bg-accent/20 dark:bg-accent/12',
+        selected && 'bg-active',
+        band && band !== 'single' && 'rounded-none',
+        band === 'start' && (horizontal ? 'rounded-s-lg' : 'rounded-t-lg'),
+        band === 'end' && (horizontal ? 'rounded-e-lg' : 'rounded-b-lg'),
+        selected ? 'text-foreground weight-semibold' : band ? 'text-foreground' : 'text-muted-foreground',
+      )}
+    >
+      {selected && (
+        <span aria-hidden className="absolute start-1 top-1/2 size-1 -translate-y-1/2 rounded-full bg-current" />
+      )}
+      {option.label}
+    </button>
+  )
+}
+
+export type { ScrollColumnOption, ScrollColumnProps }
+export { dividedColumns, ScrollColumn }

package/lib/shape-context.tsx

@@ -0,0 +1,124 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/shape-context.tsx` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `"use client"` directive dropped (no RSC here).
+ */
+
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
+type ShapeVariant = 'pill' | 'rounded'
+
+interface ShapeClasses {
+  /** The variant these classes belong to — handy for conditionals. */
+  variant: ShapeVariant
+  item: string
+  bg: string
+  focusRing: string
+  mergedBg: string
+  container: string
+  button: string
+  input: string
+  // Numeric counterparts of `bg` / `mergedBg`, in px. Needed where individual
+  // corners are animated (e.g. the selected-background merge/split animation),
+  // which requires per-corner numeric border-radii rather than a class.
+  bgRadius: number
+  mergedRadius: number
+}
+
+const shapeMap: Record<ShapeVariant, ShapeClasses> = {
+  pill: {
+    variant: 'pill',
+    item: 'rounded-[20px]',
+    bg: 'rounded-[20px]',
+    // +2px over `item` because the focus ring sits 2px outside the element
+    // (top/left -2, width/height +4); this keeps the corners concentric so a
+    // pill element gets a pill ring (matches the rounded-mode 8px→10px bump).
+    focusRing: 'rounded-[22px]',
+    mergedBg: 'rounded-2xl',
+    container: 'rounded-3xl',
+    button: 'rounded-[20px]',
+    input: 'rounded-[20px]',
+    bgRadius: 20,
+    mergedRadius: 16,
+  },
+  rounded: {
+    variant: 'rounded',
+    item: 'rounded-lg',
+    bg: 'rounded-lg',
+    focusRing: 'rounded-[10px]',
+    mergedBg: 'rounded-lg',
+    container: 'rounded-xl',
+    button: 'rounded-lg',
+    input: 'rounded-lg',
+    bgRadius: 8,
+    mergedRadius: 8,
+  },
+}
+
+interface ShapeContextValue {
+  shape: ShapeVariant
+  setShape: (shape: ShapeVariant) => void
+  classes: ShapeClasses
+}
+
+const ShapeContext = createContext<ShapeContextValue | null>(null)
+
+// Rounded is the default on every path: the site demos render under
+// <ShapeProvider defaultShape="rounded">, the shipped :focus-visible fallback
+// ring assumes its 8px radius, and the preset generators only emit a provider
+// for pill. A consumer with no provider gets the corners the docs show.
+function useShape(): ShapeClasses {
+  const ctx = useContext(ShapeContext)
+  if (!ctx) return shapeMap.rounded
+  return ctx.classes
+}
+
+function useShapeContext() {
+  const ctx = useContext(ShapeContext)
+  if (!ctx) throw new Error('useShapeContext must be used within a ShapeProvider')
+  return ctx
+}
+
+function ShapeProvider({ children, defaultShape = 'rounded' }: { children: ReactNode; defaultShape?: ShapeVariant }) {
+  const [shape, setShapeState] = useState<ShapeVariant>(defaultShape)
+  const transitionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Run a state change under the `.transitioning` guard (added + reflow-flushed
+  // first so the 180ms border-radius cross-fade applies). Clearing the previous
+  // timeout first keeps a double-press from removing the class mid-fade.
+  const transitionShape = useCallback((callback: () => void) => {
+    const root = document.documentElement
+    root.classList.add('transitioning')
+    void root.offsetHeight
+    callback()
+    if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current)
+    transitionTimeoutRef.current = setTimeout(() => root.classList.remove('transitioning'), 200)
+  }, [])
+
+  const setShape = useCallback(
+    (next: ShapeVariant) => {
+      transitionShape(() => setShapeState(next))
+    },
+    [transitionShape],
+  )
+
+  // Publish the current element radius as a CSS custom property so plain-CSS
+  // consumers that can't read React context stay in sync with the shape
+  // system — e.g. the @layer base :focus-visible fallback ring in
+  // globals.css. Set on <html> so portalled content sees it too.
+  useEffect(() => {
+    document.documentElement.style.setProperty('--shape-input-radius', `${shapeMap[shape].bgRadius}px`)
+  }, [shape])
+
+  const value = useMemo(() => ({ shape, setShape, classes: shapeMap[shape] }), [shape, setShape])
+
+  return <ShapeContext.Provider value={value}>{children}</ShapeContext.Provider>
+}
+
+export type { ShapeClasses, ShapeVariant }
+export { ShapeProvider, shapeMap, useShape, useShapeContext }