@amberstack/comp-lib 0.0.0-stage → 0.1.0

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Connects this tab to the TabPanel with the same value. */
+    value: string;
+    /** Number shown after the label. */
+    count?: number;
+}
+/** One tab in a TabList. The selected tab has an orange underline. Arrow keys move between tabs and select them. */
+export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type TabListProps = HTMLAttributes<HTMLDivElement>;
+/** The row of Tab instances on a hairline. Give it an `aria-label`. */
+export declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'react';
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Connects this panel to the Tab with the same value. */
+    value: string;
+}
+/** The content of one tab. It only renders its children while its tab is selected. */
+export declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** The value of the selected tab, when controlled. */
+    value?: string;
+    /** The value of the first selected tab, when uncontrolled. Defaults to the first tab that is enabled. */
+    defaultValue?: string;
+    /** Called with the value of the tab the user selects. */
+    onChange?: (value: string) => void;
+}
+/** Switches between views of the same object. Holds a TabList and one TabPanel for each Tab. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,12 @@
+export interface TabsContextValue {
+    /** The value of the selected tab. */
+    value?: string;
+    /** Selects a tab because the user asked to. */
+    select: (value: string) => void;
+    /** Sets the first selection when none was given, without reporting a change. */
+    adopt: (value: string) => void;
+    tabId: (value: string) => string;
+    panelId: (value: string) => string;
+}
+export declare const TabsContext: import("react").Context<TabsContextValue | null>;
+export declare function useTabsContext(part: string): TabsContextValue;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Tabs';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanel';

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,9 @@
+import { type TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag, for values set by staff. */
+    locked?: boolean;
+}
+/** Multi-line text control without a label. Use Field for a labelled textarea in a form. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './Textarea';

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'progress';
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What kind of message this is. */
+    tone?: ToastTone;
+    /** The headline. */
+    title: ReactNode;
+    /** A short confirmation of what happened. */
+    body?: ReactNode;
+    /** A follow-up, normally a Link. Never the only route to an action. */
+    action?: ReactNode;
+    /** Shows a dismiss button, and is called when it is pressed. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button. */
+    dismissLabel?: string;
+    /** Percentage complete, from 0 to 100. Only used by the `progress` tone. */
+    progress?: number;
+}
+/**
+ * A brief floating message about something the user just did. Show it inside a ToastStack, whose live region
+ * announces it. Danger is also an alert, so it is announced straight away.
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface ToastProviderProps {
+    /** The part of the app that can show toasts. */
+    children?: ReactNode;
+    /** How many toasts to show at once. */
+    max?: number;
+}
+/**
+ * Provides `useToast` and renders the ToastStack. Toasts leave after about 5 s, except danger, which stays.
+ * Timers pause while the pointer or keyboard focus is inside the stack.
+ */
+export declare function ToastProvider({ children, max }: ToastProviderProps): import("react").JSX.Element;

package/dist/components/Toast/ToastStack.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ToastStackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Toast elements, oldest first. The newest shows at the bottom. */
+    children?: ReactNode;
+    /** How many toasts to show. The newest ones win. */
+    max?: number;
+    /** Accessible name of the region. */
+    'aria-label'?: string;
+}
+/** The fixed bottom-right region that holds toasts. It stays mounted when empty, so screen readers keep watching it. */
+export declare const ToastStack: import("react").ForwardRefExoticComponent<ToastStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Toast';
+export * from './ToastStack';
+export * from './ToastProvider';
+export { useToast, type ToastContextValue, type ToastOptions } from './useToast';

package/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import type { ToastTone } from './Toast';
+export interface ToastOptions {
+    /** What kind of message this is. */
+    tone?: ToastTone;
+    /** The headline. */
+    title: ReactNode;
+    /** A short confirmation of what happened. */
+    body?: ReactNode;
+    /** A follow-up, normally a Link. */
+    action?: ReactNode;
+    /** Milliseconds before it leaves on its own. Defaults to about 5 s, except for danger, which stays until dismissed. */
+    duration?: number;
+    /** Percentage complete, for the `progress` tone. */
+    progress?: number;
+}
+export interface ToastContextValue {
+    /** Shows a toast and returns its id. */
+    toast: (options: ToastOptions) => string;
+    /** Removes a toast by id. */
+    dismiss: (id: string) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextValue | null>;
+/** Shows and dismisses toasts. Must be used inside a ToastProvider. */
+export declare function useToast(): ToastContextValue;

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'children'> {
+    /** Whether it is on, when controlled. */
+    checked?: boolean;
+    /** Whether it starts on, when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Called with the new state. */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * Immediate on and off control. On is orange because it counts as selection. Use SwitchField to include a label;
+ * on its own it needs an `aria-label`.
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './Toggle';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { type AnchoredPlacement } from './useAnchoredPosition';
+export type TooltipPlacement = AnchoredPlacement;
+export interface TooltipProps {
+    /** The hint text. Never put essential information or actions in a tooltip. */
+    content: ReactNode;
+    /** Which side of the target the tooltip sits on. It flips if there isn't room. */
+    placement?: TooltipPlacement;
+    /** Milliseconds before the tooltip opens on hover or focus. */
+    delay?: number;
+    /** One focusable element, which must accept mouse, focus and ARIA props. */
+    children: ReactElement<HTMLAttributes<HTMLElement>>;
+    /** Extra class for the tooltip. */
+    className?: string;
+}
+/** A short hint for one focusable element, shown on hover and focus. Escape hides it. */
+export declare function Tooltip({ content, placement, delay, children, className }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/Tooltip/useAnchoredPosition.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement, type RefObject } from 'react';
+export type AnchoredPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Renders the one trigger element with extra props merged in. */
+export declare function TriggerSlot({ element, ...props }: HTMLAttributes<HTMLElement> & {
+    element: ReactElement<HTMLAttributes<HTMLElement>>;
+}): ReactElement<HTMLAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Keeps a `position: fixed` element next to its anchor while open, following scroll and resize.
+ * Flips to the opposite side when the requested one doesn't fit. Writes `top` and `left`, the resolved
+ * side as `data-placement`, and the anchor's centre along the shared edge as `--arrow-offset`.
+ * `getAnchor` must be stable.
+ */
+export declare function useAnchoredPosition(open: boolean, getAnchor: () => HTMLElement | null, floatingRef: RefObject<HTMLElement | null>, placement: AnchoredPlacement, gap: number): void;

package/dist/components/TopBar/ContextSwitcher.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export interface ContextSwitcherProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'children'> {
+    /** Name of the current organisation, project or environment. */
+    name: string;
+    /** Icon before the name. */
+    icon?: IconName;
+}
+/** Shows the current context and opens the menu to change it. */
+export declare const ContextSwitcher: import("react").ForwardRefExoticComponent<ContextSwitcherProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/TopBar/TopBar.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface TopBarProps extends HTMLAttributes<HTMLElement> {
+    /** Where you are: a breadcrumb or context switchers. */
+    left?: ReactNode;
+    /** Global tools: status, docs link, inbox and account. */
+    right?: ReactNode;
+}
+/** The 56 px bar across the top of the app. */
+export declare const TopBar: import("react").ForwardRefExoticComponent<TopBarProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/TopBar/TopBarSeparator.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type TopBarSeparatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/** The slash between two context switchers. It is decorative, so screen readers skip it. */
+export declare const TopBarSeparator: import("react").ForwardRefExoticComponent<TopBarSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/TopBar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TopBar';
+export * from './ContextSwitcher';
+export * from './TopBarSeparator';

package/dist/components/UnavailableState/UnavailableState.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface UnavailableStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Icon for the feature that is off. */
+    icon?: IconName;
+    /** What is off. */
+    title: ReactNode;
+    /** Why it is off, and what still works. */
+    description?: ReactNode;
+    /** Text of the link that explains how to turn it on. */
+    linkLabel?: string;
+    /** Where that link goes. */
+    linkHref?: string;
+    /** Whether the link leaves the app. Opens in a new tab with an external-link icon. */
+    linkExternal?: boolean;
+}
+/** Explains that a feature is off because of how the system is set up, and how to turn it on. */
+export declare const UnavailableState: import("react").ForwardRefExoticComponent<UnavailableStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/UnavailableState/index.d.ts

@@ -0,0 +1 @@
+export * from './UnavailableState';

package/dist/icons/index.d.ts

@@ -0,0 +1,57 @@
+import type { SVGProps } from 'react';
+/** Same 24 px paths as the Icons page in Figma. */
+export declare const iconPaths: {
+    readonly plus: "M5 12H19M12 5V19";
+    readonly minus: "M5 12H19";
+    readonly check: "M20 6L9 17L4 12";
+    readonly x: "M18 6L6 18M6 6L18 18";
+    readonly 'chevron-down': "M6 9L12 15L18 9";
+    readonly 'chevron-up': "M18 15L12 9L6 15";
+    readonly 'chevron-right': "M9 18L15 12L9 6";
+    readonly 'chevron-left': "M15 18L9 12L15 6";
+    readonly 'chevrons-up-down': "M7 15L12 20L17 15M7 9L12 4L17 9";
+    readonly 'arrow-right': "M5 12H19M12 5L19 12L12 19";
+    readonly 'arrow-left': "M12 19L5 12L12 5M19 12H5";
+    readonly 'arrow-up': "M5 12L12 5L19 12M12 19V5";
+    readonly 'arrow-down': "M12 5V19M19 12L12 19L5 12";
+    readonly 'external-link': "M15 3H21V9M10 14L21 3M18 13V19A2 2 0 0 1 16 21H5A2 2 0 0 1 3 19V8A2 2 0 0 1 5 6H11";
+    readonly search: "M19 11A8 8 0 1 1 3 11A8 8 0 1 1 19 11M21 21L16.7 16.7";
+    readonly lock: "M5 11H19A2 2 0 0 1 21 13V20A2 2 0 0 1 19 22H5A2 2 0 0 1 3 20V13A2 2 0 0 1 5 11ZM7 11V7A5 5 0 0 1 17 7V11";
+    readonly 'alert-triangle': "M21.73 18L13.73 4A2 2 0 0 0 10.25 4L2.25 18A2 2 0 0 0 4 21H20A2 2 0 0 0 21.73 18ZM12 9V13M12 17H12.01";
+    readonly 'alert-circle': "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M12 8V12M12 16H12.01";
+    readonly info: "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M12 16V12M12 8H12.01";
+    readonly 'check-circle': "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M9 12L11 14L15 10";
+    readonly 'x-circle': "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M15 9L9 15M9 9L15 15";
+    readonly clock: "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M12 6V12L16 14";
+    readonly circle: "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12";
+    readonly user: "M19 21V19A4 4 0 0 0 15 15H9A4 4 0 0 0 5 19V21M16 7A4 4 0 1 1 8 7A4 4 0 1 1 16 7";
+    readonly sliders: "M21 4H14M10 4H3M21 12H12M8 12H3M21 20H16M12 20H3M14 2V6M8 10V14M16 18V22";
+    readonly home: "M3 9L12 2L21 9V20A2 2 0 0 1 19 22H5A2 2 0 0 1 3 20ZM9 22V12H15V22";
+    readonly folder: "M20 20A2 2 0 0 0 22 18V8A2 2 0 0 0 20 6H12.1A2 2 0 0 1 10.41 5.1L9.6 3.9A2 2 0 0 0 7.93 3H4A2 2 0 0 0 2 5V18A2 2 0 0 0 4 20Z";
+    readonly database: "M21 5C21 6.66 17 8 12 8S3 6.66 3 5S7 2 12 2S21 3.34 21 5ZM3 5V19C3 20.66 7 22 12 22S21 20.66 21 19V5M3 12C3 13.66 7 15 12 15S21 13.66 21 12";
+    readonly globe: "M22 12A10 10 0 1 1 2 12A10 10 0 1 1 22 12M2 12H22M12 2A15 15 0 0 1 12 22A15 15 0 0 1 12 2";
+    readonly activity: "M22 12H18L15 21L9 3L6 12H2";
+    readonly bell: "M6 8A6 6 0 0 1 18 8C18 15 21 17 21 17H3S6 15 6 8M10.3 21A1.94 1.94 0 0 0 13.7 21";
+    readonly trash: "M3 6H21M19 6V20C19 21 18 22 17 22H7C6 22 5 21 5 20V6M8 6V4C8 3 9 2 10 2H14C15 2 16 3 16 4V6";
+    readonly pencil: "M12 20H21M16.5 3.5A2.12 2.12 0 0 1 19.5 6.5L7 19L3 20L4 16Z";
+    readonly copy: "M10 8H20A2 2 0 0 1 22 10V20A2 2 0 0 1 20 22H10A2 2 0 0 1 8 20V10A2 2 0 0 1 10 8ZM4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4";
+    readonly more: "M12 12H12.01M19 12H19.01M5 12H5.01";
+    readonly filter: "M22 3H2L10 12.46V19L14 21V12.46Z";
+    readonly calendar: "M8 2V6M16 2V6M5 4H19A2 2 0 0 1 21 6V20A2 2 0 0 1 19 22H5A2 2 0 0 1 3 20V6A2 2 0 0 1 5 4ZM3 10H21";
+    readonly 'file-text': "M15 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V7ZM14 2V6A2 2 0 0 0 16 8H20M16 13H8M16 17H8";
+    readonly image: "M5 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3ZM21 15L17.9 11.9A2 2 0 0 0 15.1 11.9L6 21M11 9A2 2 0 1 1 7 9A2 2 0 1 1 11 9";
+    readonly 'bar-chart': "M3 3V21H21M8 17V12M13 17V7M18 17V9";
+    readonly book: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5ZM4 19.5A2.5 2.5 0 0 0 6.5 22H20V17";
+};
+export type IconName = keyof typeof iconPaths;
+export declare const iconNames: IconName[];
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+    /** Which icon to draw. */
+    name: IconName;
+    /** Width and height in pixels. */
+    size?: number;
+    /** Accessible name. Leave empty for decorative icons beside text. */
+    label?: string;
+}
+/** Draws an icon in the current text colour, with a 1.5 px stroke at 16 px. */
+export declare function Icon({ name, size, label, ...props }: IconProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import './styles/index.css';
+export * from './icons';
+export * from './components/Accordion';
+export * from './components/ActivityItem';
+export * from './components/AreaChart';
+export * from './components/AssetField';
+export * from './components/Avatar';
+export * from './components/Banner';
+export * from './components/BarChart';
+export * from './components/BlockHeader';
+export * from './components/Breadcrumb';
+export * from './components/Button';
+export * from './components/Calendar';
+export * from './components/Card';
+export * from './components/CatalogCard';
+export * from './components/ChartCard';
+export * from './components/ChartCore';
+export * from './components/ChartLegend';
+export * from './components/ChartTooltip';
+export * from './components/Checkbox';
+export * from './components/ChecklistItem';
+export * from './components/CommandPalette';
+export * from './components/ConfirmDialog';
+export * from './components/ContentRow';
+export * from './components/CredentialRow';
+export * from './components/DataTable';
+export * from './components/DateField';
+export * from './components/DatePicker';
+export * from './components/DateRangePicker';
+export * from './components/Dialog';
+export * from './components/Divider';
+export * from './components/DonutChart';
+export * from './components/Drawer';
+export * from './components/DropdownMenu';
+export * from './components/EmptyState';
+export * from './components/EnvironmentLabel';
+export * from './components/Field';
+export * from './components/Filters';
+export * from './components/IconButton';
+export * from './components/Input';
+export * from './components/KPI';
+export * from './components/KPIGraph';
+export * from './components/Kbd';
+export * from './components/Label';
+export * from './components/LineChart';
+export * from './components/Link';
+export * from './components/MediaTile';
+export * from './components/Menu';
+export * from './components/MetricCard';
+export * from './components/MultiSelect';
+export * from './components/NavGroup';
+export * from './components/NavItem';
+export * from './components/NodeGraph';
+export * from './components/NodeReference';
+export * from './components/NumberField';
+export * from './components/PageHeader';
+export * from './components/Pagination';
+export * from './components/PickerItem';
+export * from './components/Popover';
+export * from './components/ProgressBar';
+export * from './components/ProposedNote';
+export * from './components/Radio';
+export * from './components/RangeTabs';
+export * from './components/ResourceCard';
+export * from './components/RichTextField';
+export * from './components/ScatterPlot';
+export * from './components/Search';
+export * from './components/Select';
+export * from './components/SetupStep';
+export * from './components/Sidebar';
+export * from './components/Skeleton';
+export * from './components/SortableRow';
+export * from './components/Sparkline';
+export * from './components/Spinner';
+export * from './components/Status';
+export * from './components/StatusIcon';
+export * from './components/Stepper';
+export * from './components/SwitchField';
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/Toggle';
+export * from './components/Tooltip';
+export * from './components/TopBar';
+export * from './components/UnavailableState';