@a4ui/core 0.30.0 → 0.31.0

package/dist/ui/MorphPresets.d.ts

@@ -0,0 +1,126 @@
+import { JSX } from 'solid-js';
+import { IconMorphButtonVariant } from './IconMorphButton';
+export interface CopyButtonProps {
+    /** Text copied to the clipboard when the button is pressed. */
+    value: string;
+    /** Optional label shown next to the icon before copying. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon once copied. */
+    copiedLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Copy-to-clipboard button that morphs Copy → Check and auto-reverts after
+ * 1.5s.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="npm install @a4ui/core" aria-label="Copy install command" />
+ * ```
+ */
+export declare function CopyButton(props: CopyButtonProps): JSX.Element;
+export interface PlayPauseButtonProps {
+    /** Controlled playing state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial playing state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next playing state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while paused. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while playing. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Play/pause toggle button whose icon morphs Play → Pause.
+ *
+ * @example
+ * ```tsx
+ * <PlayPauseButton defaultPressed={false} aria-label="Play" />
+ * ```
+ */
+export declare function PlayPauseButton(props: PlayPauseButtonProps): JSX.Element;
+export interface MuteButtonProps {
+    /** Controlled muted state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial muted state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next muted state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while unmuted. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while muted. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Mute toggle button whose icon morphs Volume2 → VolumeX.
+ *
+ * @example
+ * ```tsx
+ * <MuteButton defaultPressed={false} aria-label="Mute" />
+ * ```
+ */
+export declare function MuteButton(props: MuteButtonProps): JSX.Element;
+export interface LockButtonProps {
+    /** Controlled locked state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial locked state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next locked state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while unlocked. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while locked. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Lock toggle button whose icon morphs Unlock → Lock.
+ *
+ * @example
+ * ```tsx
+ * <LockButton defaultPressed={false} aria-label="Lock" />
+ * ```
+ */
+export declare function LockButton(props: LockButtonProps): JSX.Element;
+export interface ThemeMorphButtonProps {
+    /** Controlled dark-mode state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial dark-mode state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next dark-mode state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon in light mode. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon in dark mode. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Purely presentational theme toggle whose icon morphs Sun → Moon. Does not
+ * touch the theme system itself — wire `pressed`/`onChange` to your theme
+ * state.
+ *
+ * @example
+ * ```tsx
+ * <ThemeMorphButton pressed={isDark()} onChange={setIsDark} aria-label="Toggle theme" />
+ * ```
+ */
+export declare function ThemeMorphButton(props: ThemeMorphButtonProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.30.0'
+export const A4UI_VERSION = '0.31.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -179,6 +179,18 @@ export { FocusBlurGroup, type FocusBlurGroupProps } from './ui/FocusBlurGroup'
 export { CardSpread, type CardSpreadProps, type CardSpreadLayout } from './ui/CardSpread'
 export { Carousel3D, type Carousel3DProps, type Carousel3DVariant } from './ui/Carousel3D'
 export { TimeMachineStack, type TimeMachineStackProps } from './ui/TimeMachineStack'
+export {
+  CopyButton,
+  type CopyButtonProps,
+  PlayPauseButton,
+  type PlayPauseButtonProps,
+  MuteButton,
+  type MuteButtonProps,
+  LockButton,
+  type LockButtonProps,
+  ThemeMorphButton,
+  type ThemeMorphButtonProps,
+} from './ui/MorphPresets'
 
 // Phase 2 — code, search, navigation, master-detail.
 export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs'

package/src/ui/CardSpread.tsx

@@ -48,10 +48,12 @@ function pseudoRandom(i: number): number {
   return (s - Math.floor(s)) * 2 - 1
 }
 
-function restTransform(i: number): CardTransform {
-  // Tight near-centered stack: a hair of offset/rotation per card so the
-  // pile still reads as separate cards.
-  return { x: i * 1.5, y: -i * 1, rotate: (i % 2 === 0 ? 1 : -1) * 1.5, origin: 'bottom center' }
+function restTransform(i: number, n: number): CardTransform {
+  // Resting deck: a gentle symmetric peek-fan (cards' edges show) so the pile
+  // reads as multiple cards even before it opens, without stealing the reveal.
+  const mid = (n - 1) / 2
+  const d = i - mid
+  return { x: d * 7, y: Math.abs(d) * 2.5, rotate: d * 2.5, origin: 'bottom center' }
 }
 
 function openTransform(layout: CardSpreadLayout, i: number, n: number, spread: number): CardTransform {
@@ -131,7 +133,7 @@ export function CardSpread(props: CardSpreadProps): JSX.Element {
 
     cardRefs.forEach((card, i) => {
       if (!card) return
-      const t = open ? openTransform(layout(), i, n, spread()) : restTransform(i)
+      const t = open ? openTransform(layout(), i, n, spread()) : restTransform(i, n)
       card.style.transformOrigin = t.origin
       card.style.zIndex = String(open ? i : n - i)
 
@@ -183,7 +185,7 @@ export function CardSpread(props: CardSpreadProps): JSX.Element {
           <div
             ref={(el) => (cardRefs[i()] = el)}
             class="absolute inset-x-0 top-0 h-56 w-40 rounded-xl border border-border bg-card text-card-foreground shadow-sm will-change-transform"
-            style={{ transform: transformString(restTransform(i())) }}
+            style={{ transform: transformString(restTransform(i(), props.items.length)) }}
           >
             {item}
           </div>

package/src/ui/MorphPresets.tsx

@@ -0,0 +1,218 @@
+// MorphPresets — thin, opinionated wrappers over IconMorphButton for common
+// two-state icon toggles (copy, play/pause, mute, lock, theme). Each preset
+// only supplies icons + sensible defaults; the morph animation itself lives
+// in IconMorphButton and is not reimplemented here.
+import type { JSX } from 'solid-js'
+import { Check, Copy, Lock, Moon, Pause, Play, Sun, Unlock, Volume2, VolumeX } from 'lucide-solid'
+
+import { IconMorphButton, type IconMorphButtonVariant } from './IconMorphButton'
+
+export interface CopyButtonProps {
+  /** Text copied to the clipboard when the button is pressed. */
+  value: string
+  /** Optional label shown next to the icon before copying. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon once copied. */
+  copiedLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Copy-to-clipboard button that morphs Copy → Check and auto-reverts after
+ * 1.5s.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="npm install @a4ui/core" aria-label="Copy install command" />
+ * ```
+ */
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Copy size={18} />}
+      active={<Check size={18} />}
+      label={props.label}
+      activeLabel={props.copiedLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+      revertAfter={1500}
+      onChange={(pressed) => {
+        if (pressed) void navigator.clipboard?.writeText(props.value)
+      }}
+    />
+  )
+}
+
+export interface PlayPauseButtonProps {
+  /** Controlled playing state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial playing state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next playing state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while paused. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while playing. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Play/pause toggle button whose icon morphs Play → Pause.
+ *
+ * @example
+ * ```tsx
+ * <PlayPauseButton defaultPressed={false} aria-label="Play" />
+ * ```
+ */
+export function PlayPauseButton(props: PlayPauseButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Play size={18} />}
+      active={<Pause size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface MuteButtonProps {
+  /** Controlled muted state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial muted state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next muted state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while unmuted. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while muted. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Mute toggle button whose icon morphs Volume2 → VolumeX.
+ *
+ * @example
+ * ```tsx
+ * <MuteButton defaultPressed={false} aria-label="Mute" />
+ * ```
+ */
+export function MuteButton(props: MuteButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Volume2 size={18} />}
+      active={<VolumeX size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface LockButtonProps {
+  /** Controlled locked state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial locked state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next locked state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while unlocked. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while locked. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Lock toggle button whose icon morphs Unlock → Lock.
+ *
+ * @example
+ * ```tsx
+ * <LockButton defaultPressed={false} aria-label="Lock" />
+ * ```
+ */
+export function LockButton(props: LockButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Unlock size={18} />}
+      active={<Lock size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface ThemeMorphButtonProps {
+  /** Controlled dark-mode state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial dark-mode state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next dark-mode state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon in light mode. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon in dark mode. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Purely presentational theme toggle whose icon morphs Sun → Moon. Does not
+ * touch the theme system itself — wire `pressed`/`onChange` to your theme
+ * state.
+ *
+ * @example
+ * ```tsx
+ * <ThemeMorphButton pressed={isDark()} onChange={setIsDark} aria-label="Toggle theme" />
+ * ```
+ */
+export function ThemeMorphButton(props: ThemeMorphButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Sun size={18} />}
+      active={<Moon size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}