@refraction-ui/react 0.14.0 → 0.15.0
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.
- package/dist/index.cjs +628 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +619 -1
- package/dist/index.js.map +1 -1
- package/dist/internal/browser-chrome-mock/index.d.ts +57 -0
- package/dist/internal/mastery-bar/index.d.ts +60 -0
- package/dist/internal/numbered-steps/index.d.ts +71 -0
- package/dist/internal/pricing-card/index.d.ts +61 -0
- package/dist/internal/react-audience-feature-card/index.d.ts +22 -0
- package/dist/internal/react-brand-network-cell/index.d.ts +30 -0
- package/dist/internal/react-browser-chrome-mock/index.d.ts +21 -0
- package/dist/internal/react-marquee-strip/index.d.ts +33 -0
- package/dist/internal/react-mastery-bar/index.d.ts +26 -0
- package/dist/internal/react-numbered-steps/index.d.ts +24 -0
- package/dist/internal/react-pricing-card/index.d.ts +40 -0
- package/dist/internal/react-section-head/index.d.ts +27 -0
- package/dist/internal/react-stat-grid/index.d.ts +29 -0
- package/dist/internal/section-head/index.d.ts +36 -0
- package/dist/internal/stat-grid/index.d.ts +45 -0
- package/package.json +10 -1
package/dist/index.cjs
CHANGED
|
@@ -51308,6 +51308,624 @@ var MiniMap = React11__namespace.forwardRef(
|
|
|
51308
51308
|
}
|
|
51309
51309
|
);
|
|
51310
51310
|
MiniMap.displayName = "MiniMap";
|
|
51311
|
+
|
|
51312
|
+
// ../section-head/dist/index.js
|
|
51313
|
+
function createSectionHead(props = {}) {
|
|
51314
|
+
const { align = "center" } = props;
|
|
51315
|
+
const dataAttributes = {
|
|
51316
|
+
"data-align": align
|
|
51317
|
+
};
|
|
51318
|
+
return { dataAttributes };
|
|
51319
|
+
}
|
|
51320
|
+
var sectionHeadVariants = cva({
|
|
51321
|
+
base: "flex flex-col",
|
|
51322
|
+
variants: {
|
|
51323
|
+
align: {
|
|
51324
|
+
center: "mx-auto text-center max-w-2xl",
|
|
51325
|
+
left: "text-left"
|
|
51326
|
+
}
|
|
51327
|
+
},
|
|
51328
|
+
defaultVariants: {
|
|
51329
|
+
align: "center"
|
|
51330
|
+
}
|
|
51331
|
+
});
|
|
51332
|
+
var sectionHeadKickerClass = "text-[11px] uppercase tracking-widest text-primary font-semibold";
|
|
51333
|
+
var sectionHeadTitleClass = "text-3xl sm:text-4xl font-bold tracking-tight text-foreground";
|
|
51334
|
+
var sectionHeadLedeClass = "mt-3 text-muted-foreground leading-relaxed";
|
|
51335
|
+
var SectionHead = React11__namespace.forwardRef(
|
|
51336
|
+
({
|
|
51337
|
+
kicker,
|
|
51338
|
+
title,
|
|
51339
|
+
lede,
|
|
51340
|
+
align = "center",
|
|
51341
|
+
as: Tag = "h2",
|
|
51342
|
+
className,
|
|
51343
|
+
...props
|
|
51344
|
+
}, ref) => {
|
|
51345
|
+
const { dataAttributes } = createSectionHead({ align });
|
|
51346
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51347
|
+
"div",
|
|
51348
|
+
{
|
|
51349
|
+
ref,
|
|
51350
|
+
className: cn(sectionHeadVariants({ align }), className),
|
|
51351
|
+
...dataAttributes,
|
|
51352
|
+
...props,
|
|
51353
|
+
children: [
|
|
51354
|
+
kicker != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: sectionHeadKickerClass, children: kicker }),
|
|
51355
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tag, { className: sectionHeadTitleClass, children: title }),
|
|
51356
|
+
lede != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: sectionHeadLedeClass, children: lede })
|
|
51357
|
+
]
|
|
51358
|
+
}
|
|
51359
|
+
);
|
|
51360
|
+
}
|
|
51361
|
+
);
|
|
51362
|
+
SectionHead.displayName = "SectionHead";
|
|
51363
|
+
|
|
51364
|
+
// ../stat-grid/dist/index.js
|
|
51365
|
+
function statColumns(count, max = 3) {
|
|
51366
|
+
if (count <= 0) return 1;
|
|
51367
|
+
if (count === 1) return 1;
|
|
51368
|
+
if (count === 2) return 2;
|
|
51369
|
+
return Math.min(count, max);
|
|
51370
|
+
}
|
|
51371
|
+
function createStatGrid() {
|
|
51372
|
+
return {
|
|
51373
|
+
ariaProps: { role: "list" },
|
|
51374
|
+
dataAttributes: {}
|
|
51375
|
+
};
|
|
51376
|
+
}
|
|
51377
|
+
var statGridVariants = cva({
|
|
51378
|
+
base: "grid gap-8",
|
|
51379
|
+
variants: {
|
|
51380
|
+
columns: {
|
|
51381
|
+
"1": "grid-cols-1",
|
|
51382
|
+
"2": "grid-cols-2",
|
|
51383
|
+
"3": "grid-cols-3"
|
|
51384
|
+
}
|
|
51385
|
+
},
|
|
51386
|
+
defaultVariants: {
|
|
51387
|
+
columns: "3"
|
|
51388
|
+
}
|
|
51389
|
+
});
|
|
51390
|
+
var statItemClass = "flex flex-col";
|
|
51391
|
+
var statValueClass = "text-xl sm:text-2xl font-bold text-primary";
|
|
51392
|
+
var statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
|
|
51393
|
+
var StatGrid = React11__namespace.forwardRef(
|
|
51394
|
+
({ items, columns, className, ...props }, ref) => {
|
|
51395
|
+
const cols = columns ?? statColumns(items.length);
|
|
51396
|
+
const { ariaProps, dataAttributes } = createStatGrid();
|
|
51397
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51398
|
+
"div",
|
|
51399
|
+
{
|
|
51400
|
+
ref,
|
|
51401
|
+
className: cn(
|
|
51402
|
+
statGridVariants({ columns: String(cols) }),
|
|
51403
|
+
className
|
|
51404
|
+
),
|
|
51405
|
+
style: { gridTemplateColumns: `repeat(${cols}, 1fr)` },
|
|
51406
|
+
...ariaProps,
|
|
51407
|
+
...dataAttributes,
|
|
51408
|
+
...props,
|
|
51409
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: statItemClass, children: [
|
|
51410
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: statValueClass, children: item.value }),
|
|
51411
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: statLabelClass, children: item.label })
|
|
51412
|
+
] }, index))
|
|
51413
|
+
}
|
|
51414
|
+
);
|
|
51415
|
+
}
|
|
51416
|
+
);
|
|
51417
|
+
StatGrid.displayName = "StatGrid";
|
|
51418
|
+
|
|
51419
|
+
// ../numbered-steps/dist/index.js
|
|
51420
|
+
function padOrdinal(n2) {
|
|
51421
|
+
return String(n2).padStart(2, "0");
|
|
51422
|
+
}
|
|
51423
|
+
function stepColumns(count) {
|
|
51424
|
+
return Math.min(5, Math.max(2, count));
|
|
51425
|
+
}
|
|
51426
|
+
function createNumberedSteps() {
|
|
51427
|
+
const ariaProps = { role: "list" };
|
|
51428
|
+
const dataAttributes = {
|
|
51429
|
+
"data-component": "numbered-steps"
|
|
51430
|
+
};
|
|
51431
|
+
return { ariaProps, dataAttributes };
|
|
51432
|
+
}
|
|
51433
|
+
var numberedStepsVariants = cva({
|
|
51434
|
+
base: "grid gap-6",
|
|
51435
|
+
variants: {
|
|
51436
|
+
columns: {
|
|
51437
|
+
"2": "grid-cols-2",
|
|
51438
|
+
"3": "grid-cols-3",
|
|
51439
|
+
"4": "grid-cols-4",
|
|
51440
|
+
"5": "grid-cols-5"
|
|
51441
|
+
}
|
|
51442
|
+
},
|
|
51443
|
+
defaultVariants: {
|
|
51444
|
+
columns: "3"
|
|
51445
|
+
}
|
|
51446
|
+
});
|
|
51447
|
+
var numberedStepsItemClass = "rounded-xl border border-border bg-card p-5";
|
|
51448
|
+
var numberedStepsOrdinalClass = "font-mono text-sm text-primary";
|
|
51449
|
+
var numberedStepsTitleClass = "mt-2 text-sm font-bold text-foreground";
|
|
51450
|
+
var numberedStepsBodyClass = "mt-1 text-xs text-muted-foreground leading-relaxed";
|
|
51451
|
+
var NumberedSteps = React11__namespace.forwardRef(({ items, columns, className, ...props }, ref) => {
|
|
51452
|
+
const cols = columns ?? stepColumns(items.length);
|
|
51453
|
+
const { ariaProps, dataAttributes } = createNumberedSteps();
|
|
51454
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51455
|
+
"div",
|
|
51456
|
+
{
|
|
51457
|
+
ref,
|
|
51458
|
+
className: cn(numberedStepsVariants(), className),
|
|
51459
|
+
style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
|
|
51460
|
+
...ariaProps,
|
|
51461
|
+
...dataAttributes,
|
|
51462
|
+
...props,
|
|
51463
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: numberedStepsItemClass, children: [
|
|
51464
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: numberedStepsOrdinalClass, children: padOrdinal(index + 1) }),
|
|
51465
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: numberedStepsTitleClass, children: item.title }),
|
|
51466
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: numberedStepsBodyClass, children: item.body })
|
|
51467
|
+
] }, index))
|
|
51468
|
+
}
|
|
51469
|
+
);
|
|
51470
|
+
});
|
|
51471
|
+
NumberedSteps.displayName = "NumberedSteps";
|
|
51472
|
+
|
|
51473
|
+
// ../pricing-card/dist/index.js
|
|
51474
|
+
function createPricingCard(options = {}) {
|
|
51475
|
+
const { featured = false } = options;
|
|
51476
|
+
const ariaProps = {
|
|
51477
|
+
role: "group"
|
|
51478
|
+
};
|
|
51479
|
+
const dataAttributes = {
|
|
51480
|
+
"data-featured": String(featured)
|
|
51481
|
+
};
|
|
51482
|
+
return { ariaProps, dataAttributes };
|
|
51483
|
+
}
|
|
51484
|
+
var pricingCardVariants = cva({
|
|
51485
|
+
base: [
|
|
51486
|
+
"relative flex flex-col rounded-2xl border border-border bg-card p-6",
|
|
51487
|
+
"transition-shadow"
|
|
51488
|
+
].join(" "),
|
|
51489
|
+
variants: {
|
|
51490
|
+
featured: {
|
|
51491
|
+
true: "ring-1 ring-primary",
|
|
51492
|
+
false: ""
|
|
51493
|
+
}
|
|
51494
|
+
},
|
|
51495
|
+
defaultVariants: {
|
|
51496
|
+
featured: "false"
|
|
51497
|
+
}
|
|
51498
|
+
});
|
|
51499
|
+
var pricingCardBadgeClass = "mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary";
|
|
51500
|
+
var pricingCardNameClass = "text-lg font-bold text-foreground";
|
|
51501
|
+
var pricingCardPriceClass = "text-3xl font-bold text-foreground";
|
|
51502
|
+
var pricingCardPeriodClass = "text-sm text-muted-foreground";
|
|
51503
|
+
var pricingCardDescriptionClass = "text-sm text-muted-foreground";
|
|
51504
|
+
var pricingCardFeatureListClass = "flex flex-col gap-2";
|
|
51505
|
+
var pricingCardFeatureRowClass = "flex items-start gap-2 text-sm text-foreground";
|
|
51506
|
+
var pricingCardFeatureTickClass = "mt-0.5 size-4 shrink-0 text-primary";
|
|
51507
|
+
var pricingCtaVariants = cva({
|
|
51508
|
+
base: [
|
|
51509
|
+
"mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2",
|
|
51510
|
+
"text-sm font-medium transition-colors",
|
|
51511
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
51512
|
+
"disabled:pointer-events-none disabled:opacity-50"
|
|
51513
|
+
].join(" "),
|
|
51514
|
+
variants: {
|
|
51515
|
+
variant: {
|
|
51516
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
51517
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
|
|
51518
|
+
}
|
|
51519
|
+
},
|
|
51520
|
+
defaultVariants: {
|
|
51521
|
+
variant: "default"
|
|
51522
|
+
}
|
|
51523
|
+
});
|
|
51524
|
+
var PricingCard = React11__namespace.forwardRef(
|
|
51525
|
+
({
|
|
51526
|
+
badge,
|
|
51527
|
+
name,
|
|
51528
|
+
price,
|
|
51529
|
+
period,
|
|
51530
|
+
description,
|
|
51531
|
+
features,
|
|
51532
|
+
cta,
|
|
51533
|
+
ctaVariant = "default",
|
|
51534
|
+
ctaHref,
|
|
51535
|
+
onCtaClick,
|
|
51536
|
+
featured = false,
|
|
51537
|
+
className,
|
|
51538
|
+
...props
|
|
51539
|
+
}, ref) => {
|
|
51540
|
+
const { ariaProps, dataAttributes } = createPricingCard({ featured });
|
|
51541
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51542
|
+
"div",
|
|
51543
|
+
{
|
|
51544
|
+
ref,
|
|
51545
|
+
className: cn(pricingCardVariants({ featured: featured ? "true" : "false" }), className),
|
|
51546
|
+
...ariaProps,
|
|
51547
|
+
...dataAttributes,
|
|
51548
|
+
...props,
|
|
51549
|
+
children: [
|
|
51550
|
+
badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardBadgeClass, children: badge }),
|
|
51551
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: pricingCardNameClass, children: name }),
|
|
51552
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-baseline gap-1", children: [
|
|
51553
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardPriceClass, children: price }),
|
|
51554
|
+
period != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: pricingCardPeriodClass, children: period })
|
|
51555
|
+
] }),
|
|
51556
|
+
description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-2 ${pricingCardDescriptionClass}`, children: description }),
|
|
51557
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: `mt-6 ${pricingCardFeatureListClass}`, children: features.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: pricingCardFeatureRowClass, children: [
|
|
51558
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51559
|
+
"svg",
|
|
51560
|
+
{
|
|
51561
|
+
className: pricingCardFeatureTickClass,
|
|
51562
|
+
viewBox: "0 0 16 16",
|
|
51563
|
+
fill: "none",
|
|
51564
|
+
"aria-hidden": "true",
|
|
51565
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51566
|
+
"path",
|
|
51567
|
+
{
|
|
51568
|
+
d: "M3 8l3.5 3.5L13 4.5",
|
|
51569
|
+
stroke: "currentColor",
|
|
51570
|
+
strokeWidth: "1.75",
|
|
51571
|
+
strokeLinecap: "round",
|
|
51572
|
+
strokeLinejoin: "round"
|
|
51573
|
+
}
|
|
51574
|
+
)
|
|
51575
|
+
}
|
|
51576
|
+
),
|
|
51577
|
+
feature
|
|
51578
|
+
] }, feature)) }),
|
|
51579
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: ctaHref != null ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
51580
|
+
"a",
|
|
51581
|
+
{
|
|
51582
|
+
href: ctaHref,
|
|
51583
|
+
className: pricingCtaVariants({ variant: ctaVariant }),
|
|
51584
|
+
children: cta
|
|
51585
|
+
}
|
|
51586
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
51587
|
+
"button",
|
|
51588
|
+
{
|
|
51589
|
+
type: "button",
|
|
51590
|
+
className: pricingCtaVariants({ variant: ctaVariant }),
|
|
51591
|
+
onClick: onCtaClick,
|
|
51592
|
+
children: cta
|
|
51593
|
+
}
|
|
51594
|
+
) })
|
|
51595
|
+
]
|
|
51596
|
+
}
|
|
51597
|
+
);
|
|
51598
|
+
}
|
|
51599
|
+
);
|
|
51600
|
+
PricingCard.displayName = "PricingCard";
|
|
51601
|
+
|
|
51602
|
+
// ../brand-network-cell/dist/index.js
|
|
51603
|
+
function createBrandNetworkCell(props = {}) {
|
|
51604
|
+
const { current = false } = props;
|
|
51605
|
+
const ariaProps = {
|
|
51606
|
+
role: "group"
|
|
51607
|
+
};
|
|
51608
|
+
const dataAttributes = {
|
|
51609
|
+
"data-current": String(current)
|
|
51610
|
+
};
|
|
51611
|
+
return { ariaProps, dataAttributes };
|
|
51612
|
+
}
|
|
51613
|
+
var brandNetworkCellVariants = cva({
|
|
51614
|
+
base: [
|
|
51615
|
+
"relative rounded-xl border border-border bg-card p-4",
|
|
51616
|
+
"flex flex-col gap-3 transition-shadow"
|
|
51617
|
+
].join(" "),
|
|
51618
|
+
variants: {
|
|
51619
|
+
current: {
|
|
51620
|
+
true: "ring-1 ring-primary",
|
|
51621
|
+
false: ""
|
|
51622
|
+
}
|
|
51623
|
+
},
|
|
51624
|
+
defaultVariants: {
|
|
51625
|
+
current: "false"
|
|
51626
|
+
}
|
|
51627
|
+
});
|
|
51628
|
+
var brandNetworkCellGlyphClass = "flex size-10 items-center justify-center rounded-lg text-sm font-bold";
|
|
51629
|
+
var brandNetworkCellDomainClass = "font-semibold text-foreground";
|
|
51630
|
+
var brandNetworkCellCurrentBadgeClass = "inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary";
|
|
51631
|
+
var brandNetworkCellBodyClass = "text-sm text-muted-foreground";
|
|
51632
|
+
var brandNetworkCellLinkClass = "text-sm text-primary";
|
|
51633
|
+
var BrandNetworkCell = React11__namespace.forwardRef(
|
|
51634
|
+
({
|
|
51635
|
+
glyph,
|
|
51636
|
+
glyphBg,
|
|
51637
|
+
glyphColor,
|
|
51638
|
+
domain,
|
|
51639
|
+
body,
|
|
51640
|
+
href,
|
|
51641
|
+
linkLabel,
|
|
51642
|
+
current = false,
|
|
51643
|
+
className,
|
|
51644
|
+
...props
|
|
51645
|
+
}, ref) => {
|
|
51646
|
+
const api = createBrandNetworkCell({ current });
|
|
51647
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51648
|
+
"div",
|
|
51649
|
+
{
|
|
51650
|
+
ref,
|
|
51651
|
+
className: cn(
|
|
51652
|
+
brandNetworkCellVariants({ current: current ? "true" : "false" }),
|
|
51653
|
+
className
|
|
51654
|
+
),
|
|
51655
|
+
...api.ariaProps,
|
|
51656
|
+
...api.dataAttributes,
|
|
51657
|
+
...props,
|
|
51658
|
+
children: [
|
|
51659
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51660
|
+
"div",
|
|
51661
|
+
{
|
|
51662
|
+
className: brandNetworkCellGlyphClass,
|
|
51663
|
+
style: { background: glyphBg, color: glyphColor },
|
|
51664
|
+
"aria-hidden": "true",
|
|
51665
|
+
children: glyph
|
|
51666
|
+
}
|
|
51667
|
+
),
|
|
51668
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
51669
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: brandNetworkCellDomainClass, children: domain }),
|
|
51670
|
+
current && /* @__PURE__ */ jsxRuntime.jsx("span", { className: brandNetworkCellCurrentBadgeClass, children: "You are here" })
|
|
51671
|
+
] }),
|
|
51672
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: brandNetworkCellBodyClass, children: body }),
|
|
51673
|
+
href != null && /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: brandNetworkCellLinkClass, children: linkLabel ?? "Visit \u2192" })
|
|
51674
|
+
]
|
|
51675
|
+
}
|
|
51676
|
+
);
|
|
51677
|
+
}
|
|
51678
|
+
);
|
|
51679
|
+
BrandNetworkCell.displayName = "BrandNetworkCell";
|
|
51680
|
+
|
|
51681
|
+
// ../marquee-strip/dist/index.js
|
|
51682
|
+
function createMarqueeStrip(props = {}) {
|
|
51683
|
+
const { scroll = false } = props;
|
|
51684
|
+
const ariaProps = {
|
|
51685
|
+
role: "group"
|
|
51686
|
+
};
|
|
51687
|
+
const dataAttributes = {
|
|
51688
|
+
"data-scroll": String(scroll)
|
|
51689
|
+
};
|
|
51690
|
+
return { ariaProps, dataAttributes };
|
|
51691
|
+
}
|
|
51692
|
+
var marqueeStripVariants = cva({
|
|
51693
|
+
base: "w-full bg-muted/30 border-y border-border py-3",
|
|
51694
|
+
variants: {
|
|
51695
|
+
scroll: {
|
|
51696
|
+
true: "",
|
|
51697
|
+
false: ""
|
|
51698
|
+
}
|
|
51699
|
+
},
|
|
51700
|
+
defaultVariants: {
|
|
51701
|
+
scroll: "false"
|
|
51702
|
+
}
|
|
51703
|
+
});
|
|
51704
|
+
var marqueeStripInnerClass = "flex flex-wrap items-center gap-3 px-4";
|
|
51705
|
+
var marqueeStripScrollOuterClass = "overflow-hidden px-4";
|
|
51706
|
+
var marqueeStripScrollTrackClass = "flex items-center gap-3 w-max animate-[marquee_30s_linear_infinite]";
|
|
51707
|
+
var marqueeStripLabelClass = "text-xs font-semibold uppercase tracking-widest text-muted-foreground shrink-0";
|
|
51708
|
+
var marqueeStripItemClass = "text-sm text-foreground";
|
|
51709
|
+
var MarqueeStrip = React11__namespace.forwardRef(
|
|
51710
|
+
({ label, items, scroll = false, className, ...props }, ref) => {
|
|
51711
|
+
const api = createMarqueeStrip({ scroll });
|
|
51712
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51713
|
+
"div",
|
|
51714
|
+
{
|
|
51715
|
+
ref,
|
|
51716
|
+
className: cn(marqueeStripVariants({ scroll: scroll ? "true" : "false" }), className),
|
|
51717
|
+
...api.ariaProps,
|
|
51718
|
+
...api.dataAttributes,
|
|
51719
|
+
...props,
|
|
51720
|
+
children: scroll ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: marqueeStripScrollOuterClass, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: marqueeStripScrollTrackClass, children: [...items, ...items].map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripItemClass, children: item }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: marqueeStripInnerClass, children: [
|
|
51721
|
+
label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripLabelClass, children: label }),
|
|
51722
|
+
items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: marqueeStripItemClass, children: item }, index))
|
|
51723
|
+
] })
|
|
51724
|
+
}
|
|
51725
|
+
);
|
|
51726
|
+
}
|
|
51727
|
+
);
|
|
51728
|
+
MarqueeStrip.displayName = "MarqueeStrip";
|
|
51729
|
+
|
|
51730
|
+
// ../browser-chrome-mock/dist/index.js
|
|
51731
|
+
function splitUrl(url) {
|
|
51732
|
+
const slashIndex = url.indexOf("/");
|
|
51733
|
+
if (slashIndex === -1) {
|
|
51734
|
+
return { domain: url, path: "" };
|
|
51735
|
+
}
|
|
51736
|
+
return {
|
|
51737
|
+
domain: url.slice(0, slashIndex),
|
|
51738
|
+
path: url.slice(slashIndex)
|
|
51739
|
+
};
|
|
51740
|
+
}
|
|
51741
|
+
function createBrowserChromeMock(props = {}) {
|
|
51742
|
+
const { status } = props;
|
|
51743
|
+
const ariaProps = {
|
|
51744
|
+
role: "group",
|
|
51745
|
+
"aria-label": "Browser preview"
|
|
51746
|
+
};
|
|
51747
|
+
const dataAttributes = {};
|
|
51748
|
+
if (status !== void 0) {
|
|
51749
|
+
dataAttributes["data-status"] = status;
|
|
51750
|
+
}
|
|
51751
|
+
return { ariaProps, dataAttributes };
|
|
51752
|
+
}
|
|
51753
|
+
var browserChromeMockVariants = cva({
|
|
51754
|
+
base: "rounded-xl border border-border overflow-hidden bg-card",
|
|
51755
|
+
variants: {},
|
|
51756
|
+
defaultVariants: {}
|
|
51757
|
+
});
|
|
51758
|
+
var chromeBarClass = "flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2";
|
|
51759
|
+
var trafficDotClass = "size-2.5 rounded-full border border-border";
|
|
51760
|
+
var urlBarClass = "flex-1 text-center font-mono text-[11px] text-muted-foreground";
|
|
51761
|
+
var urlDomainClass = "font-semibold text-foreground";
|
|
51762
|
+
var statusBadgeVariants = cva({
|
|
51763
|
+
base: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
|
|
51764
|
+
variants: {
|
|
51765
|
+
status: {
|
|
51766
|
+
live: "text-emerald-500 bg-emerald-500/10",
|
|
51767
|
+
rec: "text-destructive bg-destructive/10"
|
|
51768
|
+
}
|
|
51769
|
+
},
|
|
51770
|
+
defaultVariants: {
|
|
51771
|
+
status: "live"
|
|
51772
|
+
}
|
|
51773
|
+
});
|
|
51774
|
+
var contentAreaClass = "p-0";
|
|
51775
|
+
var TRAFFIC_DOTS = ["bg-red-400", "bg-yellow-400", "bg-green-400"];
|
|
51776
|
+
var BrowserChromeMock = React11__namespace.forwardRef(({ url, status, className, children, ...props }, ref) => {
|
|
51777
|
+
const { ariaProps, dataAttributes } = createBrowserChromeMock({ status });
|
|
51778
|
+
const { domain, path } = splitUrl(url);
|
|
51779
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51780
|
+
"div",
|
|
51781
|
+
{
|
|
51782
|
+
ref,
|
|
51783
|
+
className: cn(browserChromeMockVariants(), className),
|
|
51784
|
+
...ariaProps,
|
|
51785
|
+
...dataAttributes,
|
|
51786
|
+
...props,
|
|
51787
|
+
children: [
|
|
51788
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chromeBarClass, children: [
|
|
51789
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 shrink-0", children: TRAFFIC_DOTS.map((color) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(trafficDotClass, color) }, color)) }),
|
|
51790
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: urlBarClass, children: [
|
|
51791
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: urlDomainClass, children: domain }),
|
|
51792
|
+
path && /* @__PURE__ */ jsxRuntime.jsx("span", { children: path })
|
|
51793
|
+
] }),
|
|
51794
|
+
status && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: statusBadgeVariants({ status }), children: [
|
|
51795
|
+
status === "rec" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-destructive animate-pulse" }),
|
|
51796
|
+
status
|
|
51797
|
+
] })
|
|
51798
|
+
] }),
|
|
51799
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: contentAreaClass, children })
|
|
51800
|
+
]
|
|
51801
|
+
}
|
|
51802
|
+
);
|
|
51803
|
+
});
|
|
51804
|
+
BrowserChromeMock.displayName = "BrowserChromeMock";
|
|
51805
|
+
|
|
51806
|
+
// ../mastery-bar/dist/index.js
|
|
51807
|
+
function clampPercent(value) {
|
|
51808
|
+
if (Number.isNaN(value)) return 0;
|
|
51809
|
+
return Math.min(100, Math.max(0, value));
|
|
51810
|
+
}
|
|
51811
|
+
function createMasteryBar({ value }) {
|
|
51812
|
+
const clamped = clampPercent(value);
|
|
51813
|
+
const ariaProps = {
|
|
51814
|
+
role: "progressbar",
|
|
51815
|
+
"aria-valuenow": clamped,
|
|
51816
|
+
"aria-valuemin": 0,
|
|
51817
|
+
"aria-valuemax": 100
|
|
51818
|
+
};
|
|
51819
|
+
const dataAttributes = {
|
|
51820
|
+
"data-value": String(clamped)
|
|
51821
|
+
};
|
|
51822
|
+
return { ariaProps, dataAttributes };
|
|
51823
|
+
}
|
|
51824
|
+
var masteryBarVariants = cva({
|
|
51825
|
+
base: "w-full overflow-hidden rounded-full bg-muted",
|
|
51826
|
+
variants: {
|
|
51827
|
+
size: {
|
|
51828
|
+
sm: "h-1.5",
|
|
51829
|
+
md: "h-2",
|
|
51830
|
+
lg: "h-3"
|
|
51831
|
+
}
|
|
51832
|
+
},
|
|
51833
|
+
defaultVariants: {
|
|
51834
|
+
size: "md"
|
|
51835
|
+
}
|
|
51836
|
+
});
|
|
51837
|
+
var masteryBarFillVariants = cva({
|
|
51838
|
+
base: "h-full rounded-full bg-primary",
|
|
51839
|
+
variants: {
|
|
51840
|
+
muted: {
|
|
51841
|
+
true: "bg-primary/70",
|
|
51842
|
+
false: "bg-primary"
|
|
51843
|
+
}
|
|
51844
|
+
},
|
|
51845
|
+
defaultVariants: {
|
|
51846
|
+
muted: "false"
|
|
51847
|
+
}
|
|
51848
|
+
});
|
|
51849
|
+
var masteryBarLabelClass = "text-xs text-muted-foreground";
|
|
51850
|
+
var masteryBarLeadingLabelClass = "text-xs text-muted-foreground";
|
|
51851
|
+
var masteryBarHeaderClass = "flex justify-between items-baseline mb-1";
|
|
51852
|
+
var MasteryBar = React11__namespace.forwardRef(
|
|
51853
|
+
({
|
|
51854
|
+
value,
|
|
51855
|
+
label,
|
|
51856
|
+
leadingLabel,
|
|
51857
|
+
size = "md",
|
|
51858
|
+
muted = false,
|
|
51859
|
+
className,
|
|
51860
|
+
...props
|
|
51861
|
+
}, ref) => {
|
|
51862
|
+
const clamped = clampPercent(value);
|
|
51863
|
+
const { ariaProps, dataAttributes } = createMasteryBar({ value });
|
|
51864
|
+
const hasHeader = leadingLabel != null || label != null;
|
|
51865
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
|
|
51866
|
+
hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: masteryBarHeaderClass, children: [
|
|
51867
|
+
leadingLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: masteryBarLeadingLabelClass, children: leadingLabel }),
|
|
51868
|
+
label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: masteryBarLabelClass, children: label })
|
|
51869
|
+
] }),
|
|
51870
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51871
|
+
"div",
|
|
51872
|
+
{
|
|
51873
|
+
className: masteryBarVariants({ size }),
|
|
51874
|
+
...ariaProps,
|
|
51875
|
+
...dataAttributes,
|
|
51876
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51877
|
+
"div",
|
|
51878
|
+
{
|
|
51879
|
+
className: masteryBarFillVariants({ muted: muted ? "true" : "false" }),
|
|
51880
|
+
style: { width: `${clamped}%` }
|
|
51881
|
+
}
|
|
51882
|
+
)
|
|
51883
|
+
}
|
|
51884
|
+
)
|
|
51885
|
+
] });
|
|
51886
|
+
}
|
|
51887
|
+
);
|
|
51888
|
+
MasteryBar.displayName = "MasteryBar";
|
|
51889
|
+
|
|
51890
|
+
// ../audience-feature-card/dist/index.js
|
|
51891
|
+
function createAudienceFeatureCard(_props = {}) {
|
|
51892
|
+
const ariaProps = {
|
|
51893
|
+
role: "group"
|
|
51894
|
+
};
|
|
51895
|
+
const dataAttributes = {
|
|
51896
|
+
"data-component": "audience-feature-card"
|
|
51897
|
+
};
|
|
51898
|
+
return { ariaProps, dataAttributes };
|
|
51899
|
+
}
|
|
51900
|
+
var audienceFeatureCardVariants = cva({
|
|
51901
|
+
base: "flex h-full flex-col rounded-xl border border-border bg-card p-5",
|
|
51902
|
+
variants: {},
|
|
51903
|
+
defaultVariants: {}
|
|
51904
|
+
});
|
|
51905
|
+
var audienceFeatureCardKickerClass = "text-[10px] uppercase tracking-widest text-primary font-semibold";
|
|
51906
|
+
var audienceFeatureCardTitleClass = "mt-2 text-lg font-bold text-foreground";
|
|
51907
|
+
var audienceFeatureCardBodyClass = "mt-1 text-sm text-muted-foreground leading-relaxed";
|
|
51908
|
+
var audienceFeatureCardFooterClass = "mt-auto pt-4 text-xs";
|
|
51909
|
+
var AudienceFeatureCard = React11__namespace.forwardRef(({ kicker, title, body, footer, className, ...props }, ref) => {
|
|
51910
|
+
const { ariaProps, dataAttributes } = createAudienceFeatureCard();
|
|
51911
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51912
|
+
"div",
|
|
51913
|
+
{
|
|
51914
|
+
ref,
|
|
51915
|
+
className: cn(audienceFeatureCardVariants(), className),
|
|
51916
|
+
...ariaProps,
|
|
51917
|
+
...dataAttributes,
|
|
51918
|
+
...props,
|
|
51919
|
+
children: [
|
|
51920
|
+
kicker != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardKickerClass, children: kicker }),
|
|
51921
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardTitleClass, children: title }),
|
|
51922
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: audienceFeatureCardBodyClass, children: body }),
|
|
51923
|
+
footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: audienceFeatureCardFooterClass, children: footer })
|
|
51924
|
+
]
|
|
51925
|
+
}
|
|
51926
|
+
);
|
|
51927
|
+
});
|
|
51928
|
+
AudienceFeatureCard.displayName = "AudienceFeatureCard";
|
|
51311
51929
|
/*! Bundled license information:
|
|
51312
51930
|
|
|
51313
51931
|
@nevware21/ts-utils/dist/es5/mod/ts-utils.js:
|
|
@@ -51330,6 +51948,7 @@ exports.AltHintState = AltHintState;
|
|
|
51330
51948
|
exports.AnalyticsProvider = AnalyticsProvider;
|
|
51331
51949
|
exports.AnimatedText = AnimatedText;
|
|
51332
51950
|
exports.AppShell = AppShell;
|
|
51951
|
+
exports.AudienceFeatureCard = AudienceFeatureCard;
|
|
51333
51952
|
exports.AudioRoom = AudioRoom;
|
|
51334
51953
|
exports.AuthGuard = AuthGuard;
|
|
51335
51954
|
exports.AuthProvider = AuthProvider;
|
|
@@ -51340,7 +51959,9 @@ exports.AvatarImage = AvatarImage;
|
|
|
51340
51959
|
exports.Badge = Badge;
|
|
51341
51960
|
exports.BadgeDisplay = BadgeDisplay;
|
|
51342
51961
|
exports.BottomNav = BottomNav;
|
|
51962
|
+
exports.BrandNetworkCell = BrandNetworkCell;
|
|
51343
51963
|
exports.Breadcrumbs = Breadcrumbs;
|
|
51964
|
+
exports.BrowserChromeMock = BrowserChromeMock;
|
|
51344
51965
|
exports.Button = Button;
|
|
51345
51966
|
exports.CATEGORY_LABELS = CATEGORY_LABELS;
|
|
51346
51967
|
exports.CURSOR_COLORS = CURSOR_COLORS;
|
|
@@ -51449,12 +52070,15 @@ exports.LiveCaptions = LiveCaptions;
|
|
|
51449
52070
|
exports.LiveCursors = LiveCursors;
|
|
51450
52071
|
exports.LiveTranscript = LiveTranscript;
|
|
51451
52072
|
exports.MarkdownRenderer = MarkdownRenderer;
|
|
52073
|
+
exports.MarqueeStrip = MarqueeStrip;
|
|
52074
|
+
exports.MasteryBar = MasteryBar;
|
|
51452
52075
|
exports.MiniMap = MiniMap;
|
|
51453
52076
|
exports.MobileNav = MobileNav;
|
|
51454
52077
|
exports.MobileNavContent = MobileNavContent;
|
|
51455
52078
|
exports.MobileNavLink = MobileNavLink;
|
|
51456
52079
|
exports.MobileNavTrigger = MobileNavTrigger;
|
|
51457
52080
|
exports.Navbar = Navbar;
|
|
52081
|
+
exports.NumberedSteps = NumberedSteps;
|
|
51458
52082
|
exports.OtpInput = OtpInput;
|
|
51459
52083
|
exports.PRESENCE_STATUS_COLORS = STATUS_COLORS;
|
|
51460
52084
|
exports.PRESENCE_STATUS_LABELS = STATUS_LABELS;
|
|
@@ -51467,6 +52091,7 @@ exports.PopoverContent = PopoverContent;
|
|
|
51467
52091
|
exports.PopoverTrigger = PopoverTrigger;
|
|
51468
52092
|
exports.PreCallLobby = PreCallLobby;
|
|
51469
52093
|
exports.PresenceIndicator = PresenceIndicator;
|
|
52094
|
+
exports.PricingCard = PricingCard;
|
|
51470
52095
|
exports.ProgressBar = ProgressBar;
|
|
51471
52096
|
exports.RadialGauge = RadialGauge;
|
|
51472
52097
|
exports.RadioGroup = RadioGroup;
|
|
@@ -51484,6 +52109,7 @@ exports.STICKY_NOTE_COLORS = STICKY_NOTE_COLORS;
|
|
|
51484
52109
|
exports.SearchBar = SearchBar;
|
|
51485
52110
|
exports.SearchResultItem = SearchResultItem;
|
|
51486
52111
|
exports.SearchResults = SearchResults;
|
|
52112
|
+
exports.SectionHead = SectionHead;
|
|
51487
52113
|
exports.SegmentedControl = SegmentedControl;
|
|
51488
52114
|
exports.SegmentedControlItem = SegmentedControlItem;
|
|
51489
52115
|
exports.Select = Select;
|
|
@@ -51513,6 +52139,7 @@ exports.SlideViewer = SlideViewer;
|
|
|
51513
52139
|
exports.SocialAuthButton = SocialAuthButton;
|
|
51514
52140
|
exports.SocialAuthRow = SocialAuthRow;
|
|
51515
52141
|
exports.SpeakingOrb = SpeakingOrb;
|
|
52142
|
+
exports.StatGrid = StatGrid;
|
|
51516
52143
|
exports.StatsGrid = StatsGrid;
|
|
51517
52144
|
exports.StatusIndicator = StatusIndicator;
|
|
51518
52145
|
exports.Step = Step;
|
|
@@ -51734,6 +52361,7 @@ exports.slideViewerVariants = slideViewerVariants;
|
|
|
51734
52361
|
exports.smoothWaveformSamples = smoothWaveformSamples;
|
|
51735
52362
|
exports.startSessionReplay = startSessionReplay;
|
|
51736
52363
|
exports.statCardVariants = statCardVariants;
|
|
52364
|
+
exports.statColumns = statColumns;
|
|
51737
52365
|
exports.statsGridVariants = statsGridVariants;
|
|
51738
52366
|
exports.statusContainerStyles = statusContainerStyles;
|
|
51739
52367
|
exports.statusDotVariants = statusDotVariants;
|