@arcfusionz/arc-primitive-ui 0.2.18 → 0.3.1
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.
|
@@ -7,7 +7,7 @@ import { Button } from "@base-ui/react/button";
|
|
|
7
7
|
const baseClasses = "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-transparent font-sans font-medium tabular-nums transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0";
|
|
8
8
|
const appearanceClasses = {
|
|
9
9
|
solid: {
|
|
10
|
-
neutral: "bg-
|
|
10
|
+
neutral: "bg-slate-700 text-background [a&]:hover:bg-slate-800 [button&]:hover:bg-slate-800",
|
|
11
11
|
primary: "bg-primary text-primary-foreground [a&]:hover:bg-primary-700 [button&]:hover:bg-primary-700",
|
|
12
12
|
success: "bg-success-700 text-success-foreground [a&]:hover:bg-success-800 [button&]:hover:bg-success-800",
|
|
13
13
|
warning: "bg-warning text-warning-950 [a&]:hover:bg-warning-500 [button&]:hover:bg-warning-500",
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
2
|
import { useRender } from "@base-ui/react/use-render";
|
|
3
3
|
//#region src/components/CodeBlock/CodeBlock.d.ts
|
|
4
|
+
/** Visual mode of the `code` surface. */
|
|
5
|
+
type CodeBlockTheme = "dark" | "light";
|
|
4
6
|
interface CodeBlockVariantsOptions {
|
|
5
7
|
/** Additional classes merged after the Code Block frame recipe. */
|
|
6
8
|
className?: string;
|
|
7
9
|
}
|
|
8
10
|
/**
|
|
9
|
-
* Class list for an element styled as a Code Block frame (
|
|
10
|
-
*
|
|
11
|
-
*
|
|
11
|
+
* Class list for an element styled as a Code Block frame (`code` surface, 6px
|
|
12
|
+
* border, `font-code`). Useful when a consumer needs the same shell around a
|
|
13
|
+
* bespoke body that this component's props do not cover. The classes follow
|
|
14
|
+
* whichever mode is in scope, so for a light frame set
|
|
15
|
+
* `data-code-theme="light"` on the element yourself.
|
|
12
16
|
*/
|
|
13
17
|
declare function codeBlockVariants({ className }?: CodeBlockVariantsOptions): string;
|
|
14
18
|
interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "className" | "prefix"> {
|
|
@@ -26,6 +30,13 @@ interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children
|
|
|
26
30
|
* `highlightLines` do not apply to a custom `children` body.
|
|
27
31
|
*/
|
|
28
32
|
children?: ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* Visual mode of the code surface. `"dark"` (default) is the brand's Slate
|
|
35
|
+
* 900 listing; `"light"` puts the same chrome and syntax palette on a Slate
|
|
36
|
+
* 50 body, for documents, print, or pages that should stay uniformly light.
|
|
37
|
+
* Both modes clear WCAG AA. Emitted as `data-code-theme`.
|
|
38
|
+
*/
|
|
39
|
+
theme?: CodeBlockTheme;
|
|
29
40
|
/**
|
|
30
41
|
* Language label shown in the header, e.g. `"sql"`; also emitted as
|
|
31
42
|
* `data-language`. When it names a SQL dialect (`sql`, `postgres`, `mysql`,
|
|
@@ -66,4 +77,4 @@ interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children
|
|
|
66
77
|
}
|
|
67
78
|
declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
68
79
|
//#endregion
|
|
69
|
-
export { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants };
|
|
80
|
+
export { CodeBlock, CodeBlockProps, CodeBlockTheme, CodeBlockVariantsOptions, codeBlockVariants };
|
|
@@ -4,11 +4,13 @@ import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState }
|
|
|
4
4
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { useRender } from "@base-ui/react/use-render";
|
|
6
6
|
//#region src/components/CodeBlock/CodeBlock.tsx
|
|
7
|
-
const containerClasses = "relative overflow-hidden rounded-md border border-
|
|
7
|
+
const containerClasses = "relative overflow-hidden rounded-md border border-code-border bg-code font-code text-sm text-code-foreground";
|
|
8
8
|
/**
|
|
9
|
-
* Class list for an element styled as a Code Block frame (
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* Class list for an element styled as a Code Block frame (`code` surface, 6px
|
|
10
|
+
* border, `font-code`). Useful when a consumer needs the same shell around a
|
|
11
|
+
* bespoke body that this component's props do not cover. The classes follow
|
|
12
|
+
* whichever mode is in scope, so for a light frame set
|
|
13
|
+
* `data-code-theme="light"` on the element yourself.
|
|
12
14
|
*/
|
|
13
15
|
function codeBlockVariants({ className } = {}) {
|
|
14
16
|
return cn(containerClasses, className);
|
|
@@ -101,10 +103,10 @@ function CopyButton({ getText, copyLabel, copiedLabel, floating = false }) {
|
|
|
101
103
|
type: "button",
|
|
102
104
|
onClick: handleCopy,
|
|
103
105
|
"aria-label": copyLabel,
|
|
104
|
-
className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-
|
|
106
|
+
className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-code-muted-foreground", "transition-colors hover:bg-code-highlight hover:text-code-foreground", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "[&_svg]:pointer-events-none [&_svg]:size-4", floating && "absolute right-2 top-2 z-10 bg-code/90 text-code-subtle-foreground"),
|
|
105
107
|
children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {
|
|
106
108
|
"aria-hidden": "true",
|
|
107
|
-
className: "text-success
|
|
109
|
+
className: "text-code-success"
|
|
108
110
|
}) : /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
|
|
109
111
|
className: "sr-only",
|
|
110
112
|
"aria-live": "polite",
|
|
@@ -112,7 +114,7 @@ function CopyButton({ getText, copyLabel, copiedLabel, floating = false }) {
|
|
|
112
114
|
})]
|
|
113
115
|
});
|
|
114
116
|
}
|
|
115
|
-
const CodeBlock = forwardRef(({ code, children, language, filename, showLineNumbers = false, highlightLines, wrap = false, copyable = true, copyLabel = "Copy code", copiedLabel = "Copied to clipboard", codeLabel, maxHeight, render, className, ...rest }, ref) => {
|
|
117
|
+
const CodeBlock = forwardRef(({ code, children, theme = "dark", language, filename, showLineNumbers = false, highlightLines, wrap = false, copyable = true, copyLabel = "Copy code", copiedLabel = "Copied to clipboard", codeLabel, maxHeight, render, className, ...rest }, ref) => {
|
|
116
118
|
const preRef = useRef(null);
|
|
117
119
|
const filenameId = useId();
|
|
118
120
|
const getCopyText = useCallback(() => code ?? preRef.current?.textContent ?? "", [code]);
|
|
@@ -135,18 +137,18 @@ const CodeBlock = forwardRef(({ code, children, language, filename, showLineNumb
|
|
|
135
137
|
floating: !hasHeader
|
|
136
138
|
}) : null;
|
|
137
139
|
const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasHeader && /* @__PURE__ */ jsxs("div", {
|
|
138
|
-
className: "flex items-center justify-between gap-3 border-b border-
|
|
140
|
+
className: "flex items-center justify-between gap-3 border-b border-code-border bg-code-header px-4 py-2",
|
|
139
141
|
children: [/* @__PURE__ */ jsx("div", {
|
|
140
142
|
className: "flex min-w-0 items-center gap-2",
|
|
141
143
|
children: filename && /* @__PURE__ */ jsx("span", {
|
|
142
144
|
id: filenameId,
|
|
143
|
-
className: "truncate font-sans text-sm text-
|
|
145
|
+
className: "truncate font-sans text-sm text-code-subtle-foreground",
|
|
144
146
|
children: filename
|
|
145
147
|
})
|
|
146
148
|
}), /* @__PURE__ */ jsxs("div", {
|
|
147
149
|
className: "flex shrink-0 items-center gap-3",
|
|
148
150
|
children: [language && /* @__PURE__ */ jsx("span", {
|
|
149
|
-
className: "font-sans text-xs font-medium uppercase tracking-wider text-
|
|
151
|
+
className: "font-sans text-xs font-medium uppercase tracking-wider text-code-muted-foreground",
|
|
150
152
|
children: language
|
|
151
153
|
}), copyButton]
|
|
152
154
|
})]
|
|
@@ -169,11 +171,11 @@ const CodeBlock = forwardRef(({ code, children, language, filename, showLineNumb
|
|
|
169
171
|
const highlighted = highlightSet.has(lineNumber);
|
|
170
172
|
return /* @__PURE__ */ jsxs("span", {
|
|
171
173
|
"data-line": lineNumber,
|
|
172
|
-
className: cn("flex items-start border-l-2 border-transparent", wrap ? "w-full" : "w-max min-w-full", highlighted && "border-
|
|
174
|
+
className: cn("flex items-start border-l-2 border-transparent", wrap ? "w-full" : "w-max min-w-full", highlighted && "border-code-accent bg-code-highlight"),
|
|
173
175
|
children: [showLineNumbers && /* @__PURE__ */ jsx("span", {
|
|
174
176
|
"aria-hidden": "true",
|
|
175
177
|
style: { minWidth: gutterMinWidth },
|
|
176
|
-
className: "shrink-0 select-none pr-4 pl-4 text-right text-
|
|
178
|
+
className: "shrink-0 select-none pr-4 pl-4 text-right text-code-muted-foreground tabular-nums",
|
|
177
179
|
children: lineNumber
|
|
178
180
|
}), /* @__PURE__ */ jsx("span", {
|
|
179
181
|
className: cn("min-w-0", showLineNumbers ? "pr-4" : "px-4", wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
|
|
@@ -190,6 +192,7 @@ const CodeBlock = forwardRef(({ code, children, language, filename, showLineNumb
|
|
|
190
192
|
ref,
|
|
191
193
|
props: {
|
|
192
194
|
...rest,
|
|
195
|
+
"data-code-theme": theme,
|
|
193
196
|
"data-language": language,
|
|
194
197
|
className: codeBlockVariants({ className }),
|
|
195
198
|
children: content
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants } from "./CodeBlock.js";
|
|
2
|
-
export { CodeBlock, type CodeBlockProps, type CodeBlockVariantsOptions, codeBlockVariants };
|
|
1
|
+
import { CodeBlock, CodeBlockProps, CodeBlockTheme, CodeBlockVariantsOptions, codeBlockVariants } from "./CodeBlock.js";
|
|
2
|
+
export { CodeBlock, type CodeBlockProps, type CodeBlockTheme, type CodeBlockVariantsOptions, codeBlockVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ import { Calendar, CalendarDateRange, CalendarMode, CalendarProps, CalendarState
|
|
|
22
22
|
import "./components/Calendar/index.js";
|
|
23
23
|
import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariantsOptions, checkboxVariants } from "./components/Checkbox/Checkbox.js";
|
|
24
24
|
import "./components/Checkbox/index.js";
|
|
25
|
-
import { CodeBlock, CodeBlockProps, CodeBlockVariantsOptions, codeBlockVariants } from "./components/CodeBlock/CodeBlock.js";
|
|
25
|
+
import { CodeBlock, CodeBlockProps, CodeBlockTheme, CodeBlockVariantsOptions, codeBlockVariants } from "./components/CodeBlock/CodeBlock.js";
|
|
26
26
|
import "./components/CodeBlock/index.js";
|
|
27
27
|
import { Select, SelectAlign, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectPopup, SelectPopupProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectTriggerVariant, SelectTriggerVariantsOptions, SelectValue, SelectValueProps, selectTriggerVariants } from "./components/Select/Select.js";
|
|
28
28
|
import "./components/Select/index.js";
|
|
@@ -82,4 +82,4 @@ import "./components/Tooltip/index.js";
|
|
|
82
82
|
import { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants } from "./components/Typography/Typography.js";
|
|
83
83
|
import "./components/Typography/index.js";
|
|
84
84
|
import { cn } from "./lib/cn.js";
|
|
85
|
-
export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertAppearance, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogPopupVariantsOptions, type AlertDialogProps, type AlertDialogScrollBehavior, type AlertDialogSize, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertVariant, type AlertVariantsOptions, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Box, type BoxBackground, type BoxPadding, type BoxProps, type BoxRadius, type BoxShadow, type BoxVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, CodeBlock, type CodeBlockProps, type CodeBlockVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, FileUpload, FileUploadDropzone, type FileUploadDropzoneProps, type FileUploadDropzoneVariant, type FileUploadDropzoneVariantsOptions, type FileUploadHandle, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, FileUploadList, type FileUploadListProps, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadRenderState, FileUploadTrigger, type FileUploadTriggerProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Meter, type MeterIndicatorVariantsOptions, type MeterProps, type MeterSize, type MeterTrackVariantsOptions, type MeterVariant, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, codeBlockVariants, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, fileUploadDropzoneVariants, formatFileSize, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl, useFileUpload };
|
|
85
|
+
export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertAppearance, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogPopupVariantsOptions, type AlertDialogProps, type AlertDialogScrollBehavior, type AlertDialogSize, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertVariant, type AlertVariantsOptions, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Box, type BoxBackground, type BoxPadding, type BoxProps, type BoxRadius, type BoxShadow, type BoxVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, CodeBlock, type CodeBlockProps, type CodeBlockTheme, type CodeBlockVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, FileUpload, FileUploadDropzone, type FileUploadDropzoneProps, type FileUploadDropzoneVariant, type FileUploadDropzoneVariantsOptions, type FileUploadHandle, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, FileUploadList, type FileUploadListProps, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadRenderState, FileUploadTrigger, type FileUploadTriggerProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Meter, type MeterIndicatorVariantsOptions, type MeterProps, type MeterSize, type MeterTrackVariantsOptions, type MeterVariant, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, alertDialogPopupVariants, alertVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, codeBlockVariants, comboboxInputGroupVariants, createAlertDialogHandle, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, fileUploadDropzoneVariants, formatFileSize, inputVariants, menuItemVariants, meterIndicatorVariants, meterTrackVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl, useFileUpload };
|
package/package.json
CHANGED
package/src/styles/theme.css
CHANGED
|
@@ -322,11 +322,24 @@
|
|
|
322
322
|
overlays fade the whole layer via opacity without restating the color. */
|
|
323
323
|
--color-overlay: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
|
|
324
324
|
|
|
325
|
-
/* Code
|
|
326
|
-
surrounding light UI (the conventional treatment for source listings).
|
|
327
|
-
|
|
325
|
+
/* Code surface — dark by default: the brand's Slate 900, independent of the
|
|
326
|
+
surrounding light UI (the conventional treatment for source listings). The
|
|
327
|
+
paired foreground is near-white and clears WCAG AA at body-size code. A
|
|
328
|
+
light mode is available by remapping this whole group inside
|
|
329
|
+
`[data-code-theme="light"]` (see the block after this one), so components
|
|
330
|
+
reference these role tokens only and never a raw ramp step. */
|
|
328
331
|
--color-code: var(--color-slate-900);
|
|
329
332
|
--color-code-foreground: var(--color-slate-100);
|
|
333
|
+
/* Chrome: frame border, header strip, and the two dimmer text roles used by
|
|
334
|
+
the header (filename) and the gutter / language label / copy control. */
|
|
335
|
+
--color-code-border: var(--color-slate-800);
|
|
336
|
+
--color-code-header: var(--color-slate-950);
|
|
337
|
+
--color-code-subtle-foreground: var(--color-slate-300);
|
|
338
|
+
--color-code-muted-foreground: var(--color-slate-400);
|
|
339
|
+
/* Band + left accent for `highlightLines`, and the copy-confirmation check. */
|
|
340
|
+
--color-code-highlight: color-mix(in oklab, var(--color-slate-100) 12%, transparent);
|
|
341
|
+
--color-code-accent: var(--color-primary-500);
|
|
342
|
+
--color-code-success: var(--color-success-400);
|
|
330
343
|
|
|
331
344
|
/* SQL syntax palette (Code Block's built-in highlighter). Each hue is a light
|
|
332
345
|
ramp step so it clears WCAG AA (>= 6.5:1) on the dark `code` surface;
|
|
@@ -360,3 +373,43 @@
|
|
|
360
373
|
--color-info: var(--color-primary-500);
|
|
361
374
|
--color-info-foreground: #ffffff;
|
|
362
375
|
}
|
|
376
|
+
|
|
377
|
+
/* -----------------------------------------------------------------------
|
|
378
|
+
* Code — light mode
|
|
379
|
+
*
|
|
380
|
+
* The `code` group above is the dark (default) listing. Marking a subtree
|
|
381
|
+
* `data-code-theme="light"` re-points every one of those role tokens at light
|
|
382
|
+
* values, so the same `bg-code` / `text-code-keyword` utilities flip without a
|
|
383
|
+
* second set of classes. Code Block does this for you via `theme="light"`;
|
|
384
|
+
* set the attribute yourself only when using `codeBlockVariants` on your own
|
|
385
|
+
* element.
|
|
386
|
+
*
|
|
387
|
+
* The body is Slate 50 (a shade off the white page, so the listing still reads
|
|
388
|
+
* as a distinct surface) with the header a step darker at Slate 100 — the same
|
|
389
|
+
* "header separates from body" direction as the dark mode. Syntax hues are
|
|
390
|
+
* DARK ramp steps, each verified at >= 6.5:1 on the Slate 50 body (navy-700
|
|
391
|
+
* 9.6:1 · primary-700 7.7:1 · success-800 7.1:1 · warning-900 7.8:1 ·
|
|
392
|
+
* slate-600 6.7:1 · slate-700 9.2:1), matching the bar the dark palette meets.
|
|
393
|
+
* --------------------------------------------------------------------- */
|
|
394
|
+
@layer base {
|
|
395
|
+
[data-code-theme="light"] {
|
|
396
|
+
--color-code: var(--color-slate-50);
|
|
397
|
+
--color-code-foreground: var(--color-slate-900);
|
|
398
|
+
|
|
399
|
+
--color-code-border: var(--color-slate-200);
|
|
400
|
+
--color-code-header: var(--color-slate-100);
|
|
401
|
+
--color-code-subtle-foreground: var(--color-slate-700);
|
|
402
|
+
--color-code-muted-foreground: var(--color-slate-600);
|
|
403
|
+
|
|
404
|
+
--color-code-highlight: color-mix(in oklab, var(--color-primary-600) 10%, transparent);
|
|
405
|
+
--color-code-accent: var(--color-primary-600);
|
|
406
|
+
--color-code-success: var(--color-success-600);
|
|
407
|
+
|
|
408
|
+
--color-code-keyword: var(--color-navy-700);
|
|
409
|
+
--color-code-function: var(--color-primary-700);
|
|
410
|
+
--color-code-string: var(--color-success-800);
|
|
411
|
+
--color-code-number: var(--color-warning-900);
|
|
412
|
+
--color-code-comment: var(--color-slate-600);
|
|
413
|
+
--color-code-punctuation: var(--color-slate-700);
|
|
414
|
+
}
|
|
415
|
+
}
|