@boilerhaus-ui/boilerhaus-ui 0.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/README.md +73 -0
- package/dist/components/Accordion/Accordion.d.ts +22 -0
- package/dist/components/Accordion/index.d.ts +2 -0
- package/dist/components/Alert/Alert.d.ts +34 -0
- package/dist/components/Alert/index.d.ts +2 -0
- package/dist/components/AspectRatio/AspectRatio.d.ts +23 -0
- package/dist/components/AspectRatio/index.d.ts +2 -0
- package/dist/components/Avatar/Avatar.d.ts +40 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Badge/Badge.d.ts +14 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +52 -0
- package/dist/components/Breadcrumb/index.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +19 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Card/Card.d.ts +39 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +22 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Combobox/Combobox.d.ts +27 -0
- package/dist/components/Combobox/index.d.ts +2 -0
- package/dist/components/DataTable/DataTable.d.ts +34 -0
- package/dist/components/DataTable/index.d.ts +2 -0
- package/dist/components/DatePicker/DatePicker.d.ts +17 -0
- package/dist/components/DatePicker/index.d.ts +2 -0
- package/dist/components/Dialog/Dialog.d.ts +53 -0
- package/dist/components/Dialog/index.d.ts +2 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +51 -0
- package/dist/components/DropdownMenu/index.d.ts +2 -0
- package/dist/components/FileUpload/FileUpload.d.ts +26 -0
- package/dist/components/FileUpload/index.d.ts +2 -0
- package/dist/components/Input/Input.d.ts +23 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Label/Label.d.ts +20 -0
- package/dist/components/Label/index.d.ts +2 -0
- package/dist/components/PageShell/PageShell.d.ts +73 -0
- package/dist/components/PageShell/index.d.ts +2 -0
- package/dist/components/Popover/Popover.d.ts +24 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Progress/Progress.d.ts +26 -0
- package/dist/components/Progress/index.d.ts +2 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +29 -0
- package/dist/components/RadioGroup/index.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +32 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Skeleton/Skeleton.d.ts +12 -0
- package/dist/components/Skeleton/index.d.ts +2 -0
- package/dist/components/Spinner/Spinner.d.ts +18 -0
- package/dist/components/Spinner/index.d.ts +2 -0
- package/dist/components/Stat/Stat.d.ts +22 -0
- package/dist/components/Stat/index.d.ts +2 -0
- package/dist/components/Stepper/Stepper.d.ts +24 -0
- package/dist/components/Stepper/index.d.ts +2 -0
- package/dist/components/Switch/Switch.d.ts +17 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +73 -0
- package/dist/components/Table/index.d.ts +2 -0
- package/dist/components/Tabs/Tabs.d.ts +28 -0
- package/dist/components/Tabs/index.d.ts +2 -0
- package/dist/components/Textarea/Textarea.d.ts +23 -0
- package/dist/components/Textarea/index.d.ts +2 -0
- package/dist/components/Toast/Toast.d.ts +17 -0
- package/dist/components/Toast/index.d.ts +4 -0
- package/dist/components/Toast/use-toast.d.ts +26 -0
- package/dist/components/Tooltip/Tooltip.d.ts +24 -0
- package/dist/components/Tooltip/index.d.ts +2 -0
- package/dist/components/index.d.ts +64 -0
- package/dist/index.cjs +51 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +81 -0
- package/dist/index.js +10475 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/cn.d.ts +7 -0
- package/dist/tokens.css +163 -0
- package/package.json +91 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
2
|
+
/**
|
|
3
|
+
* Error message shown below the input.
|
|
4
|
+
* When set, the input renders in an error state (signal-red border).
|
|
5
|
+
*/
|
|
6
|
+
error?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Hint text shown below the input when there is no error.
|
|
9
|
+
*/
|
|
10
|
+
helperText?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Single-line text input.
|
|
14
|
+
* Compose with Label for accessible form fields:
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <Label htmlFor="name" required>Project Name</Label>
|
|
18
|
+
* <Input id="name" placeholder="e.g. Kitchen Reno" required />
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Input id="budget" error="Budget is required." />
|
|
22
|
+
*/
|
|
23
|
+
export declare function Input({ id, error, helperText, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
2
|
+
/**
|
|
3
|
+
* Appends a required indicator (*) after the label text.
|
|
4
|
+
* Does not affect validation — pair with the `required` attribute on the input.
|
|
5
|
+
*/
|
|
6
|
+
required?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Reduces opacity to match a disabled input.
|
|
9
|
+
* Does not affect the native label behaviour.
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Accessible form label. Link to an input via `htmlFor` / `id`.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <Label htmlFor="name" required>Project Name</Label>
|
|
18
|
+
* <Input id="name" required />
|
|
19
|
+
*/
|
|
20
|
+
export declare function Label({ required, disabled, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2
|
+
}
|
|
3
|
+
/**
|
|
4
|
+
* Root layout container. Takes up full viewport height via flex column.
|
|
5
|
+
* Always include PageShellTopbar + PageShellBody as direct children.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <PageShell>
|
|
9
|
+
* <PageShellTopbar>…</PageShellTopbar>
|
|
10
|
+
* <PageShellBody>
|
|
11
|
+
* <PageShellSidebar>…</PageShellSidebar>
|
|
12
|
+
* <PageShellContent>…</PageShellContent>
|
|
13
|
+
* </PageShellBody>
|
|
14
|
+
* </PageShell>
|
|
15
|
+
*/
|
|
16
|
+
export declare function PageShell({ className, children, ...props }: PageShellProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export interface PageShellTopbarProps extends React.HTMLAttributes<HTMLElement> {
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Horizontal top bar — brand, nav, user menu.
|
|
21
|
+
* Fixed height defined by --topbar-height token (48px).
|
|
22
|
+
*/
|
|
23
|
+
export declare function PageShellTopbar({ className, children, ...props }: PageShellTopbarProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export interface PageShellBodyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Flex row below the topbar. Overflow is hidden here;
|
|
28
|
+
* each child (sidebar, content) manages its own scroll.
|
|
29
|
+
*/
|
|
30
|
+
export declare function PageShellBody({ className, children, ...props }: PageShellBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export interface PageShellSidebarProps extends React.HTMLAttributes<HTMLElement> {
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Dark left panel — navigation, project list, context.
|
|
35
|
+
* Width is controlled by --sidebar-width token (280px).
|
|
36
|
+
* Uses ash background (near-black) to contrast the paper content area.
|
|
37
|
+
*/
|
|
38
|
+
export declare function PageShellSidebar({ className, children, ...props }: PageShellSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export interface PageShellContentProps extends React.HTMLAttributes<HTMLElement> {
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Main content area — fills remaining horizontal space, scrolls independently.
|
|
43
|
+
* This is where page-level content renders.
|
|
44
|
+
*/
|
|
45
|
+
export declare function PageShellContent({ className, children, ...props }: PageShellContentProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export interface PageShellNavItemProps extends React.HTMLAttributes<HTMLElement> {
|
|
47
|
+
/**
|
|
48
|
+
* Marks this item as the current page/section.
|
|
49
|
+
* Adds a signal-red left border indicator and highlights text.
|
|
50
|
+
* Sets aria-current="page" automatically.
|
|
51
|
+
*/
|
|
52
|
+
active?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Optional 16×16 icon rendered before the label.
|
|
55
|
+
*/
|
|
56
|
+
icon?: React.ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Render as a child element instead of <button>.
|
|
59
|
+
* Use for routing links: <PageShellNavItem asChild><a href="/projects">…</a></PageShellNavItem>
|
|
60
|
+
*/
|
|
61
|
+
asChild?: boolean;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Sidebar navigation item. Designed for use on the ash (dark) sidebar.
|
|
65
|
+
* Supports asChild for framework routing links.
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // With Next.js Link
|
|
69
|
+
* <PageShellNavItem asChild active={pathname === '/projects'} icon={<IconGrid />}>
|
|
70
|
+
* <Link href="/projects">Projects</Link>
|
|
71
|
+
* </PageShellNavItem>
|
|
72
|
+
*/
|
|
73
|
+
export declare function PageShellNavItem({ active, icon, asChild, className, children, ...props }: PageShellNavItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { PageShell, PageShellTopbar, PageShellBody, PageShellSidebar, PageShellContent, PageShellNavItem, } from './PageShell';
|
|
2
|
+
export type { PageShellProps, PageShellTopbarProps, PageShellBodyProps, PageShellSidebarProps, PageShellContentProps, PageShellNavItemProps, } from './PageShell';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
2
|
+
export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
|
|
3
|
+
export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Styled Popover panel — renders in a portal, animated in/out.
|
|
10
|
+
* Pair with `Popover`, `PopoverTrigger`, and optionally `PopoverClose`.
|
|
11
|
+
*
|
|
12
|
+
* Radix handles: focus trap, scroll lock, outside-click dismiss, ARIA.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* <Popover>
|
|
16
|
+
* <PopoverTrigger asChild>
|
|
17
|
+
* <Button>Open</Button>
|
|
18
|
+
* </PopoverTrigger>
|
|
19
|
+
* <PopoverContent>
|
|
20
|
+
* <p>Popover body</p>
|
|
21
|
+
* </PopoverContent>
|
|
22
|
+
* </Popover>
|
|
23
|
+
*/
|
|
24
|
+
export declare function PopoverContent({ className, align, sideOffset, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
2
|
+
export type ProgressSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type ProgressVariant = 'default' | 'warning' | 'danger' | 'success';
|
|
4
|
+
export interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
|
|
5
|
+
/** Current value (0–max). Defaults to 0. */
|
|
6
|
+
value?: number;
|
|
7
|
+
/** Maximum value. Defaults to 100. */
|
|
8
|
+
max?: number;
|
|
9
|
+
/** Track height. Defaults to 'md'. */
|
|
10
|
+
size?: ProgressSize;
|
|
11
|
+
/** Indicator colour. Defaults to 'default' (signal-alt blue). */
|
|
12
|
+
variant?: ProgressVariant;
|
|
13
|
+
/** Accessible label for the progress bar. */
|
|
14
|
+
label?: string;
|
|
15
|
+
/** Render the numeric percentage to the right of the label row. */
|
|
16
|
+
showValue?: boolean;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Horizontal progress bar built on Radix Progress.
|
|
20
|
+
* Manages ARIA progressbar role, aria-valuenow/min/max automatically.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <Progress value={65} />
|
|
24
|
+
* <Progress value={65} label="Budget used" showValue variant="warning" />
|
|
25
|
+
*/
|
|
26
|
+
export declare function Progress({ value, max, size, variant, label, showValue, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
2
|
+
export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
|
|
3
|
+
/** Stack direction. Defaults to 'vertical'. */
|
|
4
|
+
orientation?: 'vertical' | 'horizontal';
|
|
5
|
+
}
|
|
6
|
+
export interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
|
|
7
|
+
/** Visible label text. */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Optional supporting description rendered below the label. */
|
|
10
|
+
description?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Container for a set of mutually exclusive Radio options.
|
|
14
|
+
* Built on Radix RadioGroup — handles ARIA radiogroup role and keyboard nav.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <RadioGroup defaultValue="net30" onValueChange={setTerms}>
|
|
18
|
+
* <Radio value="net30" label="Net 30" />
|
|
19
|
+
* <Radio value="net45" label="Net 45" />
|
|
20
|
+
* </RadioGroup>
|
|
21
|
+
*/
|
|
22
|
+
export declare function RadioGroup({ orientation, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
/**
|
|
24
|
+
* A single radio option inside a RadioGroup.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* <Radio value="net30" label="Net 30" description="Due within 30 days." />
|
|
28
|
+
*/
|
|
29
|
+
export declare function Radio({ label, description, className, disabled, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
2
|
+
export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* A single option inside a Select.
|
|
6
|
+
* Renders the checkmark indicator when selected.
|
|
7
|
+
*/
|
|
8
|
+
export declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export interface SelectProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
|
|
10
|
+
/** The id applied to the trigger button — links to a Label via htmlFor. */
|
|
11
|
+
id?: string;
|
|
12
|
+
/** Placeholder text shown when no value is selected. */
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
/** Error message shown below the trigger. Puts the trigger in error state. */
|
|
15
|
+
error?: string;
|
|
16
|
+
/** Additional className applied to the outer wrapper div. */
|
|
17
|
+
className?: string;
|
|
18
|
+
/** Inline styles applied to the outer wrapper div. */
|
|
19
|
+
style?: React.CSSProperties;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Dropdown selector. Wraps Radix Select with Boilerhaus styling.
|
|
23
|
+
* Matches Input visually — use with Label for accessible form fields.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* <Label htmlFor="status" required>Status</Label>
|
|
27
|
+
* <Select id="status" placeholder="Select status" onValueChange={setValue}>
|
|
28
|
+
* <SelectItem value="active">In Progress</SelectItem>
|
|
29
|
+
* <SelectItem value="complete">Complete</SelectItem>
|
|
30
|
+
* </Select>
|
|
31
|
+
*/
|
|
32
|
+
export declare function Select({ id, placeholder, error, className, style, children, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2
|
+
}
|
|
3
|
+
/**
|
|
4
|
+
* Placeholder shape shown while content is loading.
|
|
5
|
+
* Compose by setting width, height, and border-radius via `className`.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <Skeleton className="w-48 h-4" /> // text line
|
|
9
|
+
* <Skeleton className="w-10 h-10 rounded-full" /> // avatar
|
|
10
|
+
* <Skeleton className="w-full h-32 rounded-md" /> // card
|
|
11
|
+
*/
|
|
12
|
+
export declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
2
|
+
export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
|
|
3
|
+
/** Visual size of the spinner. Defaults to 'md'. */
|
|
4
|
+
size?: SpinnerSize;
|
|
5
|
+
/** Accessible label announced to screen readers. Defaults to 'Loading'. */
|
|
6
|
+
label?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Spinning indicator for loading states.
|
|
10
|
+
* Inherits `color` from its parent — place inside a coloured container or
|
|
11
|
+
* set `className="text-signal-alt"` to tint it.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <Spinner /> // 24px, inherits color
|
|
15
|
+
* <Spinner size="sm" className="text-signal-alt" />
|
|
16
|
+
* <Button disabled><Spinner size="sm" /> Saving…</Button>
|
|
17
|
+
*/
|
|
18
|
+
export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type StatDeltaDirection = 'up' | 'down' | 'neutral';
|
|
2
|
+
export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** Primary metric value — number, currency string, percentage, etc. */
|
|
4
|
+
value: string | number;
|
|
5
|
+
/** Short label identifying the metric. Rendered in display font uppercase. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Change indicator text, e.g. "+$8,200" or "-4%". */
|
|
8
|
+
delta?: string | number;
|
|
9
|
+
/** Direction controls colour: up=green, down=red, neutral=smoke. Defaults to 'neutral'. */
|
|
10
|
+
deltaDirection?: StatDeltaDirection;
|
|
11
|
+
/** Secondary supporting text shown below the value row. */
|
|
12
|
+
caption?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* KPI tile displaying a headline metric with optional delta indicator.
|
|
16
|
+
* Designed for dashboard summary rows and project header strips.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* <Stat label="Contract Value" value="$1.24M" />
|
|
20
|
+
* <Stat label="Budget Used" value="62%" delta="+8%" deltaDirection="up" caption="this period" />
|
|
21
|
+
*/
|
|
22
|
+
export declare function Stat({ value, label, delta, deltaDirection, caption, className, ...props }: StatProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export type StepState = 'completed' | 'active' | 'upcoming' | 'error';
|
|
2
|
+
export type StepperOrientation = 'horizontal' | 'vertical';
|
|
3
|
+
export interface Step {
|
|
4
|
+
label: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
/** Override the computed state for this step, e.g. 'error'. */
|
|
7
|
+
state?: StepState;
|
|
8
|
+
}
|
|
9
|
+
export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
|
+
steps: Step[];
|
|
11
|
+
/** Zero-based index of the currently active step. */
|
|
12
|
+
currentStep: number;
|
|
13
|
+
orientation?: StepperOrientation;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Progress indicator for multi-step flows.
|
|
17
|
+
* Step states are computed automatically from `currentStep`; override a
|
|
18
|
+
* specific step by setting `step.state = 'error'`.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Stepper steps={wizardSteps} currentStep={1} />
|
|
22
|
+
* <Stepper steps={coSteps} currentStep={2} orientation="vertical" />
|
|
23
|
+
*/
|
|
24
|
+
export declare function Stepper({ steps, currentStep, orientation, className, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
2
|
+
export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* Toggle switch for boolean settings.
|
|
6
|
+
* Compose with Label for accessible form fields.
|
|
7
|
+
*
|
|
8
|
+
* Track dimensions: 36×20px. Thumb: 14×14px.
|
|
9
|
+
* Thumb travel: 3px (off) → 19px (on).
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <div className="flex items-center gap-2">
|
|
13
|
+
* <Switch id="notifs" checked={enabled} onCheckedChange={setEnabled} />
|
|
14
|
+
* <Label htmlFor="notifs">Email notifications</Label>
|
|
15
|
+
* </div>
|
|
16
|
+
*/
|
|
17
|
+
export declare function Switch({ className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
|
|
2
|
+
}
|
|
3
|
+
/**
|
|
4
|
+
* Semantic data table. Use with TableHeader, TableBody, TableFoot,
|
|
5
|
+
* TableRow, TableHead, and TableCell.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <Table>
|
|
9
|
+
* <TableHeader>
|
|
10
|
+
* <TableRow>
|
|
11
|
+
* <TableHead>Description</TableHead>
|
|
12
|
+
* <TableHead numeric>Amount</TableHead>
|
|
13
|
+
* </TableRow>
|
|
14
|
+
* </TableHeader>
|
|
15
|
+
* <TableBody>
|
|
16
|
+
* <TableRow>
|
|
17
|
+
* <TableCell>Framing</TableCell>
|
|
18
|
+
* <TableCell numeric>$8,500</TableCell>
|
|
19
|
+
* </TableRow>
|
|
20
|
+
* </TableBody>
|
|
21
|
+
* <TableFoot>
|
|
22
|
+
* <TableRow>
|
|
23
|
+
* <TableCell>Total</TableCell>
|
|
24
|
+
* <TableCell numeric>$8,500</TableCell>
|
|
25
|
+
* </TableRow>
|
|
26
|
+
* </TableFoot>
|
|
27
|
+
* </Table>
|
|
28
|
+
*/
|
|
29
|
+
export declare function Table({ className, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
31
|
+
}
|
|
32
|
+
/** Wraps heading rows in a <thead>. */
|
|
33
|
+
export declare function TableHeader({ className, children, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
35
|
+
}
|
|
36
|
+
/** Wraps data rows in a <tbody>. */
|
|
37
|
+
export declare function TableBody({ className, children, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export interface TableFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Optional totals/summary row section.
|
|
42
|
+
* Bold typography to distinguish from body rows.
|
|
43
|
+
*/
|
|
44
|
+
export declare function TableFoot({ className, children, ...props }: TableFootProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
46
|
+
}
|
|
47
|
+
/** A <tr> with a bottom border and hover highlight. */
|
|
48
|
+
export declare function TableRow({ className, children, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
50
|
+
/**
|
|
51
|
+
* Right-aligns the column — use for numeric data (amounts, quantities).
|
|
52
|
+
*/
|
|
53
|
+
numeric?: boolean;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Column header cell (<th>).
|
|
57
|
+
* Typography: display font, uppercase, extra-small.
|
|
58
|
+
*/
|
|
59
|
+
export declare function TableHead({ numeric, className, children, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
|
|
60
|
+
export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
61
|
+
/**
|
|
62
|
+
* Right-aligns the cell — use for numeric data (amounts, quantities).
|
|
63
|
+
* Should match the numeric prop on the corresponding TableHead.
|
|
64
|
+
*/
|
|
65
|
+
numeric?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Renders the cell in secondary/muted text color.
|
|
68
|
+
* Useful for supporting information (dates, trade names, units).
|
|
69
|
+
*/
|
|
70
|
+
muted?: boolean;
|
|
71
|
+
}
|
|
72
|
+
/** Data cell (<td>). */
|
|
73
|
+
export declare function TableCell({ numeric, muted, className, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
2
|
+
/** Controls the active tab. Wrap all Tabs parts with this. */
|
|
3
|
+
export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
/** Associates a panel with a trigger via matching `value` props. */
|
|
5
|
+
export declare const TabsContent: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Container for tab trigger buttons.
|
|
10
|
+
* Renders as an underlined bar — Bauhaus horizontal rule aesthetic.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* <Tabs defaultValue="budget">
|
|
14
|
+
* <TabsList>
|
|
15
|
+
* <TabsTrigger value="budget">Budget</TabsTrigger>
|
|
16
|
+
* <TabsTrigger value="schedule">Schedule</TabsTrigger>
|
|
17
|
+
* </TabsList>
|
|
18
|
+
* <TabsContent value="budget">…</TabsContent>
|
|
19
|
+
* <TabsContent value="schedule">…</TabsContent>
|
|
20
|
+
* </Tabs>
|
|
21
|
+
*/
|
|
22
|
+
export declare function TabsList({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Individual tab button. Active state: Bauhaus red bottom border.
|
|
27
|
+
*/
|
|
28
|
+
export declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
2
|
+
/**
|
|
3
|
+
* Error message shown below the textarea.
|
|
4
|
+
* When set, the textarea renders in an error state (signal-red border).
|
|
5
|
+
*/
|
|
6
|
+
error?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Hint text shown below the textarea when there is no error.
|
|
9
|
+
*/
|
|
10
|
+
helperText?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Multi-line text input.
|
|
14
|
+
* Same error/helper/disabled API as Input — compose with Label for accessible fields.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <Label htmlFor="notes" required>Scope Notes</Label>
|
|
18
|
+
* <Textarea id="notes" rows={4} placeholder="Describe the work scope…" />
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Textarea id="desc" error="Description is required." />
|
|
22
|
+
*/
|
|
23
|
+
export declare function Textarea({ id, error, helperText, className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface ToasterProps {
|
|
2
|
+
/** Pixel distance from the viewport edge. Default: 16. */
|
|
3
|
+
offset?: number;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Renders the Radix Toast viewport and all active toasts.
|
|
7
|
+
* Mount once near the app root (inside your layout or PageShell).
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* // In your root layout:
|
|
11
|
+
* <Toaster />
|
|
12
|
+
*
|
|
13
|
+
* // Anywhere in your app:
|
|
14
|
+
* import { toast } from '@boilerhaus-ui/boilerhaus-ui'
|
|
15
|
+
* toast.success({ title: 'Saved', description: 'Project details updated.' })
|
|
16
|
+
*/
|
|
17
|
+
export declare function Toaster({ offset }: ToasterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export type ToastVariant = 'neutral' | 'success' | 'warning' | 'danger';
|
|
2
|
+
export interface ToastItem {
|
|
3
|
+
id: string;
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
variant?: ToastVariant;
|
|
7
|
+
duration?: number;
|
|
8
|
+
}
|
|
9
|
+
export interface ToastOptions {
|
|
10
|
+
title?: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
variant?: ToastVariant;
|
|
13
|
+
duration?: number;
|
|
14
|
+
}
|
|
15
|
+
/** Imperatively show a toast from anywhere. */
|
|
16
|
+
export declare function toast(options: ToastOptions): string;
|
|
17
|
+
export declare namespace toast {
|
|
18
|
+
var dismiss: (id?: string) => void;
|
|
19
|
+
var success: (options: Omit<ToastOptions, "variant">) => string;
|
|
20
|
+
var warning: (options: Omit<ToastOptions, "variant">) => string;
|
|
21
|
+
var danger: (options: Omit<ToastOptions, "variant">) => string;
|
|
22
|
+
}
|
|
23
|
+
export declare function useToastStore(): {
|
|
24
|
+
toasts: ToastItem[];
|
|
25
|
+
dismiss: (id: string) => void;
|
|
26
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
2
|
+
export interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
|
|
3
|
+
}
|
|
4
|
+
export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
|
|
5
|
+
export declare const Tooltip: import("react").FC<TooltipPrimitive.TooltipProps>;
|
|
6
|
+
export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
export interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* The floating label shown on hover/focus of the trigger.
|
|
11
|
+
* Keep text short — one phrase, no punctuation.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* // Wrap your app once with TooltipProvider, then:
|
|
15
|
+
* <Tooltip>
|
|
16
|
+
* <TooltipTrigger asChild>
|
|
17
|
+
* <Button variant="ghost" size="icon" aria-label="Delete row">
|
|
18
|
+
* <TrashIcon />
|
|
19
|
+
* </Button>
|
|
20
|
+
* </TooltipTrigger>
|
|
21
|
+
* <TooltipContent>Delete row</TooltipContent>
|
|
22
|
+
* </Tooltip>
|
|
23
|
+
*/
|
|
24
|
+
export declare function TooltipContent({ className, sideOffset, side, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
|