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

package/preset.ts

@@ -1,199 +0,0 @@
-import { existsSync, readdirSync, readFileSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import type { Preset } from 'unocss'
-
-/*
- * The UI theme as a UnoCSS preset: the design system's own uno.config.ts
- * uses it, and so can a host app on UnoCSS (`@justanarthur/modo-ui/unocss`)
- * that generates the components' utilities itself instead of importing the
- * prebuilt styles.css. scripts/build-css.ts derives dist/tailwind.css from
- * the same `theme` and `utilities`, so the three never drift.
- *
- * Mirrors Fluid Functionalism's Tailwind v4 `@theme inline` + `@utility`
- * (upstream `app/globals.css` §3,
- * mickadesign/fluid-functionalism @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b,
- * MIT © 2026 Micka Touillaud).
- *
- * - Requires presetWind4: the theme keys (`font`, `shadow`, `property`) are
- *   its shape, and its default `dark: 'class'` is the `.dark` ancestor
- *   contract the components are written against.
- * - Theme colors point straight at the CSS variables in tokens/colors.css and
- *   primitives/surface/surface.css. wind4 applies an opacity modifier to a
- *   var() color with color-mix(), so `bg-accent/12` works on the
- *   light-dark() tokens.
- * - The radius scale is wind4's default on purpose: shape-context pairs
- *   `rounded-lg` (8px) with JS pixel radii, so it must not follow `--radius`.
- * - `font.sans` / `font.mono` repeat the literals from tokens/typography.css
- *   instead of `var(--font-*)`: wind4 emits theme keys as same-named
- *   variables (`--font-sans`), and a self-reference would be a cycle.
- * - `utilities` bypass `theme` for the same reason (`--radius-box`).
- */
-
-const TYPE_ROLES = ['display', 'title', 'subtitle', 'body', 'caption', 'micro'] as const
-const WEIGHTS = ['normal', 'medium', 'semibold', 'bold'] as const
-const TIERS = ['fast', 'moderate', 'slow'] as const
-const RADII = ['box', 'glyph'] as const
-
-export const theme = {
-  font: {
-    sans: "'Inter Variable', ui-sans-serif, system-ui, sans-serif",
-    mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace",
-  },
-  colors: {
-    background: 'var(--background)',
-    foreground: 'var(--foreground)',
-    card: { DEFAULT: 'var(--card)', foreground: 'var(--card-foreground)' },
-    muted: { DEFAULT: 'var(--muted)', foreground: 'var(--muted-foreground)' },
-    accent: {
-      DEFAULT: 'var(--accent)',
-      foreground: 'var(--accent-foreground)',
-      hover: 'var(--accent-hover)',
-    },
-    // The primary Button's fill and label: the ink by default, a host's brand when re-pointed.
-    primary: { DEFAULT: 'var(--primary)', foreground: 'var(--primary-foreground)' },
-    brand: { DEFAULT: 'var(--brand)', hover: 'var(--brand-hover)' },
-    'focus-ring': 'var(--focus-ring)',
-    // The tint-direction triplet as a color, so `bg-overlay/8` is the
-    // rgb(var(--overlay) / 0.08) ramp.
-    overlay: 'rgb(var(--overlay))',
-    selected: 'var(--selected)',
-    thumb: 'var(--thumb)',
-    picker: { edge: 'var(--picker-edge)', ring: 'var(--picker-ring)' },
-    control: 'var(--control-border)',
-    scrim: 'var(--scrim)',
-    status: {
-      success: 'var(--status-success)',
-      loading: 'var(--status-loading)',
-      error: 'var(--status-error)',
-      warning: 'var(--status-warning)',
-      info: 'var(--status-info)',
-      action: 'var(--status-action)',
-    },
-    border: 'var(--border)',
-    ring: 'var(--ring)',
-    input: 'var(--input)',
-    destructive: {
-      DEFAULT: 'var(--destructive)',
-      light: 'var(--destructive-light)',
-      strong: 'var(--destructive-strong)',
-      wash: {
-        DEFAULT: 'var(--destructive-wash)',
-        hover: 'var(--destructive-wash-hover)',
-        active: 'var(--destructive-wash-active)',
-      },
-    },
-    // Button's success variant: the status hue as text on a wash of itself.
-    success: {
-      strong: 'var(--success-strong)',
-      wash: {
-        DEFAULT: 'var(--success-wash)',
-        hover: 'var(--success-wash-hover)',
-        active: 'var(--success-wash-active)',
-      },
-    },
-    skeleton: 'var(--skeleton)',
-    'image-edge': 'var(--image-edge)',
-    'progress-track': 'var(--progress-track)',
-    well: 'var(--well)',
-    hover: 'var(--hover)',
-    active: 'var(--active)',
-    syntax: {
-      keyword: 'var(--syntax-keyword)',
-      string: 'var(--syntax-string)',
-      class: 'var(--syntax-class)',
-      entity: 'var(--syntax-entity)',
-      property: 'var(--syntax-property)',
-      comment: 'var(--syntax-comment)',
-      identifier: 'var(--syntax-identifier)',
-      jsx: 'var(--syntax-jsx)',
-      sign: 'var(--syntax-sign)',
-    },
-    surface: {
-      1: 'var(--surface-1)',
-      2: 'var(--surface-2)',
-      3: 'var(--surface-3)',
-      4: 'var(--surface-4)',
-      5: 'var(--surface-5)',
-      6: 'var(--surface-6)',
-      7: 'var(--surface-7)',
-      8: 'var(--surface-8)',
-    },
-  },
-  // Arbitrary `transition-[a,b]` only accepts properties wind4 knows; FF
-  // also tweens these two (icon stroke on hover, the Inter weight ladder).
-  property: {
-    'stroke-width': 'stroke-width',
-    'font-variation-settings': 'font-variation-settings',
-  },
-  shadow: {
-    'surface-1': 'var(--shadow-1)',
-    'surface-2': 'var(--shadow-2)',
-    'surface-3': 'var(--shadow-3)',
-    'surface-4': 'var(--shadow-4)',
-    'surface-5': 'var(--shadow-5)',
-    'surface-6': 'var(--shadow-6)',
-    'surface-7': 'var(--shadow-7)',
-    'surface-8': 'var(--shadow-8)',
-    thumb: 'var(--shadow-thumb)',
-    'picker-thumb': 'var(--shadow-picker-thumb)',
-    'picker-cursor': 'var(--shadow-picker-cursor)',
-    swatch: 'var(--shadow-swatch)',
-    'swatch-hover': 'var(--shadow-swatch-hover)',
-    'swatch-selected': 'var(--shadow-swatch-selected)',
-  },
-  dropShadow: {
-    'picker-cursor': 'var(--drop-shadow-picker-cursor)',
-  },
-}
-
-export const utilities: Record<string, Record<string, string>> = Object.fromEntries([
-  // FF's type-scale roles (upstream `@utility text-display` …), riding the
-  // --text-* and --leading-* tokens in tokens/typography.css; `-compact` is
-  // the ladder's compact step.
-  ...TYPE_ROLES.flatMap(role =>
-    ['', '-compact'].map(step => [
-      `text-${role}${step}`,
-      { 'font-size': `var(--text-${role}${step})`, 'line-height': `var(--leading-${role})` },
-    ]),
-  ),
-  // The Inter weight ladder (font-variation-settings, not font-weight).
-  ...WEIGHTS.map(weight => [`weight-${weight}`, { 'font-variation-settings': `var(--weight-${weight})` }]),
-  // The motion tiers of tokens/motion.css as CSS durations and delays.
-  ...TIERS.flatMap(tier =>
-    ['', '-exit'].flatMap(step => [
-      [
-        `duration-${tier}${step}`,
-        { '--un-duration': `var(--duration-${tier}${step})`, 'transition-duration': `var(--duration-${tier}${step})` },
-      ],
-      [`delay-${tier}${step}`, { 'transition-delay': `var(--duration-${tier}${step})` }],
-    ]),
-  ),
-  ...RADII.map(radius => [`rounded-${radius}`, { 'border-radius': `var(--radius-${radius})` }]),
-])
-
-// In the published package this file is dist/preset.js beside the built
-// components. A host's UnoCSS extracts their classes through
-// `content: { inline: [modoUiContent] }` in its own config: the integrations
-// read `content` from the user config only (never a preset's), and drop
-// `filesystem` files their pipeline filter rejects, which has no `.js`. In the
-// repo these dirs hold no .js, so the docs site scans the source itself.
-const dist = dirname(fileURLToPath(import.meta.url))
-export const COMPONENT_DIRS = ['shared', 'lib', 'primitives', 'components', 'blocks']
-
-export function modoUiContent(): string {
-  return COMPONENT_DIRS.map(dir => join(dist, dir))
-    .filter(dir => existsSync(dir))
-    .flatMap(dir =>
-      readdirSync(dir, { recursive: true, encoding: 'utf8' })
-        .filter(file => file.endsWith('.js'))
-        .map(file => readFileSync(join(dir, file), 'utf8')),
-    )
-    .join('\n')
-}
-
-export function presetModoUi(): Preset {
-  return { name: '@justanarthur/modo-ui', theme, rules: Object.entries(utilities) }
-}
-
-export default presetModoUi

package/primitives/code/examples.mdx

@@ -1,27 +0,0 @@
-# TSX
-
-```tsx
-import { Button } from '@/components/button'
-
-// Every token type has its own color.
-export function Save({ busy }: { busy: boolean }) {
-  return <Button loading={busy}>Save changes</Button>
-}
-```
-
-# Other languages
-
-```css
-.card {
-  background: var(--surface-3);
-  border-radius: 12px;
-}
-```
-
-```sh
-bun add sugar-high # one dependency
-```
-
-```text
-Plain text keeps its own line breaks.
-```

package/primitives/code/index.tsx

@@ -1,80 +0,0 @@
-import { Fragment } from 'react'
-import type { TokenType } from 'sugar-high'
-import { parse } from 'sugar-high/core'
-import { type Language, lang, languages } from 'sugar-high/lang'
-import { SURFACE_BG } from '../../lib/surface-classes'
-import { useSurface } from '../../lib/surface-context'
-import { cn } from '../../lib/utils'
-import ScrollArea from '../scroll-area'
-
-// Literal class names so UnoCSS's extractor sees every one (same reason as
-// SURFACE_BG); colors are the --syntax-* tokens in tokens/colors.css.
-const TOKEN_CLASS: Record<TokenType, string> = {
-  keyword: 'text-syntax-keyword',
-  string: 'text-syntax-string',
-  class: 'text-syntax-class',
-  entity: 'text-syntax-entity',
-  property: 'text-syntax-property',
-  comment: 'text-syntax-comment italic',
-  identifier: 'text-syntax-identifier',
-  jsxliterals: 'text-syntax-jsx',
-  sign: 'text-syntax-sign',
-  break: '',
-  space: '',
-}
-
-function highlight(source: string, language: Language['id']) {
-  const config = languages.find(l => l.id === language)?.config
-  return parse(source, config).lines.map(line => (
-    <Fragment key={line.index}>
-      {line.index > 0 && '\n'}
-      {line.tokens.map((t, i) => (
-        <span key={i} className={TOKEN_CLASS[t.type]}>
-          {t.value}
-        </span>
-      ))}
-    </Fragment>
-  ))
-}
-
-/**
- * Source code in the theme's syntax colors, one surface step above whatever
- * it sits on.
- *
- * sugar-high tokenizes; each token type takes a `--syntax-*` token from
- * tokens/colors.css, so code follows light and dark like everything else.
- * Long lines scroll sideways under a fading edge instead of wrapping. It is
- * also the docs chrome's Code slot: every example's source and every fenced
- * block on these pages renders through it.
- *
- * @example {@include ./examples.mdx}
- */
-export default function Code({
-  children,
-  language = 'tsx',
-  className,
-}: {
-  /** The source to show; surrounding blank lines are trimmed. */
-  children: string
-  /** Fence name, alias or extension (`tsx`, `css`, `sh`, …). Unknown names render as plain text. Defaults to `'tsx'`. */
-  language?: string
-  /** Extra classes for the frame. */
-  className?: string
-}) {
-  const level = Math.min(useSurface() + 1, 8)
-  const source = children.trim()
-  const id = lang(language)
-  return (
-    <ScrollArea
-      orientation="horizontal"
-      viewportClassName="scroll-fade-x"
-      className={cn('rounded-xl', SURFACE_BG[level], className)}
-    >
-      <pre className="m-0 w-max min-w-full p-4 font-mono text-caption leading-relaxed text-foreground">
-        <code>{id && id !== 'plaintext' ? highlight(source, id) : source}</code>
-      </pre>
-    </ScrollArea>
-  )
-}
-
-export { Code }

package/primitives/craft/demos.tsx

@@ -1,173 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the bad side of the Craft
- * page. Each demo breaks exactly one rule of the system on purpose and keeps
- * everything else on tokens, so the comparison shows only that rule. Never
- * copy these into an item.
- */
-
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
-import { motion } from 'motion/react'
-import { useState } from 'react'
-import Button from '../../components/button'
-import { useIcon } from '../../lib/icon-context'
-import { useShape } from '../../lib/shape-context'
-import { useSize } from '../../lib/size-context'
-import { spring } from '../../lib/springs'
-import { SURFACE_BG, SURFACE_SHADOW } from '../../lib/surface-classes'
-import { useSurface } from '../../lib/surface-context'
-import { cn } from '../../lib/utils'
-
-/** The selected label turns bold on the bare text node, so it widens and shoves its neighbours. */
-export function BoldTabs({ labels }: { labels: string[] }) {
-  const [active, setActive] = useState(0)
-  const size = useSize()
-  const shape = useShape()
-
-  return (
-    <div className="flex items-center gap-1">
-      {labels.map((label, i) => (
-        <button
-          key={label}
-          type="button"
-          onClick={() => setActive(i)}
-          className={cn(
-            'cursor-pointer px-3 outline-none',
-            size.control,
-            size.text,
-            shape.bg,
-            i === active ? 'bg-hover font-bold text-foreground' : 'text-muted-foreground',
-          )}
-        >
-          {label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-/** Each row lights itself on `:hover`, so the light blinks off in every gap and jumps between rows. */
-export function RowHover({ items }: { items: string[] }) {
-  const size = useSize()
-  const shape = useShape()
-
-  return (
-    <div className="flex w-56 flex-col gap-1 p-1">
-      {items.map(item => (
-        <button
-          key={item}
-          type="button"
-          className={cn(
-            'flex cursor-pointer items-center text-left text-foreground outline-none hover:bg-hover',
-            size.control,
-            size.itemPx,
-            size.text,
-            shape.bg,
-          )}
-        >
-          {item}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-/** Presses by scaling: the same 4% is 10px sideways on a wide button and under 2px vertically. */
-export function ScalePress() {
-  const size = useSize()
-  const shape = useShape()
-  const button = cn(
-    'flex cursor-pointer items-center justify-center bg-foreground px-4 text-background outline-none',
-    size.control,
-    size.text,
-    shape.button,
-  )
-
-  return (
-    <div className="flex w-64 flex-col items-start gap-3">
-      <motion.button type="button" whileTap={{ scale: 0.96 }} transition={spring.fast} className={button}>
-        Save
-      </motion.button>
-      <motion.button type="button" whileTap={{ scale: 0.96 }} transition={spring.fast} className={cn(button, 'w-full')}>
-        Continue to checkout
-      </motion.button>
-    </div>
-  )
-}
-
-/** Only the small icon copies, and its feedback snaps from one glyph to the other. */
-export function IconCopy({ value }: { value: string }) {
-  const [copied, setCopied] = useState(false)
-  const size = useSize()
-  const shape = useShape()
-  const CopyIcon = useIcon('copy')
-  const CheckIcon = useIcon('check')
-
-  const copy = () => {
-    void navigator.clipboard?.writeText(value)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
-  }
-
-  return (
-    <div className={cn('flex w-64 items-center gap-1 pr-1 pl-2.5 ring-1 ring-border', size.control, shape.input)}>
-      <span className={cn('min-w-0 flex-1 truncate font-mono text-foreground', size.text)}>{value}</span>
-      <Button variant="ghost" size="icon-compact" aria-label="Copy" onClick={copy}>
-        {copied ? <CheckIcon /> : <CopyIcon />}
-      </Button>
-    </div>
-  )
-}
-
-/** The thumb jumps from one end to the other: there is no travel to follow. */
-export function SnapSwitch({ label }: { label: string }) {
-  const [on, setOn] = useState(false)
-  const size = useSize()
-
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={on}
-      onClick={() => setOn(!on)}
-      className="flex cursor-pointer items-center gap-2.5 outline-none"
-    >
-      <span
-        className={cn('flex h-5 w-[34px] rounded-full p-0.5', on ? 'justify-end bg-brand' : 'justify-start bg-accent')}
-      >
-        <span className="size-4 rounded-full bg-thumb shadow-thumb" />
-      </span>
-      <span className={cn(size.text, on ? 'text-foreground' : 'text-muted-foreground')}>{label}</span>
-    </button>
-  )
-}
-
-/** The panel pops in beside the trigger with no link to it, and vanishes the same way. */
-export function PlainPopover({ label, title, description }: { label: string; title: string; description: string }) {
-  const shape = useShape()
-  const level = Math.min(useSurface() + 2, 8)
-
-  return (
-    <PopoverPrimitive.Root>
-      <PopoverPrimitive.Trigger render={<Button variant="secondary">{label}</Button>} />
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Positioner sideOffset={12} className="z-50 outline-none">
-          <PopoverPrimitive.Popup
-            className={cn(
-              'flex w-60 flex-col gap-1 p-4 outline-none',
-              SURFACE_BG[level],
-              SURFACE_SHADOW[3],
-              shape.container,
-            )}
-          >
-            <PopoverPrimitive.Title className="text-subtitle weight-semibold text-foreground">
-              {title}
-            </PopoverPrimitive.Title>
-            <PopoverPrimitive.Description className="text-caption text-muted-foreground">
-              {description}
-            </PopoverPrimitive.Description>
-          </PopoverPrimitive.Popup>
-        </PopoverPrimitive.Positioner>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  )
-}

package/primitives/craft/examples.mdx

@@ -1,142 +0,0 @@
-import Craft from './index'
-import { BoldTabs, IconCopy, PlainPopover, RowHover, ScalePress, SnapSwitch } from './demos'
-import Button from '../../components/button'
-import Copy from '../../components/copy'
-import Switch from '../../components/inputs/switch'
-import TabsSubtle from '../../components/navigation/tabs-subtle'
-import Popover from '../../components/overlays/popover'
-import FluidHover from '../fluid-hover'
-import Elevated from '../surface'
-
-# Interaction
-
-## Weight without reflow
-
-Click through the tabs on each side and watch the labels next to the one you picked.
-
-<Craft
-  bad={<BoldTabs labels={['Overview', 'Activity', 'Settings']} />}
-  badNote="The selected label gets wider, so every tab after it shifts."
-  good={
-    <TabsSubtle defaultSelectedIndex={0}>
-      {['Overview', 'Activity', 'Settings'].map((label, i) => (
-        <TabsSubtle.Item key={label} index={i} label={label} />
-      ))}
-    </TabsSubtle>
-  }
-  goodNote="An invisible semibold copy holds the width, and the weight is paired with an optical size. Nothing moves."
-/>
-
-## Hover that never blinks
-
-Sweep the pointer slowly down each list, through the gaps between rows.
-
-<Craft
-  bad={<RowHover items={['Profile', 'Billing', 'Team', 'Notifications']} />}
-  badNote="Each row lights itself, so the light blinks off in every gap and jumps from row to row."
-  good={<FluidHover className="w-56 p-1" items={['Profile', 'Billing', 'Team', 'Notifications']} />}
-  goodNote="One highlight sits on the nearest row and melts to the next. A click in a gap lands on the lit row."
-/>
-
-## Press that keeps its shape
-
-Press and hold the short button and the wide one on each side.
-
-<Craft
-  bad={<ScalePress />}
-  badNote="A scale warps with width: the wide button loses 10px sideways and under 2px vertically."
-  good={
-    <div className="flex w-64 flex-col items-start gap-3">
-      <Button>Save</Button>
-      <Button className="w-full">Continue to checkout</Button>
-    </div>
-  }
-  goodNote="The fill shrinks exactly 1px per side at any width, releasing slower than it presses."
-/>
-
-## Copy from anywhere
-
-Copy the value on each side.
-
-<Craft
-  bad={<IconCopy value="npm i @justanarthur/modo" />}
-  badNote="Only a 28px icon copies, and its feedback snaps from one glyph to the other."
-  good={
-    <div className="w-64">
-      <Copy value="npm i @justanarthur/modo" />
-    </div>
-  }
-  goodNote="The whole field is the target, and the glyph melts into a check on a success disc."
-/>
-
-## The ring is for the keyboard
-
-Click each button, then press Tab to reach it from the keyboard.
-
-<Craft
-  bad={<Button variant="secondary" className="focus:ring-1 focus:ring-focus-ring">Save draft</Button>}
-  badNote="The ring shows on every click and stays there, so a mouse user sees a stuck outline."
-  good={<Button variant="secondary">Save draft</Button>}
-  goodNote="The ring appears only when focus comes from the keyboard, where it tells you where you are."
-/>
-
-# Motion and surfaces
-
-## Overlays come from somewhere
-
-Open and close the panel on each side.
-
-<Craft
-  bad={<PlainPopover label="Details" title="Shipping" description="Arrives in 2–3 working days." />}
-  badNote="The panel pops in beside the button with nothing linking the two, and vanishes the same way."
-  good={
-    <Popover>
-      <Popover.Trigger render={<Button variant="secondary">Details</Button>} />
-      <Popover.Content className="w-60">
-        <Popover.Title>Shipping</Popover.Title>
-        <Popover.Description>Arrives in 2–3 working days.</Popover.Description>
-      </Popover.Content>
-    </Popover>
-  }
-  goodNote="The panel melts out of the button through a liquid neck, lets go, and closes back into it."
-/>
-
-## Indicators travel
-
-Toggle each switch a few times.
-
-<Craft
-  bad={<SnapSwitch label="Notifications" />}
-  badNote="The thumb teleports from one end to the other. There is no movement to read the change from."
-  good={<Switch label="Notifications" />}
-  goodNote="The thumb travels on a spring and stretches as it goes, so the change reads at a glance."
-/>
-
-## Surfaces lift at any depth
-
-A menu inside a dialog, on each side. Check it in both themes.
-
-<Craft
-  bad={
-    <div className="flex w-60 flex-col gap-3 rounded-xl bg-surface-5 p-4 shadow-surface-5">
-      <span className="text-subtitle weight-semibold text-foreground">Move to</span>
-      <div className="flex flex-col rounded-xl bg-surface-5 p-1">
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Inbox</span>
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Archive</span>
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Trash</span>
-      </div>
-    </div>
-  }
-  badNote="The menu paints a fixed level. Inside the dialog it lands on the dialog's own level and melts into it."
-  good={
-    <Elevated offset={4} className="flex w-60 flex-col gap-3 rounded-xl p-4">
-      <span className="text-subtitle weight-semibold text-foreground">Move to</span>
-      <Elevated offset={2} shadowLevel={3} className="flex flex-col rounded-xl p-1">
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Inbox</span>
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Archive</span>
-        <span className="flex h-9 items-center px-2 text-body text-foreground">Trash</span>
-      </Elevated>
-    </Elevated>
-  }
-  goodNote="The menu lifts 2 levels above whatever it sits on, so it reads as a menu at any depth."
-/>