@nadicodeai/ui 1.0.2 → 1.1.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/AGENTS.md +13 -13
- package/README.md +1 -1
- package/dist/agents.d.ts +8 -8
- package/dist/components/accordion.js +1 -1
- package/dist/components/action-band.js +1 -1
- package/dist/components/agent-card.d.ts +1 -1
- package/dist/components/agent-visual.d.ts +1 -1
- package/dist/components/alert-dialog.d.ts +1 -1
- package/dist/components/automation-section.d.ts +2 -2
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +3 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/brand-icons/apple.d.ts +1 -1
- package/dist/components/brand-icons/linux.d.ts +1 -1
- package/dist/components/brand-icons/windows.d.ts +1 -1
- package/dist/components/brand-icons.d.ts +4 -4
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/calendar.d.ts +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +2 -4
- package/dist/components/carousel.d.ts +1 -1
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/chart-breakdown-table.d.ts +2 -2
- package/dist/components/chart-bullet-bar.js +5 -5
- package/dist/components/chart-date-range-control.d.ts +1 -1
- package/dist/components/chart-kpi-stat.d.ts +1 -1
- package/dist/components/chart-time-series.d.ts +1 -1
- package/dist/components/chart-time-series.d.ts.map +1 -1
- package/dist/components/chart-time-series.js +10 -9
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +13 -3
- package/dist/components/checkbox.js +1 -1
- package/dist/components/combobox.js +2 -2
- package/dist/components/command.d.ts +1 -1
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +2 -2
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dashboard-shell.d.ts +1 -1
- package/dist/components/disclosure-row.d.ts.map +1 -1
- package/dist/components/disclosure-row.js +1 -3
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/faq-item.d.ts +1 -1
- package/dist/components/faq-item.d.ts.map +1 -1
- package/dist/components/faq-item.js +2 -2
- package/dist/components/feedback-state.d.ts +1 -1
- package/dist/components/field.d.ts +1 -1
- package/dist/components/footer.d.ts.map +1 -1
- package/dist/components/footer.js +1 -1
- package/dist/components/form.d.ts +1 -1
- package/dist/components/glass-control.js +1 -1
- package/dist/components/hero.js +1 -1
- package/dist/components/input-group.d.ts +1 -1
- package/dist/components/input-group.js +3 -3
- package/dist/components/input-otp.d.ts.map +1 -1
- package/dist/components/input-otp.js +6 -3
- package/dist/components/input.js +1 -1
- package/dist/components/integration-flow.d.ts.map +1 -1
- package/dist/components/integration-flow.js +5 -5
- package/dist/components/item.d.ts +1 -1
- package/dist/components/item.js +1 -1
- package/dist/components/label-system.js +1 -1
- package/dist/components/live-demo.js +2 -2
- package/dist/components/menubar.d.ts +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/native-select.js +1 -1
- package/dist/components/nav-bar.d.ts.map +1 -1
- package/dist/components/nav-bar.js +1 -1
- package/dist/components/navigation-menu.d.ts.map +1 -1
- package/dist/components/navigation-menu.js +5 -5
- package/dist/components/pagination.d.ts +1 -1
- package/dist/components/plugin-slot-boundary.d.ts.map +1 -1
- package/dist/components/plugin-slot-boundary.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio-group.js +1 -1
- package/dist/components/resizable.d.ts.map +1 -1
- package/dist/components/resizable.js +4 -2
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/seam-grid.d.ts +1 -1
- package/dist/components/select.js +4 -4
- package/dist/components/settings-section.d.ts +1 -1
- package/dist/components/sidebar.d.ts +4 -4
- package/dist/components/sidebar.d.ts.map +1 -1
- package/dist/components/sidebar.js +6 -7
- package/dist/components/slider.js +1 -1
- package/dist/components/status-dot.js +2 -2
- package/dist/components/switch.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/texture-strip.d.ts.map +1 -1
- package/dist/components/texture-strip.js +3 -0
- package/dist/components/theme-mode-switcher.d.ts +2 -2
- package/dist/components/toggle-group.d.ts +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/eslint/index.js +23 -17
- package/dist/eslint/rules/confirm-destructive-action.js +177 -0
- package/dist/eslint/rules/jsx-class-utility.js +162 -176
- package/dist/eslint/rules/no-app-feature-component.js +100 -0
- package/dist/eslint/rules/no-deprecated-zod-api.js +63 -15
- package/dist/eslint/rules/no-elevated-edge.js +144 -0
- package/dist/eslint/rules/no-mono-title-register.js +73 -0
- package/dist/eslint/rules/no-native-visible-control.js +6 -3
- package/dist/eslint/rules/no-package-component-redefinition.js +175 -0
- package/dist/eslint/rules/no-paired-size-utility.js +66 -0
- package/dist/eslint/rules/no-repainted-focus.js +80 -0
- package/dist/eslint/rules/no-resting-settings-control.js +87 -0
- package/dist/eslint/rules/no-shadcn-appearance-override.js +30 -56
- package/dist/eslint/rules/no-unpinned-vercel-functions-import.js +25 -23
- package/dist/eslint/rules/server-action-discipline.js +182 -0
- package/dist/eslint/rules/shadcn-composition.js +131 -0
- package/dist/hooks/index.d.ts +3 -3
- package/dist/index.d.ts +132 -132
- package/dist/internal/agent-visual/poster.d.ts +1 -1
- package/dist/internal/agent-visual/renderer.d.ts +1 -1
- package/dist/internal/assistant-ui/attachment.js +1 -1
- package/dist/internal/assistant-ui/follow-up-suggestions.d.ts.map +1 -1
- package/dist/internal/assistant-ui/follow-up-suggestions.js +5 -1
- package/dist/internal/assistant-ui/reasoning.d.ts +1 -1
- package/dist/internal/assistant-ui/tool-fallback.d.ts +1 -1
- package/dist/internal/assistant-ui/tool-group.d.ts +1 -1
- package/dist/internal/assistant-ui/tooltip-icon-button.d.ts +1 -1
- package/dist/styles/globals.css +37 -12
- package/docs/consuming-cross-repo.md +2 -2
- package/docs/contract.md +30 -20
- package/docs/migration/base-ui-migration.md +2 -2
- package/package.json +7 -6
- package/dist/eslint/rules/no-design-system-src-import.js +0 -11
- package/dist/eslint/rules/no-raw-color-utility.js +0 -109
- package/dist/eslint/rules/no-raw-focus-ring-width.js +0 -30
- package/dist/eslint/rules/no-raw-logo-import.js +0 -41
- package/dist/eslint/rules/no-ui-src-import.js +0 -10
- package/dist/eslint/rules/src-import-boundary.js +0 -207
package/AGENTS.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @nadicodeai/ui - Agent Rules
|
|
2
2
|
|
|
3
|
-
The `@nadicodeai/ui` npm workspace: the shared NadicodeAI React UI package on brand tokens (Tailwind v4, semantic light/dark roles). It ships shadcn primitives backed by Base UI, the `@nadicodeai/ui/agents` interface, React adapters over the design-system grammar, reusable marketing/section compositions, and plan-approved product components. Source-authored in `src/`, published from built `dist/`. The package's normative rules (styling and shape invariants, admission, accessibility tier, section vocabulary, consumer boundary) live in `docs/contract.md
|
|
3
|
+
The `@nadicodeai/ui` npm workspace: the shared NadicodeAI React UI package on brand tokens (Tailwind v4, semantic light/dark roles). It ships shadcn primitives backed by Base UI, the `@nadicodeai/ui/agents` interface, React adapters over the design-system grammar, reusable marketing/section compositions, and plan-approved product components. Source-authored in `src/`, published from built `dist/`. The package's normative rules (styling and shape invariants, admission, accessibility tier, section vocabulary, consumer boundary) live in `docs/contract.md`. Read it before changing the component library.
|
|
4
4
|
|
|
5
5
|
## Commands
|
|
6
6
|
|
|
@@ -11,24 +11,24 @@ Proof escalates by the ladder in the root `AGENTS.md` "Commands": `npm run check
|
|
|
11
11
|
| `npm run dev -w @nadicodeai/ui` | Watch `src/` and incrementally refresh `dist/` for local website or app iteration |
|
|
12
12
|
| `npm run build:dev -w @nadicodeai/ui` | One-shot incremental `dist/` refresh after a prior full build |
|
|
13
13
|
| `npm run build -w @nadicodeai/ui` | Emit the consumable `dist/` surface before packing or app builds |
|
|
14
|
-
| `npm run generate:brand-icons -w @nadicodeai/ui` | Re-emit `src/components/brand-icons/` after editing the allow-list in `scripts/build-brand-icons.mjs
|
|
14
|
+
| `npm run generate:brand-icons -w @nadicodeai/ui` | Re-emit `src/components/brand-icons/` after editing the allow-list in `scripts/build-brand-icons.mjs`. Never part of the build |
|
|
15
15
|
| `npm pack --dry-run -w @nadicodeai/ui` | Verify exactly what npm consumers receive after surface, export, CSS, docs, or skill changes |
|
|
16
16
|
|
|
17
17
|
## Routing
|
|
18
18
|
|
|
19
19
|
| Task | Go to |
|
|
20
20
|
| --- | --- |
|
|
21
|
-
| Shared design-language terms |
|
|
21
|
+
| Shared design-language terms | `../design-system/CONTEXT.md` |
|
|
22
22
|
| Package invariants, component admission, section vocabulary, consumer boundary | `docs/contract.md` |
|
|
23
|
-
| Third-party brand marks (other companies' logos) | `docs/contract.md` "Admission Rules"
|
|
23
|
+
| Third-party brand marks (other companies' logos) | `docs/contract.md` "Admission Rules". Brand marks are exempt from the currentColor and raw-hex icon rules as generated identity images. The NadicodeAI logo is a different system and stays with `BrandLockup`/`BrandMark`/`BrandWordmark` |
|
|
24
24
|
| React consumer installation and stylesheet setup | `docs/consuming-cross-repo.md` |
|
|
25
|
-
| Token, mode, theme, cascade, and public stylesheet architecture |
|
|
26
|
-
| Motion behavior |
|
|
27
|
-
| Which component subpaths exist | `package.json` `exports` (the `./components/*` wildcard over `src/components/` source is the whole surface
|
|
28
|
-
| shadcn / assistant-ui discovery | Live shadcn and assistant-ui CLIs (`npx shadcn@latest info\|search\|docs\|view\|add --dry-run`, `npx assistant-ui@latest add --help`)
|
|
29
|
-
| Releasing / publishing | `../../docs/
|
|
30
|
-
| Tokens, geometry, and the CSS the package composes |
|
|
31
|
-
| Website page assembly | `../../website/AGENTS.md` |
|
|
32
|
-
| Portal screens | `../../portal/AGENTS.md` |
|
|
33
|
-
| User-visible UI work |
|
|
25
|
+
| Token, mode, theme, cascade, and public stylesheet architecture | `../design-system/DESIGN.md` (this package does not own a second token map) |
|
|
26
|
+
| Motion behavior | `../design-system/DESIGN.md` "Motion", `src/lib/motion.ts`, then the `product-design` skill for agent procedure |
|
|
27
|
+
| Which component subpaths exist | `package.json` `exports` (the `./components/*` wildcard over `src/components/` source is the whole surface. Never maintain a hand-copied list) |
|
|
28
|
+
| shadcn / assistant-ui discovery | Live shadcn and assistant-ui CLIs (`npx shadcn@latest info\|search\|docs\|view\|add --dry-run`, `npx assistant-ui@latest add --help`). No committed registry inventory or snapshot exists, and `--overwrite` needs an explicit maintainer ask plus a reviewed diff |
|
|
29
|
+
| Releasing / publishing | `../../docs/agents/npm-publishing.md` (release decision enforced by the pre-push gate, detail in `docs/contract.md`) |
|
|
30
|
+
| Tokens, geometry, and the CSS the package composes | `../design-system/AGENTS.md` and `../design-system/DESIGN.md` |
|
|
31
|
+
| Website page assembly | `../../apps/website/AGENTS.md` |
|
|
32
|
+
| Portal screens | `../../apps/portal/AGENTS.md` |
|
|
33
|
+
| User-visible UI work | The `product-design` skill, loaded after this rulebook |
|
|
34
34
|
| Docs shipped to package consumers | `docs/contract.md` owns invariants, `docs/consuming-cross-repo.md` owns setup, and `llms.txt`, `docs/agents/nadicodeai-ui.md`, `docs/migration/`, and `skills/nadicodeai-ui/SKILL.md` map to those owners while documenting their own component or workflow surface |
|
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ Do not add top-level exports for recipes, blocks, agent, or terminal groupings
|
|
|
29
29
|
until a concrete package API decision adds source, built files, docs, and tests
|
|
30
30
|
together. Routes, persistence, auth behavior, server state, runtime adapters,
|
|
31
31
|
and app-owned product features/use cases stay in consuming apps such as
|
|
32
|
-
`website/`, `portal/`, and sibling Nadia apps. The package contract owns the
|
|
32
|
+
`apps/website/`, `apps/portal/`, and sibling Nadia apps. The package contract owns the
|
|
33
33
|
admission boundary; this README does not maintain a second rule set.
|
|
34
34
|
|
|
35
35
|
## Install
|
package/dist/agents.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export * from "@assistant-ui/react";
|
|
2
|
-
export * from "./internal/assistant-ui/attachment";
|
|
3
|
-
export * from "./internal/assistant-ui/follow-up-suggestions";
|
|
4
|
-
export * from "./internal/assistant-ui/markdown-text";
|
|
5
|
-
export * from "./internal/assistant-ui/reasoning";
|
|
6
|
-
export * from "./internal/assistant-ui/thread";
|
|
7
|
-
export * from "./internal/assistant-ui/tool-fallback";
|
|
8
|
-
export * from "./internal/assistant-ui/tool-group";
|
|
9
|
-
export * from "./internal/assistant-ui/tooltip-icon-button";
|
|
2
|
+
export * from "./internal/assistant-ui/attachment.js";
|
|
3
|
+
export * from "./internal/assistant-ui/follow-up-suggestions.js";
|
|
4
|
+
export * from "./internal/assistant-ui/markdown-text.js";
|
|
5
|
+
export * from "./internal/assistant-ui/reasoning.js";
|
|
6
|
+
export * from "./internal/assistant-ui/thread.js";
|
|
7
|
+
export * from "./internal/assistant-ui/tool-fallback.js";
|
|
8
|
+
export * from "./internal/assistant-ui/tool-group.js";
|
|
9
|
+
export * from "./internal/assistant-ui/tooltip-icon-button.js";
|
|
10
10
|
//# sourceMappingURL=agents.d.ts.map
|
|
@@ -9,7 +9,7 @@ function AccordionItem({ className, ...props }) {
|
|
|
9
9
|
return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function AccordionTrigger({ className, children, ...props }) {
|
|
12
|
-
return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("nc-transition-paint group/accordion-trigger relative flex min-h-touch-target flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium
|
|
12
|
+
return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("nc-transition-paint group/accordion-trigger relative flex min-h-touch-target flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "nc-transition-transform pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:rotate-180" })] }) }));
|
|
13
13
|
}
|
|
14
14
|
function AccordionContent({ className, children, ...props }) {
|
|
15
15
|
return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
|
|
@@ -24,7 +24,7 @@ import { cn } from "../lib/utils.js";
|
|
|
24
24
|
* The prior two-cell ink stage is retired.
|
|
25
25
|
*/
|
|
26
26
|
// Grain texture only — feTurbulence fractal noise, no colour literal (`#` encoded
|
|
27
|
-
// as `%23`), so the
|
|
27
|
+
// as `%23`), so the raw-colour ban has nothing to report here.
|
|
28
28
|
const GRAIN_TEXTURE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E\")";
|
|
29
29
|
function ActionBandCrosshair() {
|
|
30
30
|
return (_jsxs("span", { "data-slot": "action-band-crosshair", "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 z-20 size-4 -translate-x-1/2 -translate-y-1/2", children: [_jsx("span", { className: "absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-primary-foreground" }), _jsx("span", { className: "absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-primary-foreground" })] }));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AgentVisualRecipe } from "../internal/agent-visual/recipes";
|
|
1
|
+
import type { AgentVisualRecipe } from "../internal/agent-visual/recipes.js";
|
|
2
2
|
type AgentVisualPresentation = "registry" | "card" | "detail";
|
|
3
3
|
type AgentVisualAccessibility = {
|
|
4
4
|
decorative?: true;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
3
|
-
import { Button } from "./button";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
4
|
declare function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props): React.JSX.Element;
|
|
5
5
|
declare function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
6
|
declare function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props): React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Input } from "./input";
|
|
3
|
-
import { type SettingsFieldControlProps, SettingsSection } from "./settings-section";
|
|
2
|
+
import { Input } from "./input.js";
|
|
3
|
+
import { type SettingsFieldControlProps, SettingsSection } from "./settings-section.js";
|
|
4
4
|
type AutomationStatus = "ready" | "running" | "paused" | "error" | "disabled";
|
|
5
5
|
type AutomationItem = {
|
|
6
6
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,qBAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,qBAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYxE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7E;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -14,7 +14,9 @@ function AvatarBadge({ className, ...props }) {
|
|
|
14
14
|
return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
function AvatarGroup({ className, ...props }) {
|
|
17
|
-
return (_jsx("div", { "data-slot": "avatar-group", className: cn(
|
|
17
|
+
return (_jsx("div", { "data-slot": "avatar-group", className: cn(
|
|
18
|
+
// eslint-disable-next-line better-tailwindcss/no-restricted-classes -- an avatar group overlaps its members; negative spacing has no gap-* equivalent.
|
|
19
|
+
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
|
|
18
20
|
}
|
|
19
21
|
function AvatarGroupCount({ className, ...props }) {
|
|
20
22
|
return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
|
package/dist/components/badge.js
CHANGED
|
@@ -2,7 +2,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
2
2
|
import { useRender } from "@base-ui/react/use-render";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none
|
|
5
|
+
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { BRAND_ICON_SIZE, brandIconLabelling, type BrandIconProps, } from "./brand-icons/brand-icon";
|
|
2
|
-
export { WindowsIcon } from "./brand-icons/windows";
|
|
3
|
-
export { AppleIcon } from "./brand-icons/apple";
|
|
4
|
-
export { LinuxIcon } from "./brand-icons/linux";
|
|
1
|
+
export { BRAND_ICON_SIZE, brandIconLabelling, type BrandIconProps, } from "./brand-icons/brand-icon.js";
|
|
2
|
+
export { WindowsIcon } from "./brand-icons/windows.js";
|
|
3
|
+
export { AppleIcon } from "./brand-icons/apple.js";
|
|
4
|
+
export { LinuxIcon } from "./brand-icons/linux.js";
|
|
5
5
|
//# sourceMappingURL=brand-icons.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRender } from "@base-ui/react/use-render";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
import { Separator } from "./separator";
|
|
3
|
+
import { Separator } from "./separator.js";
|
|
4
4
|
declare const buttonGroupVariants: (props?: ({
|
|
5
5
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
const buttonVariants = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,scale] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)]
|
|
5
|
+
const buttonVariants = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,scale] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] select-none motion-safe:active:not-aria-[haspopup]:scale-[0.97] motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { DayPicker, type DayButton, type Locale } from "react-day-picker";
|
|
3
|
-
import { Button } from "./button";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
4
|
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
5
5
|
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
6
6
|
}): React.JSX.Element;
|
|
@@ -71,6 +71,6 @@ function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
|
|
|
71
71
|
return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
|
|
72
72
|
!modifiers.range_start &&
|
|
73
73
|
!modifiers.range_end &&
|
|
74
|
-
!modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10
|
|
74
|
+
!modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
|
|
75
75
|
}
|
|
76
76
|
export { Calendar, CalendarDayButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,0EAmBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAazD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,CAAC"}
|
package/dist/components/card.js
CHANGED
|
@@ -6,8 +6,7 @@ function Card({ className, render, size = "default", surface = "resting", varian
|
|
|
6
6
|
return useRender({
|
|
7
7
|
defaultTagName: "div",
|
|
8
8
|
props: mergeProps({
|
|
9
|
-
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-3xl border-0 bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "smooth-shadow-ring-md", surface === "raised" && "smooth-shadow-ring-lg", variant === "interactive" && "cursor-pointer", variant === "link" &&
|
|
10
|
-
"nc-transition-paint focus-visible:outline focus-visible:outline-[length:var(--ring-width-focus)] focus-visible:outline-ring", className),
|
|
9
|
+
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-3xl border-0 bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "smooth-shadow-ring-md", surface === "raised" && "smooth-shadow-ring-lg", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint", className),
|
|
11
10
|
}, props),
|
|
12
11
|
render,
|
|
13
12
|
state: { size, slot: "card", surface, variant },
|
|
@@ -17,8 +16,7 @@ function CardHeader({ className, ...props }) {
|
|
|
17
16
|
return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-3xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
|
|
18
17
|
}
|
|
19
18
|
function CardTitle({ className, focusTarget = false, ...props }) {
|
|
20
|
-
return (_jsx("div", { "data-slot": "card-title", "data-focus-target": focusTarget || undefined, className: cn("text-base font-medium group-data-[size=sm]/card:text-sm", focusTarget &&
|
|
21
|
-
"rounded-sm outline-none focus-visible:outline focus-visible:outline-[length:var(--ring-width-focus)] focus-visible:outline-ring", className), ...props }));
|
|
19
|
+
return (_jsx("div", { "data-slot": "card-title", "data-focus-target": focusTarget || undefined, className: cn("text-base font-medium group-data-[size=sm]/card:text-sm", focusTarget && "rounded-sm", className), ...props }));
|
|
22
20
|
}
|
|
23
21
|
function CardDescription({ className, ...props }) {
|
|
24
22
|
return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
|
-
import { Button } from "./button";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
4
|
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
5
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
6
|
type CarouselOptions = UseCarouselParameters[0];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAwBrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Table } from "./table";
|
|
3
|
-
import { type EntityColorMap } from "./chart-entity-colors";
|
|
2
|
+
import { Table } from "./table.js";
|
|
3
|
+
import { type EntityColorMap } from "./chart-entity-colors.js";
|
|
4
4
|
/**
|
|
5
5
|
* chart-breakdown-table — entity breakdown with proportion bars for the
|
|
6
6
|
* console chart kit (issue #166; DESIGN.md "Entity-color assignment",
|
|
@@ -8,7 +8,7 @@ import { cn } from "../lib/utils.js";
|
|
|
8
8
|
* percentage stays readable in both modes — and it is loudest exactly when it
|
|
9
9
|
* crosses a threshold.
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
11
|
+
const BULLET_BAR_VALUE_CLASS = {
|
|
12
12
|
ok: "text-foreground",
|
|
13
13
|
warn: "text-(--nc-warning-deep)",
|
|
14
14
|
over: "text-(--nc-error-deep)",
|
|
@@ -22,7 +22,7 @@ const BULLET_BAR_VALUE_TONE = {
|
|
|
22
22
|
* are the rail tones of the feedback pairs, the same register the overflow
|
|
23
23
|
* segment already wears.
|
|
24
24
|
*/
|
|
25
|
-
const
|
|
25
|
+
const BULLET_BAR_FILL_CLASS = {
|
|
26
26
|
ok: "bg-(--nc-chart-seq-3)",
|
|
27
27
|
warn: "bg-(--nc-state-review)",
|
|
28
28
|
over: "bg-(--nc-state-blocked)",
|
|
@@ -59,7 +59,7 @@ function BulletBar({ value, max, thresholdFraction, label, size = "panel", value
|
|
|
59
59
|
// One step darker than the surface it sits on, in both themes: at
|
|
60
60
|
// `bg-muted` an empty meter on the light canvas read as a hairline
|
|
61
61
|
// rather than as a track with nothing in it.
|
|
62
|
-
className: "absolute inset-y-0 rounded-r-sm bg-muted-foreground/20", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0",
|
|
62
|
+
className: "absolute inset-y-0 rounded-r-sm bg-muted-foreground/20", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0", BULLET_BAR_FILL_CLASS[severity], overflow === 0 && "rounded-r-sm"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow",
|
|
63
63
|
// A darker step of the same error family: now that the consumed
|
|
64
64
|
// length is itself red at the cap, the over-run has to stay a
|
|
65
65
|
// DISTINCT segment (DESIGN.md), which one shared tone would erase.
|
|
@@ -76,8 +76,8 @@ function BulletBar({ value, max, thresholdFraction, label, size = "panel", value
|
|
|
76
76
|
"aria-valuetext": meterValueText,
|
|
77
77
|
};
|
|
78
78
|
if (size === "row") {
|
|
79
|
-
return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "row", className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("span", { "data-slot": "bullet-bar-percent", "aria-hidden": "true", className: cn("font-mono text-xs tabular-nums",
|
|
79
|
+
return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "row", className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("span", { "data-slot": "bullet-bar-percent", "aria-hidden": "true", className: cn("font-mono text-xs tabular-nums", BULLET_BAR_VALUE_CLASS[severity]), children: [consumedPercent, "%"] }), _jsx("div", { ...meterAria, className: "relative h-1 min-w-0 flex-1", children: segments })] }));
|
|
80
80
|
}
|
|
81
|
-
return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "panel", className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { ...meterAria, className: "relative h-3 w-full", children: [segments, _jsx("div", { "data-slot": "bullet-bar-threshold-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(thresholdTickFraction) } }), _jsx("div", { "data-slot": "bullet-bar-cap-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(capFraction) } })] }), _jsx("div", { className: "relative h-4 w-full text-xs", "aria-hidden": "true", children: _jsx("span", { "data-slot": "bullet-bar-value", className: cn("absolute font-mono whitespace-nowrap tabular-nums", tipFraction > 0.6 && "-translate-x-full",
|
|
81
|
+
return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "panel", className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { ...meterAria, className: "relative h-3 w-full", children: [segments, _jsx("div", { "data-slot": "bullet-bar-threshold-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(thresholdTickFraction) } }), _jsx("div", { "data-slot": "bullet-bar-cap-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(capFraction) } })] }), _jsx("div", { className: "relative h-4 w-full text-xs", "aria-hidden": "true", children: _jsx("span", { "data-slot": "bullet-bar-value", className: cn("absolute font-mono whitespace-nowrap tabular-nums", tipFraction > 0.6 && "-translate-x-full", BULLET_BAR_VALUE_CLASS[severity]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
|
|
82
82
|
}
|
|
83
83
|
export { BulletBar };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { type DateRangePreset, type DateRangeValue } from "./chart-date-range";
|
|
2
|
+
import { type DateRangePreset, type DateRangeValue } from "./chart-date-range.js";
|
|
3
3
|
declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, formatCustomValue, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
|
|
4
4
|
value: DateRangeValue;
|
|
5
5
|
onChange: (value: DateRangeValue) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { type DeltaDirection } from "./chart-delta";
|
|
2
|
+
import { type DeltaDirection } from "./chart-delta.js";
|
|
3
3
|
/**
|
|
4
4
|
* chart-kpi-stat — the package KPI stat for the console chart kit
|
|
5
5
|
* (issue #166). The portal's KpiTile stays app-owned; this is the package
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { type EntityColorMap } from "./chart-entity-colors";
|
|
2
|
+
import { type EntityColorMap } from "./chart-entity-colors.js";
|
|
3
3
|
type TimeSeriesSeries = {
|
|
4
4
|
/** Stable entity id — the data key in each datum and the color-map key. */
|
|
5
5
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-time-series.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"chart-time-series.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAgH1C,KAAK,gBAAgB,GAAG;IACtB,2EAA2E;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAsJF,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,MAAiB,EACjB,cAA8B,EAC9B,UAAU,EACV,UAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAyDjB;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,MAAiB,EACjB,cAA8B,EAC9B,UAAU,EACV,UAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBA6EjB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -32,17 +32,18 @@ import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js
|
|
|
32
32
|
* The stock `ChartContainer` suppresses the Recharts svg outline
|
|
33
33
|
* (`[&_.recharts-surface]:outline-hidden`) so the default browser focus ring
|
|
34
34
|
* never shows, which would leave the `accessibilityLayer` keyboard path with
|
|
35
|
-
* no visible focus
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* higher CSS specificity,
|
|
41
|
-
*
|
|
35
|
+
* no visible focus — and that utility also beats the global base-layer focus
|
|
36
|
+
* outline. chart.tsx is untouched, so we restore the canonical treatment
|
|
37
|
+
* through the `className` we pass to our own `ChartContainer` instances: these
|
|
38
|
+
* `:focus-visible` overrides sit on a distinct arbitrary-variant selector (a
|
|
39
|
+
* different tailwind-merge group AND modifier, so `cn()` keeps both) with
|
|
40
|
+
* higher CSS specificity, re-enabling the offset ink outline only while the
|
|
41
|
+
* svg is keyboard-focused.
|
|
42
42
|
*/
|
|
43
|
-
const CHART_SURFACE_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:outline
|
|
43
|
+
const CHART_SURFACE_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:outline " +
|
|
44
|
+
"[&_.recharts-surface:focus-visible]:outline-[length:var(--outline-width-focus)] " +
|
|
44
45
|
"[&_.recharts-surface:focus-visible]:outline-ring " +
|
|
45
|
-
"[&_.recharts-surface:focus-visible]:outline-offset-
|
|
46
|
+
"[&_.recharts-surface:focus-visible]:outline-offset-[var(--outline-offset-focus)]";
|
|
46
47
|
/**
|
|
47
48
|
* The x ticks land at ONE constant stride across the range, and the stride is
|
|
48
49
|
* the smallest one whose labels still clear each other at the width the chart
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAKjD,QAAA,MAAM,MAAM;;;CAAwC,CAAC;AAGrD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,GAAG,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC,CAC/E,CAAC;AAkBF,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAC;IACzF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAKjD,QAAA,MAAM,MAAM;;;CAAwC,CAAC;AAGrD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,GAAG,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC,CAC/E,CAAC;AAkBF,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAC;IACzF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,qBAuBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BA4BtE,CAAC;AAEF,QAAA,MAAM,YAAY,kCAA4B,CAAC;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAC/E,oBAAoB,CACrB,4BAmHF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAC;AAE7C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC,yBAAyB,4BA8C9C;AA2BD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAC"}
|
package/dist/components/chart.js
CHANGED
|
@@ -37,7 +37,9 @@ function useChart() {
|
|
|
37
37
|
function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
|
|
38
38
|
const uniqueId = React.useId();
|
|
39
39
|
const chartId = sanitizeChartToken(`chart-${id ?? uniqueId.replace(/:/g, "")}`);
|
|
40
|
-
return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn(
|
|
40
|
+
return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn(
|
|
41
|
+
// eslint-disable-next-line no-restricted-syntax -- the hexes here are MATCH KEYS for Recharts' hardcoded default strokes (#ccc grid and reference lines, #fff dot and sector outlines), remapped onto theme tokens (ADR 0010). None of them is a colour this component emits.
|
|
42
|
+
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
|
|
41
43
|
}
|
|
42
44
|
const ChartStyle = ({ id, config }) => {
|
|
43
45
|
const chartId = sanitizeChartToken(id);
|
|
@@ -89,7 +91,11 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
89
91
|
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
|
|
90
92
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
91
93
|
const indicatorColor = color ?? item.payload?.fill ?? item.color;
|
|
92
|
-
return (
|
|
94
|
+
return (
|
|
95
|
+
// eslint-disable-next-line nadicodeai/no-paired-size-utility -- stock Recharts tooltip swatch, sized by upstream.
|
|
96
|
+
_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (
|
|
97
|
+
// eslint-disable-next-line nadicodeai/no-paired-size-utility -- stock Recharts tooltip indicator, sized by upstream.
|
|
98
|
+
_jsx("div", { className: cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
|
|
93
99
|
"h-2.5 w-2.5": indicator === "dot",
|
|
94
100
|
"w-1": indicator === "line",
|
|
95
101
|
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
@@ -113,7 +119,11 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
|
|
|
113
119
|
.map((item, index) => {
|
|
114
120
|
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
115
121
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
116
|
-
return (
|
|
122
|
+
return (
|
|
123
|
+
// eslint-disable-next-line nadicodeai/no-paired-size-utility -- stock Recharts legend item, sized by upstream.
|
|
124
|
+
_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (
|
|
125
|
+
// eslint-disable-next-line nadicodeai/no-paired-size-utility -- stock Recharts legend swatch, sized by upstream.
|
|
126
|
+
_jsx("div", { className: "h-2 w-2 shrink-0 rounded-xs", style: {
|
|
117
127
|
backgroundColor: item.color,
|
|
118
128
|
} })), itemConfig?.label] }, index));
|
|
119
129
|
}) }));
|
|
@@ -4,6 +4,6 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
|
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
5
|
import { CheckIcon } from "lucide-react";
|
|
6
6
|
function Checkbox({ className, ...props }) {
|
|
7
|
-
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-md border border-input transition-colors
|
|
7
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-md border border-input transition-colors group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
|
|
8
8
|
}
|
|
9
9
|
export { Checkbox };
|
|
@@ -20,7 +20,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
20
20
|
return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
21
21
|
}
|
|
22
22
|
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
23
|
-
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-2xl border-0
|
|
23
|
+
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-2xl border-0 nc-glass text-popover-foreground smooth-shadow-ring-xl data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function ComboboxList({ className, ...props }) {
|
|
26
26
|
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));
|
|
@@ -44,7 +44,7 @@ function ComboboxSeparator({ className, ...props }) {
|
|
|
44
44
|
return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
45
45
|
}
|
|
46
46
|
function ComboboxChips({ className, ...props }) {
|
|
47
|
-
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-md border border-input bg-background bg-clip-padding px-control-padding-inline py-1 text-sm transition-colors focus-within:
|
|
47
|
+
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-md border border-input bg-background bg-clip-padding px-control-padding-inline py-1 text-sm transition-colors focus-within:outline focus-within:outline-[length:var(--outline-width-focus)] focus-within:outline-offset-[var(--outline-offset-focus)] focus-within:outline-ring has-aria-invalid:border-destructive has-aria-invalid:outline has-aria-invalid:outline-[length:var(--outline-width-focus)] has-aria-invalid:outline-offset-[var(--outline-offset-focus)] has-aria-invalid:outline-destructive has-data-[slot=combobox-chip]:px-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height", className), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
50
50
|
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Command as CommandPrimitive } from "cmdk";
|
|
3
|
-
import { Dialog } from "./dialog";
|
|
3
|
+
import { Dialog } from "./dialog.js";
|
|
4
4
|
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
|
|
5
5
|
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
|
|
6
6
|
title?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EACL,MAAM,EAKP,MAAM,qBAAqB,CAAC;AAI7B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAWtF;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EACL,MAAM,EAKP,MAAM,qBAAqB,CAAC;AAI7B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAWtF;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAoBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAkBrD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAW/F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,qBAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAcpD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW7E;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAC"}
|
|
@@ -6,10 +6,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
|
|
|
6
6
|
import { InputGroup, InputGroupAddon } from "./input-group.js";
|
|
7
7
|
import { SearchIcon, CheckIcon } from "lucide-react";
|
|
8
8
|
function Command({ className, ...props }) {
|
|
9
|
-
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-2xl!
|
|
9
|
+
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-2xl! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
12
|
-
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-2xl! p-0", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-2xl! bg-transparent p-0", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
|
|
13
13
|
}
|
|
14
14
|
function CommandInput({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-md! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
@@ -14,7 +14,7 @@ function ContextMenuTrigger({ className, ...props }) {
|
|
|
14
14
|
return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
17
|
-
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0
|
|
17
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-2xl border-0 nc-glass p-nadicode-xxs text-popover-foreground smooth-shadow-ring-xl outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
18
18
|
}
|
|
19
19
|
function ContextMenuGroup({ ...props }) {
|
|
20
20
|
return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
|