@krizaka/ui 3.51.0 → 3.53.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/action-bar.js +1 -1
- package/dist/argument-card.js +4 -4
- package/dist/blocks.css +293 -0
- package/dist/chapter.d.ts +89 -0
- package/dist/chapter.js +123 -0
- package/dist/chapter.js.map +1 -0
- package/dist/choice-grid.js +1 -1
- package/dist/choice-grid.js.map +1 -1
- package/dist/{chunk-IBDTAMPF.js → chunk-7JG3VR4C.js} +2 -2
- package/dist/{chunk-C7LTF5CC.js → chunk-ENOS6ETI.js} +2 -2
- package/dist/{chunk-C7LTF5CC.js.map → chunk-ENOS6ETI.js.map} +1 -1
- package/dist/{chunk-2AGSO3WH.js → chunk-FVGFPB73.js} +2 -2
- package/dist/{chunk-2AGSO3WH.js.map → chunk-FVGFPB73.js.map} +1 -1
- package/dist/chunk-YATTFMDV.js +45 -0
- package/dist/chunk-YATTFMDV.js.map +1 -0
- package/dist/cover-hero.js +1 -1
- package/dist/glossary-term.d.ts +12 -0
- package/dist/glossary-term.js +16 -0
- package/dist/glossary-term.js.map +1 -0
- package/dist/glossary.d.ts +20 -0
- package/dist/glossary.js +17 -0
- package/dist/glossary.js.map +1 -0
- package/dist/index.js +7 -7
- package/dist/kpi-explained.d.ts +66 -0
- package/dist/kpi-explained.js +84 -0
- package/dist/kpi-explained.js.map +1 -0
- package/dist/link-card.js +2 -2
- package/dist/media-grid.js +1 -1
- package/dist/media-grid.js.map +1 -1
- package/dist/next-actions.d.ts +27 -0
- package/dist/next-actions.js +27 -0
- package/dist/next-actions.js.map +1 -0
- package/dist/page-hero.js +1 -1
- package/dist/page-index.js +1 -1
- package/dist/service-card.js +1 -1
- package/dist/slot-picker.js +1 -1
- package/dist/text-style/server.d.ts +63 -0
- package/dist/text-style/server.js +109 -0
- package/dist/text-style/server.js.map +1 -0
- package/dist/text-style.d.ts +149 -0
- package/dist/text-style.js +399 -0
- package/dist/text-style.js.map +1 -0
- package/dist/tooltip.js +5 -37
- package/dist/tooltip.js.map +1 -1
- package/package.json +86 -8
- package/registry/account-menu.json +1 -1
- package/registry/account-settings.json +1 -1
- package/registry/achievement.json +1 -1
- package/registry/action-bar.json +2 -2
- package/registry/activity-feed.json +1 -1
- package/registry/agenda.json +1 -1
- package/registry/alert.json +1 -1
- package/registry/anatomy-plate.json +1 -1
- package/registry/app-header.json +1 -1
- package/registry/app-shell.json +1 -1
- package/registry/argument-card.json +2 -2
- package/registry/audio-player.json +1 -1
- package/registry/auth-layout.json +1 -1
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/bird-plate.json +1 -1
- package/registry/button.json +1 -1
- package/registry/captcha.json +1 -1
- package/registry/card-grid.json +1 -1
- package/registry/card.json +1 -1
- package/registry/catalogue-page.json +1 -1
- package/registry/changelog-page.json +1 -1
- package/registry/chapter.json +478 -0
- package/registry/chat.json +1 -1
- package/registry/checkbox.json +1 -1
- package/registry/chip-link.json +1 -1
- package/registry/chip-row.json +1 -1
- package/registry/chip.json +1 -1
- package/registry/choice-grid.json +2 -2
- package/registry/code-block.json +1 -1
- package/registry/combobox.json +1 -1
- package/registry/command.json +1 -1
- package/registry/comparison-table.json +1 -1
- package/registry/component-page.json +1 -1
- package/registry/confirm-button.json +1 -1
- package/registry/contact-page.json +1 -1
- package/registry/continue-prompt.json +1 -1
- package/registry/countdown.json +1 -1
- package/registry/cover-hero.json +2 -2
- package/registry/cta-panel.json +1 -1
- package/registry/dashboard-layout.json +1 -1
- package/registry/data-table.json +1 -1
- package/registry/date-picker.json +2 -2
- package/registry/decision-list.json +1 -1
- package/registry/description-list.json +1 -1
- package/registry/detail-layout.json +1 -1
- package/registry/dialog.json +1 -1
- package/registry/docs-article-page.json +1 -1
- package/registry/docs-hub-page.json +1 -1
- package/registry/docs-layout.json +1 -1
- package/registry/docs-nav.json +1 -1
- package/registry/document-viewer.json +1 -1
- package/registry/drop-overlay.json +1 -1
- package/registry/dropdown-menu.json +1 -1
- package/registry/elephant.json +2 -2
- package/registry/empty-state.json +1 -1
- package/registry/engine-flow.json +1 -1
- package/registry/error-page.json +1 -1
- package/registry/examples/chapter/detail.d.ts +4 -0
- package/registry/examples/chapter/detail.js +21 -0
- package/registry/examples/chapter/detail.tsx +16 -0
- package/registry/examples/chapter/foot.d.ts +4 -0
- package/registry/examples/chapter/foot.js +20 -0
- package/registry/examples/chapter/foot.tsx +15 -0
- package/registry/examples/chapter/head.d.ts +4 -0
- package/registry/examples/chapter/head.js +22 -0
- package/registry/examples/chapter/head.tsx +17 -0
- package/registry/examples/chapter/index.d.ts +4 -0
- package/registry/examples/chapter/index.js +34 -0
- package/registry/examples/chapter/index.tsx +30 -0
- package/registry/examples/chapter/reading-page.d.ts +4 -0
- package/registry/examples/chapter/reading-page.js +34 -0
- package/registry/examples/chapter/reading-page.tsx +25 -0
- package/registry/examples/glossary/shop-terms.d.ts +4 -0
- package/registry/examples/glossary/shop-terms.js +11 -0
- package/registry/examples/glossary/shop-terms.tsx +5 -0
- package/registry/examples/glossary-term/inline.d.ts +4 -0
- package/registry/examples/glossary-term/inline.js +15 -0
- package/registry/examples/glossary-term/inline.tsx +5 -0
- package/registry/examples/kpi-explained/founder-cockpit.d.ts +4 -0
- package/registry/examples/kpi-explained/founder-cockpit.js +11 -0
- package/registry/examples/kpi-explained/founder-cockpit.tsx +5 -0
- package/registry/examples/kpi-explained/salon-month.d.ts +4 -0
- package/registry/examples/kpi-explained/salon-month.js +11 -0
- package/registry/examples/kpi-explained/salon-month.tsx +5 -0
- package/registry/examples/next-actions/shop-owner.d.ts +4 -0
- package/registry/examples/next-actions/shop-owner.js +11 -0
- package/registry/examples/next-actions/shop-owner.tsx +5 -0
- package/registry/examples/text-style/compact-toolbar.d.ts +4 -0
- package/registry/examples/text-style/compact-toolbar.js +28 -0
- package/registry/examples/text-style/compact-toolbar.tsx +21 -0
- package/registry/examples/text-style/product-price.d.ts +4 -0
- package/registry/examples/text-style/product-price.js +26 -0
- package/registry/examples/text-style/product-price.tsx +17 -0
- package/registry/examples/text-style/storefront-title.d.ts +4 -0
- package/registry/examples/text-style/storefront-title.js +36 -0
- package/registry/examples/text-style/storefront-title.tsx +22 -0
- package/registry/field.json +1 -1
- package/registry/file-upload.json +2 -2
- package/registry/filter-bar.json +1 -1
- package/registry/flock.json +1 -1
- package/registry/footnote.json +1 -1
- package/registry/force-update-screen.json +1 -1
- package/registry/form.json +2 -2
- package/registry/gallery-page.json +1 -1
- package/registry/genui.json +2 -2
- package/registry/glossary-term.json +144 -0
- package/registry/glossary.json +137 -0
- package/registry/glow-card.json +1 -1
- package/registry/goal-gauge.json +1 -1
- package/registry/how-it-works-page.json +1 -1
- package/registry/image-cropper.json +1 -1
- package/registry/index.json +199 -11
- package/registry/iso.json +1 -1
- package/registry/kanban.json +1 -1
- package/registry/kbd.json +1 -1
- package/registry/kpi-explained.json +364 -0
- package/registry/landing-page.json +1 -1
- package/registry/landscape.json +1 -1
- package/registry/language-switch.json +1 -1
- package/registry/legal-page.json +1 -1
- package/registry/link-card.json +2 -2
- package/registry/list.json +1 -1
- package/registry/loader.json +1 -1
- package/registry/longform-page.json +1 -1
- package/registry/maintenance-screen.json +1 -1
- package/registry/map.json +2 -2
- package/registry/markdown.json +1 -1
- package/registry/marketing-layout.json +1 -1
- package/registry/marquee.json +1 -1
- package/registry/mascot-quote.json +1 -1
- package/registry/mascot-state.json +1 -1
- package/registry/mascots.json +1 -1
- package/registry/match-dialog.json +1 -1
- package/registry/media-capture.json +1 -1
- package/registry/media-gallery.json +1 -1
- package/registry/media-grid.json +2 -2
- package/registry/meta-row.json +1 -1
- package/registry/meter.json +1 -1
- package/registry/nav-bar.json +2 -2
- package/registry/next-actions.json +142 -0
- package/registry/number-ticker.json +1 -1
- package/registry/opening-hours.json +1 -1
- package/registry/page-header.json +1 -1
- package/registry/page-hero.json +2 -2
- package/registry/page-index.json +2 -2
- package/registry/page.json +1 -1
- package/registry/pagination.json +1 -1
- package/registry/photo-grid.json +1 -1
- package/registry/pointer-light.json +1 -1
- package/registry/popover.json +1 -1
- package/registry/pricing-page.json +1 -1
- package/registry/product-page.json +1 -1
- package/registry/profile-card.json +1 -1
- package/registry/progress.json +1 -1
- package/registry/promise-card.json +1 -1
- package/registry/radio-group.json +1 -1
- package/registry/rail-nav.json +2 -2
- package/registry/recipes.json +1 -1
- package/registry/router.json +1 -1
- package/registry/scroll-stage.json +1 -1
- package/registry/search-field.json +1 -1
- package/registry/section-backdrop.json +1 -1
- package/registry/separator.json +1 -1
- package/registry/service-card.json +2 -2
- package/registry/settings-layout.json +1 -1
- package/registry/showcase.json +1 -1
- package/registry/site-footer.json +2 -2
- package/registry/sites.json +1 -1
- package/registry/skeleton.json +1 -1
- package/registry/skip-link.json +1 -1
- package/registry/slider.json +1 -1
- package/registry/slot-picker.json +2 -2
- package/registry/slot.json +1 -1
- package/registry/specimen-tag.json +1 -1
- package/registry/spinner.json +1 -1
- package/registry/split-view.json +1 -1
- package/registry/stage-banner.json +1 -1
- package/registry/stat.json +1 -1
- package/registry/status-page.json +1 -1
- package/registry/step-progress.json +1 -1
- package/registry/step-showcase.json +1 -1
- package/registry/stepper.json +1 -1
- package/registry/sticky-action.json +1 -1
- package/registry/swipe-deck.json +1 -1
- package/registry/switch.json +1 -1
- package/registry/tabs.json +1 -1
- package/registry/tag-input.json +1 -1
- package/registry/tag-selector.json +1 -1
- package/registry/taped-photo.json +1 -1
- package/registry/terminal-replay.json +1 -1
- package/registry/text-style.json +378 -0
- package/registry/theme.json +1 -1
- package/registry/toast.json +1 -1
- package/registry/toc.json +1 -1
- package/registry/tooltip.json +1 -1
- package/registry/tree-view.json +1 -1
- package/registry/update-prompt.json +1 -1
- package/registry/upload-queue.json +1 -1
- package/registry/verified-badge.json +1 -1
- package/registry/vertical-video.json +2 -2
- package/registry/video-player.json +1 -1
- package/registry/video-trimmer.json +1 -1
- package/registry/virtual.json +1 -1
- package/registry/waveform.json +1 -1
- /package/dist/{chunk-IBDTAMPF.js.map → chunk-7JG3VR4C.js.map} +0 -0
package/dist/choice-grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/choice-grid/choice-grid.tsx","../src/block-link.tsx","../src/router/route-state.tsx"],"sourcesContent":["// Client. A row of choices shown as tiles — a visual, a name, a line (story.css): pick a plan, a persona, a team, a side.\n// Selectable (`onValueChange`), it is a radio group with roving focus; with `href` on its items, a set of links (a\n// line-up that leads somewhere); otherwise a showcase of the line-up.\nimport * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { useRouteBinding } from \"../router\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport interface ChoiceItem {\n /** The value of the choice (and its React key). */\n id: string;\n /** What represents it: a mark, an avatar, an illustration. Decorative — the name carries the meaning. */\n visual: React.ReactNode;\n /** Its name, short. */\n name: React.ReactNode;\n /** One line under the name: what it is, its role. */\n title?: React.ReactNode;\n /** A small line above the visual (a family, a tier), after its `icon`. */\n eyebrow?: React.ReactNode;\n /** A small glyph before the eyebrow (decorative). */\n icon?: React.ReactNode;\n /** A short tag in the top corner (“P1”, “New”, “Popular”). */\n badge?: React.ReactNode;\n /** Under the line: a gauge (`StatGauge`), facts, a price. */\n extra?: React.ReactNode;\n /** At the bottom: where the tile leads (“Chapter 2 ↓”, “See the plan”). */\n meta?: React.ReactNode;\n /** Makes the tile a link (ignored when the grid is selectable). */\n href?: string;\n /** A brand scope for this tile (`orazaka` → `.brand-orazaka`): its accent becomes that brand's. */\n brand?: string;\n /** Not selectable. */\n disabled?: boolean;\n}\n\nexport type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"defaultValue\" | \"onChange\"> & {\n /** The accessible name of the group (“Choose your plan”) — passed translated. */\n label: string;\n /** The choices, in reading order. */\n items: readonly ChoiceItem[];\n /** A short mono line above the grid (a step, a tag). */\n tag?: React.ReactNode;\n /** A line beside the tag: what the choice means. */\n caption?: React.ReactNode;\n /** A call above the tiles, larger (“Choose your plan”). */\n prompt?: React.ReactNode;\n /** The chosen id (controlled). */\n value?: string;\n /** The chosen id at first (uncontrolled). */\n defaultValue?: string;\n /** Makes the grid a radio group: called with the id chosen by click, Enter, Space or the arrow keys. */\n onValueChange?: (id: string) => void;\n /** Binds the choice to this search parameter of the URL (`?type=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */\n routeKey?: string;\n /** The ids the parameter may hold; the first is the default unless `defaultValue` says otherwise. */\n routeValues?: readonly string[];\n /** The app's link component for the tiles' internal `href`s (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n /**\n * The number of columns (one on a phone).\n * @default min(items, 4)\n */\n columns?: number;\n /**\n * `default`: sober tiles. `arcade`: the select screen — the brand's light on each card, corners that lock, a flash.\n * @default \"default\"\n */\n variant?: StoryVariant;\n /** A brand scope for the whole grid (`orochia` → `.brand-orochia`). */\n brand?: string;\n /**\n * The tiles' arrival on mount (arcade: the corners locking one by one, the gauges filling). Always off under\n * `prefers-reduced-motion`.\n * @default true\n */\n animated?: boolean;\n};\n\nconst CORNERS = [\"tl\", \"tr\", \"bl\", \"br\"] as const;\n\n/**\n * A line-up of choices as tiles. With `onValueChange` (or `value`), a radio group: one tab stop, the arrow keys move\n * and choose, Home/End jump, the chosen tile is marked. With `href` on the items, a list of links. Otherwise a list\n * named by `label` that presents the line-up.\n */\nexport function ChoiceGrid({\n label,\n items,\n tag,\n caption,\n prompt,\n value: valueProp,\n defaultValue: defaultValueProp,\n onValueChange: onValueChangeProp,\n routeKey,\n routeValues,\n linkAs,\n columns,\n variant,\n brand,\n animated = true,\n className,\n style,\n ...props\n}: ChoiceGridProps) {\n const { value, defaultValue, onValueChange } = useRouteBinding(routeKey, routeValues, { value: valueProp, defaultValue: defaultValueProp, onValueChange: onValueChangeProp });\n const selectable = onValueChange !== undefined || value !== undefined;\n const [inner, setInner] = React.useState(defaultValue);\n const current = value ?? inner;\n const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n const enabled = items.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0);\n const chosenIndex = items.findIndex((item) => item.id === current && !item.disabled);\n const focusIndex = chosenIndex >= 0 ? chosenIndex : (enabled[0] ?? 0);\n\n const choose = (i: number) => {\n const item = items[i];\n if (!item || item.disabled) return;\n if (value === undefined) setInner(item.id);\n onValueChange?.(item.id);\n };\n const onKeyDown = (e: React.KeyboardEvent, i: number) => {\n const at = enabled.indexOf(i);\n let next: number | undefined;\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = enabled[(at + 1) % enabled.length];\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = enabled[(at - 1 + enabled.length) % enabled.length];\n else if (e.key === \"Home\") next = enabled[0];\n else if (e.key === \"End\") next = enabled[enabled.length - 1];\n if (next === undefined) return;\n e.preventDefault();\n refs.current[next]?.focus();\n choose(next);\n };\n\n // A radio group holds radios, not list items; a showcase or a set of links is a list named by `label`.\n const Grid = selectable ? \"div\" : \"ul\";\n const Item = selectable ? \"div\" : \"li\";\n const vars = { \"--kzs-cols\": columns ?? Math.min(items.length, 4), ...style } as React.CSSProperties;\n return (\n <div data-kzs-scene=\"\" data-animated={animated ? \"\" : undefined} className={cn(\"kzs-choice\", storyVariantClass(variant), brandClass(brand), className)} style={vars} {...props}>\n <span className=\"kzs-texture\" aria-hidden />\n <span className=\"kzs-scan kzs-loop\" aria-hidden />\n {(tag || caption) && (\n <p className=\"kzs-choice-head\">\n {tag && <span className=\"kzs-choice-tag\">{tag}</span>}\n {tag && caption && <span className=\"kzs-choice-sep\" aria-hidden />}\n {caption && <span className=\"kzs-choice-caption\">{caption}</span>}\n </p>\n )}\n {prompt && <p className=\"kzs-choice-prompt\">{prompt}</p>}\n <Grid className=\"kzs-choice-grid\" role={selectable ? \"radiogroup\" : undefined} aria-label={label}>\n {items.map((item, i) => {\n const body = (\n <>\n <span className=\"kzs-choice-aura\" aria-hidden />\n <span className=\"kzs-choice-flash\" aria-hidden />\n {CORNERS.map((at) => (\n <span key={at} className=\"kzs-corner\" data-at={at} aria-hidden />\n ))}\n {(item.badge || item.eyebrow || item.icon) && (\n <span className=\"kzs-choice-top\">\n {item.badge ? <span className=\"kzs-choice-badge\">{item.badge}</span> : <span />}\n {(item.eyebrow || item.icon) && (\n <span className=\"kzs-choice-eyebrow\">\n {item.icon && <span aria-hidden>{item.icon}</span>}\n {item.eyebrow}\n </span>\n )}\n </span>\n )}\n <span className=\"kzs-choice-frame\" aria-hidden>\n <span className=\"kzs-choice-floor\" />\n <span className=\"kzs-choice-visual\">{item.visual}</span>\n </span>\n <span className=\"kzs-choice-name\">{item.name}</span>\n {item.title && <span className=\"kzs-choice-title\">{item.title}</span>}\n {item.extra && <span className=\"kzs-choice-extra\">{item.extra}</span>}\n {item.meta && <span className=\"kzs-choice-meta\">{item.meta}</span>}\n <span className=\"kzs-choice-check\" aria-hidden>\n <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"m5 12 5 5 9-10\" />\n </svg>\n </span>\n </>\n );\n const itemStyle = { \"--i\": i } as React.CSSProperties;\n let tile: React.ReactNode;\n if (selectable)\n tile = (\n <button\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={current === item.id}\n tabIndex={i === focusIndex ? 0 : -1}\n disabled={item.disabled}\n data-selectable=\"\"\n className=\"kzs-choice-item\"\n style={itemStyle}\n onClick={() => choose(i)}\n onKeyDown={(e) => onKeyDown(e, i)}\n >\n {body}\n </button>\n );\n else if (item.href)\n tile = (\n <BlockLink href={item.href} linkAs={linkAs} className=\"kzs-choice-item\" data-link=\"\" style={itemStyle}>\n {body}\n </BlockLink>\n );\n else\n tile = (\n <div className=\"kzs-choice-item\" style={itemStyle}>\n {body}\n </div>\n );\n return (\n <Item key={item.id} className={cn(\"kzs-choice-slot\", brandClass(item.brand))} style={itemStyle}>\n {tile}\n </Item>\n );\n })}\n </Grid>\n </div>\n );\n}\n","// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} {...props} />;\n}\n","// Client. The URL is the state: a selection the user would want to share, reload or come back to (a tab, a type, a\n// filter) lives in a search parameter, never in `useState` (Oussama, 2026-10-22: « changer les tabs doit changer les routes »).\n// One primitive reads and writes it: `useRouteState`. The selection components take `routeKey` and bind to it.\nimport * as React from \"react\";\n\n/** How a router moves and reads the address: the browser's by default, your framework's through `RouteStateProvider`. */\nexport interface RouteAdapter {\n /** The current query string, with or without `?` (`\"\"` on the server). */\n search: () => string;\n /** Go to `search` (`?type=bail`, or `\"\"`), keeping the path and the hash; `replace` keeps the history as it is. */\n navigate: (search: string, options: { replace: boolean }) => void;\n /** Calls `onChange` when the address changes under you (back, forward, another navigation); returns the unsubscribe. */\n subscribe: (onChange: () => void) => () => void;\n}\n\nconst CHANGE = \"kz-route-state\";\n\n/** The History API: any web app (Vite, a static site). Next.js apps pass their router's adapter once, in the layout. */\nexport const browserAdapter: RouteAdapter = {\n search: () => (typeof window === \"undefined\" ? \"\" : window.location.search),\n navigate: (search, { replace }) => {\n const url = `${window.location.pathname}${search}${window.location.hash}`;\n window.history[replace ? \"replaceState\" : \"pushState\"](window.history.state, \"\", url);\n window.dispatchEvent(new Event(CHANGE));\n },\n subscribe: (onChange) => {\n window.addEventListener(\"popstate\", onChange);\n window.addEventListener(CHANGE, onChange);\n return () => {\n window.removeEventListener(\"popstate\", onChange);\n window.removeEventListener(CHANGE, onChange);\n };\n },\n};\n\nconst AdapterContext = React.createContext<RouteAdapter>(browserAdapter);\n\nexport interface RouteStateProviderProps {\n /** How your router reads the query string, navigates and tells about changes. */\n adapter: RouteAdapter;\n children: React.ReactNode;\n}\n\n/** Gives `useRouteState` your router: `<RouteStateProvider adapter={nextAdapter}>` once, in the root layout. */\nexport function RouteStateProvider({ adapter, children }: RouteStateProviderProps) {\n return <AdapterContext.Provider value={adapter}>{children}</AdapterContext.Provider>;\n}\n\nexport interface RouteStateOptions<V extends string> {\n /** The values the parameter may hold, as a const list: anything else in the address reads as the default. Omit for free text. */\n values?: readonly V[];\n /** The value when the parameter is absent. It is never written to the address (a clean URL). */\n default: V;\n /** `push` (the default) keeps each change in the history, `replace` overwrites it: use `replace` for a filter typed or toggled in passing. */\n history?: \"push\" | \"replace\";\n}\n\n/** The value a query string holds for `key`, checked against `values`. Pure: the hook and the tests share it. */\nexport function readRouteValue<V extends string>(search: string, key: string, { values, default: fallback }: Pick<RouteStateOptions<V>, \"values\" | \"default\">): V {\n const raw = new URLSearchParams(search).get(key);\n if (raw === null) return fallback;\n return !values || (values as readonly string[]).includes(raw) ? (raw as V) : fallback;\n}\n\n/** The query string with `key` set to `value` (removed when it is the default); every other parameter is kept. Pure. */\nexport function writeRouteValue(search: string, key: string, value: string, fallback: string): string {\n const params = new URLSearchParams(search);\n if (value === fallback) params.delete(key);\n else params.set(key, value);\n const text = params.toString();\n return text ? `?${text}` : \"\";\n}\n\n/**\n * A value kept in the URL's search parameter `key`: `const [type, setType] = useRouteState(\"type\", { values: TYPES, default: \"auto\" })`\n * with `const TYPES = [\"auto\", \"lease\", \"contract\", \"invoice\", \"other\"] as const`. The value is typed from the list, an\n * unknown one in the address reads as the default, the default is not written, other parameters are kept.\n * `key` undefined makes the hook inert (it returns the default) so a component can call it unconditionally.\n */\nexport function useRouteState<V extends string>(key: string | undefined, { values, default: fallback, history = \"push\" }: RouteStateOptions<V>): readonly [V, (next: V) => void] {\n const adapter = React.useContext(AdapterContext);\n const search = React.useSyncExternalStore(adapter.subscribe, adapter.search, () => \"\");\n const value = key === undefined ? fallback : readRouteValue(search, key, { values, default: fallback });\n const set = React.useCallback(\n (next: V) => {\n if (key === undefined) return;\n adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === \"replace\" });\n },\n [adapter, key, fallback, history],\n );\n return [value, set] as const;\n}\n\n/** What a selection component spreads on its root: `value` and `onValueChange` bound to the URL when `routeKey` is set. */\nexport interface RouteBindable {\n value?: string | null;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n}\n\n/** The props of a selection component bound to the URL (`routeKey`), or its own, unchanged, when there is no `routeKey`. */\nexport function useRouteBinding<P extends RouteBindable>(routeKey: string | undefined, routeValues: readonly string[] | undefined, props: P): P {\n const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? \"\";\n const [value, set] = useRouteState<string>(routeKey, { values: routeValues, default: initial });\n if (routeKey === undefined) return props;\n return {\n ...props,\n value,\n defaultValue: undefined,\n onValueChange: (next: string) => {\n set(next);\n props.onValueChange?.(next);\n },\n };\n}\n"],"mappings":"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","names":["React","jsx","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../src/choice-grid/choice-grid.tsx","../src/block-link.tsx","../src/router/route-state.tsx"],"sourcesContent":["// Client. A row of choices shown as tiles — a visual, a name, a line (story.css): pick a plan, a persona, a team, a side.\n// Selectable (`onValueChange`), it is a radio group with roving focus; with `href` on its items, a set of links (a\n// line-up that leads somewhere); otherwise a showcase of the line-up.\nimport * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { useRouteBinding } from \"../router\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport interface ChoiceItem {\n /** The value of the choice (and its React key). */\n id: string;\n /** What represents it: a mark, an avatar, an illustration. Decorative — the name carries the meaning. */\n visual: React.ReactNode;\n /** Its name, short. */\n name: React.ReactNode;\n /** One line under the name: what it is, its role. */\n title?: React.ReactNode;\n /** A small line above the visual (a family, a tier), after its `icon`. */\n eyebrow?: React.ReactNode;\n /** A small glyph before the eyebrow (decorative). */\n icon?: React.ReactNode;\n /** A short tag in the top corner (“P1”, “New”, “Popular”). */\n badge?: React.ReactNode;\n /** Under the line: a gauge (`StatGauge`), facts, a price. */\n extra?: React.ReactNode;\n /** At the bottom: where the tile leads (“Chapter 2 ↓”, “See the plan”). */\n meta?: React.ReactNode;\n /** Makes the tile a link (ignored when the grid is selectable). */\n href?: string;\n /** A brand scope for this tile (`orazaka` → `.brand-orazaka`): its accent becomes that brand's. */\n brand?: string;\n /** Not selectable. */\n disabled?: boolean;\n}\n\nexport type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"defaultValue\" | \"onChange\"> & {\n /** The accessible name of the group (“Choose your plan”) — passed translated. */\n label: string;\n /** The choices, in reading order. */\n items: readonly ChoiceItem[];\n /** A short mono line above the grid (a step, a tag). */\n tag?: React.ReactNode;\n /** A line beside the tag: what the choice means. */\n caption?: React.ReactNode;\n /** A call above the tiles, larger (“Choose your plan”). */\n prompt?: React.ReactNode;\n /** The chosen id (controlled). */\n value?: string;\n /** The chosen id at first (uncontrolled). */\n defaultValue?: string;\n /** Makes the grid a radio group: called with the id chosen by click, Enter, Space or the arrow keys. */\n onValueChange?: (id: string) => void;\n /** Binds the choice to this search parameter of the URL (`?type=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */\n routeKey?: string;\n /** The ids the parameter may hold; the first is the default unless `defaultValue` says otherwise. */\n routeValues?: readonly string[];\n /** The app's link component for the tiles' internal `href`s (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n /**\n * The number of columns (one on a phone).\n * @default min(items, 4)\n */\n columns?: number;\n /**\n * `default`: sober tiles. `arcade`: the select screen — the brand's light on each card, corners that lock, a flash.\n * @default \"default\"\n */\n variant?: StoryVariant;\n /** A brand scope for the whole grid (`orochia` → `.brand-orochia`). */\n brand?: string;\n /**\n * The tiles' arrival on mount (arcade: the corners locking one by one, the gauges filling). Always off under\n * `prefers-reduced-motion`.\n * @default true\n */\n animated?: boolean;\n};\n\nconst CORNERS = [\"tl\", \"tr\", \"bl\", \"br\"] as const;\n\n/**\n * A line-up of choices as tiles. With `onValueChange` (or `value`), a radio group: one tab stop, the arrow keys move\n * and choose, Home/End jump, the chosen tile is marked. With `href` on the items, a list of links. Otherwise a list\n * named by `label` that presents the line-up.\n */\nexport function ChoiceGrid({\n label,\n items,\n tag,\n caption,\n prompt,\n value: valueProp,\n defaultValue: defaultValueProp,\n onValueChange: onValueChangeProp,\n routeKey,\n routeValues,\n linkAs,\n columns,\n variant,\n brand,\n animated = true,\n className,\n style,\n ...props\n}: ChoiceGridProps) {\n const { value, defaultValue, onValueChange } = useRouteBinding(routeKey, routeValues, { value: valueProp, defaultValue: defaultValueProp, onValueChange: onValueChangeProp });\n const selectable = onValueChange !== undefined || value !== undefined;\n const [inner, setInner] = React.useState(defaultValue);\n const current = value ?? inner;\n const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n const enabled = items.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0);\n const chosenIndex = items.findIndex((item) => item.id === current && !item.disabled);\n const focusIndex = chosenIndex >= 0 ? chosenIndex : (enabled[0] ?? 0);\n\n const choose = (i: number) => {\n const item = items[i];\n if (!item || item.disabled) return;\n if (value === undefined) setInner(item.id);\n onValueChange?.(item.id);\n };\n const onKeyDown = (e: React.KeyboardEvent, i: number) => {\n const at = enabled.indexOf(i);\n let next: number | undefined;\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = enabled[(at + 1) % enabled.length];\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = enabled[(at - 1 + enabled.length) % enabled.length];\n else if (e.key === \"Home\") next = enabled[0];\n else if (e.key === \"End\") next = enabled[enabled.length - 1];\n if (next === undefined) return;\n e.preventDefault();\n refs.current[next]?.focus();\n choose(next);\n };\n\n // A radio group holds radios, not list items; a showcase or a set of links is a list named by `label`.\n const Grid = selectable ? \"div\" : \"ul\";\n const Item = selectable ? \"div\" : \"li\";\n const vars = { \"--kzs-cols\": columns ?? Math.min(items.length, 4), ...style } as React.CSSProperties;\n return (\n <div data-kzs-scene=\"\" data-animated={animated ? \"\" : undefined} className={cn(\"kzs-choice\", storyVariantClass(variant), brandClass(brand), className)} style={vars} {...props}>\n <span className=\"kzs-texture\" aria-hidden />\n <span className=\"kzs-scan kzs-loop\" aria-hidden />\n {(tag || caption) && (\n <p className=\"kzs-choice-head\">\n {tag && <span className=\"kzs-choice-tag\">{tag}</span>}\n {tag && caption && <span className=\"kzs-choice-sep\" aria-hidden />}\n {caption && <span className=\"kzs-choice-caption\">{caption}</span>}\n </p>\n )}\n {prompt && <p className=\"kzs-choice-prompt\">{prompt}</p>}\n <Grid className=\"kzs-choice-grid\" role={selectable ? \"radiogroup\" : undefined} aria-label={label}>\n {items.map((item, i) => {\n const body = (\n <>\n <span className=\"kzs-choice-aura\" aria-hidden />\n <span className=\"kzs-choice-flash\" aria-hidden />\n {CORNERS.map((at) => (\n <span key={at} className=\"kzs-corner\" data-at={at} aria-hidden />\n ))}\n {(item.badge || item.eyebrow || item.icon) && (\n <span className=\"kzs-choice-top\">\n {item.badge ? <span className=\"kzs-choice-badge\">{item.badge}</span> : <span />}\n {(item.eyebrow || item.icon) && (\n <span className=\"kzs-choice-eyebrow\">\n {item.icon && <span aria-hidden>{item.icon}</span>}\n {item.eyebrow}\n </span>\n )}\n </span>\n )}\n <span className=\"kzs-choice-frame\" aria-hidden>\n <span className=\"kzs-choice-floor\" />\n <span className=\"kzs-choice-visual\">{item.visual}</span>\n </span>\n <span className=\"kzs-choice-name\">{item.name}</span>\n {item.title && <span className=\"kzs-choice-title\">{item.title}</span>}\n {item.extra && <span className=\"kzs-choice-extra\">{item.extra}</span>}\n {item.meta && <span className=\"kzs-choice-meta\">{item.meta}</span>}\n <span className=\"kzs-choice-check\" aria-hidden>\n <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"m5 12 5 5 9-10\" />\n </svg>\n </span>\n </>\n );\n const itemStyle = { \"--i\": i } as React.CSSProperties;\n let tile: React.ReactNode;\n if (selectable)\n tile = (\n <button\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={current === item.id}\n tabIndex={i === focusIndex ? 0 : -1}\n disabled={item.disabled}\n data-selectable=\"\"\n className=\"kzs-choice-item\"\n style={itemStyle}\n onClick={() => choose(i)}\n onKeyDown={(e) => onKeyDown(e, i)}\n >\n {body}\n </button>\n );\n else if (item.href)\n tile = (\n <BlockLink href={item.href} linkAs={linkAs} className=\"kzs-choice-item\" data-link=\"\" style={itemStyle}>\n {body}\n </BlockLink>\n );\n else\n tile = (\n <div className=\"kzs-choice-item\" style={itemStyle}>\n {body}\n </div>\n );\n return (\n <Item key={item.id} className={cn(\"kzs-choice-slot\", brandClass(item.brand))} style={itemStyle}>\n {tile}\n </Item>\n );\n })}\n </Grid>\n </div>\n );\n}\n","// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} rel={rel} {...props} />;\n}\n","// Client. The URL is the state: a selection the user would want to share, reload or come back to (a tab, a type, a\n// filter) lives in a search parameter, never in `useState` (Oussama, 2026-10-22: « changer les tabs doit changer les routes »).\n// One primitive reads and writes it: `useRouteState`. The selection components take `routeKey` and bind to it.\nimport * as React from \"react\";\n\n/** How a router moves and reads the address: the browser's by default, your framework's through `RouteStateProvider`. */\nexport interface RouteAdapter {\n /** The current query string, with or without `?` (`\"\"` on the server). */\n search: () => string;\n /** Go to `search` (`?type=bail`, or `\"\"`), keeping the path and the hash; `replace` keeps the history as it is. */\n navigate: (search: string, options: { replace: boolean }) => void;\n /** Calls `onChange` when the address changes under you (back, forward, another navigation); returns the unsubscribe. */\n subscribe: (onChange: () => void) => () => void;\n}\n\nconst CHANGE = \"kz-route-state\";\n\n/** The History API: any web app (Vite, a static site). Next.js apps pass their router's adapter once, in the layout. */\nexport const browserAdapter: RouteAdapter = {\n search: () => (typeof window === \"undefined\" ? \"\" : window.location.search),\n navigate: (search, { replace }) => {\n const url = `${window.location.pathname}${search}${window.location.hash}`;\n window.history[replace ? \"replaceState\" : \"pushState\"](window.history.state, \"\", url);\n window.dispatchEvent(new Event(CHANGE));\n },\n subscribe: (onChange) => {\n window.addEventListener(\"popstate\", onChange);\n window.addEventListener(CHANGE, onChange);\n return () => {\n window.removeEventListener(\"popstate\", onChange);\n window.removeEventListener(CHANGE, onChange);\n };\n },\n};\n\nconst AdapterContext = React.createContext<RouteAdapter>(browserAdapter);\n\nexport interface RouteStateProviderProps {\n /** How your router reads the query string, navigates and tells about changes. */\n adapter: RouteAdapter;\n children: React.ReactNode;\n}\n\n/** Gives `useRouteState` your router: `<RouteStateProvider adapter={nextAdapter}>` once, in the root layout. */\nexport function RouteStateProvider({ adapter, children }: RouteStateProviderProps) {\n return <AdapterContext.Provider value={adapter}>{children}</AdapterContext.Provider>;\n}\n\nexport interface RouteStateOptions<V extends string> {\n /** The values the parameter may hold, as a const list: anything else in the address reads as the default. Omit for free text. */\n values?: readonly V[];\n /** The value when the parameter is absent. It is never written to the address (a clean URL). */\n default: V;\n /** `push` (the default) keeps each change in the history, `replace` overwrites it: use `replace` for a filter typed or toggled in passing. */\n history?: \"push\" | \"replace\";\n}\n\n/** The value a query string holds for `key`, checked against `values`. Pure: the hook and the tests share it. */\nexport function readRouteValue<V extends string>(search: string, key: string, { values, default: fallback }: Pick<RouteStateOptions<V>, \"values\" | \"default\">): V {\n const raw = new URLSearchParams(search).get(key);\n if (raw === null) return fallback;\n return !values || (values as readonly string[]).includes(raw) ? (raw as V) : fallback;\n}\n\n/** The query string with `key` set to `value` (removed when it is the default); every other parameter is kept. Pure. */\nexport function writeRouteValue(search: string, key: string, value: string, fallback: string): string {\n const params = new URLSearchParams(search);\n if (value === fallback) params.delete(key);\n else params.set(key, value);\n const text = params.toString();\n return text ? `?${text}` : \"\";\n}\n\n/**\n * A value kept in the URL's search parameter `key`: `const [type, setType] = useRouteState(\"type\", { values: TYPES, default: \"auto\" })`\n * with `const TYPES = [\"auto\", \"lease\", \"contract\", \"invoice\", \"other\"] as const`. The value is typed from the list, an\n * unknown one in the address reads as the default, the default is not written, other parameters are kept.\n * `key` undefined makes the hook inert (it returns the default) so a component can call it unconditionally.\n */\nexport function useRouteState<V extends string>(key: string | undefined, { values, default: fallback, history = \"push\" }: RouteStateOptions<V>): readonly [V, (next: V) => void] {\n const adapter = React.useContext(AdapterContext);\n const search = React.useSyncExternalStore(adapter.subscribe, adapter.search, () => \"\");\n const value = key === undefined ? fallback : readRouteValue(search, key, { values, default: fallback });\n const set = React.useCallback(\n (next: V) => {\n if (key === undefined) return;\n adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === \"replace\" });\n },\n [adapter, key, fallback, history],\n );\n return [value, set] as const;\n}\n\n/** What a selection component spreads on its root: `value` and `onValueChange` bound to the URL when `routeKey` is set. */\nexport interface RouteBindable {\n value?: string | null;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n}\n\n/** The props of a selection component bound to the URL (`routeKey`), or its own, unchanged, when there is no `routeKey`. */\nexport function useRouteBinding<P extends RouteBindable>(routeKey: string | undefined, routeValues: readonly string[] | undefined, props: P): P {\n const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? \"\";\n const [value, set] = useRouteState<string>(routeKey, { values: routeValues, default: initial });\n if (routeKey === undefined) return props;\n return {\n ...props,\n value,\n defaultValue: undefined,\n onValueChange: (next: string) => {\n set(next);\n props.onValueChange?.(next);\n },\n };\n}\n"],"mappings":"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","names":["React","jsx","jsx"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
BlockLink,
|
|
3
3
|
isExternal
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-FVGFPB73.js";
|
|
5
5
|
import {
|
|
6
6
|
ArrowGlyph,
|
|
7
7
|
ExternalGlyph
|
|
@@ -50,4 +50,4 @@ export {
|
|
|
50
50
|
cardHoverClass,
|
|
51
51
|
LinkCard
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-7JG3VR4C.js.map
|
|
@@ -12,10 +12,10 @@ function BlockLink({
|
|
|
12
12
|
}) {
|
|
13
13
|
if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
|
|
14
14
|
const Comp = Link;
|
|
15
|
-
return /* @__PURE__ */ jsx(Comp, { href, ...props });
|
|
15
|
+
return /* @__PURE__ */ jsx(Comp, { href, rel, ...props });
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export {
|
|
19
19
|
BlockLink
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-ENOS6ETI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/block-link.tsx"],"sourcesContent":["// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} {...props} />;\n}\n"],"mappings":";;;AAkBuB;AAThB,IAAM,aAAa,CAAC,SAAiB,uBAAuB,KAAK,IAAI;AAErE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ,OAAO;AAAA,EACf,WAAW,WAAW,IAAI;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2G;AACzG,MAAI,SAAU,QAAO,oBAAC,OAAE,MAAY,QAAO,UAAS,KAAK,OAAO,uBAAwB,GAAG,OAAO;AAClG,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,
|
|
1
|
+
{"version":3,"sources":["../src/block-link.tsx"],"sourcesContent":["// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} rel={rel} {...props} />;\n}\n"],"mappings":";;;AAkBuB;AAThB,IAAM,aAAa,CAAC,SAAiB,uBAAuB,KAAK,IAAI;AAErE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ,OAAO;AAAA,EACf,WAAW,WAAW,IAAI;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2G;AACzG,MAAI,SAAU,QAAO,oBAAC,OAAE,MAAY,QAAO,UAAS,KAAK,OAAO,uBAAwB,GAAG,OAAO;AAClG,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAY,KAAW,GAAG,OAAO;AAChD;","names":[]}
|
|
@@ -10,11 +10,11 @@ function BlockLink({
|
|
|
10
10
|
}) {
|
|
11
11
|
if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
|
|
12
12
|
const Comp = Link;
|
|
13
|
-
return /* @__PURE__ */ jsx(Comp, { href, ...props });
|
|
13
|
+
return /* @__PURE__ */ jsx(Comp, { href, rel, ...props });
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
export {
|
|
17
17
|
isExternal,
|
|
18
18
|
BlockLink
|
|
19
19
|
};
|
|
20
|
-
//# sourceMappingURL=chunk-
|
|
20
|
+
//# sourceMappingURL=chunk-FVGFPB73.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/block-link.tsx"],"sourcesContent":["// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} {...props} />;\n}\n"],"mappings":";AAkBuB;AAThB,IAAM,aAAa,CAAC,SAAiB,uBAAuB,KAAK,IAAI;AAErE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ,OAAO;AAAA,EACf,WAAW,WAAW,IAAI;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2G;AACzG,MAAI,SAAU,QAAO,oBAAC,OAAE,MAAY,QAAO,UAAS,KAAK,OAAO,uBAAwB,GAAG,OAAO;AAClG,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,
|
|
1
|
+
{"version":3,"sources":["../src/block-link.tsx"],"sourcesContent":["// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n href,\n linkAs: Link = \"a\",\n external = isExternal(href),\n rel,\n ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n const Comp = Link as React.ElementType;\n return <Comp href={href} rel={rel} {...props} />;\n}\n"],"mappings":";AAkBuB;AAThB,IAAM,aAAa,CAAC,SAAiB,uBAAuB,KAAK,IAAI;AAErE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ,OAAO;AAAA,EACf,WAAW,WAAW,IAAI;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2G;AACzG,MAAI,SAAU,QAAO,oBAAC,OAAE,MAAY,QAAO,UAAS,KAAK,OAAO,uBAAwB,GAAG,OAAO;AAClG,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAY,KAAW,GAAG,OAAO;AAChD;","names":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
floating
|
|
4
|
+
} from "./chunk-J3NC6ER4.js";
|
|
5
|
+
import {
|
|
6
|
+
cn
|
|
7
|
+
} from "./chunk-NSLXEDIS.js";
|
|
8
|
+
|
|
9
|
+
// src/tooltip/tooltip.tsx
|
|
10
|
+
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
13
|
+
function Tooltip({
|
|
14
|
+
content,
|
|
15
|
+
children,
|
|
16
|
+
open,
|
|
17
|
+
defaultOpen,
|
|
18
|
+
onOpenChange,
|
|
19
|
+
delayDuration = 300,
|
|
20
|
+
container,
|
|
21
|
+
sideOffset = 6,
|
|
22
|
+
collisionPadding = 8,
|
|
23
|
+
className,
|
|
24
|
+
...props
|
|
25
|
+
}) {
|
|
26
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
|
|
27
|
+
/* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
|
|
28
|
+
/* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
|
|
29
|
+
TooltipPrimitive.Content,
|
|
30
|
+
{
|
|
31
|
+
sideOffset,
|
|
32
|
+
collisionPadding,
|
|
33
|
+
className: cn(floating, "max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)", className),
|
|
34
|
+
...props,
|
|
35
|
+
children: content
|
|
36
|
+
}
|
|
37
|
+
) })
|
|
38
|
+
] }) });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export {
|
|
42
|
+
TooltipProvider,
|
|
43
|
+
Tooltip
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=chunk-YATTFMDV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tooltip/tooltip.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n /** What the tooltip says — passed translated. */\n content: React.ReactNode;\n /** The trigger, rendered as is (`asChild`): a focusable element. */\n children: React.ReactNode;\n /** Open or closed (controlled), with `onOpenChange`. */\n open?: boolean;\n /** Open at first, uncontrolled. */\n defaultOpen?: boolean;\n /** Called when it opens or closes. */\n onOpenChange?: (open: boolean) => void;\n /** Hover delay in ms before it opens (300 by default). */\n delayDuration?: number;\n /** The element the portal renders into (default: document.body). */\n container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n content,\n children,\n open,\n defaultOpen,\n onOpenChange,\n delayDuration = 300,\n container,\n sideOffset = 6,\n collisionPadding = 8,\n className,\n ...props\n}: TooltipProps) {\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal container={container}>\n <TooltipPrimitive.Content\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n {...props}\n >\n {content}\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,WAAW,wBAAwB;AAyCtC,SACE,KADF;AAlCC,IAAM,kBAAkB,iBAAiB;AAmBzC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,eACzB,+BAAC,iBAAiB,MAAjB,EAAsB,MAAY,aAA0B,cAC3D;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAC,iBAAiB,QAAjB,EAAwB,WACvB;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,UAAU,gGAAgG,SAAS;AAAA,QAChI,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
|
package/dist/cover-hero.js
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface GlossaryTermProps {
|
|
4
|
+
/** The word in the host's glossary. */
|
|
5
|
+
term: string;
|
|
6
|
+
/** The host's definition. */
|
|
7
|
+
definition: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
/** An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip. */
|
|
10
|
+
declare function GlossaryTerm({ term, definition }: GlossaryTermProps): React.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { GlossaryTerm, type GlossaryTermProps };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
Tooltip
|
|
4
|
+
} from "./chunk-YATTFMDV.js";
|
|
5
|
+
import "./chunk-J3NC6ER4.js";
|
|
6
|
+
import "./chunk-NSLXEDIS.js";
|
|
7
|
+
|
|
8
|
+
// src/glossary-term/glossary-term.tsx
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
function GlossaryTerm({ term, definition }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: definition, children: /* @__PURE__ */ jsx("dfn", { tabIndex: 0, className: "kz-glossary-term", children: term }) });
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
GlossaryTerm
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=glossary-term.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/glossary-term/glossary-term.tsx"],"sourcesContent":["// Client (Radix Tooltip): an inline term whose definition is available on keyboard focus as well as hover.\nimport type * as React from \"react\";\n\nimport { Tooltip } from \"../tooltip\";\n\nexport interface GlossaryTermProps {\n /** The word in the host's glossary. */\n term: string;\n /** The host's definition. */\n definition: React.ReactNode;\n}\n\n/** An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip. */\nexport function GlossaryTerm({ term, definition }: GlossaryTermProps) {\n return (\n <Tooltip content={definition}>\n <dfn tabIndex={0} className=\"kz-glossary-term\">{term}</dfn>\n </Tooltip>\n );\n}\n"],"mappings":";;;;;;;;AAgBM;AAHC,SAAS,aAAa,EAAE,MAAM,WAAW,GAAsB;AACpE,SACE,oBAAC,WAAQ,SAAS,YAChB,8BAAC,SAAI,UAAU,GAAG,WAAU,oBAAoB,gBAAK,GACvD;AAEJ;","names":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface GlossaryEntry {
|
|
4
|
+
/** A stable key supplied by the host. */
|
|
5
|
+
id: string;
|
|
6
|
+
/** The term in the host's glossary. */
|
|
7
|
+
term: React.ReactNode;
|
|
8
|
+
/** The host's definition. */
|
|
9
|
+
definition: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
interface GlossaryProps extends Omit<React.ComponentProps<"section">, "children" | "title"> {
|
|
12
|
+
/** The section's visible heading. */
|
|
13
|
+
title: React.ReactNode;
|
|
14
|
+
/** The terms and definitions from the host's catalogue, in the desired reading order. */
|
|
15
|
+
terms: readonly GlossaryEntry[];
|
|
16
|
+
}
|
|
17
|
+
/** A page or panel listing the terms and definitions from the host's glossary catalogue. */
|
|
18
|
+
declare function Glossary({ title, terms, className, ...props }: GlossaryProps): React.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { Glossary, type GlossaryEntry, type GlossaryProps };
|
package/dist/glossary.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// src/glossary/glossary.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
function Glossary({ title, terms, className, ...props }) {
|
|
5
|
+
const id = React.useId();
|
|
6
|
+
return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${id}-title`, className: ["kz-glossary", className].filter(Boolean).join(" "), ...props, children: [
|
|
7
|
+
/* @__PURE__ */ jsx("h2", { id: `${id}-title`, className: "kz-glossary-title", children: title }),
|
|
8
|
+
/* @__PURE__ */ jsx("dl", { className: "kz-glossary-list", children: terms.map(({ id: termId, term, definition }) => /* @__PURE__ */ jsxs("div", { className: "kz-glossary-entry", children: [
|
|
9
|
+
/* @__PURE__ */ jsx("dt", { children: term }),
|
|
10
|
+
/* @__PURE__ */ jsx("dd", { children: definition })
|
|
11
|
+
] }, termId)) })
|
|
12
|
+
] });
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
Glossary
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=glossary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/glossary/glossary.tsx"],"sourcesContent":["// Server-safe. The full list from the host's glossary catalogue.\nimport * as React from \"react\";\n\nexport interface GlossaryEntry {\n /** A stable key supplied by the host. */\n id: string;\n /** The term in the host's glossary. */\n term: React.ReactNode;\n /** The host's definition. */\n definition: React.ReactNode;\n}\n\nexport interface GlossaryProps extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n /** The section's visible heading. */\n title: React.ReactNode;\n /** The terms and definitions from the host's catalogue, in the desired reading order. */\n terms: readonly GlossaryEntry[];\n}\n\n/** A page or panel listing the terms and definitions from the host's glossary catalogue. */\nexport function Glossary({ title, terms, className, ...props }: GlossaryProps) {\n const id = React.useId();\n return (\n <section aria-labelledby={`${id}-title`} className={[\"kz-glossary\", className].filter(Boolean).join(\" \")} {...props}>\n <h2 id={`${id}-title`} className=\"kz-glossary-title\">{title}</h2>\n <dl className=\"kz-glossary-list\">\n {terms.map(({ id: termId, term, definition }) => (\n <div className=\"kz-glossary-entry\" key={termId}>\n <dt>{term}</dt>\n <dd>{definition}</dd>\n </div>\n ))}\n </dl>\n </section>\n );\n}\n"],"mappings":";AACA,YAAY,WAAW;AAuBjB,cAGI,YAHJ;AAJC,SAAS,SAAS,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAkB;AAC7E,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,aAAQ,mBAAiB,GAAG,EAAE,UAAU,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAC5G;AAAA,wBAAC,QAAG,IAAI,GAAG,EAAE,UAAU,WAAU,qBAAqB,iBAAM;AAAA,IAC5D,oBAAC,QAAG,WAAU,oBACX,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,WAAW,MACzC,qBAAC,SAAI,WAAU,qBACb;AAAA,0BAAC,QAAI,gBAAK;AAAA,MACV,oBAAC,QAAI,sBAAW;AAAA,SAFsB,MAGxC,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
cx
|
|
4
|
-
} from "./chunk-6ISW63JI.js";
|
|
5
|
-
import {
|
|
6
|
-
MotionObserver,
|
|
7
|
-
RotatingWord
|
|
8
|
-
} from "./chunk-4JO5GSSD.js";
|
|
9
2
|
import {
|
|
10
3
|
AkinazaLogo,
|
|
11
4
|
KachizakaLogo,
|
|
@@ -21,6 +14,13 @@ import {
|
|
|
21
14
|
neutral,
|
|
22
15
|
useIds
|
|
23
16
|
} from "./chunk-4E5IUZHR.js";
|
|
17
|
+
import {
|
|
18
|
+
cx
|
|
19
|
+
} from "./chunk-6ISW63JI.js";
|
|
20
|
+
import {
|
|
21
|
+
MotionObserver,
|
|
22
|
+
RotatingWord
|
|
23
|
+
} from "./chunk-4JO5GSSD.js";
|
|
24
24
|
|
|
25
25
|
// src/marks/wu-sama-geometry.ts
|
|
26
26
|
import { marks } from "@krizaka/tokens/native";
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { Locale, DateInput } from '@krizaka/intl';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
type KpiNumberOptions = Omit<Intl.NumberFormatOptions, "style" | "currency" | "currencyDisplay">;
|
|
5
|
+
type KpiFormat = {
|
|
6
|
+
type: "money";
|
|
7
|
+
currency: string;
|
|
8
|
+
minorUnitDigits?: number;
|
|
9
|
+
} | {
|
|
10
|
+
type: "number";
|
|
11
|
+
options?: KpiNumberOptions;
|
|
12
|
+
} | {
|
|
13
|
+
type: "percent";
|
|
14
|
+
options?: KpiNumberOptions;
|
|
15
|
+
};
|
|
16
|
+
type KpiState = "ok" | "watch" | "act";
|
|
17
|
+
interface KpiExplainedProps extends Omit<React.ComponentProps<"article">, "children"> {
|
|
18
|
+
/** The figure's name. */
|
|
19
|
+
label: React.ReactNode;
|
|
20
|
+
/** The raw number: money is integer minor units; percentages are ratios such as 0.125. */
|
|
21
|
+
value: number;
|
|
22
|
+
/** How to format the value with `@krizaka/intl`. */
|
|
23
|
+
format: KpiFormat;
|
|
24
|
+
/** The app's locale, e.g. `fr-CA`. */
|
|
25
|
+
locale: Locale;
|
|
26
|
+
/** The IANA time zone for freshness dates; defaults to UTC for deterministic rendering. */
|
|
27
|
+
timeZone?: string;
|
|
28
|
+
/** One plain-language sentence about what the figure means. */
|
|
29
|
+
meaning: string;
|
|
30
|
+
/** The localized label for the formula row. */
|
|
31
|
+
formulaLabel: React.ReactNode;
|
|
32
|
+
/** The calculation in words, e.g. “dépenses TTC ÷ ventes TTC”. */
|
|
33
|
+
formula: string;
|
|
34
|
+
/** The localized label for the source row. */
|
|
35
|
+
sourceLabel: React.ReactNode;
|
|
36
|
+
/** The source link or file name, supplied by the host. */
|
|
37
|
+
source: React.ReactNode;
|
|
38
|
+
/** A host-provided action such as “Verify”, next to the source. */
|
|
39
|
+
verify?: React.ReactNode;
|
|
40
|
+
/** Host-provided thresholds in the same units as `value`. */
|
|
41
|
+
thresholds: {
|
|
42
|
+
direction: "above" | "below";
|
|
43
|
+
watchAt: number;
|
|
44
|
+
actAt: number;
|
|
45
|
+
};
|
|
46
|
+
/** Host-provided words for the derived state. */
|
|
47
|
+
stateLabels: Record<KpiState, React.ReactNode>;
|
|
48
|
+
/** Reading time and the expected next reading time (the host derives it from its cadence). */
|
|
49
|
+
freshness: {
|
|
50
|
+
lastRead: DateInput;
|
|
51
|
+
expectedAt: DateInput;
|
|
52
|
+
now: DateInput;
|
|
53
|
+
lastReadLabel: React.ReactNode;
|
|
54
|
+
staleLabel: React.ReactNode;
|
|
55
|
+
};
|
|
56
|
+
/** An optional Sparkline from `@krizaka/charts`, with its own accessible summary. */
|
|
57
|
+
sparkline?: React.ReactNode;
|
|
58
|
+
/** Replace every non-space character in the value while preserving its formatted shape. */
|
|
59
|
+
masked?: boolean;
|
|
60
|
+
/** The accessible name shown instead of the value when masked. */
|
|
61
|
+
maskedLabel: string;
|
|
62
|
+
}
|
|
63
|
+
/** A key figure that explains what it means, how it is calculated and where it came from. */
|
|
64
|
+
declare function KpiExplained({ label, value, format, locale, timeZone, meaning, formulaLabel, formula, sourceLabel, source, verify, thresholds, stateLabels, freshness, sparkline, masked, maskedLabel, className, ...props }: KpiExplainedProps): React.JSX.Element;
|
|
65
|
+
|
|
66
|
+
export { KpiExplained, type KpiExplainedProps, type KpiFormat, type KpiNumberOptions, type KpiState };
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
// src/kpi-explained/kpi-explained.tsx
|
|
2
|
+
import { formatDate, formatMoney, formatNumber, formatPercent } from "@krizaka/intl";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
function formatValue(value, format, locale) {
|
|
6
|
+
switch (format.type) {
|
|
7
|
+
case "money":
|
|
8
|
+
return formatMoney(value, { currency: format.currency, locale, minorUnitDigits: format.minorUnitDigits });
|
|
9
|
+
case "percent":
|
|
10
|
+
return formatPercent(value, { locale, ...format.options });
|
|
11
|
+
case "number":
|
|
12
|
+
return formatNumber(value, { locale, ...format.options });
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
function stateFor(value, thresholds) {
|
|
16
|
+
if (thresholds.direction === "above") {
|
|
17
|
+
return value >= thresholds.actAt ? "act" : value >= thresholds.watchAt ? "watch" : "ok";
|
|
18
|
+
}
|
|
19
|
+
return value <= thresholds.actAt ? "act" : value <= thresholds.watchAt ? "watch" : "ok";
|
|
20
|
+
}
|
|
21
|
+
function maskValue(value) {
|
|
22
|
+
return value.replace(/[^\s]/gu, "\u2022");
|
|
23
|
+
}
|
|
24
|
+
function KpiExplained({
|
|
25
|
+
label,
|
|
26
|
+
value,
|
|
27
|
+
format,
|
|
28
|
+
locale,
|
|
29
|
+
timeZone = "UTC",
|
|
30
|
+
meaning,
|
|
31
|
+
formulaLabel,
|
|
32
|
+
formula,
|
|
33
|
+
sourceLabel,
|
|
34
|
+
source,
|
|
35
|
+
verify,
|
|
36
|
+
thresholds,
|
|
37
|
+
stateLabels,
|
|
38
|
+
freshness,
|
|
39
|
+
sparkline,
|
|
40
|
+
masked = false,
|
|
41
|
+
maskedLabel,
|
|
42
|
+
className,
|
|
43
|
+
...props
|
|
44
|
+
}) {
|
|
45
|
+
const id = React.useId();
|
|
46
|
+
const state = stateFor(value, thresholds);
|
|
47
|
+
const formattedValue = formatValue(value, format, locale);
|
|
48
|
+
const lastRead = new Date(freshness.lastRead);
|
|
49
|
+
const stale = new Date(freshness.now) >= new Date(freshness.expectedAt);
|
|
50
|
+
return /* @__PURE__ */ jsxs("article", { "aria-labelledby": `${id}-label`, className: ["kz-kpi", className].filter(Boolean).join(" "), "data-state": state, ...props, children: [
|
|
51
|
+
/* @__PURE__ */ jsxs("header", { className: "kz-kpi-head", children: [
|
|
52
|
+
/* @__PURE__ */ jsx("h3", { id: `${id}-label`, className: "kz-kpi-label", children: label }),
|
|
53
|
+
/* @__PURE__ */ jsx("span", { className: "kz-kpi-state", "data-state": state, children: stateLabels[state] })
|
|
54
|
+
] }),
|
|
55
|
+
/* @__PURE__ */ jsx("p", { className: "kz-kpi-value", children: masked ? /* @__PURE__ */ jsx("span", { role: "img", "aria-label": maskedLabel, children: maskValue(formattedValue) }) : formattedValue }),
|
|
56
|
+
/* @__PURE__ */ jsx("p", { className: "kz-kpi-meaning", children: meaning }),
|
|
57
|
+
/* @__PURE__ */ jsxs("dl", { className: "kz-kpi-details", children: [
|
|
58
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
59
|
+
/* @__PURE__ */ jsx("dt", { children: formulaLabel }),
|
|
60
|
+
/* @__PURE__ */ jsx("dd", { children: formula })
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
63
|
+
/* @__PURE__ */ jsx("dt", { children: sourceLabel }),
|
|
64
|
+
/* @__PURE__ */ jsxs("dd", { children: [
|
|
65
|
+
source,
|
|
66
|
+
verify ? /* @__PURE__ */ jsx("span", { className: "kz-kpi-verify", children: verify }) : null
|
|
67
|
+
] })
|
|
68
|
+
] })
|
|
69
|
+
] }),
|
|
70
|
+
/* @__PURE__ */ jsxs("p", { className: "kz-kpi-freshness", children: [
|
|
71
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
72
|
+
freshness.lastReadLabel,
|
|
73
|
+
": "
|
|
74
|
+
] }),
|
|
75
|
+
/* @__PURE__ */ jsx("time", { dateTime: lastRead.toISOString(), children: formatDate(lastRead, { locale, style: "medium", timeStyle: "short", timeZone }) }),
|
|
76
|
+
stale ? /* @__PURE__ */ jsx("span", { className: "kz-kpi-stale", role: "status", children: freshness.staleLabel }) : null
|
|
77
|
+
] }),
|
|
78
|
+
sparkline ? /* @__PURE__ */ jsx("div", { className: "kz-kpi-sparkline", children: sparkline }) : null
|
|
79
|
+
] });
|
|
80
|
+
}
|
|
81
|
+
export {
|
|
82
|
+
KpiExplained
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=kpi-explained.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/kpi-explained/kpi-explained.tsx"],"sourcesContent":["// Server-safe. A figure whose meaning, formula, source and freshness travel with its value.\nimport { type DateInput, formatDate, formatMoney, formatNumber, formatPercent, type Locale } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nexport type KpiNumberOptions = Omit<Intl.NumberFormatOptions, \"style\" | \"currency\" | \"currencyDisplay\">;\n\nexport type KpiFormat =\n | { type: \"money\"; currency: string; minorUnitDigits?: number }\n | { type: \"number\"; options?: KpiNumberOptions }\n | { type: \"percent\"; options?: KpiNumberOptions };\n\nexport type KpiState = \"ok\" | \"watch\" | \"act\";\n\nexport interface KpiExplainedProps extends Omit<React.ComponentProps<\"article\">, \"children\"> {\n /** The figure's name. */\n label: React.ReactNode;\n /** The raw number: money is integer minor units; percentages are ratios such as 0.125. */\n value: number;\n /** How to format the value with `@krizaka/intl`. */\n format: KpiFormat;\n /** The app's locale, e.g. `fr-CA`. */\n locale: Locale;\n /** The IANA time zone for freshness dates; defaults to UTC for deterministic rendering. */\n timeZone?: string;\n /** One plain-language sentence about what the figure means. */\n meaning: string;\n /** The localized label for the formula row. */\n formulaLabel: React.ReactNode;\n /** The calculation in words, e.g. “dépenses TTC ÷ ventes TTC”. */\n formula: string;\n /** The localized label for the source row. */\n sourceLabel: React.ReactNode;\n /** The source link or file name, supplied by the host. */\n source: React.ReactNode;\n /** A host-provided action such as “Verify”, next to the source. */\n verify?: React.ReactNode;\n /** Host-provided thresholds in the same units as `value`. */\n thresholds: {\n direction: \"above\" | \"below\";\n watchAt: number;\n actAt: number;\n };\n /** Host-provided words for the derived state. */\n stateLabels: Record<KpiState, React.ReactNode>;\n /** Reading time and the expected next reading time (the host derives it from its cadence). */\n freshness: {\n lastRead: DateInput;\n expectedAt: DateInput;\n now: DateInput;\n lastReadLabel: React.ReactNode;\n staleLabel: React.ReactNode;\n };\n /** An optional Sparkline from `@krizaka/charts`, with its own accessible summary. */\n sparkline?: React.ReactNode;\n /** Replace every non-space character in the value while preserving its formatted shape. */\n masked?: boolean;\n /** The accessible name shown instead of the value when masked. */\n maskedLabel: string;\n}\n\nfunction formatValue(value: number, format: KpiFormat, locale: Locale): string {\n switch (format.type) {\n case \"money\":\n return formatMoney(value, { currency: format.currency, locale, minorUnitDigits: format.minorUnitDigits });\n case \"percent\":\n return formatPercent(value, { locale, ...format.options });\n case \"number\":\n return formatNumber(value, { locale, ...format.options });\n }\n}\n\nfunction stateFor(value: number, thresholds: KpiExplainedProps[\"thresholds\"]): KpiState {\n if (thresholds.direction === \"above\") {\n return value >= thresholds.actAt ? \"act\" : value >= thresholds.watchAt ? \"watch\" : \"ok\";\n }\n return value <= thresholds.actAt ? \"act\" : value <= thresholds.watchAt ? \"watch\" : \"ok\";\n}\n\nfunction maskValue(value: string): string {\n return value.replace(/[^\\s]/gu, \"•\");\n}\n\n/** A key figure that explains what it means, how it is calculated and where it came from. */\nexport function KpiExplained({\n label,\n value,\n format,\n locale,\n timeZone = \"UTC\",\n meaning,\n formulaLabel,\n formula,\n sourceLabel,\n source,\n verify,\n thresholds,\n stateLabels,\n freshness,\n sparkline,\n masked = false,\n maskedLabel,\n className,\n ...props\n}: KpiExplainedProps) {\n const id = React.useId();\n const state = stateFor(value, thresholds);\n const formattedValue = formatValue(value, format, locale);\n const lastRead = new Date(freshness.lastRead);\n const stale = new Date(freshness.now) >= new Date(freshness.expectedAt);\n\n return (\n <article aria-labelledby={`${id}-label`} className={[\"kz-kpi\", className].filter(Boolean).join(\" \")} data-state={state} {...props}>\n <header className=\"kz-kpi-head\">\n <h3 id={`${id}-label`} className=\"kz-kpi-label\">{label}</h3>\n <span className=\"kz-kpi-state\" data-state={state}>{stateLabels[state]}</span>\n </header>\n <p className=\"kz-kpi-value\">\n {masked ? <span role=\"img\" aria-label={maskedLabel}>{maskValue(formattedValue)}</span> : formattedValue}\n </p>\n <p className=\"kz-kpi-meaning\">{meaning}</p>\n <dl className=\"kz-kpi-details\">\n <div><dt>{formulaLabel}</dt><dd>{formula}</dd></div>\n <div><dt>{sourceLabel}</dt><dd>{source}{verify ? <span className=\"kz-kpi-verify\">{verify}</span> : null}</dd></div>\n </dl>\n <p className=\"kz-kpi-freshness\">\n <span>{freshness.lastReadLabel}: </span>\n <time dateTime={lastRead.toISOString()}>{formatDate(lastRead, { locale, style: \"medium\", timeStyle: \"short\", timeZone })}</time>\n {stale ? <span className=\"kz-kpi-stale\" role=\"status\">{freshness.staleLabel}</span> : null}\n </p>\n {sparkline ? <div className=\"kz-kpi-sparkline\">{sparkline}</div> : null}\n </article>\n );\n}\n"],"mappings":";AACA,SAAyB,YAAY,aAAa,cAAc,qBAAkC;AAClG,YAAY,WAAW;AA8GjB,SACE,KADF;AApDN,SAAS,YAAY,OAAe,QAAmB,QAAwB;AAC7E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,YAAY,OAAO,EAAE,UAAU,OAAO,UAAU,QAAQ,iBAAiB,OAAO,gBAAgB,CAAC;AAAA,IAC1G,KAAK;AACH,aAAO,cAAc,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAAA,IAC3D,KAAK;AACH,aAAO,aAAa,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAAA,EAC5D;AACF;AAEA,SAAS,SAAS,OAAe,YAAuD;AACtF,MAAI,WAAW,cAAc,SAAS;AACpC,WAAO,SAAS,WAAW,QAAQ,QAAQ,SAAS,WAAW,UAAU,UAAU;AAAA,EACrF;AACA,SAAO,SAAS,WAAW,QAAQ,QAAQ,SAAS,WAAW,UAAU,UAAU;AACrF;AAEA,SAAS,UAAU,OAAuB;AACxC,SAAO,MAAM,QAAQ,WAAW,QAAG;AACrC;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,KAAW,YAAM;AACvB,QAAM,QAAQ,SAAS,OAAO,UAAU;AACxC,QAAM,iBAAiB,YAAY,OAAO,QAAQ,MAAM;AACxD,QAAM,WAAW,IAAI,KAAK,UAAU,QAAQ;AAC5C,QAAM,QAAQ,IAAI,KAAK,UAAU,GAAG,KAAK,IAAI,KAAK,UAAU,UAAU;AAEtE,SACE,qBAAC,aAAQ,mBAAiB,GAAG,EAAE,UAAU,WAAW,CAAC,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,cAAY,OAAQ,GAAG,OAC1H;AAAA,yBAAC,YAAO,WAAU,eAChB;AAAA,0BAAC,QAAG,IAAI,GAAG,EAAE,UAAU,WAAU,gBAAgB,iBAAM;AAAA,MACvD,oBAAC,UAAK,WAAU,gBAAe,cAAY,OAAQ,sBAAY,KAAK,GAAE;AAAA,OACxE;AAAA,IACA,oBAAC,OAAE,WAAU,gBACV,mBAAS,oBAAC,UAAK,MAAK,OAAM,cAAY,aAAc,oBAAU,cAAc,GAAE,IAAU,gBAC3F;AAAA,IACA,oBAAC,OAAE,WAAU,kBAAkB,mBAAQ;AAAA,IACvC,qBAAC,QAAG,WAAU,kBACZ;AAAA,2BAAC,SAAI;AAAA,4BAAC,QAAI,wBAAa;AAAA,QAAK,oBAAC,QAAI,mBAAQ;AAAA,SAAK;AAAA,MAC9C,qBAAC,SAAI;AAAA,4BAAC,QAAI,uBAAY;AAAA,QAAK,qBAAC,QAAI;AAAA;AAAA,UAAQ,SAAS,oBAAC,UAAK,WAAU,iBAAiB,kBAAO,IAAU;AAAA,WAAK;AAAA,SAAK;AAAA,OAC/G;AAAA,IACA,qBAAC,OAAE,WAAU,oBACX;AAAA,2BAAC,UAAM;AAAA,kBAAU;AAAA,QAAc;AAAA,SAAE;AAAA,MACjC,oBAAC,UAAK,UAAU,SAAS,YAAY,GAAI,qBAAW,UAAU,EAAE,QAAQ,OAAO,UAAU,WAAW,SAAS,SAAS,CAAC,GAAE;AAAA,MACxH,QAAQ,oBAAC,UAAK,WAAU,gBAAe,MAAK,UAAU,oBAAU,YAAW,IAAU;AAAA,OACxF;AAAA,IACC,YAAY,oBAAC,SAAI,WAAU,oBAAoB,qBAAU,IAAS;AAAA,KACrE;AAEJ;","names":[]}
|
package/dist/link-card.js
CHANGED
package/dist/media-grid.js
CHANGED
|
@@ -82,7 +82,7 @@ function BlockLink({
|
|
|
82
82
|
}) {
|
|
83
83
|
if (external) return /* @__PURE__ */ jsx3("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
|
|
84
84
|
const Comp = Link;
|
|
85
|
-
return /* @__PURE__ */ jsx3(Comp, { href, ...props });
|
|
85
|
+
return /* @__PURE__ */ jsx3(Comp, { href, rel, ...props });
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
// src/media-grid/section-hint.tsx
|