ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-15 13:58:20 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
59abcdb41cd054e0b2faf732f1c110a356bb03ff
hyperframes/registry/components/select/demo.html
T

403 lines
15 KiB
HTML
Vendored
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Select — Operator Black</title>
<script src="../../ui-primitives/vendor/gsap-3.14.2.min.js"></script>
<style>
html,
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
body {
background: #0a0a0a;
}
.hf-ui-demo-canvas {
width: 1920px;
height: 1080px;
box-sizing: border-box;
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
padding: 96px;
background: #0a0a0a;
color: #e5e5e5;
font-family:
ui-sans-serif,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.hf-ui-demo-stage {
display: grid;
place-items: center;
min-width: 0;
max-width: 100%;
}
.hf-ui-demo-caption {
justify-self: start;
color: #929292;
font:
500 18px/1.4 ui-monospace,
"SFMono-Regular",
Menlo,
Consolas,
monospace;
letter-spacing: 0.01em;
}
</style>
</head>
<body>
<main
class="hf-ui-demo-canvas"
data-composition-id="select-demo"
data-start="0"
data-width="1920"
data-height="1080"
data-duration="4"
data-hf-rendering="true"
data-hf-theme="dark"
>
<!-- prettier-ignore -->
<section class="hf-ui-demo-stage" aria-label="Select specimen" inert>
<!-- hf-ui:canonical:start -->
<!-- Select - animate --hf-select-open from 0 to 1. -->
<div data-hf-ui-root class="hf-ui-select" data-state="closed">
<button
class="hf-ui-select-trigger"
type="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-controls="hf-ui-select-menu"
>
1080p
<span aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="m7 9.5 5 5 5-5" /></svg>
</span>
</button>
<div
id="hf-ui-select-menu"
class="hf-ui-select-menu"
role="listbox"
aria-label="Resolution options"
aria-hidden="true"
>
<div class="hf-ui-select-option is-active" role="option" aria-selected="true">
1080p
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7" /></svg>
</div>
<div class="hf-ui-select-option" role="option" aria-selected="false">4K</div>
<div class="hf-ui-select-option" role="option" aria-selected="false">Square</div>
</div>
</div>
<style>
/* hf-ui:tokens:start */
/* prettier-ignore */
[data-hf-ui-root] {
--_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
--_hf-ui-action: var(--hf-ui-action, #eeeeee);
--_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
--_hf-ui-border: var(--hf-ui-border, #2a2a2a);
--_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
--_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
--_hf-ui-control-border: var(--hf-ui-control-border, #686868);
--_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
--_hf-ui-control-height: var(--hf-ui-control-height, 40px);
--_hf-ui-danger: var(--hf-ui-danger, #ff7878);
--_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
--_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
--_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
--_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
--_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
--_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
--_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
--_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
--_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
--_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
--_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
--_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
--_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
--_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
--_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
--_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
--_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
--_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
--_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
--_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
--_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
--_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
--_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
--_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
--_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
--_hf-ui-space-1: var(--hf-ui-space-1, 4px);
--_hf-ui-space-12: var(--hf-ui-space-12, 48px);
--_hf-ui-space-16: var(--hf-ui-space-16, 64px);
--_hf-ui-space-2: var(--hf-ui-space-2, 8px);
--_hf-ui-space-3: var(--hf-ui-space-3, 12px);
--_hf-ui-space-4: var(--hf-ui-space-4, 16px);
--_hf-ui-space-6: var(--hf-ui-space-6, 24px);
--_hf-ui-space-8: var(--hf-ui-space-8, 32px);
--_hf-ui-surface: var(--hf-ui-surface, #141414);
--_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
--_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
--_hf-ui-text: var(--hf-ui-text, #e5e5e5);
--_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
--_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
--_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
--_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
--_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
--_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
--_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
box-sizing: border-box;
color-scheme: dark;
font-family: var(--_hf-ui-font-sans);
}
/* prettier-ignore */
[data-hf-ui-root] *,
[data-hf-ui-root] *::before,
[data-hf-ui-root] *::after {
box-sizing: border-box;
}
/* prettier-ignore */
[data-hf-theme="light"] [data-hf-ui-root],
[data-hf-ui-root][data-hf-theme="light"] {
--_hf-ui-accent: var(--hf-ui-accent, #087a57);
--_hf-ui-action: var(--hf-ui-action, #171717);
--_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
--_hf-ui-border: var(--hf-ui-border, #e0dfdb);
--_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
--_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
--_hf-ui-control-border: var(--hf-ui-control-border, #888888);
--_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
--_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
--_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
--_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
--_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
--_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
--_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
--_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
--_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
--_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
--_hf-ui-surface: var(--hf-ui-surface, #ffffff);
--_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
--_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
--_hf-ui-text: var(--hf-ui-text, #171717);
--_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
--_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
--_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
--_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
color-scheme: light;
}
/* prettier-ignore */
[data-hf-ui-root]:focus-visible {
outline: 2px solid var(--_hf-ui-accent);
outline-offset: 3px;
}
/* prettier-ignore */
[data-hf-rendering="true"][data-hf-ui-root],
[data-hf-rendering="true"] [data-hf-ui-root],
[data-hf-rendering="true"][data-hf-ui-root] *,
[data-hf-rendering="true"] [data-hf-ui-root] *,
[data-hf-rendering="true"][data-hf-ui-root]::before,
[data-hf-rendering="true"][data-hf-ui-root]::after,
[data-hf-rendering="true"] [data-hf-ui-root]::before,
[data-hf-rendering="true"] [data-hf-ui-root]::after,
[data-hf-rendering="true"][data-hf-ui-root] *::before,
[data-hf-rendering="true"][data-hf-ui-root] *::after,
[data-hf-rendering="true"] [data-hf-ui-root] *::before,
[data-hf-rendering="true"] [data-hf-ui-root] *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* prettier-ignore */
@media (prefers-reduced-motion: reduce) {
[data-hf-ui-root],
[data-hf-ui-root] *,
[data-hf-ui-root] *::before,
[data-hf-ui-root] *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
/* hf-ui:tokens:end */
.hf-ui-select {
--hf-select-open: 0;
position: relative;
display: inline-block;
color: var(--_hf-ui-text);
font-family: var(--_hf-ui-font-sans);
}
.hf-ui-select[data-state="open"] {
--hf-select-open: 1;
}
.hf-ui-select-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
min-width: 160px;
height: var(--_hf-ui-control-height);
padding: 0 var(--_hf-ui-space-3);
border: 1px solid var(--_hf-ui-control-border);
border-radius: var(--_hf-ui-radius-control);
background: var(--_hf-ui-surface);
color: inherit;
font: var(--_hf-ui-weight-medium) 13px/1 var(--_hf-ui-font-sans);
box-shadow: var(--_hf-ui-shadow-inset);
cursor: pointer;
transition:
transform var(--_hf-ui-duration-press) var(--_hf-ui-ease-response),
border-color var(--_hf-ui-duration-state) var(--_hf-ui-ease-response),
background-color var(--_hf-ui-duration-state) var(--_hf-ui-ease-response);
}
.hf-ui-select-trigger span {
display: grid;
place-items: center;
transform: rotate(calc(var(--hf-select-open) * 180deg));
transition: transform var(--_hf-ui-duration-state) var(--_hf-ui-ease-response);
}
.hf-ui-select-trigger svg,
.hf-ui-select-option svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: square;
stroke-linejoin: miter;
}
.hf-ui-select-trigger:focus-visible {
outline: 2px solid var(--_hf-ui-accent);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.hf-ui-select-trigger:hover {
border-color: var(--_hf-ui-control-border-hover);
}
}
.hf-ui-select-trigger:active {
transform: translateY(1px) scale(0.98);
}
.hf-ui-select-trigger:disabled,
.hf-ui-select-trigger[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.48;
transform: none;
}
.hf-ui-select[aria-invalid="true"] .hf-ui-select-trigger,
.hf-ui-select-trigger[aria-invalid="true"] {
border-color: var(--_hf-ui-danger);
}
.hf-ui-select-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
z-index: 10;
padding: var(--_hf-ui-space-1);
border: 1px solid var(--_hf-ui-border-strong);
border-radius: var(--_hf-ui-radius-overlay);
background: var(--_hf-ui-surface-raised);
opacity: var(--hf-select-open);
transform: translateY(calc((1 - var(--hf-select-open)) * -4px))
scale(calc(0.98 + var(--hf-select-open) * 0.02));
transform-origin: top left;
box-shadow: var(--_hf-ui-shadow-contact);
transition:
opacity var(--_hf-ui-duration-overlay-exit) var(--_hf-ui-ease-exit),
transform var(--_hf-ui-duration-overlay-exit) var(--_hf-ui-ease-exit);
}
.hf-ui-select[data-state="open"] .hf-ui-select-menu {
transition-duration: var(--_hf-ui-duration-overlay-enter);
transition-timing-function: var(--_hf-ui-ease-enter);
}
.hf-ui-select-option {
min-height: 40px;
padding: 0 var(--_hf-ui-space-2);
border-radius: var(--_hf-ui-radius-control);
display: flex;
align-items: center;
gap: var(--_hf-ui-space-2);
color: var(--_hf-ui-text-muted);
font-size: 13px;
font-weight: var(--_hf-ui-weight-medium);
}
.hf-ui-select-option.is-active {
background: var(--_hf-ui-surface-inset);
color: var(--_hf-ui-text-strong);
}
.hf-ui-select-option svg {
margin-inline-start: auto;
color: var(--_hf-ui-accent);
}
.hf-ui-select-option[aria-disabled="true"] {
color: var(--_hf-ui-text-faint);
cursor: not-allowed;
opacity: 0.58;
}
@media (pointer: coarse) {
.hf-ui-select-menu {
display: grid;
gap: 4px;
}
.hf-ui-select-trigger {
position: relative;
margin-block: calc((var(--_hf-ui-hit-target) - var(--_hf-ui-control-height)) / 2);
}
.hf-ui-select-trigger::before {
position: absolute;
inset-block: calc((var(--_hf-ui-control-height) - var(--_hf-ui-hit-target)) / 2);
inset-inline: 0;
content: "";
}
.hf-ui-select-option {
position: relative;
}
.hf-ui-select-option::before {
position: absolute;
inset-block: -2px;
inset-inline: 0;
content: "";
}
}
</style>
<!-- hf-ui:canonical:end -->
</section>
<p class="hf-ui-demo-caption">Select</p>
<script>
const tl = gsap.timeline({ paused: true });
const selectRoot = document.querySelector(".hf-ui-select");
const selectTrigger = document.querySelector(".hf-ui-select-trigger");
const selectMenu = document.querySelector(".hf-ui-select-menu");
tl.addLabel("start", 0);
tl.set(selectRoot, { "--hf-select-open": 0, attr: { "data-state": "closed" } }, 0);
tl.set(selectTrigger, { attr: { "aria-expanded": "false" } }, 0);
tl.set(selectMenu, { attr: { "aria-hidden": "true" } }, 0);
tl.addLabel("open", 1);
tl.set(selectRoot, { attr: { "data-state": "open" } }, 1);
tl.set(selectTrigger, { attr: { "aria-expanded": "true" } }, 1);
tl.set(selectMenu, { attr: { "aria-hidden": "false" } }, 1);
tl.fromTo(
selectRoot,
{ "--hf-select-open": 0 },
{ "--hf-select-open": 1, duration: 0.21, ease: "power3.out" },
1,
);
tl.addLabel("end", 3.99);
tl.to(selectRoot, { opacity: 1, duration: 0.01 }, 3.99);
window.__timelines = window.__timelines || {};
window.__timelines["select-demo"] = tl;
</script>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink