@mieweb/ui 0.9.0 → 0.10.0-dev.0

package/dist/chunk-WYMO3IIK.js

@@ -1,136 +0,0 @@
-import { cn } from './chunk-TQONQSJO.js';
-import * as React from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-// src/motion/presets.ts
-var motionPresets = {
-  /**
-   * Off-canvas panel pinned to the inline-start edge. Animates `x` only, which
-   * the compositor can handle without layout or paint.
-   */
-  drawerStart: {
-    variants: {
-      open: { x: "0%" },
-      // Off-canvas direction follows writing direction, mirroring the
-      // `-translate-x-full rtl:translate-x-full` CSS fallback.
-      closed: (isRtl) => ({ x: isRtl ? "100%" : "-100%" })
-    },
-    transition: { type: "spring", stiffness: 400, damping: 40, mass: 1 }
-  },
-  /** Scrim behind a drawer or modal. */
-  overlay: {
-    variants: {
-      open: { opacity: 1 },
-      closed: { opacity: 0 }
-    },
-    transition: { duration: 0.2, ease: "easeOut" }
-  },
-  /** Centered dialog surface — rises and settles rather than popping. */
-  modalContent: {
-    variants: {
-      open: { opacity: 1, scale: 1, y: 0 },
-      closed: { opacity: 0, scale: 0.96, y: 8 }
-    },
-    transition: { type: "spring", stiffness: 500, damping: 40, mass: 0.8 }
-  },
-  /**
-   * Text that disappears as its container narrows — sidebar labels on collapse.
-   *
-   * Opacity only, and deliberately so. An inline-axis slide would read slightly
-   * better but would make every label direction-aware, and resolving direction
-   * per nav item is a disproportionate amount of plumbing for an 8px nudge.
-   * Fading also degrades to itself under reduced motion instead of becoming a
-   * different animation.
-   *
-   * Short because it runs on many elements at once and has to finish inside the
-   * container's own width transition, or labels are still fading after the rail
-   * has stopped moving.
-   */
-  sidebarLabel: {
-    variants: {
-      open: { opacity: 1 },
-      closed: { opacity: 0 }
-    },
-    transition: { duration: 0.15, ease: "easeOut" }
-  }
-};
-var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@mieweb/ui.motionRuntimeContext.v1");
-function getMotionRuntimeContext() {
-  const globalScope = globalThis;
-  if (!globalScope[CONTEXT_KEY]) {
-    globalScope[CONTEXT_KEY] = React.createContext(null);
-  }
-  return globalScope[CONTEXT_KEY];
-}
-var MotionRuntimeContext = getMotionRuntimeContext();
-function useMotionRuntime() {
-  return React.useContext(MotionRuntimeContext);
-}
-function createPresetPropBuilders() {
-  return {
-    toggle(preset, open, custom) {
-      const { variants, transition } = motionPresets[preset];
-      return {
-        variants,
-        transition,
-        custom,
-        // `false` pins the element to its current variant on mount instead of
-        // animating into it.
-        initial: false,
-        animate: open ? "open" : "closed"
-      };
-    },
-    presence(preset, custom) {
-      const { variants, transition } = motionPresets[preset];
-      return {
-        variants,
-        transition,
-        custom,
-        initial: "closed",
-        animate: "open",
-        exit: "closed"
-      };
-    }
-  };
-}
-var Animated = React.forwardRef(
-  function Animated2({
-    as = "div",
-    preset,
-    mode,
-    open = false,
-    custom,
-    className,
-    fallbackClassName,
-    enabled = true,
-    children,
-    ...rest
-  }, ref) {
-    const runtime = useMotionRuntime();
-    if (!runtime || !runtime.enabled || !enabled) {
-      const Tag = as;
-      return /* @__PURE__ */ jsx(Tag, { ref, className: cn(fallbackClassName, className), ...rest, children });
-    }
-    const Component = as === "nav" ? runtime.Nav : as === "span" ? runtime.Span : runtime.Div;
-    const motionProps = mode === "toggle" ? runtime.toggle(preset, open, custom) : runtime.presence(preset, custom);
-    return /* @__PURE__ */ jsx(Component, { ref, className, ...motionProps, ...rest, children });
-  }
-);
-Animated.displayName = "Animated";
-function AnimatedPresence({
-  children,
-  initial,
-  onExitComplete
-}) {
-  const runtime = useMotionRuntime();
-  if (!runtime) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  const { Presence } = runtime;
-  return /* @__PURE__ */ jsx(Presence, { initial, onExitComplete, children });
-}
-AnimatedPresence.displayName = "AnimatedPresence";
-
-export { Animated, AnimatedPresence, MotionRuntimeContext, createPresetPropBuilders, motionPresets, useMotionRuntime };
-//# sourceMappingURL=chunk-WYMO3IIK.js.map
-//# sourceMappingURL=chunk-WYMO3IIK.js.map

package/dist/chunk-WYMO3IIK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/motion/presets.ts","../src/motion/runtime.ts","../src/motion/Animated.tsx"],"names":["React2","Animated"],"mappings":"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","file":"chunk-WYMO3IIK.js","sourcesContent":["/**\n * Motion presets — the shared vocabulary of animations.\n *\n * This module is intentionally **free of any `motion` import**. It ships in the\n * main `@mieweb/ui` entry so components can describe *what* they animate\n * without pulling in a runtime to actually do it. The `@mieweb/ui/motion` entry\n * is what turns these descriptions into real animations.\n *\n * Every preset is expressed as an open/closed variant pair so the same\n * definition serves both usages:\n *\n * - **toggle** — the element stays mounted and animates between `open` and\n *   `closed` (a drawer sliding in and out).\n * - **presence** — the element mounts and unmounts, entering on `open` and\n *   exiting back to `closed` (a modal).\n */\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Named animation recipes shared by components. */\nexport type MotionPreset =\n  | 'drawerStart'\n  | 'overlay'\n  | 'modalContent'\n  | 'sidebarLabel';\n\n/**\n * A variant value. Either a plain target object or a function of the element's\n * `custom` value — the latter lets a single preset adapt to context, e.g. a\n * drawer flipping its off-canvas direction in RTL.\n */\nexport type MotionVariant =\n  | Record<string, unknown>\n  | ((custom: unknown) => Record<string, unknown>);\n\nexport interface MotionPresetDefinition {\n  variants: {\n    open: MotionVariant;\n    closed: MotionVariant;\n  };\n  transition: Record<string, unknown>;\n}\n\n// =============================================================================\n// Presets\n// =============================================================================\n\n/**\n * `custom` contract per preset:\n *\n * - `drawerStart` — `boolean`, whether the document direction is RTL.\n * - `overlay`, `modalContent`, `sidebarLabel` — unused.\n */\nexport const motionPresets: Record<MotionPreset, MotionPresetDefinition> = {\n  /**\n   * Off-canvas panel pinned to the inline-start edge. Animates `x` only, which\n   * the compositor can handle without layout or paint.\n   */\n  drawerStart: {\n    variants: {\n      open: { x: '0%' },\n      // Off-canvas direction follows writing direction, mirroring the\n      // `-translate-x-full rtl:translate-x-full` CSS fallback.\n      closed: (isRtl: unknown) => ({ x: isRtl ? '100%' : '-100%' }),\n    },\n    transition: { type: 'spring', stiffness: 400, damping: 40, mass: 1 },\n  },\n\n  /** Scrim behind a drawer or modal. */\n  overlay: {\n    variants: {\n      open: { opacity: 1 },\n      closed: { opacity: 0 },\n    },\n    transition: { duration: 0.2, ease: 'easeOut' },\n  },\n\n  /** Centered dialog surface — rises and settles rather than popping. */\n  modalContent: {\n    variants: {\n      open: { opacity: 1, scale: 1, y: 0 },\n      closed: { opacity: 0, scale: 0.96, y: 8 },\n    },\n    transition: { type: 'spring', stiffness: 500, damping: 40, mass: 0.8 },\n  },\n\n  /**\n   * Text that disappears as its container narrows — sidebar labels on collapse.\n   *\n   * Opacity only, and deliberately so. An inline-axis slide would read slightly\n   * better but would make every label direction-aware, and resolving direction\n   * per nav item is a disproportionate amount of plumbing for an 8px nudge.\n   * Fading also degrades to itself under reduced motion instead of becoming a\n   * different animation.\n   *\n   * Short because it runs on many elements at once and has to finish inside the\n   * container's own width transition, or labels are still fading after the rail\n   * has stopped moving.\n   */\n  sidebarLabel: {\n    variants: {\n      open: { opacity: 1 },\n      closed: { opacity: 0 },\n    },\n    transition: { duration: 0.15, ease: 'easeOut' },\n  },\n};\n","/**\n * Motion runtime — the seam between components and an optional animation library.\n *\n * Components in the main entry never import `motion`. They ask this module for\n * a runtime; if an app has opted in by rendering `<MotionProvider>` from\n * `@mieweb/ui/motion`, they get one and animate. If not, `useMotionRuntime()`\n * returns `null` and they fall back to their existing CSS transitions. That is\n * what keeps `motion` out of the bundle of every app that hasn't asked for it —\n * the opt-in is resolved in the *module graph*, not by a prop.\n *\n * Like `presets`, this module must stay free of any `motion` import.\n */\n\nimport * as React from 'react';\nimport { motionPresets, type MotionPreset } from './presets';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface MotionPresenceProps {\n  children?: React.ReactNode;\n  /** Suppress the initial mount animation. */\n  initial?: boolean;\n  /**\n   * Fires once every exiting child has finished and been removed.\n   *\n   * Needed by anything that guards the DOM while it is open — a focus trap, a\n   * scroll lock — because those guards must outlive `open` for as long as the\n   * subtree is still on screen. Never fires when no runtime is active, since\n   * there is no exit to wait for.\n   */\n  onExitComplete?: () => void;\n}\n\n/**\n * The capabilities a motion library must supply. Deliberately small: element\n * factories, a presence wrapper, and prop builders. Components depend on this\n * interface, never on a concrete library, so swapping or dropping the library\n * stays a one-file change.\n */\nexport interface MotionRuntime {\n  /**\n   * Whether animations should actually run.\n   *\n   * A disabled provider still supplies a runtime rather than `null` so that\n   * consumers can tell \"disabled\" apart from \"never opted in\": `Modal` uses it\n   * to decide whether an exit animation will ever report completion, and\n   * `AnimatedPresence` keeps its wrapper element stable across the flip.\n   * `Animated` itself renders the plain fallback tag whenever this is false —\n   * withholding animation props from a mounted motion component corrupts\n   * `toggle`-mode elements, so the swap (and the remount it implies) is the\n   * correct behaviour. See the render branches in `Animated`.\n   */\n  enabled: boolean;\n  /** Animated `div`. */\n  Div: React.ElementType;\n  /** Animated `nav`. */\n  Nav: React.ElementType;\n  /** Animated `span`, for inline content that must not become a block. */\n  Span: React.ElementType;\n  /** Enables exit animations for conditionally rendered children. */\n  Presence: React.ComponentType<MotionPresenceProps>;\n  /**\n   * Props for an element that stays mounted and animates between states.\n   * Skips the initial animation so a closed drawer doesn't slide out on load.\n   */\n  toggle: (\n    preset: MotionPreset,\n    open: boolean,\n    custom?: unknown\n  ) => Record<string, unknown>;\n  /** Props for an element that mounts and unmounts inside `Presence`. */\n  presence: (preset: MotionPreset, custom?: unknown) => Record<string, unknown>;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * The context is stashed on `globalThis` under a registered symbol rather than\n * held in a module-local `const`.\n *\n * `@mieweb/ui` and `@mieweb/ui/motion` are separate bundle entries, and CJS\n * builds cannot code-split. Without this, the provider and the components\n * would each get their own copy of the context object and the provider would\n * silently never be seen — animations would simply never turn on, with no\n * error to explain why. A duplicated install of the package causes the same\n * failure. Keying off the global symbol registry makes the context a true\n * singleton in every one of those cases.\n *\n * The key is versioned. Two copies of this package sharing one page share\n * whatever lives under the key, so the `v1` suffix is a compatibility\n * contract: bump it if the `MotionRuntime` interface ever changes shape,\n * or an old provider will hand a new component a runtime it cannot use.\n */\nconst CONTEXT_KEY = Symbol.for('@mieweb/ui.motionRuntimeContext.v1');\n\ntype GlobalWithMotionContext = typeof globalThis & {\n  [CONTEXT_KEY]?: React.Context<MotionRuntime | null>;\n};\n\nfunction getMotionRuntimeContext(): React.Context<MotionRuntime | null> {\n  const globalScope = globalThis as GlobalWithMotionContext;\n  if (!globalScope[CONTEXT_KEY]) {\n    globalScope[CONTEXT_KEY] = React.createContext<MotionRuntime | null>(null);\n  }\n  return globalScope[CONTEXT_KEY];\n}\n\n/** @internal Consumed by `<MotionProvider>` in the `@mieweb/ui/motion` entry. */\nexport const MotionRuntimeContext = getMotionRuntimeContext();\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\n/**\n * The active motion runtime, or `null` when the app has not opted in.\n *\n * Components must treat `null` as the normal case and keep a CSS path that\n * looks good on its own — motion is an enhancement, never a requirement.\n */\nexport function useMotionRuntime(): MotionRuntime | null {\n  return React.useContext(MotionRuntimeContext);\n}\n\n// =============================================================================\n// Prop builders\n// =============================================================================\n\n/**\n * Builds the `toggle`/`presence` prop builders around a library-agnostic core.\n * Exported so `<MotionProvider>` can assemble a runtime without restating the\n * preset lookup.\n *\n * @internal\n */\nexport function createPresetPropBuilders(): Pick<\n  MotionRuntime,\n  'toggle' | 'presence'\n> {\n  return {\n    toggle(preset, open, custom) {\n      const { variants, transition } = motionPresets[preset];\n      return {\n        variants,\n        transition,\n        custom,\n        // `false` pins the element to its current variant on mount instead of\n        // animating into it.\n        initial: false,\n        animate: open ? 'open' : 'closed',\n      };\n    },\n\n    presence(preset, custom) {\n      const { variants, transition } = motionPresets[preset];\n      return {\n        variants,\n        transition,\n        custom,\n        initial: 'closed',\n        animate: 'open',\n        exit: 'closed',\n      };\n    },\n  };\n}\n","/**\n * `Animated` / `AnimatedPresence` — the ergonomic layer components use.\n *\n * These exist so an individual component never has to branch on whether motion\n * is available. It declares the preset it wants and the CSS classes that stand\n * in when motion is absent; this module picks the element to render.\n *\n * Adding motion to a further component should be a matter of swapping its\n * root `<div>` for an `<Animated>` and naming a preset — no new imports, no\n * new dependency, and no behavior change for apps that have not opted in.\n */\n\nimport * as React from 'react';\nimport { cn } from '../utils/cn';\nimport { useMotionRuntime, type MotionPresenceProps } from './runtime';\nimport type { MotionPreset } from './presets';\n\n// =============================================================================\n// Animated\n// =============================================================================\n\nexport interface AnimatedProps extends React.HTMLAttributes<HTMLElement> {\n  /** Intrinsic element to render. */\n  as?: 'div' | 'nav' | 'span';\n  /** Which shared animation recipe to use. */\n  preset: MotionPreset;\n  /**\n   * - `toggle` — element stays mounted and animates between open and closed.\n   * - `presence` — element mounts and unmounts; wrap it in `<AnimatedPresence>`\n   *   so the exit animation gets a chance to run.\n   */\n  mode: 'toggle' | 'presence';\n  /** Current state. Only read in `toggle` mode. */\n  open?: boolean;\n  /** Per-preset context value — see the `custom` contract in `presets.ts`. */\n  custom?: unknown;\n  /**\n   * Classes applied whenever this element is **not** animating — no provider,\n   * a disabled provider, or `enabled={false}`. This is where a component's\n   * existing CSS transition lives, so the two paths never both try to drive\n   * the same property.\n   */\n  fallbackClassName?: string;\n  /**\n   * Set `false` to stop this element animating even when a runtime is active.\n   *\n   * For states where an animated element would be wrong rather than merely\n   * unnecessary. Motion writes a `transform` to hold an element at its resting\n   * position, and a transformed ancestor becomes the containing block for any\n   * `position: fixed` descendant — so an element that is only sometimes\n   * animated should opt out the rest of the time.\n   *\n   * Flipping this (or the provider's `disabled`) swaps the element back to a\n   * plain tag, which **remounts** it — deliberately. See the note on the\n   * render branches below.\n   */\n  enabled?: boolean;\n}\n\nexport const Animated = React.forwardRef<HTMLElement, AnimatedProps>(\n  function Animated(\n    {\n      as = 'div',\n      preset,\n      mode,\n      open = false,\n      custom,\n      className,\n      fallbackClassName,\n      enabled = true,\n      children,\n      ...rest\n    },\n    ref\n  ) {\n    const runtime = useMotionRuntime();\n\n    /*\n     * Anything not animating renders the plain tag with the CSS fallback —\n     * no provider, a disabled provider, or `enabled={false}` alike.\n     *\n     * Crossing between this branch and the motion one changes the element\n     * type, which remounts the subtree. That is deliberate. The obvious\n     * alternative — keeping the motion component mounted and only withholding\n     * its animation props — corrupts `toggle`-mode elements in both\n     * directions, because motion only writes variant styles at mount or in\n     * response to an animation:\n     *\n     * - props added in place (a drawer crossing into its mobile breakpoint\n     *   while closed) never get the `closed` transform, so the drawer sits\n     *   fully visible over the page;\n     * - props removed in place strand whatever inline `transform` motion last\n     *   wrote, so a sidebar returning to desktop stays off-canvas.\n     *\n     * Fresh mounts are correct in both worlds, so remounting at the flip is\n     * the fix. The flips are rare — a breakpoint cross, a test toggling the\n     * provider — and a remount that resets local state beats a stale\n     * transform that removes the navigation.\n     */\n    if (!runtime || !runtime.enabled || !enabled) {\n      const Tag = as as React.ElementType;\n      return (\n        <Tag ref={ref} className={cn(fallbackClassName, className)} {...rest}>\n          {children}\n        </Tag>\n      );\n    }\n\n    const Component =\n      as === 'nav' ? runtime.Nav : as === 'span' ? runtime.Span : runtime.Div;\n\n    const motionProps =\n      mode === 'toggle'\n        ? runtime.toggle(preset, open, custom)\n        : runtime.presence(preset, custom);\n\n    return (\n      <Component ref={ref} className={className} {...motionProps} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nAnimated.displayName = 'Animated';\n\n// =============================================================================\n// AnimatedPresence\n// =============================================================================\n\n/**\n * Keeps unmounting children on screen long enough to animate out.\n *\n * Without a runtime this is a pass-through, so children disappear immediately —\n * which is exactly what they do today. Children rendered conditionally inside\n * it need a stable `key`.\n */\nexport function AnimatedPresence({\n  children,\n  initial,\n  onExitComplete,\n}: MotionPresenceProps): React.JSX.Element {\n  const runtime = useMotionRuntime();\n\n  if (!runtime) {\n    return <>{children}</>;\n  }\n\n  const { Presence } = runtime;\n  return (\n    <Presence initial={initial} onExitComplete={onExitComplete}>\n      {children}\n    </Presence>\n  );\n}\n\nAnimatedPresence.displayName = 'AnimatedPresence';\n"]}