@cueplusplus/ui 0.13.0 → 0.14.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/CHANGELOG.md +124 -0
- package/README.md +2 -19
- package/dist/index.d.ts +2 -2
- package/dist/layout/frames.d.ts +19 -1
- package/dist/layout/frames.js +21 -7
- package/dist/layout/index.d.ts +2 -2
- package/dist/primitives/chip.d.ts +1 -1
- package/dist/system/theme-provider.d.ts +24 -1
- package/dist/system/theme-provider.js +2 -1
- package/manifest/components/frames.json +14 -0
- package/manifest/components/theme-provider.json +10 -0
- package/manifest/manifest.json +5 -5
- package/manifest/tokens.json +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,129 @@
|
|
|
1
1
|
# @cueplusplus/ui
|
|
2
2
|
|
|
3
|
+
## 0.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- f9bb2ff: **`Frames` takes a `layout`.** The default, `"board"`, is what it has always
|
|
8
|
+
drawn: a picker across the top and one frame on the stage at a time. The new
|
|
9
|
+
`"column"` runs every frame down a single scroller instead — each with its own
|
|
10
|
+
caption and count, all of them on one ground — so a reader comparing eight
|
|
11
|
+
states of a component reads them rather than clicking through them.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Frames layout="column" …/>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Nothing changes for markup that does not pass it: `layout` defaults to
|
|
18
|
+
`"board"`, and a `Frames` with no `layout` prop renders byte-for-byte what it
|
|
19
|
+
rendered before.
|
|
20
|
+
|
|
21
|
+
- f9bb2ff: **`ThemeProvider` takes a CSP `nonce`.**
|
|
22
|
+
|
|
23
|
+
When `overrides.densities` is set, the provider emits one `<style>` element for
|
|
24
|
+
the density layer. An application serving `style-src-elem 'self'
|
|
25
|
+
'nonce-<per-request>'` had that element refused on every page load: React
|
|
26
|
+
renders it on the client, and a client-rendered element cannot pick up a server
|
|
27
|
+
nonce by itself.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// app/layout.tsx — the nonce your middleware already mints
|
|
31
|
+
<ThemeProvider nonce={nonce} overrides={{ densities: … }}>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The attribute is set only when you pass one. It is absent otherwise rather than
|
|
35
|
+
present and empty, because `nonce=""` matches no `'nonce-…'` source and would
|
|
36
|
+
talk a policy out of admitting the element some other way.
|
|
37
|
+
|
|
38
|
+
Nothing else in this library emits a `<style>` element, and `prepaintScript()`
|
|
39
|
+
returns a string your application renders in a `<script>` of its own — so your
|
|
40
|
+
application already owns that element's nonce, and this prop is the whole of
|
|
41
|
+
what a strict `style-src-elem` needs from here.
|
|
42
|
+
|
|
43
|
+
**One thing a nonce cannot fix.** The provider always sets a style _attribute_
|
|
44
|
+
on its root — `color-scheme` and `--cue-font-scale`, plus the font families and
|
|
45
|
+
overrides where given. CSP has no nonce form for `style-src-attr`: it is
|
|
46
|
+
`'unsafe-inline'` or `'none'`. Under `'none'` the browser drops those
|
|
47
|
+
declarations, and no prop here can change that.
|
|
48
|
+
|
|
49
|
+
### Patch Changes
|
|
50
|
+
|
|
51
|
+
- 331501f: ## The scope goes public
|
|
52
|
+
|
|
53
|
+
Every package in `@cueplusplus` was private on npm. npm authenticates _every_
|
|
54
|
+
read of a private package, so each consumer needed a granular read-only token,
|
|
55
|
+
and it could not live in a committed `.npmrc` — pnpm 10 and later ignore an
|
|
56
|
+
env-expanded `_authToken` there by design. The failure mode was the expensive
|
|
57
|
+
part: npm answers a private package the same way to a reader it will not admit
|
|
58
|
+
exists, so a missing credential surfaced as `404 Not Found` rather than `401`,
|
|
59
|
+
and read as "this was never published".
|
|
60
|
+
|
|
61
|
+
That was a fair trade while the design system had no consumer outside the org.
|
|
62
|
+
It stopped being one the moment a public project depended on it, because a
|
|
63
|
+
public project cannot ask its readers for a token before they can install it.
|
|
64
|
+
|
|
65
|
+
So `access` is `public`, in the Changesets config and in all sixteen manifests.
|
|
66
|
+
Consumers now run `pnpm add @cueplusplus/ui` and nothing else: no token, no
|
|
67
|
+
`.npmrc`, nothing to rotate, and no extra step in CI or on a hosting provider.
|
|
68
|
+
|
|
69
|
+
Nothing else moves. Same registry, same names, same versions — so no consumer
|
|
70
|
+
needs to regenerate a lockfile, and a machine that keeps its npm token for
|
|
71
|
+
another private scope can keep it.
|
|
72
|
+
|
|
73
|
+
The guard tests are turned around rather than removed. `changeset-config` still
|
|
74
|
+
asserts the access level and `publishable-packages` still asserts the registry;
|
|
75
|
+
both now assert the public contract. `publishable-packages` additionally asserts
|
|
76
|
+
`access: "public"` per manifest, which it never did before: the Changesets config
|
|
77
|
+
decides what a release does, but npm defaults a scoped package to restricted, so
|
|
78
|
+
a manifest that forgets is the one that quietly stays private while its siblings
|
|
79
|
+
go public.
|
|
80
|
+
|
|
81
|
+
- 52094a9: **The `@cueplusplus` scope is served by npm now, not GitHub Packages.** Every package is
|
|
82
|
+
**private** there, so installs still authenticate — but the credential and the configuration both
|
|
83
|
+
change, and the old ones stop working.
|
|
84
|
+
|
|
85
|
+
**What to remove.** The scope routing you were asked to commit:
|
|
86
|
+
|
|
87
|
+
```ini
|
|
88
|
+
# .npmrc — delete this line
|
|
89
|
+
@cueplusplus:registry=https://npm.pkg.github.com
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Nothing replaces it. npm's own registry is where the scope resolves by default, so there is no
|
|
93
|
+
routing to commit at all — which also means a project that consumed this scope through a committed
|
|
94
|
+
`.npmrc` can usually delete the file.
|
|
95
|
+
|
|
96
|
+
**What to replace.** The classic GitHub PAT with `read:packages` is no longer used. In its place,
|
|
97
|
+
an npm **granular access token** with **read-only** permission on the `@cueplusplus` scope,
|
|
98
|
+
written once at the user level:
|
|
99
|
+
|
|
100
|
+
```sh
|
|
101
|
+
pnpm config set //registry.npmjs.org/:_authToken npm_…
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
It goes at the user level for the same reason as before: pnpm 10 and later ignore an env-expanded
|
|
105
|
+
`_authToken` in a project `.npmrc`, and the install then fails with a `404` — not a `401` — and a
|
|
106
|
+
warning nobody reads. npm answers a private package the same way to a reader it will not admit
|
|
107
|
+
exists, so the failure reads as "never published".
|
|
108
|
+
|
|
109
|
+
**One token, every scope.** npm authenticates per registry rather than per scope, so a machine
|
|
110
|
+
that installs other private scopes from npm needs one line, not one per scope — select them all on
|
|
111
|
+
the same token. Two different tokens for `registry.npmjs.org` cannot coexist in one config.
|
|
112
|
+
|
|
113
|
+
**CI changes too, and this one is easy to miss.** Under GitHub Packages a workflow's own
|
|
114
|
+
`GITHUB_TOKEN` could read the scope, so many workflows carried no secret. npm does not know about
|
|
115
|
+
that token. Every repository that installs these packages now needs the read-only npm token as a
|
|
116
|
+
secret, and `setup-node` pointed at `registry.npmjs.org`. The same applies to Vercel, Trigger.dev
|
|
117
|
+
and any Docker build that installs — `docs/CONSUMING.md` §1 has each of them.
|
|
118
|
+
|
|
119
|
+
Nothing about the packages themselves changed: same exports, same versions, same contents. What
|
|
120
|
+
moved is where they are served from and what proves you may read them.
|
|
121
|
+
|
|
122
|
+
- Updated dependencies [331501f]
|
|
123
|
+
- Updated dependencies [52094a9]
|
|
124
|
+
- @cueplusplus/theme-base@1.0.3
|
|
125
|
+
- @cueplusplus/tokens@0.14.0
|
|
126
|
+
|
|
3
127
|
## 0.13.0
|
|
4
128
|
|
|
5
129
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -5,25 +5,8 @@ Base UI underneath for behaviour and accessibility, Tailwind v4 on top for the p
|
|
|
5
5
|
|
|
6
6
|
## Install
|
|
7
7
|
|
|
8
|
-
The `@cueplusplus` scope is
|
|
9
|
-
|
|
10
|
-
cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
|
|
11
|
-
with `401`.
|
|
12
|
-
|
|
13
|
-
Commit the scope routing, and nothing else, at the root of your project:
|
|
14
|
-
|
|
15
|
-
```ini
|
|
16
|
-
# .npmrc
|
|
17
|
-
@cueplusplus:registry=https://npm.pkg.github.com
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Then write the credential once, at the **user** level, where pnpm reads it from. It is a
|
|
21
|
-
**classic** personal access token with `read:packages` — GitHub Packages accepts neither
|
|
22
|
-
fine-grained PATs nor OIDC:
|
|
23
|
-
|
|
24
|
-
```sh
|
|
25
|
-
pnpm config set //npm.pkg.github.com/:_authToken ghp_…
|
|
26
|
-
```
|
|
8
|
+
The `@cueplusplus` scope is **public on npm** and resolves there by default, so there is nothing
|
|
9
|
+
to configure and no credential to supply — it installs like any other package.
|
|
27
10
|
|
|
28
11
|
```sh
|
|
29
12
|
pnpm add @cueplusplus/ui @cueplusplus/tokens @cueplusplus/theme-cue @base-ui/react
|
package/dist/index.d.ts
CHANGED
|
@@ -96,7 +96,7 @@ import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHead
|
|
|
96
96
|
import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
|
|
97
97
|
import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
|
|
98
98
|
import { PreviewGround } from "./layout/_ground.js";
|
|
99
|
-
import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./layout/frames.js";
|
|
99
|
+
import { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps } from "./layout/frames.js";
|
|
100
100
|
import { Grid, GridColumns, GridProps } from "./layout/grid.js";
|
|
101
101
|
import { Item, ItemProps, itemVariants } from "./layout/item.js";
|
|
102
102
|
import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./layout/pagination.js";
|
|
@@ -135,4 +135,4 @@ import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
|
|
|
135
135
|
import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
|
|
136
136
|
import { useTheme } from "./system/use-theme.js";
|
|
137
137
|
import { DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, STYLE_SETS, StyleSet, ThemeManifest, ThemeName } from "./system/index.js";
|
|
138
|
-
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
|
|
138
|
+
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
|
package/dist/layout/frames.d.ts
CHANGED
|
@@ -29,7 +29,25 @@ interface FramesRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
29
29
|
* listener at all; and the keyboard scrolls the canvas either way.
|
|
30
30
|
*/
|
|
31
31
|
pan?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* How the frames are arranged. Defaults to `"board"`.
|
|
34
|
+
*
|
|
35
|
+
* `"board"` is the original: a short, wide, sideways scroller a reader drags
|
|
36
|
+
* through — right where the frames are a set you *browse*, on a homepage wall
|
|
37
|
+
* or a design surface.
|
|
38
|
+
*
|
|
39
|
+
* `"column"` stacks them one under the next, each at the full width it is
|
|
40
|
+
* given, and the canvas grows to whatever it holds. It exists for the page
|
|
41
|
+
* that *reads*: a documentation page scrolls vertically already, and asking a
|
|
42
|
+
* reader to pan a second axis to reach the fifth variant of a component —
|
|
43
|
+
* with that fifth variant clipped at the board's edge until they do — hides
|
|
44
|
+
* the examples behind an interaction. A column has no fixed height, so
|
|
45
|
+
* `height` is ignored, and nothing pans, so `pan` and `hint` are moot.
|
|
46
|
+
*/
|
|
47
|
+
layout?: FramesLayout;
|
|
32
48
|
}
|
|
49
|
+
/** Whether a canvas browses sideways or reads downwards. */
|
|
50
|
+
type FramesLayout = "board" | "column";
|
|
33
51
|
interface FramesItemProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
34
52
|
/** The specimen. */
|
|
35
53
|
children: React.ReactNode;
|
|
@@ -67,4 +85,4 @@ declare const Frames: {
|
|
|
67
85
|
Item: React.ForwardRefExoticComponent<FramesItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
68
86
|
};
|
|
69
87
|
//#endregion
|
|
70
|
-
export { Frames, FramesHeight, FramesItemProps, FramesRootProps };
|
|
88
|
+
export { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps };
|
package/dist/layout/frames.js
CHANGED
|
@@ -118,6 +118,18 @@ const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface)
|
|
|
118
118
|
* must not be.
|
|
119
119
|
*/
|
|
120
120
|
const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
|
|
121
|
+
/**
|
|
122
|
+
* The column: the same frames, stacked, sized by what they hold.
|
|
123
|
+
*
|
|
124
|
+
* `overflow-visible` on both axes is the point — the box grows instead of
|
|
125
|
+
* clipping, which is the one thing the board deliberately does not do. No
|
|
126
|
+
* scroller of its own, so the page's scroller is the only one a reader meets.
|
|
127
|
+
* It keeps the focus ring and the keyboard handler: the region is still
|
|
128
|
+
* focusable, and arrow keys still scroll it, they just scroll the page.
|
|
129
|
+
*/
|
|
130
|
+
const COLUMN_CLASS = "flex min-w-0 flex-col gap-(--cue-space-6) p-(--cue-space-6) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
|
|
131
|
+
/** A column is sized by its contents, so the box must not hold a height. */
|
|
132
|
+
const COLUMN_ROOT_CLASS = "h-auto";
|
|
121
133
|
/** The affordance, and only where there is something to afford. */
|
|
122
134
|
const PANNABLE_CLASS = "cursor-grab";
|
|
123
135
|
/**
|
|
@@ -143,18 +155,20 @@ const HINT_CLASS = "pointer-events-none absolute right-(--cue-space-4) bottom-(-
|
|
|
143
155
|
* <Preview presentation="frame" label="Tone" count={4}>…</Preview>
|
|
144
156
|
* </Frames.Root>
|
|
145
157
|
*/
|
|
146
|
-
const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, className, ...elementProps }, ref) {
|
|
158
|
+
const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, layout = "board", className, ...elementProps }, ref) {
|
|
147
159
|
const drag = React.useRef(null);
|
|
148
160
|
const canvasRef = React.useRef(null);
|
|
149
161
|
const [panning, setPanning] = React.useState(false);
|
|
162
|
+
const column = layout === "column";
|
|
163
|
+
const pans = pan && !column;
|
|
150
164
|
React.useEffect(() => {
|
|
151
|
-
if (
|
|
165
|
+
if (pans) return;
|
|
152
166
|
const started = drag.current;
|
|
153
167
|
if (started === null) return;
|
|
154
168
|
canvasRef.current?.releasePointerCapture?.(started.id);
|
|
155
169
|
drag.current = null;
|
|
156
170
|
setPanning(false);
|
|
157
|
-
}, [
|
|
171
|
+
}, [pans]);
|
|
158
172
|
const scroll = (event) => {
|
|
159
173
|
if (event.defaultPrevented || event.target !== event.currentTarget) return;
|
|
160
174
|
const canvas = event.currentTarget;
|
|
@@ -203,7 +217,7 @@ const FramesRoot = React.forwardRef(function FramesRoot({ children, label, heigh
|
|
|
203
217
|
...elementProps,
|
|
204
218
|
ref,
|
|
205
219
|
"data-slot": "frames",
|
|
206
|
-
className: cn(ROOT_CLASS, HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
|
|
220
|
+
className: cn(ROOT_CLASS, column ? COLUMN_ROOT_CLASS : HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
|
|
207
221
|
children: [/* @__PURE__ */ jsx("div", {
|
|
208
222
|
ref: canvasRef,
|
|
209
223
|
role: "region",
|
|
@@ -211,11 +225,11 @@ const FramesRoot = React.forwardRef(function FramesRoot({ children, label, heigh
|
|
|
211
225
|
"aria-label": label,
|
|
212
226
|
"data-slot": "frames-canvas",
|
|
213
227
|
"data-panning": panning ? "true" : void 0,
|
|
214
|
-
className: cn(CANVAS_CLASS,
|
|
228
|
+
className: column ? COLUMN_CLASS : cn(CANVAS_CLASS, pans && PANNABLE_CLASS, panning && PANNING_CLASS),
|
|
215
229
|
onKeyDown: scroll,
|
|
216
|
-
...
|
|
230
|
+
...pans ? pointer : {},
|
|
217
231
|
children
|
|
218
|
-
}), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
|
|
232
|
+
}), hint === void 0 || column ? null : /* @__PURE__ */ jsx("span", {
|
|
219
233
|
"data-slot": "frames-hint",
|
|
220
234
|
className: HINT_CLASS,
|
|
221
235
|
children: hint
|
package/dist/layout/index.d.ts
CHANGED
|
@@ -9,11 +9,11 @@ import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHead
|
|
|
9
9
|
import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
|
|
10
10
|
import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
|
|
11
11
|
import { PreviewGround } from "./_ground.js";
|
|
12
|
-
import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./frames.js";
|
|
12
|
+
import { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps } from "./frames.js";
|
|
13
13
|
import { Grid, GridColumns, GridProps } from "./grid.js";
|
|
14
14
|
import { Item, ItemProps, itemVariants } from "./item.js";
|
|
15
15
|
import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
|
|
16
16
|
import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.js";
|
|
17
17
|
import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
|
|
18
18
|
import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
|
|
19
|
-
export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };
|
|
19
|
+
export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };
|
|
@@ -30,7 +30,7 @@ import * as React from "react";
|
|
|
30
30
|
* <span className={chipVariants({ variant: "tag" })}>mcp</span>
|
|
31
31
|
*/
|
|
32
32
|
declare const chipVariants: (props?: ({
|
|
33
|
-
tone?: "
|
|
33
|
+
tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
|
|
34
34
|
variant?: "outline" | "tinted" | "tag" | null | undefined;
|
|
35
35
|
interactive?: boolean | null | undefined;
|
|
36
36
|
} & ClassProp) | undefined) => string;
|
|
@@ -236,6 +236,29 @@ interface ThemeProviderProps {
|
|
|
236
236
|
storageKey?: string;
|
|
237
237
|
/** Restore and write root preferences in localStorage. Defaults to `true`. */
|
|
238
238
|
persistPreferences?: boolean;
|
|
239
|
+
/**
|
|
240
|
+
* The Content-Security-Policy nonce for the density override layer.
|
|
241
|
+
*
|
|
242
|
+
* When `overrides.densities` is set this provider emits one `<style>`
|
|
243
|
+
* element (see {@link ThemeProviderProps.overrides}). Under a policy of
|
|
244
|
+
* `style-src-elem 'self' 'nonce-<per-request>'` the browser refuses that
|
|
245
|
+
* element on every page load, because an element React renders on the client
|
|
246
|
+
* cannot pick up a server nonce by itself. Pass the request's nonce here and
|
|
247
|
+
* it is set on the element.
|
|
248
|
+
*
|
|
249
|
+
* Nothing else in this library emits a `<style>` element, and
|
|
250
|
+
* `prepaintScript()` returns a *string* the application renders in a
|
|
251
|
+
* `<script>` of its own — so the application already controls that element's
|
|
252
|
+
* nonce, and this prop is the whole of what a strict policy needs from here.
|
|
253
|
+
*
|
|
254
|
+
* **A nonce cannot rescue a style ATTRIBUTE**, and this provider always sets
|
|
255
|
+
* one on its root: `color-scheme` and `--cue-font-scale`, plus the font
|
|
256
|
+
* families and overrides where they are given. CSP has no nonce form for
|
|
257
|
+
* `style-src-attr` — it is `'unsafe-inline'` or `'none'` — so an application
|
|
258
|
+
* serving `style-src-attr 'none'` loses those declarations, silently. That is
|
|
259
|
+
* a policy decision rather than something this prop can change.
|
|
260
|
+
*/
|
|
261
|
+
nonce?: string;
|
|
239
262
|
/** Stamp the single child element instead of rendering a wrapper `<div>`. */
|
|
240
263
|
asChild?: boolean;
|
|
241
264
|
/** Extra classes for the provider root. */
|
|
@@ -285,6 +308,6 @@ interface ThemeProviderProps {
|
|
|
285
308
|
* <App />
|
|
286
309
|
* </ThemeProvider>
|
|
287
310
|
*/
|
|
288
|
-
declare function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
|
|
311
|
+
declare function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, nonce, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
|
|
289
312
|
//#endregion
|
|
290
313
|
export { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps };
|
|
@@ -170,7 +170,7 @@ function writePreferences(storageKey, preferences) {
|
|
|
170
170
|
* <App />
|
|
171
171
|
* </ThemeProvider>
|
|
172
172
|
*/
|
|
173
|
-
function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp = DEFAULT_MODE, font: fontProp, styleSet: styleSetProp, fontScale = 1, fontFamilies, overrides, storageKey = DEFAULT_STORAGE_KEY, persistPreferences = true, asChild = false, className, style: styleProp, children }) {
|
|
173
|
+
function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp = DEFAULT_MODE, font: fontProp, styleSet: styleSetProp, fontScale = 1, fontFamilies, overrides, storageKey = DEFAULT_STORAGE_KEY, persistPreferences = true, nonce, asChild = false, className, style: styleProp, children }) {
|
|
174
174
|
const ambient = React.useContext(ThemeContext);
|
|
175
175
|
const isRoot = ambient === null;
|
|
176
176
|
const outerStyleSet = React.useContext(StyleSetContext);
|
|
@@ -510,6 +510,7 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
|
|
|
510
510
|
children
|
|
511
511
|
});
|
|
512
512
|
const densityLayer = overridesStyle === "" ? null : /* @__PURE__ */ jsx("style", {
|
|
513
|
+
...nonce === void 0 ? null : { nonce },
|
|
513
514
|
"data-cue-overrides": "",
|
|
514
515
|
children: overridesStyle
|
|
515
516
|
});
|
|
@@ -88,6 +88,20 @@
|
|
|
88
88
|
"control": {
|
|
89
89
|
"kind": "boolean"
|
|
90
90
|
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "layout",
|
|
94
|
+
"type": "\"column\" | \"board\"",
|
|
95
|
+
"required": false,
|
|
96
|
+
"defaultValue": "board",
|
|
97
|
+
"description": "How the frames are arranged. Defaults to `\"board\"`.\n\n`\"board\"` is the original: a short, wide, sideways scroller a reader drags\nthrough — right where the frames are a set you *browse*, on a homepage wall\nor a design surface.\n\n`\"column\"` stacks them one under the next, each at the full width it is\ngiven, and the canvas grows to whatever it holds. It exists for the page\nthat *reads*: a documentation page scrolls vertically already, and asking a\nreader to pan a second axis to reach the fifth variant of a component —\nwith that fifth variant clipped at the board's edge until they do — hides\nthe examples behind an interaction. A column has no fixed height, so\n`height` is ignored, and nothing pans, so `pan` and `hint` are moot.",
|
|
98
|
+
"control": {
|
|
99
|
+
"kind": "enum",
|
|
100
|
+
"members": [
|
|
101
|
+
"column",
|
|
102
|
+
"board"
|
|
103
|
+
]
|
|
104
|
+
}
|
|
91
105
|
}
|
|
92
106
|
],
|
|
93
107
|
"typeReferences": [
|
|
@@ -144,6 +144,16 @@
|
|
|
144
144
|
"kind": "boolean"
|
|
145
145
|
}
|
|
146
146
|
},
|
|
147
|
+
{
|
|
148
|
+
"name": "nonce",
|
|
149
|
+
"type": "string",
|
|
150
|
+
"required": false,
|
|
151
|
+
"defaultValue": null,
|
|
152
|
+
"description": "The Content-Security-Policy nonce for the density override layer.\n\nWhen `overrides.densities` is set this provider emits one `<style>`\nelement (see {@link ThemeProviderProps.overrides}). Under a policy of\n`style-src-elem 'self' 'nonce-<per-request>'` the browser refuses that\nelement on every page load, because an element React renders on the client\ncannot pick up a server nonce by itself. Pass the request's nonce here and\nit is set on the element.\n\nNothing else in this library emits a `<style>` element, and\n`prepaintScript()` returns a *string* the application renders in a\n`<script>` of its own — so the application already controls that element's\nnonce, and this prop is the whole of what a strict policy needs from here.\n\n**A nonce cannot rescue a style ATTRIBUTE**, and this provider always sets\none on its root: `color-scheme` and `--cue-font-scale`, plus the font\nfamilies and overrides where they are given. CSP has no nonce form for\n`style-src-attr` — it is `'unsafe-inline'` or `'none'` — so an application\nserving `style-src-attr 'none'` loses those declarations, silently. That is\na policy decision rather than something this prop can change.",
|
|
153
|
+
"control": {
|
|
154
|
+
"kind": "string"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
147
157
|
{
|
|
148
158
|
"name": "asChild",
|
|
149
159
|
"type": "boolean",
|
package/manifest/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 2,
|
|
3
3
|
"library": "@cueplusplus/ui",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.14.0",
|
|
5
5
|
"generatedAt": "1970-01-01T00:00:00.000Z",
|
|
6
6
|
"themes": [
|
|
7
7
|
"cue",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
],
|
|
30
30
|
"tokens": {
|
|
31
31
|
"path": "./tokens.json",
|
|
32
|
-
"sha256": "
|
|
32
|
+
"sha256": "4a67c730571c7adec7271a686d7e16a14cec6d132bf0b14315e5e779557c33f3"
|
|
33
33
|
},
|
|
34
34
|
"systemApis": [
|
|
35
35
|
{
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
{
|
|
156
156
|
"name": "ThemeProvider",
|
|
157
157
|
"kind": "component",
|
|
158
|
-
"signature": "({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, asChild, className, style: styleProp, children, }: ThemeProviderProps): React.JSX.Element"
|
|
158
|
+
"signature": "({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, nonce, asChild, className, style: styleProp, children, }: ThemeProviderProps): React.JSX.Element"
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"name": "ThemeProviderProps",
|
|
@@ -3912,7 +3912,7 @@
|
|
|
3912
3912
|
"mdUrl": "/docs/components/frames.md",
|
|
3913
3913
|
"jsonUrl": "/r/components/frames.json",
|
|
3914
3914
|
"path": "./components/frames.json",
|
|
3915
|
-
"sha256": "
|
|
3915
|
+
"sha256": "7b3f68c681aac00498d3994b33b9fe13b55a3ffbbfbd57a0fd9b23d4f5754ffb"
|
|
3916
3916
|
},
|
|
3917
3917
|
{
|
|
3918
3918
|
"name": "Grid",
|
|
@@ -4445,7 +4445,7 @@
|
|
|
4445
4445
|
"mdUrl": "/docs/components/theme-provider.md",
|
|
4446
4446
|
"jsonUrl": "/r/components/theme-provider.json",
|
|
4447
4447
|
"path": "./components/theme-provider.json",
|
|
4448
|
-
"sha256": "
|
|
4448
|
+
"sha256": "a54f8e7c740323869ba848ff0c31e759092734b8fc0a3e3aa9271d294f0643b0"
|
|
4449
4449
|
}
|
|
4450
4450
|
],
|
|
4451
4451
|
"hooks": [
|
package/manifest/tokens.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cueplusplus/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -145,8 +145,8 @@
|
|
|
145
145
|
"clsx": "^2.1.1",
|
|
146
146
|
"culori": "^4.0.2",
|
|
147
147
|
"tailwind-merge": "^3.6.0",
|
|
148
|
-
"@cueplusplus/
|
|
149
|
-
"@cueplusplus/
|
|
148
|
+
"@cueplusplus/theme-base": "^1.0.3",
|
|
149
|
+
"@cueplusplus/tokens": "0.14.0"
|
|
150
150
|
},
|
|
151
151
|
"peerDependencies": {
|
|
152
152
|
"@assistant-ui/react": "^0.15.16",
|
|
@@ -260,10 +260,10 @@
|
|
|
260
260
|
"tsdown": "0.22.14",
|
|
261
261
|
"typescript": "^5.7.0",
|
|
262
262
|
"vitest": "^4.1.10",
|
|
263
|
-
"@cueplusplus/theme-tools": "1.0.
|
|
263
|
+
"@cueplusplus/theme-tools": "1.0.4",
|
|
264
|
+
"@repo/docgen": "0.0.0",
|
|
264
265
|
"@repo/eslint-config": "0.0.0",
|
|
265
|
-
"@repo/typescript-config": "0.0.0"
|
|
266
|
-
"@repo/docgen": "0.0.0"
|
|
266
|
+
"@repo/typescript-config": "0.0.0"
|
|
267
267
|
},
|
|
268
268
|
"scripts": {
|
|
269
269
|
"build": "pnpm run check:manifest && tsdown",
|