@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/AI/thinking-indicator/examples.mdx

@@ -1,27 +0,0 @@
-import ThinkingIndicator from './index'
-
-# Basic
-
-<ThinkingIndicator />
-
-# Text only
-
-Drop the glyph for an inline indicator, e.g. before a streamed reply.
-
-<ThinkingIndicator showIcon={false} />
-
-# Compact
-
-The compact step of the size ladder, for dense transcripts.
-
-<ThinkingIndicator size="compact" />
-
-# Goo
-
-Three dots melt into one blob and split again through the goo filter (see Morph), beside a plain label.
-
-<ThinkingIndicator variant="goo" />
-
-# Goo, compact
-
-<ThinkingIndicator variant="goo" size="compact" />

package/components/AI/thinking-indicator/index.tsx

@@ -1,210 +0,0 @@
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/default/thinking-indicator.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `framer-motion` → `motion/react`; `@/lib/*` →
- *   `../../../lib/*`.
- * - Prop JSDoc kept from upstream (it matches the FF docs API table);
- *   modo TSDoc and examples on `ThinkingIndicator`. The `.shimmer-text` rule
- *   the label rides lives in base.css.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[Npx]` →
- *   `text-<role>[-compact]`; inline `fontVariationSettings` → `weight-*`;
- *   `duration-80|120|160` and tier-length JS durations → `duration-<tier>` /
- *   `spring.*`.
- * - A `variant="goo"` look (local, the morph style's goo): three
- *   `muted-foreground` dots that melt into one blob (swelling to hold their
- *   area) and split again through the shared `GooFilter`, one loop every
- *   eight slow-tier lengths, beside a plain cycling label. Reduced motion
- *   (`useReduceMotion`: the OS setting or MotionConfig's, which now also
- *   counts for the shimmer look) holds them split and still. The default stays upstream's
- *   `shimmer` look.
- */
-
-import { AnimatePresence, motion } from 'motion/react'
-import { forwardRef, type HTMLAttributes, useEffect, useId, useState } from 'react'
-import { GooFilter } from '../../../lib/morph-layers'
-import { useReduceMotion } from '../../../lib/reduced-motion'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { spring } from '../../../lib/springs'
-import { GOO_BLUR_RATIO } from '../../../lib/use-morph'
-import { cn } from '../../../lib/utils'
-
-const circleA = 'M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z'
-
-const infinity = 'M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z'
-
-const circleB =
-  'M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z'
-
-const words = ['Thinking', 'Moonwalking', 'Planning', 'Refining']
-
-// Per ladder step, as literal classes for the extractor: the dot, the box of
-// the three split dots, and the spacing between dot centers, wide enough that
-// split dots let go of each other through the goo.
-const DOTS: Record<SizeVariant, { box: string; dot: string; radius: number; gap: number }> = {
-  default: { box: 'h-5 w-[26px]', dot: 'size-1.5', radius: 3, gap: 10 },
-  compact: { box: 'h-[18px] w-[23px]', dot: 'size-[5px]', radius: 2.5, gap: 9 },
-}
-
-// The merged blob holds the three dots' area, so it swells as they melt in.
-const MERGED = Math.sqrt(3)
-
-/** Three dots that melt into one blob and split again, through the shared goo filter. */
-function GooDots({ step, still }: { step: SizeVariant; still: boolean }) {
-  const gooId = `thinking-goo-${useId().replace(/:/g, '')}`
-  const { box, dot, radius, gap } = DOTS[step]
-  // Split → merged → split over eight slow-tier lengths. A spring per move
-  // is over in a frame or two at this size, too quick to see a neck form;
-  // eased all the way, the necks stretch and snap in view.
-  const loop = { duration: spring.slow.duration * 8, ease: 'easeInOut' as const, repeat: Infinity }
-
-  return (
-    <span aria-hidden className={cn('relative shrink-0', box)}>
-      <GooFilter id={gooId} blur={radius * GOO_BLUR_RATIO} />
-      {/* The filter is the effect itself: it melts the token-colored dots into one shape. */}
-      <span className="absolute inset-0 flex items-center justify-center" style={{ filter: `url(#${gooId})` }}>
-        {[-1, 0, 1].map(side => (
-          <motion.span
-            key={side}
-            className={cn('absolute rounded-full bg-muted-foreground', dot)}
-            animate={still ? { x: side * gap } : side ? { x: [side * gap, 0, side * gap] } : { scale: [1, MERGED, 1] }}
-            transition={still ? { duration: 0 } : loop}
-          />
-        ))}
-      </span>
-    </span>
-  )
-}
-
-interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
-  /** The look: `shimmer` morphs a circle⇄infinity glyph beside a shimmering label (Fluid Functionalism's), `goo` melts three dots into one blob and splits them again beside a plain label. Defaults to `"shimmer"`. */
-  variant?: 'shimmer' | 'goo'
-  /** Show the glyph (or, for `goo`, the dots) before the label. Set to `false` for a text-only indicator (e.g. inline before a streamed reply). Defaults to `true`. */
-  showIcon?: boolean
-  /** Step on the size ladder. Wins over the surrounding SizeProvider. Defaults to the provider's step, else `"default"`. */
-  size?: SizeVariant
-}
-
-/**
- * Animated status indicator with morphing SVG and cycling text — the
- * assistant's working state.
- *
- * A glyph that morphs circle to infinity and back sits next to a shimmering
- * label that cycles Thinking, Moonwalking, Planning, Refining, each word
- * swapped on a spring. The row reserves the width of the longest word, so
- * nothing around it shifts while the words change. One static "Thinking…" is
- * announced to screen readers instead of a re-announcement every four
- * seconds, and reduced motion drops both the morph and the cycling for a
- * still glyph and label.
- *
- * `variant="goo"` swaps the glyph for three dots that melt into one blob and
- * split again through the goo filter (see Morph), beside a plain label;
- * reduced motion holds them split.
- *
- * @example {@include ./examples.mdx}
- */
-const ThinkingIndicator = forwardRef<HTMLDivElement, ThinkingIndicatorProps>(
-  ({ className, variant = 'shimmer', showIcon = true, size, ...props }, ref) => {
-    const step = useSize(size).variant
-    const compactStep = step === 'compact'
-    const [index, setIndex] = useState(0)
-    // Reduced motion drops the infinite glyph morph and the word cycling — a
-    // static glyph and label carry the same meaning without the movement.
-    const reduceMotion = useReduceMotion()
-    const label = variant === 'goo' ? 'text-muted-foreground' : 'shimmer-text'
-
-    useEffect(() => {
-      if (reduceMotion) return
-      const interval = setInterval(() => {
-        setIndex(i => (i + 1) % words.length)
-      }, 4000)
-      return () => clearInterval(interval)
-    }, [reduceMotion])
-
-    return (
-      <div ref={ref} role="status" className={cn('flex items-center gap-2 px-3 py-2', className)} {...props}>
-        {/* Static announcement — the cycling word display below is aria-hidden
-          so screen readers hear one "Thinking…" instead of a re-announcement
-          every 4 seconds. */}
-        <span className="sr-only">Thinking…</span>
-        {showIcon && variant === 'goo' && <GooDots step={step} still={reduceMotion} />}
-        {showIcon && variant === 'shimmer' && (
-          <motion.svg
-            aria-hidden
-            width={compactStep ? 18 : 20}
-            height={compactStep ? 18 : 20}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={1.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="text-muted-foreground shrink-0"
-          >
-            {reduceMotion ? (
-              <path d={infinity} />
-            ) : (
-              <motion.path
-                d={circleA}
-                initial={{ d: circleA }}
-                animate={{
-                  d: [circleA, infinity, circleB, infinity, circleA],
-                }}
-                transition={{
-                  d: {
-                    duration: 6,
-                    ease: 'easeInOut',
-                    repeat: Infinity,
-                    times: [0, 0.25, 0.5, 0.75, 1.0],
-                  },
-                }}
-              />
-            )}
-          </motion.svg>
-        )}
-        <span
-          aria-hidden="true"
-          className={cn(
-            'inline-grid overflow-hidden',
-            compactStep ? 'text-body-compact' : 'text-body',
-            'weight-medium',
-          )}
-        >
-          <span className={cn('col-start-1 row-start-1 invisible', label)}>
-            {words.reduce((a, b) => (a.length >= b.length ? a : b))}
-          </span>
-          {reduceMotion ? (
-            <span className={cn('col-start-1 row-start-1', label)}>{words[0]}</span>
-          ) : (
-            <AnimatePresence mode="popLayout" initial={false}>
-              <motion.span
-                key={words[index]}
-                className={cn('col-start-1 row-start-1', label)}
-                initial={{ y: '80%', opacity: 0 }}
-                animate={{
-                  y: 0,
-                  opacity: 1,
-                  transition: { duration: spring.slow.duration, ease: [0.4, 0, 0.2, 1] },
-                }}
-                exit={{
-                  y: '-80%',
-                  opacity: 0,
-                  transition: { duration: spring.slow.exit.duration, ease: [0.4, 0, 0.2, 1] },
-                }}
-              >
-                {words[index]}
-              </motion.span>
-            </AnimatePresence>
-          )}
-        </span>
-      </div>
-    )
-  },
-)
-
-ThinkingIndicator.displayName = 'ThinkingIndicator'
-
-export type { ThinkingIndicatorProps }
-export { ThinkingIndicator }
-export default ThinkingIndicator

package/components/accordion/examples.mdx

@@ -1,233 +0,0 @@
-import Accordion from './index'
-import Button from '../button'
-import { ArrowRight } from 'lucide-react'
-
-# Basics
-
-## Standalone
-
-A single collapsible item with its own hover state.
-
-<Accordion type="single" collapsible defaultValue="item-1">
-  <Accordion.Item value="item-1">
-    <Accordion.Trigger>What is this component?</Accordion.Trigger>
-    <Accordion.Content>
-      A collapsible accordion with animated expand/collapse and spring-animated chevron.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-
-## Single Expand
-
-Multiple items with fluid hover — only one can be expanded at a time.
-
-<Accordion.Group type="single" collapsible defaultValue="item-1">
-  <Accordion.Item value="item-1" index={0}>
-    <Accordion.Trigger>Getting Started</Accordion.Trigger>
-    <Accordion.Content>
-      Install the component and import it into your project. The accordion
-      supports both single and multiple expand modes.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2" index={1}>
-    <Accordion.Trigger>Styling</Accordion.Trigger>
-    <Accordion.Content>
-      The component integrates with the shape system for pill or rounded
-      border-radius variants. All animations use spring physics.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3" index={2}>
-    <Accordion.Trigger>Accessibility</Accordion.Trigger>
-    <Accordion.Content>
-      Built on Base UI Accordion with WAI-ARIA attributes, keyboard
-      navigation, and focus management.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-4" index={3}>
-    <Accordion.Trigger>Animation</Accordion.Trigger>
-    <Accordion.Content>
-      The panel morphs out of its row and the chevron rotates on a spring.
-      The fluid hover background tracks your cursor.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-## Multi Expand
-
-Multiple items with fluid hover — several can be expanded at once.
-
-<Accordion.Group type="multiple" defaultValue={['item-1', 'item-3']}>
-  <Accordion.Item value="item-1" index={0}>
-    <Accordion.Trigger>First Section</Accordion.Trigger>
-    <Accordion.Content>
-      Multiple items can be expanded at the same time.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2" index={1}>
-    <Accordion.Trigger>Second Section</Accordion.Trigger>
-    <Accordion.Content>
-      Click any trigger to expand or collapse independently.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3" index={2}>
-    <Accordion.Trigger>Third Section</Accordion.Trigger>
-    <Accordion.Content>
-      Each item operates independently in multiple mode.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-## Morph
-
-Each panel drips out of the row where it was pressed (its middle, from the keyboard) and widens into the item, its content revealed by the same shape; closing folds it back into the row. The rows below ride its bottom edge.
-
-<Accordion.Group type="single" collapsible defaultValue="shipping">
-  <Accordion.Item value="shipping" index={0}>
-    <Accordion.Trigger>When does my order ship?</Accordion.Trigger>
-    <Accordion.Content>
-      Orders placed before noon leave the same day. You get a tracking
-      link by email as soon as the parcel is scanned.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="returns" index={1}>
-    <Accordion.Trigger>Can I return it?</Accordion.Trigger>
-    <Accordion.Content>
-      Anything unused comes back free within 30 days. Start a return from
-      your order page and print the label.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="warranty" index={2}>
-    <Accordion.Trigger>What does the warranty cover?</Accordion.Trigger>
-    <Accordion.Content>
-      Two years on parts and labour. Accidental damage is covered once,
-      on top of that.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-# Variants
-
-## Row highlight
-
-With `highlight="trigger"` an expanded item holds no tint — the fill
-scopes to the row and waits for hover. Suits dense panels, where a block
-per open item reads as a second layer.
-
-<Accordion.Group type="single" collapsible defaultValue="item-1" highlight="trigger">
-  <Accordion.Item value="item-1" index={0}>
-    <Accordion.Trigger>Expanded, but not tinted</Accordion.Trigger>
-    <Accordion.Content>
-      The panel reads as part of the page rather than a filled block.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2" index={1}>
-    <Accordion.Trigger>Hover any row</Accordion.Trigger>
-    <Accordion.Content>
-      The fill follows your cursor instead of marking a state.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3" index={2}>
-    <Accordion.Trigger>Compare with the sections above</Accordion.Trigger>
-    <Accordion.Content>
-      Those hold a block across the row and its panel while open.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-## Without the goo
-
-`effect="morph"` grows the same shape with no liquid neck to its row; `tier="moderate"` runs the goo on the quicker, critically damped spring.
-
-<Accordion.Group type="single" collapsible>
-  <Accordion.Item value="morph" index={0}>
-    <Accordion.Trigger>Plain morph</Accordion.Trigger>
-    <Accordion.Content effect="morph">
-      The tint grows from the press point into the item, with no neck.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="moderate" index={1}>
-    <Accordion.Trigger>Moderate tier</Accordion.Trigger>
-    <Accordion.Content tier="moderate">
-      The goo again, on the moderate spring.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-## Without the chevron
-
-`icon={false}` drops the glyph at the row's end, for a row whose own content says it opens. A component passed as `icon` replaces the chevron and turns a quarter turn on open, so give it a right-pointing glyph.
-
-<Accordion.Group type="single" collapsible defaultValue="plain">
-  <Accordion.Item value="plain" index={0}>
-    <Accordion.Trigger icon={false}>No chevron</Accordion.Trigger>
-    <Accordion.Content>
-      The label takes the whole row; hover and the open tint still say what it does.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="default" index={1}>
-    <Accordion.Trigger>Default chevron</Accordion.Trigger>
-    <Accordion.Content>
-      The same row with the icon context's chevron.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="custom" index={2}>
-    <Accordion.Trigger icon={ArrowRight}>Custom glyph</Accordion.Trigger>
-    <Accordion.Content>
-      An arrow that points down once the item is open.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-# Composition
-
-## Rich headers
-
-By default the trigger renders its label twice: a hidden semibold copy reserves the width, so the label gets heavier on open without moving. A header made of components would be duplicated in the DOM, so `weightShift={false}` renders it once and leaves the weight to its content. `contentClassName` is merged over the inner row's inset, padding and muted body text: the first panel below turns its text to full strength, the second takes a wider inset and the caption size. The label lives inside the trigger `<button>`, so build it from phrasing content (spans, as below), never a `div`-based header. Text that fixes its own colour stays that colour when the item opens: the chevron, the highlight and the open tint are what signal the state.
-
-<Accordion.Group type="multiple" defaultValue={['one']}>
-  <Accordion.Item value="one" index={0}>
-    <Accordion.Trigger weightShift={false}>
-      <span className="flex flex-col">
-        <span className="text-subtitle text-foreground">Pro plan</span>
-        <span className="text-caption text-muted-foreground">Billed yearly, cancel any time</span>
-      </span>
-    </Accordion.Trigger>
-    <Accordion.Content contentClassName="text-foreground">
-      Unlimited projects and priority support. The header above is in the DOM once.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="two" index={1}>
-    <Accordion.Trigger weightShift={false} icon={false}>
-      <span className="flex flex-col">
-        <span className="text-subtitle text-foreground">Team plan</span>
-        <span className="text-caption text-muted-foreground">Per seat, no chevron</span>
-      </span>
-    </Accordion.Trigger>
-    <Accordion.Content contentClassName="px-6 text-caption">
-      Shared workspaces and roles.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-## Your own trigger
-
-`asChild` (or `render`) makes your element the trigger, so a Button, a link-styled control or anything else can open the item. It is rendered as it is: the row's label copy, the chevron and the row padding are not added, so the element brings its own content and look. Base UI still wires `aria-expanded`, `aria-controls`, `data-panel-open` and the keys onto it, so style the open state with `data-[panel-open]`.
-
-<Accordion.Group type="single" collapsible defaultValue="one">
-  <Accordion.Item value="one" index={0}>
-    <Accordion.Trigger asChild>
-      <Button variant="ghost" className="w-full justify-start">Billing</Button>
-    </Accordion.Trigger>
-    <Accordion.Content>
-      Invoices, payment methods and receipts.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="two" index={1}>
-    <Accordion.Trigger render={<Button variant="ghost" className="w-full justify-start" />}>
-      Security
-    </Accordion.Trigger>
-    <Accordion.Content>
-      Passwords, sessions and two-factor.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>