@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

package/dist/components/ui/playback-toggle.d.ts

@@ -1,24 +0,0 @@
-export interface PlaybackToggleProps {
-    paused: boolean;
-    onChange: (paused: boolean) => void;
-    /** The control's name while stopped ("Play demo"). */
-    playLabel?: string;
-    /** The control's name while moving ("Pause demo"). */
-    pauseLabel?: string;
-    className?: string;
-}
-/**
- * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
- * small icon button beside what it controls. A looping demo and an
- * auto-advancing carousel show the same one, wired to `useAutoplay`'s
- * `paused` / `setPaused`.
- *
- * It has to be there and easy to reach (a 32px target, a name, a focus ring),
- * never the thing the eye lands on: no border and no surface, only a small
- * grey glyph that takes the accent on hover and focus. The grey is the muted
- * text token, the quietest one that still clears the 3:1 a control's glyph
- * needs against the page (WCAG 1.4.11); the next grey down does not. The
- * target stays 32px; it is the glyph that is small.
- */
-export declare function PlaybackToggle({ paused, onChange, playLabel, pauseLabel, className, }: PlaybackToggleProps): import("react").JSX.Element;
-//# sourceMappingURL=playback-toggle.d.ts.map

package/dist/components/ui/playback-toggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"playback-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/playback-toggle.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,SAAkB,EAClB,UAAoB,EACpB,SAAS,GACV,EAAE,mBAAmB,+BAgBrB"}

package/dist/components/ui/playback-toggle.js

@@ -1,32 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { PauseIcon } from "../icons-v2-generated/media-playback/pause-icon.js";
-import { PlayIcon } from "../icons-v2-generated/media-playback/play-icon.js";
-import { Button } from "./button/index.js";
-function PlaybackToggle({
-  paused,
-  onChange,
-  playLabel = "Play",
-  pauseLabel = "Pause",
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "transparent",
-      size: "icon-sm",
-      className: cn(
-        "shrink-0 rounded-full border-0 text-ods-text-muted hover:text-ods-accent focus-visible:text-ods-accent [&_svg]:h-3 [&_svg]:w-3",
-        className
-      ),
-      "aria-label": paused ? playLabel : pauseLabel,
-      "aria-pressed": paused,
-      onClick: () => onChange(!paused),
-      children: paused ? /* @__PURE__ */ jsx(PlayIcon, { size: 12 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 12 })
-    }
-  );
-}
-export {
-  PlaybackToggle
-};

package/src/components/ui/playback-toggle.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import { PauseIcon } from '../icons-v2-generated/media-playback/pause-icon';
-import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
-import { Button } from './button';
-
-export interface PlaybackToggleProps {
-  paused: boolean;
-  onChange: (paused: boolean) => void;
-  /** The control's name while stopped ("Play demo"). */
-  playLabel?: string;
-  /** The control's name while moving ("Pause demo"). */
-  pauseLabel?: string;
-  className?: string;
-}
-
-/**
- * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
- * small icon button beside what it controls. A looping demo and an
- * auto-advancing carousel show the same one, wired to `useAutoplay`'s
- * `paused` / `setPaused`.
- *
- * It has to be there and easy to reach (a 32px target, a name, a focus ring),
- * never the thing the eye lands on: no border and no surface, only a small
- * grey glyph that takes the accent on hover and focus. The grey is the muted
- * text token, the quietest one that still clears the 3:1 a control's glyph
- * needs against the page (WCAG 1.4.11); the next grey down does not. The
- * target stays 32px; it is the glyph that is small.
- */
-export function PlaybackToggle({
-  paused,
-  onChange,
-  playLabel = 'Play',
-  pauseLabel = 'Pause',
-  className,
-}: PlaybackToggleProps) {
-  return (
-    <Button
-      variant="transparent"
-      size="icon-sm"
-      className={cn(
-        'shrink-0 rounded-full border-0 text-ods-text-muted hover:text-ods-accent focus-visible:text-ods-accent [&_svg]:h-3 [&_svg]:w-3',
-        className,
-      )}
-      aria-label={paused ? playLabel : pauseLabel}
-      aria-pressed={paused}
-      onClick={() => onChange(!paused)}
-    >
-      {paused ? <PlayIcon size={12} /> : <PauseIcon size={12} />}
-    </Button>
-  );
-}