@imfusion/web-ui 0.10.1-dev.2.gb6347f49 → 0.10.1-dev.34.gb01a818e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/CHANGELOG.md +167 -0
  2. package/README.md +4 -2
  3. package/THIRD_PARTY_NOTICES.md +110 -0
  4. package/dist/code-NTcddiYk.js +139 -0
  5. package/dist/components/account-card/account-card.d.ts +9 -26
  6. package/dist/components/app-shell/app-shell.d.ts +21 -11
  7. package/dist/components/callout/callout.d.ts +1 -1
  8. package/dist/components/chip/chip.d.ts +1 -1
  9. package/dist/components/color-scheme-toggle/color-scheme-preference.d.ts +3 -0
  10. package/dist/components/color-scheme-toggle/color-scheme-toggle.d.ts +17 -0
  11. package/dist/components/color-scheme-toggle/color-scheme-toggle.meta.d.ts +2 -0
  12. package/dist/components/color-scheme-toggle/index.d.ts +2 -0
  13. package/dist/components/dialog/dialog.d.ts +148 -0
  14. package/dist/components/dialog/dialog.meta.d.ts +2 -0
  15. package/dist/components/dialog/index.d.ts +2 -0
  16. package/dist/components/drawer/drawer.d.ts +1 -1
  17. package/dist/components/scroll-area/index.d.ts +2 -0
  18. package/dist/components/scroll-area/scroll-area.d.ts +49 -0
  19. package/dist/components/scroll-area/scroll-area.meta.d.ts +2 -0
  20. package/dist/components/skeleton/skeleton.d.ts +17 -2
  21. package/dist/components/toggle/toggle.d.ts +8 -2
  22. package/dist/components/toggle-group/toggle-group-size.d.ts +3 -0
  23. package/dist/components/toggle-group/toggle-group.d.ts +7 -3
  24. package/dist/index.d.ts +4 -0
  25. package/dist/index.js +2336 -1898
  26. package/dist/integrations/code-highlight.js +2 -2
  27. package/dist/integrations/frame-selection.js +1 -1
  28. package/dist/integrations/image-display-options.js +123 -113
  29. package/dist/{rolldown-runtime-Dy4uBu1J.js → resolve-state-props-DQf9WiGv.js} +12 -1
  30. package/dist/scroll-area-z9Lf9uIk.js +89 -0
  31. package/dist/slider-Bf274cMe.js +106 -0
  32. package/dist/style.css +1 -1
  33. package/dist/{tabs-DRyqtS04.js → tabs-CU46aGud.js} +106 -88
  34. package/docs/user-guide/UsagePatterns.mdx +4 -0
  35. package/package.json +2 -2
  36. package/src/docgen/doc.gen.json +1261 -47
  37. package/src/llms/llms.gen.txt +18 -1
  38. package/src/llms/skills/imf-web-ui-audit/SKILL.md +15 -10
  39. package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md +3 -1
  40. package/src/llms/skills/imf-web-ui-conventions/topics/authentication.md +2 -3
  41. package/src/llms/skills/imf-web-ui-conventions/topics/components.md +4 -1
  42. package/src/llms/skills/imf-web-ui-conventions/topics/data.md +24 -5
  43. package/src/llms/skills/imf-web-ui-conventions/topics/git.md +5 -2
  44. package/src/llms/skills/imf-web-ui-conventions/topics/library-setup.md +3 -0
  45. package/src/llms/skills/imf-web-ui-conventions/topics/project-structure.md +11 -0
  46. package/src/llms/skills/imf-web-ui-conventions/topics/react.md +6 -4
  47. package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +3 -1
  48. package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md +2 -2
  49. package/src/llms/skills/imf-web-ui-conventions/topics/typescript.md +2 -0
  50. package/src/llms/skills/imf-web-ui-ux/SKILL.md +2 -1
  51. package/src/llms/tokens.gen.json +1 -1
  52. package/dist/code-BYkr5k55.js +0 -134
  53. package/dist/slider-Cqpreglu.js +0 -116
@@ -11,7 +11,7 @@ props, which always live in the docgen file above.
11
11
 
12
12
  ## AccountCard
13
13
  - category: Display, status: experimental
14
- Card linking to the signed-in person's account: avatar, a large name or email, a quiet line under it, and organization and role at its foot, with a trailing action such as Log out. Also called an ID card or user row; for a bare person badge, use Avatar.
14
+ The signed-in person's account row: the avatar in a lead column, the name or email, a quiet line under it, and organization and role below, with a trailing action such as Log out. Also called an ID card or user row; for a bare person badge, use Avatar.
15
15
  - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .account-card (jq: jq '.account-card' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
16
16
 
17
17
  ## AppShell
@@ -73,11 +73,22 @@ Show-and-hide region for secondary content such as FAQs, settings, or details. A
73
73
  - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .collapsible (jq: jq '.collapsible' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
74
74
  - further reading (usage/anatomy, not props): https://base-ui.com/react/components/collapsible.md
75
75
 
76
+ ## ColorSchemeToggle
77
+ - category: Inputs, status: experimental
78
+ Light, System, and Dark segments that set and remember the page's color scheme. Also called an appearance or theme switch; built on ToggleGroup, which is the choice for any other segmented selection.
79
+ - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .color-scheme-toggle (jq: jq '.color-scheme-toggle' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
80
+
76
81
  ## CopyButton
77
82
  - category: Buttons, status: stable
78
83
  Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.
79
84
  - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .copy-button (jq: jq '.copy-button' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
80
85
 
86
+ ## Dialog
87
+ - category: Layout, status: experimental
88
+ Modal window over a dimmed page for focused tasks, forms, confirmations, or viewers. Also called a modal; use Drawer for a panel from the screen edge and Popover for content anchored to a trigger.
89
+ - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .dialog (jq: jq '.dialog' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
90
+ - further reading (usage/anatomy, not props): https://base-ui.com/react/components/dialog.md
91
+
81
92
  ## Drawer
82
93
  - category: Layout, status: stable
83
94
  Off-canvas panel that slides in from a screen edge for navigation, settings, filters, or focused tasks. Also called a sidebar, side panel, or sheet.
@@ -173,6 +184,12 @@ Link as a whole row: optional leading icon, label, optional description line, an
173
184
  Horizontal layout primitive for spacing, aligning, and wrapping children. Also called a horizontal stack or flex row.
174
185
  - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .row (jq: jq '.row' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
175
186
 
187
+ ## ScrollArea
188
+ - category: Layout, status: experimental
189
+ Scrollable region with the library's overlay scrollbar and edge fades, for lists, panels, and dialog bodies. Also called a scroll container; use it instead of a bare overflow: auto.
190
+ - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .scroll-area (jq: jq '.scroll-area' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
191
+ - further reading (usage/anatomy, not props): https://base-ui.com/react/components/scroll-area.md
192
+
176
193
  ## Select
177
194
  - category: Inputs, status: stable
178
195
  Dropdown for choosing a value from a known list. Also called a picker; use it for a labeled, keyboard-accessible option list.
@@ -23,15 +23,20 @@ it low, and do not let it crowd the sections a consumer has to act on.
23
23
 
24
24
  Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
25
25
 
26
- 1. Resolve the argument. Bare means `full`; an unknown topic is an error, not a reason to widen the scope.
26
+ 1. Resolve the argument. Bare means `full`; an unknown topic is an error, not a reason to widen the scope. Then check that
27
+ `node_modules/@imfusion/web-ui/package.json` exists. Without it, token, installed-version, and installed-type checks can
28
+ only come back Unverified, so tell the human before dispatch and ask whether to install dependencies first or continue
29
+ with those checks unverified.
27
30
  2. Enter plan mode unless this audit is being called as verification by another skill or the host has no plan mode.
28
31
  3. Read the report template and existing reviewer notes, then dispatch one investigator per in-scope topic. Tell each
29
- investigator to use only `Read`, `Glob`, and `Grep`, with no shell commands or writes. An investigator checks every
30
- section in that topic and writes nothing. Once dispatch starts, the host performs no repository inspection: the returned
31
- reports are the evidence, and the host merges them without reading or searching the files again. Gathering the evidence
32
- twice spends context on the second pass and reports what the host still remembers. Inspect a topic inline only after its
33
- dispatch has been tried and refused, and say which attempt failed. A `full` audit also dispatches one marker investigator;
34
- a named-topic audit gives that search to the topic's investigator. See [Deferred-work markers](#deferred-work-markers).
32
+ investigator to inspect statically: `Read` plus the host's file search (`Glob` and `Grep`, or a read-only search tool when
33
+ the host has no `Glob` or `Grep`), with no shell commands or writes. An investigator checks every section in that topic
34
+ across the whole frontend tree and writes nothing; one without any search tool says so and stops instead of auditing only
35
+ the paths it already knows. Once dispatch starts, the host performs no repository inspection: the returned reports are the
36
+ evidence, and the host merges them without reading or searching the files again. Gathering the evidence twice spends
37
+ context on the second pass and reports what the host still remembers. Inspect a topic inline only after its dispatch has
38
+ been tried and refused, and say which attempt failed. A `full` audit also dispatches one marker investigator; a
39
+ named-topic audit gives that search to the topic's investigator. See [Deferred-work markers](#deferred-work-markers).
35
40
  4. Merge the evidence into the shared report format in
36
41
  [`templates/REPORT.md`](../imf-web-ui-conventions/templates/REPORT.md). Before presenting or writing it, check that every
37
42
  Broken, Missing, Deviation, and Unverified entry has a severity, evidence, impact, and next action; do not compact
@@ -90,6 +95,6 @@ text; do not run installers or hooks.
90
95
 
91
96
  ## Safety
92
97
 
93
- Use only `Read`, `Glob`, `Grep`, and equivalent static inspection. Do not run Git, shells, Node, npm, npx, package scripts,
94
- linters, tests, builds, hooks, or imported config. Report runtime state as unverified. Investigators inherit this
95
- restriction.
98
+ Use only `Read`, the host's read-only file search, and equivalent static inspection. Do not run Git, shells, Node, npm, npx,
99
+ package scripts, linters, tests, builds, hooks, or imported config. Report runtime state as unverified. Investigators inherit
100
+ this restriction.
@@ -14,7 +14,7 @@ sections one to one — change a topic's sections and this file follows in the s
14
14
  - [ ] Stay behind the library
15
15
  - [ ] Wrap primitives when the app has a reason to
16
16
  - [ ] Lock a field: read-only or disabled
17
- - [ ] Derive types, don't import them
17
+ - [ ] Derive types, don't copy them
18
18
  - [ ] Integrations own their peers
19
19
  - [ ] Styling crosses the boundary through seams
20
20
 
@@ -30,6 +30,7 @@ sections one to one — change a topic's sections and this file follows in the s
30
30
 
31
31
  - [ ] Layout
32
32
  - [ ] Application boundary
33
+ - [ ] Route-local code
33
34
  - [ ] Imports
34
35
 
35
36
  ## React — `react`
@@ -88,6 +89,7 @@ sections one to one — change a topic's sections and this file follows in the s
88
89
  - [ ] Topic registry and key factory
89
90
  - [ ] Options factories and naming
90
91
  - [ ] Router context access
92
+ - [ ] Loading states
91
93
  - [ ] Automatic invalidation
92
94
  - [ ] Testing the data layer
93
95
 
@@ -18,9 +18,8 @@ The file layout is in [project-structure.md](project-structure.md).
18
18
  Use one server-backed current-user query as the identity source:
19
19
 
20
20
  - Put it in `api/auth/queries.ts` and define its key and schema with the [data.md](data.md) pattern.
21
- - Expose query options as `context.api.auth.getUser()`.
22
- - Call `queryClient.query({ ...options, staleTime: "static" })` in a loader (see [data.md](data.md)) or a query hook in a
23
- component.
21
+ - Expose query options as `context.api.auth.getUser()`, with a numeric `staleTime` set in the factory.
22
+ - Call `queryClient.query(options)` in a loader (see [data.md](data.md)) or a query hook in a component.
24
23
  - Keep credentials and access tokens out of React state.
25
24
  - Do not infer authentication from local storage, decoded tokens, route flags, or permission-gated UI.
26
25
 
@@ -29,7 +29,8 @@ export function UserCard({ name, onEdit }: UserCardProps) {
29
29
  ## Grouping
30
30
 
31
31
  Group by component role, such as layout or domain UI, according to the project structure. Do not create a hierarchy before
32
- the project needs one.
32
+ the project needs one. Components that only one route uses go in that route's `-` folder, not a shared group; see
33
+ [project-structure.md](project-structure.md).
33
34
 
34
35
  ## One file or a folder
35
36
 
@@ -50,3 +51,5 @@ The barrel only re-exports the public pieces.
50
51
 
51
52
  Keep a component's stylesheet, tests, and local types beside the component. A container that needs styling usually wants to
52
53
  be a layout or dumb component instead.
54
+
55
+ A route-local component keeps its stylesheet and tests in the route's `-` folder beside it.
@@ -85,17 +85,36 @@ export function getDetails(options?: QueryOptions<User>) {
85
85
  }
86
86
  ```
87
87
 
88
- Callers choose `queryClient.query`, `useSuspenseQuery`, or another Query API. A router loader reads the cache with
89
- `queryClient.query({ ...options, staleTime: "static" })`, not the deprecated `ensureQueryData` or `fetchQuery`. Keep
90
- `"static"`: without it the factory's `staleTime` applies (default 0), so every loader run waits on the network and the page's
91
- `useQuery` refetches on mount. Mutation factories likewise return `mutationOptions`, own their mutation key and parsing, and
92
- are passed to `useMutation`; do not inline those options at the call site.
88
+ Callers choose `queryClient.query`, `useSuspenseQuery`, or another Query API. The factory owns `staleTime` as a number,
89
+ chosen by how fast other people change the data: near zero for data others edit often, minutes for data that rarely changes.
90
+ A router loader reads the cache with `queryClient.query(options)` and no override, not the deprecated `ensureQueryData` or
91
+ `fetchQuery`.
92
+
93
+ Never set `staleTime: "static"` in a factory or in `defaultOptions`. A query whose observers are all static is never
94
+ refetched, so invalidation after a mutation does nothing. Invalidation marks a query stale even when its `staleTime` is a
95
+ number, so the app's own mutations still refresh the data. Changes made by others show once the window expires.
96
+
97
+ Mutation factories likewise return `mutationOptions`, own their mutation key and parsing, and are passed to `useMutation`; do
98
+ not inline those options at the call site.
93
99
 
94
100
  ## Router context access
95
101
 
96
102
  Put the API object and `QueryClient` in router context. Loaders use `context.api.<topic>.<fn>()`; route components read the
97
103
  same context with `Route.useRouteContext()`. Direct imports are for plain utilities and tests outside the route tree.
98
104
 
105
+ ## Loading states
106
+
107
+ Pick the Skeleton part by how the data loads:
108
+
109
+ - Data read with `useSuspenseQuery` inside a Suspense boundary uses `Skeleton.Suspense`, with the bones as its `fallback`.
110
+ Content fades in when the fallback showed; cached data mounts without a fade.
111
+ - Secondary data read with `useQuery` that may arrive later uses `Skeleton.Root` with `loading={isPending}` around the real
112
+ content, which cross-fades when the data lands.
113
+ - A route whose loader blocks navigation until the data is cached shows its `pendingComponent`. The router unmounts it, so
114
+ nothing reveals.
115
+
116
+ A layout that reads suspending data needs its own boundary. Otherwise a suspension blanks the whole layout.
117
+
99
118
  ## Automatic invalidation
100
119
 
101
120
  Mutation keys start with the topic they change. The shared `MutationCache` invalidates that topic after success by default.
@@ -7,12 +7,15 @@ Use the repository's tracked configuration and keep verification scopes clear.
7
7
  Run once in a clone:
8
8
 
9
9
  ```sh
10
- git config core.hooksPath .githooks
10
+ git config core.hooksPath .vite-hooks/_
11
+ vp config --no-agent
11
12
  git config pull.rebase true
12
13
  git config merge.ff only
13
14
  ```
14
15
 
15
- The hooks are tracked in `.githooks/`. Check both the Git setting and the directory; a missing hook path fails silently.
16
+ Vite+ manages the hooks. The hook scripts are tracked in `.vite-hooks/`; `vp config` installs the dispatcher into the
17
+ git-ignored `.vite-hooks/_/`. `vp config` leaves a `core.hooksPath` that points elsewhere alone, so set it first. Every clone
18
+ and worktree needs its own dispatcher. Check both with `vp hooks status`; a missing dispatcher skips the hooks silently.
16
19
 
17
20
  ## Verify scopes
18
21
 
@@ -29,6 +29,9 @@ instead, so component colors cannot resolve against the opposite scheme:
29
29
  <WebUIProvider colorScheme="dark">
30
30
  ```
31
31
 
32
+ To let the user pick Light, System, or Dark, place a `ColorSchemeToggle`. It stores the choice and works only while the
33
+ provider's `colorScheme` is unset.
34
+
32
35
  ## Symptoms of broken setup
33
36
 
34
37
  - Unstyled components usually mean the `styles.css` import is missing.
@@ -29,6 +29,17 @@ Create the root providers, current-user boundary, and pathless `_public/` and `_
29
29
  new app starts `_app/` with a minimal `AppShell` unless it has no persistent authenticated navigation. An established app
30
30
  keeps its working shell choice.
31
31
 
32
+ ## Route-local code
33
+
34
+ A route file holds its search schema and `validateSearch`, its loaders, and its pending, error, and not-found components.
35
+ Route-local code that outgrows small in-file components (views, forms, hooks, tests) goes in a sibling folder named `-` plus
36
+ the route file's name: `route.tsx` gets `-route/`, `products.tsx` gets `-products/`. TanStack Router ignores files and
37
+ folders with a leading `-` when it builds the route tree, so the folder never becomes a route. The folder holds the route's
38
+ views with their props types, hooks, `.module.css` files, and tests. A component small enough to sit in the route file stays
39
+ there.
40
+
41
+ `partials/` holds only parts that more than one route uses.
42
+
32
43
  ## Imports
33
44
 
34
45
  Use `./` for siblings and `#/` for imports elsewhere in `src/`:
@@ -5,10 +5,12 @@ looks.
5
5
 
6
6
  ## Composition: pages (smart containers), partials, dumb components
7
7
 
8
- - **Pages** live in `routes/`. They load data, read URL state, coordinate actions, and compose the view. They do not own
9
- component CSS.
10
- - **Partials** are reusable compositions extracted because they read as a unit. They have light logic and no styling of their
11
- own.
8
+ - **Pages** live in `routes/`. They load data, read URL state, coordinate actions, and compose the view. Route files hold the
9
+ search schema, loaders, and pending, error, and not-found components. They do not own component CSS. Route-local views and
10
+ forms live in the route's `-` folder, as [project-structure.md](project-structure.md) describes, and that folder's
11
+ `.module.css` files are component styles.
12
+ - **Partials** are compositions that more than one route uses, extracted because they read as a unit. They have light logic
13
+ and no styling of their own.
12
14
  - **Layout components** arrange content with `Stack`, `Row`, grids, and token gaps, and wrap long-form text in `Prose`.
13
15
  - **Dumb components** receive data and callbacks, render UI, and own their styles. They do not fetch, route, or contain
14
16
  business rules.
@@ -9,7 +9,9 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
9
9
  - Nest states, pseudo-elements, and child selectors under the root.
10
10
  - Write declarations before nested rules; browsers before Chrome 130, Firefox 132, and Safari 18 move later ones above them.
11
11
  - Do not nest under a selector list whose selectors differ in specificity. The nested rule takes the highest one.
12
- - Lift repeated values into custom properties, especially when a state or variant changes several descendants.
12
+ - Lift a value into a custom property on the component's root when it repeats within that stylesheet, or when a state or
13
+ variant changes several descendants. A value that only recurs across files stays a literal in each; when those files show
14
+ one design element, a shared component owns it. Never define component values on `:root`.
13
15
  - Keep structurally different rules explicit; not every repeated value needs an abstraction.
14
16
 
15
17
  ```css
@@ -49,7 +49,7 @@ from `vite-plus/test`. It needs Node `^22.22.1 || ^24.11 || >=26` and Git 2.32 o
49
49
  `vp <command>` is a built-in; `vp run <script>` runs a package script.
50
50
 
51
51
  Move an existing Vite, Vitest, ESLint, or Prettier project with `vp migrate --no-hooks` (`vp help migrate` lists its
52
- options), then check the result against this topic. The hook lives in `.githooks/`, as `git.md` describes.
52
+ options), then check the result against this topic. The hook lives in `.vite-hooks/`, as `git.md` describes.
53
53
 
54
54
  ## Oxfmt
55
55
 
@@ -106,7 +106,7 @@ Use strict TypeScript with bundler module resolution, `verbatimModuleSyntax`, un
106
106
 
107
107
  ## Pre-commit checks
108
108
 
109
- `.githooks/pre-commit` runs `vp staged --hide-unstaged --fail-on-changes --revert --diff-filter=ACMRD` with `set -e`. Those
109
+ `.vite-hooks/pre-commit` runs `vp staged --hide-unstaged --fail-on-changes --revert --diff-filter=ACMRD` with `set -e`. Those
110
110
  flags make the checks see only the staged state, include deletion-only commits, fail the commit when a check would change a
111
111
  file, and restore the tree afterwards, so the hook never rewrites or stages files. The `staged` block in `vite.config.ts` is
112
112
  a function returning path-free commands such as `npm run --silent verify:lint`, so each project-wide check runs once. Use
@@ -6,6 +6,8 @@ Prefer pure functions, immutable values, and side effects at the edges.
6
6
 
7
7
  - Do not use `any`. Accept `unknown` at an untrusted boundary and narrow it.
8
8
  - Infer local values; give exported functions explicit return types.
9
+ - TanStack options factories (`queryOptions`, `mutationOptions`, and similar) return their helper's inferred type. Spelling
10
+ it out loses the typed query key (`DataTag`) or repeats the helper's own generics.
9
11
  - Model states directly instead of filling a nullable value later.
10
12
  - Derive types from their source. Use `z.infer` for schemas and `React.ComponentProps` for Web UI components.
11
13
  - Avoid `as`. Keep an assertion only at an untyped third-party boundary where it is the honest boundary.
@@ -70,7 +70,8 @@ reason.
70
70
  Plan these states with the loaded view:
71
71
 
72
72
  - **Empty**: say what belongs here and what the user can do next.
73
- - **Loading**: use `Spinner` or a stable skeleton; keep the frame from jumping.
73
+ - **Loading**: use `Spinner` or a stable skeleton; keep the frame from jumping. The `imf-web-ui-conventions` data topic says
74
+ which Skeleton part fits each way the data loads.
74
75
  - **Error**: explain what failed and the next action in a `Callout` near the problem.
75
76
  - **Loaded**: the normal view.
76
77
 
@@ -477,7 +477,7 @@
477
477
  },
478
478
  {
479
479
  "name": "--imf-ui-font-family-mono",
480
- "value": "\"CoFo Sans Mono\", ui-monospace, monospace"
480
+ "value": "\"Paper Mono\", ui-monospace, monospace"
481
481
  },
482
482
  {
483
483
  "name": "--imf-ui-font-family-sans",
@@ -1,134 +0,0 @@
1
- import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
2
- import { Xo as t, ja as n, pM as r } from "./icons-BsK_o-Cb.js";
3
- import { t as i } from "./meta-V_KyLeGn.js";
4
- import { cx as a } from "class-variance-authority";
5
- import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
6
- import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
7
- import { mergeProps as p } from "@base-ui/react/merge-props";
8
- import { useRender as m } from "@base-ui/react/use-render";
9
- //#region src/hooks/use-clipboard.ts
10
- function h({ timeout: e = 1500 } = {}) {
11
- let [t, n] = f(!1), r = d(void 0);
12
- return u(() => () => clearTimeout(r.current), []), {
13
- copied: t,
14
- copy: l((t) => {
15
- navigator.clipboard.writeText(t).then(() => {
16
- n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
17
- });
18
- }, [e])
19
- };
20
- }
21
- var g = {
22
- block: "imf-ui-code-module-block",
23
- copy: "imf-ui-code-module-copy",
24
- inline: "imf-ui-code-module-inline",
25
- inlineCopy: "imf-ui-code-module-inlineCopy",
26
- inlineLink: "imf-ui-code-module-inlineLink",
27
- language: "imf-ui-code-module-language",
28
- pre: "imf-ui-code-module-pre",
29
- separator: "imf-ui-code-module-separator"
30
- }, _ = /* @__PURE__ */ e({
31
- Block: () => b,
32
- Inline: () => v,
33
- InlineLink: () => y
34
- });
35
- function v({ copyable: e = !1, children: i, render: a, ...l }) {
36
- let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : t;
37
- return m({
38
- defaultTagName: "code",
39
- render: a,
40
- props: {
41
- ...p(l, {
42
- className: g.inline,
43
- children: /* @__PURE__ */ c(o, { children: [
44
- /* @__PURE__ */ s("span", {
45
- ref: _,
46
- children: i
47
- }),
48
- e && /* @__PURE__ */ s("span", { className: g.separator }),
49
- e && /* @__PURE__ */ s("button", {
50
- type: "button",
51
- className: g.inlineCopy,
52
- "data-copied": u || void 0,
53
- "aria-label": u ? "Copied" : "Copy",
54
- onClick: () => f(_.current?.textContent ?? ""),
55
- children: /* @__PURE__ */ s(r, {
56
- glyph: v,
57
- size: 12,
58
- strokeWidth: 2,
59
- "aria-hidden": !0
60
- })
61
- })
62
- ] })
63
- }),
64
- "data-imf-ui-component": "Code.Inline"
65
- }
66
- });
67
- }
68
- v.displayName = "Code.Inline";
69
- function y({ kind: e = "external", ...t }) {
70
- let n = e === "external" ? {
71
- target: "_blank",
72
- rel: "noreferrer"
73
- } : {};
74
- return m({
75
- defaultTagName: "a",
76
- render: t.render,
77
- props: {
78
- ...p(n, t, {
79
- className: a(g.inline, g.inlineLink, t.className),
80
- children: t.children
81
- }),
82
- "data-imf-ui-component": "Code.InlineLink",
83
- "data-kind": e
84
- }
85
- });
86
- }
87
- y.displayName = "Code.InlineLink";
88
- function b({ className: e, language: i, hideCopy: o = !1, children: l, ...u }) {
89
- let { copied: f, copy: p } = h(), m = d(null), _ = f ? n : t;
90
- return /* @__PURE__ */ c("div", {
91
- "data-imf-ui-component": "Code.Block",
92
- className: a(g.block, e),
93
- children: [
94
- i != null && /* @__PURE__ */ s("span", {
95
- className: g.language,
96
- children: i
97
- }),
98
- !o && /* @__PURE__ */ s("button", {
99
- type: "button",
100
- className: g.copy,
101
- "data-copied": f || void 0,
102
- "aria-label": f ? "Copied" : "Copy",
103
- onClick: () => p(m.current?.textContent ?? ""),
104
- children: /* @__PURE__ */ s(r, {
105
- glyph: _,
106
- size: 12,
107
- strokeWidth: 2,
108
- "aria-hidden": !0
109
- })
110
- }),
111
- /* @__PURE__ */ s("pre", {
112
- ...u,
113
- className: g.pre,
114
- children: /* @__PURE__ */ s("code", {
115
- ref: m,
116
- children: l
117
- })
118
- })
119
- ]
120
- });
121
- }
122
- b.displayName = "Code.Block";
123
- //#endregion
124
- //#region src/components/code/code.meta.ts
125
- var x = {
126
- name: "Code",
127
- category: i.display,
128
- status: "stable",
129
- namespace: !0,
130
- description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
131
- origin: "native"
132
- };
133
- //#endregion
134
- export { _ as a, y as i, b as n, h as o, v as r, x as t };
@@ -1,116 +0,0 @@
1
- import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
2
- import { cva as t } from "class-variance-authority";
3
- import { jsx as n } from "react/jsx-runtime";
4
- import { Slider as r } from "@base-ui/react/slider";
5
- //#region src/utils/resolve-state-props.ts
6
- function i(e, t) {
7
- return e instanceof Function ? e(t) : e;
8
- }
9
- function a(e, t) {
10
- return i(e, t);
11
- }
12
- function o(e, t) {
13
- return i(e, t);
14
- }
15
- var s = {
16
- control: "imf-ui-slider-module-control",
17
- indicator: "imf-ui-slider-module-indicator",
18
- label: "imf-ui-slider-module-label",
19
- root: "imf-ui-slider-module-root",
20
- thumb: "imf-ui-slider-module-thumb",
21
- track: "imf-ui-slider-module-track",
22
- value: "imf-ui-slider-module-value",
23
- variantPosition: "imf-ui-slider-module-variantPosition"
24
- }, c = /* @__PURE__ */ e({
25
- Control: () => y,
26
- Indicator: () => x,
27
- Label: () => _,
28
- Root: () => g,
29
- Thumb: () => S,
30
- Track: () => b,
31
- Value: () => v
32
- }), l = t(s.root, { variants: { variant: {
33
- default: null,
34
- position: s.variantPosition
35
- } } }), u = t(s.label), d = t(s.value), f = t(s.control), p = t(s.track), m = t(s.indicator), h = t(s.thumb);
36
- function g({ variant: e = "default", value: t, defaultValue: i, onValueChange: o, onValueCommitted: s, min: c = 0, max: u = 100, step: d = 1, largeStep: f = 10, minStepsBetweenValues: p = 0, disabled: m = !1, orientation: h = "horizontal", name: g, form: _, locale: v, thumbAlignment: y = "edge", thumbCollisionBehavior: b = "push", format: x, ...S }) {
37
- return /* @__PURE__ */ n(r.Root, {
38
- ...S,
39
- "data-imf-ui-component": "Slider.Root",
40
- "data-orientation": h,
41
- className: (t) => l({
42
- variant: e,
43
- className: a(S.className, t)
44
- }),
45
- value: t,
46
- defaultValue: i,
47
- onValueChange: o,
48
- onValueCommitted: s,
49
- min: c,
50
- max: u,
51
- step: d,
52
- largeStep: f,
53
- minStepsBetweenValues: p,
54
- disabled: m,
55
- orientation: h,
56
- name: g,
57
- form: _,
58
- locale: v,
59
- thumbAlignment: y,
60
- thumbCollisionBehavior: b,
61
- format: x
62
- });
63
- }
64
- g.displayName = "Slider.Root";
65
- function _(e) {
66
- return /* @__PURE__ */ n(r.Label, {
67
- ...e,
68
- "data-imf-ui-component": "Slider.Label",
69
- className: (t) => u({ className: a(e.className, t) })
70
- });
71
- }
72
- _.displayName = "Slider.Label";
73
- function v({ children: e, ...t }) {
74
- return /* @__PURE__ */ n(r.Value, {
75
- ...t,
76
- "data-imf-ui-component": "Slider.Value",
77
- className: (e) => d({ className: a(t.className, e) }),
78
- children: e
79
- });
80
- }
81
- v.displayName = "Slider.Value";
82
- function y(e) {
83
- return /* @__PURE__ */ n(r.Control, {
84
- ...e,
85
- "data-imf-ui-component": "Slider.Control",
86
- className: (t) => f({ className: a(e.className, t) })
87
- });
88
- }
89
- y.displayName = "Slider.Control";
90
- function b(e) {
91
- return /* @__PURE__ */ n(r.Track, {
92
- ...e,
93
- "data-imf-ui-component": "Slider.Track",
94
- className: (t) => p({ className: a(e.className, t) })
95
- });
96
- }
97
- b.displayName = "Slider.Track";
98
- function x(e) {
99
- return /* @__PURE__ */ n(r.Indicator, {
100
- ...e,
101
- "data-imf-ui-component": "Slider.Indicator",
102
- className: (t) => m({ className: a(e.className, t) })
103
- });
104
- }
105
- x.displayName = "Slider.Indicator";
106
- function S({ index: e, ...t }) {
107
- return /* @__PURE__ */ n(r.Thumb, {
108
- ...t,
109
- "data-imf-ui-component": "Slider.Thumb",
110
- className: (e) => h({ className: a(t.className, e) }),
111
- index: e
112
- });
113
- }
114
- S.displayName = "Slider.Thumb";
115
- //#endregion
116
- export { S as a, c, g as i, a as l, x as n, b as o, _ as r, v as s, y as t, o as u };