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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/dist/build/export-map.json +1 -1
  2. package/dist/{chunk-2UNQJVYN.cjs → chunk-22ZK7BA3.cjs} +1221 -1006
  3. package/dist/{chunk-Y4QRK3CB.cjs → chunk-3BLBWZ6A.cjs} +4 -4
  4. package/dist/{chunk-ZV6473Z4.cjs → chunk-5HMGK3N6.cjs} +18 -18
  5. package/dist/{chunk-HI7EFAFQ.cjs → chunk-5HSMTSHU.cjs} +28 -28
  6. package/dist/{chunk-XDBHGWFH.cjs → chunk-6HHUU56Y.cjs} +16 -16
  7. package/dist/{chunk-A4HNF4MP.cjs → chunk-6KDGIOLP.cjs} +80 -80
  8. package/dist/chunk-AEVGCB3Y.cjs +417 -0
  9. package/dist/{chunk-CLILWI6O.cjs → chunk-BDTX2OEE.cjs} +32 -32
  10. package/dist/{chunk-YDGBRI3Y.cjs → chunk-BS4EZZCN.cjs} +13 -13
  11. package/dist/{chunk-JPZ4Y6X3.cjs → chunk-C5NERNE6.cjs} +89 -89
  12. package/dist/{chunk-YUXRIR45.cjs → chunk-CC3LINHF.cjs} +95 -47
  13. package/dist/{chunk-53XZ6MJ5.cjs → chunk-CUF3IYIB.cjs} +28 -28
  14. package/dist/{chunk-FKKUQK4C.cjs → chunk-G37LT2ID.cjs} +5 -1
  15. package/dist/chunk-HELVKMRG.cjs +28 -0
  16. package/dist/{chunk-HEOD765R.cjs → chunk-HH4BMYDX.cjs} +23 -370
  17. package/dist/{chunk-4YPV4OI4.cjs → chunk-I46MQ4R5.cjs} +80 -80
  18. package/dist/{chunk-RAHRDJBP.cjs → chunk-MEDDKM3A.cjs} +2 -2
  19. package/dist/{chunk-3SWLL4IM.cjs → chunk-MVZ6XFPK.cjs} +6 -6
  20. package/dist/{chunk-TH4N726A.cjs → chunk-N466AJGN.cjs} +17 -17
  21. package/dist/{chunk-QP6QS3YU.cjs → chunk-OI7VCXYU.cjs} +48 -50
  22. package/dist/{chunk-25H2SZH7.cjs → chunk-OJ3XU3YZ.cjs} +4 -4
  23. package/dist/{chunk-JK75ZZP3.cjs → chunk-PRWBVIWW.cjs} +43 -43
  24. package/dist/chunk-PX7FY655.cjs +114 -0
  25. package/dist/{chunk-HLIJ3U2T.cjs → chunk-QMTC3BK3.cjs} +13 -11
  26. package/dist/{chunk-YJFN2W7A.cjs → chunk-RIXGLS5Y.cjs} +3 -3
  27. package/dist/{chunk-BFHLGEJK.cjs → chunk-SJRR745G.cjs} +61 -58
  28. package/dist/{chunk-6V4GEE55.cjs → chunk-TLDCSTTQ.cjs} +8 -8
  29. package/dist/{chunk-RBOIGJYF.cjs → chunk-XOQ2UUVS.cjs} +4 -4
  30. package/dist/{chunk-32ENYVFA.cjs → chunk-YGKVHSNQ.cjs} +42 -42
  31. package/dist/{chunk-HY2KTQSL.cjs → chunk-ZWMPAFGB.cjs} +183 -183
  32. package/dist/{cloud-tenants-SC4FNAC2.cjs → cloud-tenants-ILRE74JY.cjs} +16 -16
  33. package/dist/components/agent-identity.d.ts +8 -0
  34. package/dist/components/agent-identity.d.ts.map +1 -1
  35. package/dist/components/agent-identity.js +13 -1
  36. package/dist/components/case-studies/index.cjs +29 -29
  37. package/dist/components/chat/index.cjs +11 -11
  38. package/dist/components/contact/index.cjs +17 -17
  39. package/dist/components/docs/index.cjs +20 -20
  40. package/dist/components/embeds/index.cjs +17 -17
  41. package/dist/components/faq/index.cjs +17 -17
  42. package/dist/components/features/index.cjs +16 -16
  43. package/dist/components/help-center-pages/index.cjs +127 -127
  44. package/dist/components/index.cjs +79 -72
  45. package/dist/components/meeting-scheduler/index.cjs +47 -47
  46. package/dist/components/navigation/index.cjs +19 -19
  47. package/dist/components/onboarding-guides/index.cjs +19 -19
  48. package/dist/components/product-demo/index.cjs +8 -8
  49. package/dist/components/product-demo/screens/remote-desktop-picture.d.ts.map +1 -1
  50. package/dist/components/product-demo/screens/remote-desktop-picture.js +2 -1
  51. package/dist/components/related-content/index.cjs +6 -6
  52. package/dist/components/tickets/index.cjs +20 -20
  53. package/dist/components/ui/device-wallpaper.d.ts +7 -0
  54. package/dist/components/ui/device-wallpaper.d.ts.map +1 -0
  55. package/dist/components/ui/device-wallpaper.js +5 -0
  56. package/dist/components/ui/feature-list.d.ts +9 -4
  57. package/dist/components/ui/feature-list.d.ts.map +1 -1
  58. package/dist/components/ui/feature-list.js +26 -35
  59. package/dist/components/ui/index.cjs +22 -16
  60. package/dist/components/ui/index.d.ts +3 -1
  61. package/dist/components/ui/index.d.ts.map +1 -1
  62. package/dist/components/ui/index.js +3 -1
  63. package/dist/components/ui/notification-stack.d.ts +33 -0
  64. package/dist/components/ui/notification-stack.d.ts.map +1 -0
  65. package/dist/components/ui/notification-stack.js +78 -0
  66. package/dist/components/ui/numbered-step.d.ts +29 -0
  67. package/dist/components/ui/numbered-step.d.ts.map +1 -0
  68. package/dist/components/ui/numbered-step.js +57 -0
  69. package/dist/components/ui/phone-frame.d.ts +14 -9
  70. package/dist/components/ui/phone-frame.d.ts.map +1 -1
  71. package/dist/components/ui/phone-frame.js +50 -6
  72. package/dist/components/ui/phone-glyphs/lock-camera-glyph.d.ts +5 -0
  73. package/dist/components/ui/phone-glyphs/lock-camera-glyph.d.ts.map +1 -0
  74. package/dist/components/ui/phone-glyphs/lock-camera-glyph.js +14 -0
  75. package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.d.ts +5 -0
  76. package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.d.ts.map +1 -0
  77. package/dist/components/ui/phone-glyphs/lock-flashlight-glyph.js +14 -0
  78. package/dist/components/ui/phone-glyphs/status-bar-glyphs.d.ts +5 -0
  79. package/dist/components/ui/phone-glyphs/status-bar-glyphs.d.ts.map +1 -0
  80. package/dist/components/ui/phone-glyphs/status-bar-glyphs.js +68 -0
  81. package/dist/components/ui/snap-carousel.d.ts +5 -8
  82. package/dist/components/ui/snap-carousel.d.ts.map +1 -1
  83. package/dist/components/ui/snap-carousel.js +2 -27
  84. package/dist/components/ui/tab-navigation.d.ts +8 -1
  85. package/dist/components/ui/tab-navigation.d.ts.map +1 -1
  86. package/dist/components/ui/tab-navigation.js +30 -20
  87. package/dist/{devices-7MHSJNXS.cjs → devices-A6SFNGE4.cjs} +17 -17
  88. package/dist/{embeddable-chat-VPIG3F7E.cjs → embeddable-chat-BKPYNOIM.cjs} +80 -80
  89. package/dist/hooks/index.cjs +6 -6
  90. package/dist/hooks/ui/use-autoplay.d.ts +50 -13
  91. package/dist/hooks/ui/use-autoplay.d.ts.map +1 -1
  92. package/dist/hooks/ui/use-autoplay.js +76 -13
  93. package/dist/hooks/ui/use-in-view.d.ts +8 -0
  94. package/dist/hooks/ui/use-in-view.d.ts.map +1 -1
  95. package/dist/hooks/ui/use-in-view.js +21 -36
  96. package/dist/hooks/use-agent-identities.d.ts +6 -0
  97. package/dist/hooks/use-agent-identities.d.ts.map +1 -1
  98. package/dist/hooks/use-scenario-player.d.ts +26 -9
  99. package/dist/hooks/use-scenario-player.d.ts.map +1 -1
  100. package/dist/hooks/use-scenario-player.js +12 -9
  101. package/dist/index.cjs +51 -44
  102. package/dist/{knowledge-4DREGSOZ.cjs → knowledge-5ZCVKUYV.cjs} +17 -17
  103. package/dist/{logs-BWXNT2KP.cjs → logs-CL4OJASB.cjs} +24 -24
  104. package/dist/{policies-MGFUI23M.cjs → policies-7D44ZVS5.cjs} +20 -20
  105. package/dist/{remote-session-O6QGXV2N.cjs → remote-session-QB3CIZRM.cjs} +5 -4
  106. package/dist/{software-update-7LF7XEYC.cjs → software-update-AX6TZL26.cjs} +20 -20
  107. package/dist/{tickets-board-KNXK747O.cjs → tickets-board-7FAV2YWF.cjs} +10 -10
  108. package/package.json +1 -1
  109. package/src/components/agent-identity.tsx +20 -1
  110. package/src/components/product-demo/screens/remote-desktop-picture.tsx +2 -1
  111. package/src/components/ui/device-wallpaper.ts +7 -0
  112. package/src/components/ui/feature-list.tsx +24 -30
  113. package/src/components/ui/index.ts +3 -1
  114. package/src/components/ui/notification-stack.tsx +133 -0
  115. package/src/components/ui/numbered-step.tsx +81 -0
  116. package/src/components/ui/phone-frame.tsx +83 -19
  117. package/src/components/ui/phone-glyphs/lock-camera-glyph.tsx +14 -0
  118. package/src/components/ui/phone-glyphs/lock-flashlight-glyph.tsx +14 -0
  119. package/src/components/ui/phone-glyphs/status-bar-glyphs.tsx +45 -0
  120. package/src/components/ui/snap-carousel.tsx +6 -38
  121. package/src/components/ui/tab-navigation.tsx +49 -21
  122. package/src/hooks/ui/use-autoplay.ts +144 -27
  123. package/src/hooks/ui/use-in-view.ts +31 -38
  124. package/src/hooks/use-agent-identities.ts +6 -0
  125. package/src/hooks/use-scenario-player.ts +44 -20
  126. package/dist/chunk-2WXLQ5R5.cjs +0 -99
  127. package/dist/chunk-BE2WAMG5.cjs +0 -54
  128. package/dist/chunk-LCTDHLDL.cjs +0 -43
  129. package/dist/components/ui/playback-toggle.d.ts +0 -24
  130. package/dist/components/ui/playback-toggle.d.ts.map +0 -1
  131. package/dist/components/ui/playback-toggle.js +0 -32
  132. package/src/components/ui/playback-toggle.tsx +0 -53
@@ -1,99 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
2
-
3
-
4
- var _chunkMANNIJ42cjs = require('./chunk-MANNIJ42.cjs');
5
-
6
- // src/components/tool-icon.tsx
7
- var _react = require('react');
8
- var TOOL_ICONS = /* @__PURE__ */ new Map();
9
- function toolIcon(toolType) {
10
- const known = TOOL_ICONS.get(toolType);
11
- if (known !== void 0) return known;
12
- const words = toolType.toLowerCase().split("_").filter(Boolean);
13
- let icon = null;
14
- for (let count = words.length; count >= 1 && !icon; count -= 1) {
15
- icon = _chunkMANNIJ42cjs.findIcon.call(void 0, `${words.slice(0, count).join("-")}-logo-grey`);
16
- }
17
- TOOL_ICONS.set(toolType, icon);
18
- return icon;
19
- }
20
- var ToolIcon = ({ toolType, size = 16, className }) => {
21
- const icon = toolIcon(toolType);
22
- return icon ? _react.createElement.call(void 0, icon, { size, className }) : null;
23
- };
24
- ToolIcon.displayName = "ToolIcon";
25
-
26
- // src/utils/common.ts
27
- var _clsx = require('clsx');
28
- var _tailwindmerge = require('tailwind-merge');
29
- function errorMessage(error, fallback = "Something went wrong") {
30
- if (error instanceof Error && error.message) return error.message;
31
- if (typeof error === "string" && error) return error;
32
- if (typeof error === "object" && error !== null) {
33
- const message = error.message;
34
- if (typeof message === "string" && message) return message;
35
- }
36
- return fallback;
37
- }
38
- function apiErrorMessage(payload, fallback) {
39
- if (typeof payload === "object" && payload !== null && "error" in payload) {
40
- const { error } = payload;
41
- if (typeof error === "string" && error) return error;
42
- }
43
- return errorMessage(payload, fallback);
44
- }
45
- function delay(ms) {
46
- return new Promise((resolve) => setTimeout(resolve, ms));
47
- }
48
- function generateRandomString(length = 8) {
49
- const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
50
- let result = "";
51
- for (let i = 0; i < length; i++) {
52
- result += chars.charAt(Math.floor(Math.random() * chars.length));
53
- }
54
- return result;
55
- }
56
- function truncateString(str, maxLength, suffix = "...") {
57
- if (str.length <= maxLength) return str;
58
- return str.substring(0, maxLength - suffix.length) + suffix;
59
- }
60
- function serializeJsonLd(schema) {
61
- return JSON.stringify(schema).replace(/</g, "\\u003c");
62
- }
63
- function deepClone(obj) {
64
- return JSON.parse(JSON.stringify(obj));
65
- }
66
- function getSlackCommunityJoinUrl() {
67
- const url = process.env.NEXT_PUBLIC_SLACK_COMMUNITY_JOIN_URL;
68
- if (!url) {
69
- console.warn("NEXT_PUBLIC_SLACK_COMMUNITY_JOIN_URL is not defined in environment variables");
70
- return "https://join.slack.com/t/openmsp/shared_invite/zt-36bl7mx0h-3~U2nFH6nqHqoTPXMaHEHA";
71
- }
72
- return url;
73
- }
74
- function clamp(value, min, max) {
75
- return Math.min(Math.max(value, min), max);
76
- }
77
- function pick(source, keys) {
78
- const out = {};
79
- for (const key of keys) {
80
- if (key in source) out[key] = source[key];
81
- }
82
- return out;
83
- }
84
- var NO_CLIENT_CACHE = { staleTime: 0 };
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
- exports.ToolIcon = ToolIcon; exports.errorMessage = errorMessage; exports.apiErrorMessage = apiErrorMessage; exports.delay = delay; exports.generateRandomString = generateRandomString; exports.truncateString = truncateString; exports.serializeJsonLd = serializeJsonLd; exports.deepClone = deepClone; exports.getSlackCommunityJoinUrl = getSlackCommunityJoinUrl; exports.clamp = clamp; exports.pick = pick; exports.NO_CLIENT_CACHE = NO_CLIENT_CACHE;
@@ -1,54 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
2
-
3
-
4
-
5
- var _chunkLCTDHLDLcjs = require('./chunk-LCTDHLDL.cjs');
6
-
7
- // src/components/agent-identity.tsx
8
- var _react = require('react');
9
- var _jsxruntime = require('react/jsx-runtime');
10
- var AGENT_GLYPH_COLOR = "var(--color-text-primary)";
11
- var AGENT_PICTURE_CLASS = "rounded-full object-cover";
12
- var AgentIdentityContext = _react.createContext.call(void 0, null);
13
- function Provide({ icons, children }) {
14
- const bySlug = _react.useMemo.call(void 0, () => {
15
- const map = /* @__PURE__ */ new Map();
16
- for (const [slug, icon] of Object.entries(_nullishCoalesce(icons, () => ( {})))) if (icon) map.set(slug, icon);
17
- return map;
18
- }, [icons]);
19
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AgentIdentityContext.Provider, { value: bySlug, children });
20
- }
21
- function ProvideFromServer({
22
- endpoint,
23
- enabled,
24
- children
25
- }) {
26
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Provide, { icons: _chunkLCTDHLDLcjs.useAgentIdentities.call(void 0, endpoint, enabled), children });
27
- }
28
- function AgentIdentityProvider({
29
- icons,
30
- endpoint = _chunkLCTDHLDLcjs.AGENT_IDENTITIES_API_PATH,
31
- enabled = true,
32
- children
33
- }) {
34
- if (icons) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Provide, { icons, children });
35
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProvideFromServer, { endpoint, enabled, children });
36
- }
37
- function useAgentIdentityIcon(slug) {
38
- const identities = _react.useContext.call(void 0, AgentIdentityContext);
39
- const unprovided = !identities && Boolean(slug);
40
- _react.useEffect.call(void 0, () => {
41
- if (!unprovided || process.env.NODE_ENV === "production") return;
42
- console.error(
43
- `[AgentIdentity] the mark of "${slug}" was asked for with no <AgentIdentityProvider> above it: agents are drawn from their server identities only, so mount the provider once at the root.`
44
- );
45
- }, [unprovided, slug]);
46
- return _optionalChain([identities, 'optionalAccess', _ => _.get, 'call', _2 => _2(_nullishCoalesce(slug, () => ( "")))]);
47
- }
48
-
49
-
50
-
51
-
52
-
53
-
54
- exports.AGENT_GLYPH_COLOR = AGENT_GLYPH_COLOR; exports.AGENT_PICTURE_CLASS = AGENT_PICTURE_CLASS; exports.AgentIdentityProvider = AgentIdentityProvider; exports.useAgentIdentityIcon = useAgentIdentityIcon;
@@ -1,43 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
2
-
3
-
4
-
5
- var _chunkVOX4E6AXcjs = require('./chunk-VOX4E6AX.cjs');
6
-
7
- // src/hooks/use-agent-identities.ts
8
- var _reactquery = require('@tanstack/react-query');
9
-
10
- // src/utils/embed-content-fetch.ts
11
- var contentFetch = (input, init) => {
12
- if (!_chunkVOX4E6AXcjs.hasEmbedAuthAdapter.call(void 0, )) return fetch(input, init);
13
- const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
14
- return _chunkVOX4E6AXcjs.embedAuthedFetch.call(void 0, url, init);
15
- };
16
-
17
- // src/hooks/use-agent-identities.ts
18
- var AGENT_IDENTITIES_API_PATH = "/api/ai-agents";
19
- async function fetchAgentIdentities(endpoint, signal) {
20
- const response = await contentFetch(endpoint, { signal });
21
- if (!response.ok) throw new Error(`agent identities read failed (${response.status})`);
22
- const body = await response.json();
23
- const icons = {};
24
- for (const agent of _nullishCoalesce(_optionalChain([body, 'optionalAccess', _ => _.agents]), () => ( []))) if (agent.slug && agent.icon) icons[agent.slug] = agent.icon;
25
- return icons;
26
- }
27
- function useAgentIdentities(endpoint = AGENT_IDENTITIES_API_PATH, enabled = true) {
28
- const { data } = _reactquery.useQuery.call(void 0, {
29
- queryKey: ["agent-identities", endpoint],
30
- queryFn: ({ signal }) => fetchAgentIdentities(endpoint, signal),
31
- staleTime: Infinity,
32
- gcTime: Infinity,
33
- retry: false,
34
- enabled
35
- });
36
- return data;
37
- }
38
-
39
-
40
-
41
-
42
-
43
- exports.contentFetch = contentFetch; exports.AGENT_IDENTITIES_API_PATH = AGENT_IDENTITIES_API_PATH; exports.useAgentIdentities = useAgentIdentities;
@@ -1,24 +0,0 @@
1
- export interface PlaybackToggleProps {
2
- paused: boolean;
3
- onChange: (paused: boolean) => void;
4
- /** The control's name while stopped ("Play demo"). */
5
- playLabel?: string;
6
- /** The control's name while moving ("Pause demo"). */
7
- pauseLabel?: string;
8
- className?: string;
9
- }
10
- /**
11
- * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
12
- * small icon button beside what it controls. A looping demo and an
13
- * auto-advancing carousel show the same one, wired to `useAutoplay`'s
14
- * `paused` / `setPaused`.
15
- *
16
- * It has to be there and easy to reach (a 32px target, a name, a focus ring),
17
- * never the thing the eye lands on: no border and no surface, only a small
18
- * grey glyph that takes the accent on hover and focus. The grey is the muted
19
- * text token, the quietest one that still clears the 3:1 a control's glyph
20
- * needs against the page (WCAG 1.4.11); the next grey down does not. The
21
- * target stays 32px; it is the glyph that is small.
22
- */
23
- export declare function PlaybackToggle({ paused, onChange, playLabel, pauseLabel, className, }: PlaybackToggleProps): import("react").JSX.Element;
24
- //# sourceMappingURL=playback-toggle.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,32 +0,0 @@
1
- "use client";
2
- import { jsx } from "react/jsx-runtime";
3
- import { cn } from "../../utils/cn.js";
4
- import { PauseIcon } from "../icons-v2-generated/media-playback/pause-icon.js";
5
- import { PlayIcon } from "../icons-v2-generated/media-playback/play-icon.js";
6
- import { Button } from "./button/index.js";
7
- function PlaybackToggle({
8
- paused,
9
- onChange,
10
- playLabel = "Play",
11
- pauseLabel = "Pause",
12
- className
13
- }) {
14
- return /* @__PURE__ */ jsx(
15
- Button,
16
- {
17
- variant: "transparent",
18
- size: "icon-sm",
19
- className: cn(
20
- "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",
21
- className
22
- ),
23
- "aria-label": paused ? playLabel : pauseLabel,
24
- "aria-pressed": paused,
25
- onClick: () => onChange(!paused),
26
- children: paused ? /* @__PURE__ */ jsx(PlayIcon, { size: 12 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 12 })
27
- }
28
- );
29
- }
30
- export {
31
- PlaybackToggle
32
- };
@@ -1,53 +0,0 @@
1
- 'use client';
2
-
3
- import { cn } from '../../utils/cn';
4
- import { PauseIcon } from '../icons-v2-generated/media-playback/pause-icon';
5
- import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
6
- import { Button } from './button';
7
-
8
- export interface PlaybackToggleProps {
9
- paused: boolean;
10
- onChange: (paused: boolean) => void;
11
- /** The control's name while stopped ("Play demo"). */
12
- playLabel?: string;
13
- /** The control's name while moving ("Pause demo"). */
14
- pauseLabel?: string;
15
- className?: string;
16
- }
17
-
18
- /**
19
- * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
20
- * small icon button beside what it controls. A looping demo and an
21
- * auto-advancing carousel show the same one, wired to `useAutoplay`'s
22
- * `paused` / `setPaused`.
23
- *
24
- * It has to be there and easy to reach (a 32px target, a name, a focus ring),
25
- * never the thing the eye lands on: no border and no surface, only a small
26
- * grey glyph that takes the accent on hover and focus. The grey is the muted
27
- * text token, the quietest one that still clears the 3:1 a control's glyph
28
- * needs against the page (WCAG 1.4.11); the next grey down does not. The
29
- * target stays 32px; it is the glyph that is small.
30
- */
31
- export function PlaybackToggle({
32
- paused,
33
- onChange,
34
- playLabel = 'Play',
35
- pauseLabel = 'Pause',
36
- className,
37
- }: PlaybackToggleProps) {
38
- return (
39
- <Button
40
- variant="transparent"
41
- size="icon-sm"
42
- className={cn(
43
- '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',
44
- className,
45
- )}
46
- aria-label={paused ? playLabel : pauseLabel}
47
- aria-pressed={paused}
48
- onClick={() => onChange(!paused)}
49
- >
50
- {paused ? <PlayIcon size={12} /> : <PauseIcon size={12} />}
51
- </Button>
52
- );
53
- }