@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/domain/utils/use-notification.js

@@ -0,0 +1,53 @@
+import { useNotifications } from '@tetherto/mdk-react-adapter';
+import { useCallback } from 'react';
+import { addToast } from './notification-utils';
+/**
+ * Custom hook for showing notifications backed by the headless `notificationStore`.
+ * Uses `@tetherto/mdk-react-devkit/primitives` Toast and Toaster components.
+ *
+ * @example
+ * ```tsx
+ * const { notifySuccess, notifyError } = useNotification()
+ *
+ * notifySuccess('Success', 'Your changes were saved.')
+ * notifyError('Error', 'Something went wrong.', { dontClose: true })
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export const useNotification = () => {
+    const { increment, decrement } = useNotifications();
+    const notify = useCallback((variant, message, description, options) => {
+        increment();
+        const duration = options?.dontClose ? 0 : (options?.duration ?? 3000);
+        addToast({
+            variant,
+            title: message,
+            description,
+            duration,
+            position: options?.position ?? 'top-left',
+            onClose() {
+                decrement();
+            },
+        });
+    }, [increment, decrement]);
+    const notifySuccess = useCallback((message, description, options) => {
+        notify('success', message, description, options);
+    }, [notify]);
+    const notifyError = useCallback((message, description, options) => {
+        notify('error', message, description, options);
+    }, [notify]);
+    const notifyInfo = useCallback((message, description, options) => {
+        notify('info', message, description, options);
+    }, [notify]);
+    const notifyWarning = useCallback((message, description, options) => {
+        notify('warning', message, description, options);
+    }, [notify]);
+    return {
+        notifySuccess,
+        notifyError,
+        notifyInfo,
+        notifyWarning,
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @tetherto/mdk-react-devkit
+ *
+ * Top-level barrel that re-exports both the generic UI primitives (`./primitives`)
+ * and the mining-domain layer (`./domain`).
+ *
+ * For tree-shaking and clarity, prefer the subpath imports:
+ *   import { Button } from "@tetherto/mdk-react-devkit/primitives";
+ *   import { LineChartCard } from "@tetherto/mdk-react-devkit/domain";
+ *
+ * Stateful and pure-TS helpers live in the adapter / foundation packages:
+ *   import { useTimezoneFormatter } from "@tetherto/mdk-react-adapter";
+ *   import { checkPermission } from "@tetherto/mdk-ui-foundation";
+ */
+export * from './primitives';
+export * from './domain';
+export declare const version = "0.0.0";

package/dist/index.js

@@ -0,0 +1,20 @@
+/**
+ * @tetherto/mdk-react-devkit
+ *
+ * Top-level barrel that re-exports both the generic UI primitives (`./primitives`)
+ * and the mining-domain layer (`./domain`).
+ *
+ * For tree-shaking and clarity, prefer the subpath imports:
+ *   import { Button } from "@tetherto/mdk-react-devkit/primitives";
+ *   import { LineChartCard } from "@tetherto/mdk-react-devkit/domain";
+ *
+ * Stateful and pure-TS helpers live in the adapter / foundation packages:
+ *   import { useTimezoneFormatter } from "@tetherto/mdk-react-adapter";
+ *   import { checkPermission } from "@tetherto/mdk-ui-foundation";
+ */
+// Order is load-bearing: the generic primitives barrel must be re-exported
+// before the domain layer so its value exports win over any same-named
+// type-only re-exports pulled in transitively by `./domain`. Do not sort.
+export * from './primitives';
+export * from './domain';
+export const version = '0.0.0';

package/dist/primitives/components/accordion/accordion.example.d.ts

@@ -0,0 +1 @@
+export declare const AccordionExample: () => import("react").JSX.Element;

package/dist/primitives/components/accordion/accordion.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Accordion.
+ */
+import { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, } from '@tetherto/mdk-react-devkit';
+export const AccordionExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(Accordion, { title: "Basic Accordion", isOpened: true, children: _jsx("p", { children: "Collapsed/expanded content goes here. Supports any React node as children." }) }), _jsx(Accordion, { title: "Solid Background", solidBackground: true, children: _jsx("p", { children: "This variant uses a solid background for the accordion panel." }) }), _jsxs(AccordionRoot, { type: "multiple", children: [_jsxs(AccordionItem, { value: "item-1", children: [_jsx(AccordionTrigger, { toggleIconPosition: "right", children: "Custom trigger position" }), _jsx(AccordionContent, { children: _jsx("p", { children: "Content for item 1 using low-level Accordion primitives." }) })] }), _jsxs(AccordionItem, { value: "item-2", children: [_jsx(AccordionTrigger, { children: "Another section" }), _jsx(AccordionContent, { children: _jsx("p", { children: "Content for item 2." }) })] })] })] }));

package/dist/primitives/components/accordion/index.d.ts

@@ -0,0 +1,116 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
+declare const AccordionRoot: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionMultipleProps | AccordionPrimitive.AccordionSingleProps) & import("react").RefAttributes<HTMLDivElement>>;
+type TAccordionToggleIconPosition = 'left' | 'right';
+type AccordionProps = {
+    /**
+     * Header label shown in the trigger button
+     * @default ''
+     */
+    title?: string;
+    /**
+     * Lays out the content area as a flex row instead of column
+     * @default false
+     */
+    isRow?: boolean;
+    /**
+     * Whether the panel starts expanded
+     * @default false
+     */
+    isOpened?: boolean;
+    /**
+     * Removes the default inner padding from the content area
+     * @default false
+     */
+    unpadded?: boolean;
+    /**
+     * Removes the bottom border from the trigger
+     * @default false
+     */
+    noBorder?: boolean;
+    /**
+     * Shows/hides the expand/collapse chevron icon
+     * @default true
+     */
+    showToggleIcon?: boolean;
+    /**
+     * Applies a solid background to the accordion container
+     * @default false
+     */
+    solidBackground?: boolean;
+    /** Extra content (e.g. a badge) rendered in the trigger header */
+    customLabel?: ReactNode;
+    /**
+     * Side on which the toggle icon appears
+     * @default 'left'
+     */
+    toggleIconPosition?: TAccordionToggleIconPosition;
+    /** Fired when the open/close state changes */
+    onValueChange?: (value: string | string[]) => void;
+} & Omit<ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>, 'collapsible' | 'type' | 'defaultValue' | 'value' | 'onValueChange'>;
+/**
+ * Single collapsible row within an `<Accordion>`. Pass a unique `value` so
+ * Radix can track open/closed state; wrap an `<AccordionTrigger>` and an
+ * `<AccordionContent>` as children.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>Title</AccordionTrigger>
+ *   <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Accordion Trigger component (header/button)
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger>Click to expand</AccordionTrigger>
+ * <AccordionTrigger showToggleIcon={false} customLabel={<Badge>New</Badge>}>
+ *   Title with custom label
+ * </AccordionTrigger>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Forwarded to the underlying Radix trigger element; not rendered by the component. */
+    timestamp?: string;
+    /**
+     * Shows/hides the toggle icon
+     * @default true
+     */
+    showToggleIcon?: boolean;
+    /**
+     * Side on which the toggle icon appears
+     * @default 'left'
+     */
+    toggleIconPosition?: TAccordionToggleIconPosition;
+    /** Slot for extra content in the trigger header */
+    customLabel?: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Accordion Content component (collapsible content area)
+ *
+ * @example
+ * ```tsx
+ * <AccordionContent>
+ *   <p>Your content here</p>
+ * </AccordionContent>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function Accordion({ title, children, isRow, isOpened, unpadded, noBorder, solidBackground, showToggleIcon, toggleIconPosition, customLabel, onValueChange, className, ...props }: PropsWithChildren<AccordionProps>): ReactElement;
+declare namespace Accordion {
+    var displayName: string;
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger };

package/dist/primitives/components/accordion/index.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon, ChevronRightIcon, MinusIcon, PlusIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { forwardRef, } from 'react';
+const AccordionRoot = AccordionPrimitive.Root;
+/**
+ * Single collapsible row within an `<Accordion>`. Pass a unique `value` so
+ * Radix can track open/closed state; wrap an `<AccordionTrigger>` and an
+ * `<AccordionContent>` as children.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>Title</AccordionTrigger>
+ *   <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const AccordionItem = forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn('mdk-accordion__item', className), ...props })));
+AccordionItem.displayName = 'AccordionItem';
+/**
+ * Accordion Trigger component (header/button)
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger>Click to expand</AccordionTrigger>
+ * <AccordionTrigger showToggleIcon={false} customLabel={<Badge>New</Badge>}>
+ *   Title with custom label
+ * </AccordionTrigger>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const AccordionTrigger = forwardRef(({ className, children, toggleIconPosition = 'left', showToggleIcon = true, customLabel, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "mdk-accordion__header", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn('mdk-accordion__trigger', className), ...props, children: [_jsxs("div", { className: "mdk-accordion__trigger-left", children: [showToggleIcon && toggleIconPosition === 'left' && (_jsxs("div", { className: "mdk-accordion__toggler", children: [_jsx(ChevronDownIcon, { className: "mdk-accordion__icon--minus" }), _jsx(ChevronRightIcon, { className: "mdk-accordion__icon--plus" })] })), _jsx("span", { className: "mdk-accordion__title", children: children })] }), _jsxs("div", { className: "mdk-accordion__trigger-right", children: [customLabel && toggleIconPosition !== 'right' && (_jsx("div", { className: "mdk-accordion__custom-label", children: customLabel })), showToggleIcon && toggleIconPosition === 'right' && (_jsxs("div", { className: "mdk-accordion__toggler", children: [_jsx(MinusIcon, { className: "mdk-accordion__icon--minus" }), _jsx(PlusIcon, { className: "mdk-accordion__icon--plus" })] }))] })] }) })));
+AccordionTrigger.displayName = 'AccordionTrigger';
+/**
+ * Accordion Content component (collapsible content area)
+ *
+ * @example
+ * ```tsx
+ * <AccordionContent>
+ *   <p>Your content here</p>
+ * </AccordionContent>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const AccordionContent = forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "mdk-accordion__content", ...props, children: _jsx("div", { className: cn('mdk-accordion__content-inner', className), children: children }) })));
+AccordionContent.displayName = 'AccordionContent';
+/**
+ * Vertically stacked, collapsible content panels with optional toggle icon.
+ * Renders a styled wrapper around Radix Accordion: pass `title` for the
+ * default header or compose `<AccordionItem>`s as children for full control.
+ *
+ * @example
+ * ```tsx
+ * // Basic accordion
+ * <Accordion title="FAQ">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Question 1</AccordionTrigger>
+ *     <AccordionContent>Answer 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * // With timestamp
+ * <Accordion title="Foundry EU Primary" timestamp="2025-01-15 14:32">
+ *   <p>Content here</p>
+ * </Accordion>
+ *
+ * // With custom label
+ * <Accordion
+ *   title="Basic Opened Accordion"
+ *   customLabel={<Badge variant="success">Active</Badge>}
+ *   showToggleIcon={false}
+ * >
+ *   <p>Content here</p>
+ * </Accordion>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const Accordion = ({ title = '', children, isRow = false, isOpened = false, unpadded = false, noBorder = false, solidBackground = false, showToggleIcon = true, toggleIconPosition = 'left', customLabel, onValueChange, className, ...props }) => {
+    const itemValue = 'accordion-item';
+    return (_jsx(AccordionPrimitive.Root, { type: "multiple", defaultValue: isOpened ? [itemValue] : [], onValueChange: onValueChange, className: cn('mdk-accordion', solidBackground && 'mdk-accordion--solid-background', className), ...props, children: _jsxs(AccordionItem, { value: itemValue, children: [_jsx(AccordionTrigger, { showToggleIcon: showToggleIcon, customLabel: customLabel, toggleIconPosition: toggleIconPosition, className: cn(noBorder && 'mdk-accordion__trigger--no-border'), children: title }), _jsx(AccordionContent, { className: cn(unpadded && 'mdk-accordion__content-inner--no-padding', isRow && 'mdk-accordion__content-inner--row'), children: children })] }) }));
+};
+Accordion.displayName = 'Accordion';
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger };

package/dist/primitives/components/action-button/action-button.example.d.ts

@@ -0,0 +1 @@
+export declare const ActionButtonExample: () => import("react").JSX.Element;

package/dist/primitives/components/action-button/action-button.example.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ActionButton.
+ */
+import { ActionButton } from '@tetherto/mdk-react-devkit';
+export const ActionButtonExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(ActionButton, { label: "Reboot Device", variant: "secondary", confirmation: {
+                title: 'Reboot Device',
+                description: 'This will restart all communication workers. The device will be temporarily unavailable.',
+                confirmLabel: 'Reboot',
+                cancelLabel: 'Cancel',
+            } }), _jsx(ActionButton, { label: "Factory Reset", variant: "danger", mode: "dialog", confirmation: {
+                title: 'Confirm Factory Reset',
+                description: 'This action cannot be undone. All device settings will be erased.',
+                confirmLabel: 'Reset',
+            } }), _jsx(ActionButton, { label: "Disabled Action", variant: "secondary", disabled: true, confirmation: {
+                title: 'Disabled',
+            } })] }));

package/dist/primitives/components/action-button/index.d.ts

@@ -0,0 +1,83 @@
+type TActionButtonVariant = 'primary' | 'danger' | 'secondary';
+type ActionButtonConfirmation = {
+    /** Heading shown in the confirmation UI */
+    title: string;
+    /**
+     * Label for the cancel button
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /**
+     * Label for the confirm button. Defaults to `'OK'` in popover mode and
+     * `'Confirm'` in dialog mode.
+     * @default 'OK' (popover) / 'Confirm' (dialog)
+     */
+    confirmLabel?: string;
+    /**
+     * Icon shown in the popover header (popover mode only)
+     * @default <QuestionMarkCircledIcon>
+     */
+    icon?: React.ReactNode;
+    /** Fired when the user cancels */
+    onCancel?: VoidFunction;
+    /** Fired when the user confirms */
+    onConfirm?: VoidFunction;
+    /** Body text or node shown below the title */
+    description?: React.ReactNode;
+};
+type ActionButtonProps = {
+    /** Button label text */
+    label?: string;
+    /** Shows a spinner on the trigger button */
+    loading?: boolean;
+    /** Disables the trigger button */
+    disabled?: boolean;
+    /** Additional class for the trigger button */
+    className?: string;
+    /**
+     * Visual style of the trigger button
+     * @default 'secondary'
+     */
+    variant?: TActionButtonVariant;
+    /** Configuration for the confirmation UI */
+    confirmation: ActionButtonConfirmation;
+    /**
+     * Confirmation mode: popover (inline) or dialog (modal)
+     * @default 'popover'
+     */
+    mode?: 'popover' | 'dialog';
+};
+/**
+ * ActionButton component with confirmation popover or dialog
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   label={`Reboot ${WEBAPP_NAME}`}
+ *   variant="secondary"
+ *   confirmation={{
+ *     title: {`Reboot ${WEBAPP_NAME}`},
+ *     description: "The Reboot feature restarts all the device communication workers.",
+ *     onConfirm: () => console.log('Confirmed'),
+ *     onCancel: () => console.log('Cancelled'),
+ *   }}
+ * />
+ *
+ * <ActionButton
+ *   label="Factory Reset"
+ *   variant="danger"
+ *   mode="dialog"
+ *   confirmation={{
+ *     title: "Confirm Factory Reset",
+ *     description: "This action cannot be undone.",
+ *     onConfirm: () => console.log('Confirmed'),
+ *   }}
+ * />
+ * ```
+ * @category actions
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { ActionButton };
+export type { ActionButtonConfirmation, ActionButtonProps };

package/dist/primitives/components/action-button/index.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { Button } from '../button';
+import { Dialog, DialogContent, DialogFooter } from '../dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { forwardRef, useState } from 'react';
+/**
+ * ActionButton component with confirmation popover or dialog
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   label={`Reboot ${WEBAPP_NAME}`}
+ *   variant="secondary"
+ *   confirmation={{
+ *     title: {`Reboot ${WEBAPP_NAME}`},
+ *     description: "The Reboot feature restarts all the device communication workers.",
+ *     onConfirm: () => console.log('Confirmed'),
+ *     onCancel: () => console.log('Cancelled'),
+ *   }}
+ * />
+ *
+ * <ActionButton
+ *   label="Factory Reset"
+ *   variant="danger"
+ *   mode="dialog"
+ *   confirmation={{
+ *     title: "Confirm Factory Reset",
+ *     description: "This action cannot be undone.",
+ *     onConfirm: () => console.log('Confirmed'),
+ *   }}
+ * />
+ * ```
+ * @category actions
+ * @domain generic
+ * @tier agent-ready
+ */
+const ActionButton = forwardRef(({ label, loading, disabled, className, confirmation, variant = 'secondary', mode = 'popover' }, ref) => {
+    const [open, setOpen] = useState(false);
+    const handleConfirm = () => {
+        confirmation.onConfirm?.();
+        setOpen(false);
+    };
+    const handleCancel = () => {
+        confirmation.onCancel?.();
+        setOpen(false);
+    };
+    if (mode === 'dialog') {
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: ref, loading: loading, variant: variant, disabled: disabled, onClick: () => setOpen(true), className: cn('mdk_action_button__trigger', className), children: label }), _jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && setOpen(false), children: _jsxs(DialogContent, { title: confirmation.title, closable: true, onClose: () => setOpen(false), closeOnClickOutside: false, children: [confirmation.description && (_jsx("div", { className: "mdk_action_button__description", children: confirmation.description })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: handleCancel, children: confirmation.cancelLabel ?? 'Cancel' }), _jsx(Button, { variant: variant, onClick: handleConfirm, children: confirmation.confirmLabel ?? 'Confirm' })] })] }) })] }));
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, disabled: disabled, children: _jsx(Button, { ref: ref, loading: loading, variant: variant, disabled: disabled, className: cn('mdk_action_button__trigger', className), children: label }) }), _jsxs(PopoverContent, { className: "mdk_action_button__popover", align: "start", children: [_jsxs("div", { className: "mdk_action_button__header", children: [_jsx("span", { className: cn('mdk_action_button__icon', `mdk_action_button__icon--${variant}`), children: confirmation.icon ?? _jsx(QuestionMarkCircledIcon, {}) }), confirmation.title && (_jsx("span", { className: "mdk_action_button__title", children: confirmation.title }))] }), confirmation.description && (_jsx("div", { className: "mdk_action_button__description", children: confirmation.description })), _jsxs("div", { className: "mdk_action_button__actions", children: [_jsx(Button, { variant: "secondary", onClick: handleCancel, children: confirmation.cancelLabel ?? 'Cancel' }), _jsx(Button, { variant: "primary", onClick: handleConfirm, children: confirmation.confirmLabel ?? 'OK' })] })] })] }));
+});
+ActionButton.displayName = 'ActionButton';
+export { ActionButton };

package/dist/primitives/components/alert/alert.example.d.ts

@@ -0,0 +1 @@
+export declare const AlertExample: () => import("react").JSX.Element;

package/dist/primitives/components/alert/alert.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Alert.
+ */
+import { CoreAlert } from '@tetherto/mdk-react-devkit';
+export const AlertExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(CoreAlert, { type: "info", title: "Informational", description: "Your miner firmware update is ready to install.", showIcon: true }), _jsx(CoreAlert, { type: "success", title: "Success", description: "Pool credentials updated successfully.", showIcon: true, closable: true }), _jsx(CoreAlert, { type: "warning", title: "Warning", description: "Hash rate dropped below threshold \u2014 check your connections.", showIcon: true }), _jsx(CoreAlert, { type: "error", title: "Error", description: "Failed to connect to the pool. Verify your credentials.", showIcon: true, closable: true })] }));

package/dist/primitives/components/alert/index.d.ts

@@ -0,0 +1,52 @@
+export type AlertType = 'success' | 'info' | 'warning' | 'error';
+export type AlertProps = {
+    /**
+     * Controls the color scheme and default icon
+     * @default 'info'
+     */
+    type?: AlertType;
+    /** Main message */
+    title?: React.ReactNode;
+    /** Secondary/detail content shown below the title */
+    description?: React.ReactNode;
+    /**
+     * Renders the type icon (or the `icon` override) before the content
+     * @default false
+     */
+    showIcon?: boolean;
+    /** Custom icon (used when showIcon is true) */
+    icon?: React.ReactNode;
+    /**
+     * Shows an ✕ button; clicking it hides the alert
+     * @default false
+     */
+    closable?: boolean;
+    /** Called when close button is clicked */
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Display as full-width banner (no border radius, no margin)
+     * @default false
+     */
+    banner?: boolean;
+    /** Action element rendered to the right */
+    action?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+};
+/**
+ * Inline alert banner with type-based icon, optional description, dismissible
+ * close button, and trailing action slot.
+ *
+ * @category feedback
+ *
+ * @example
+ * ```tsx
+ * <Alert type="warning" title="Connection lost" showIcon closable />
+ * ```
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/primitives/components/alert/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils';
+const icons = {
+    success: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })),
+    info: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4M12 8h.01" })] })),
+    warning: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("path", { d: "M12 9v4M12 17h.01" })] })),
+    error: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "m15 9-6 6M9 9l6 6" })] })),
+};
+const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }));
+/**
+ * Inline alert banner with type-based icon, optional description, dismissible
+ * close button, and trailing action slot.
+ *
+ * @category feedback
+ *
+ * @example
+ * ```tsx
+ * <Alert type="warning" title="Connection lost" showIcon closable />
+ * ```
+ * @domain generic
+ * @tier agent-ready
+ */
+const Alert = forwardRef(({ type = 'info', title, description, showIcon = false, icon, closable = false, onClose, banner = false, action, className, style, ...props }, ref) => {
+    const [closed, setClosed] = useState(false);
+    const handleClose = (e) => {
+        setClosed(true);
+        onClose?.(e);
+    };
+    if (closed)
+        return null;
+    return (_jsxs("div", { ref: ref, role: "alert", className: cn('mdk-alert', `mdk-alert--${type}`, banner && 'mdk-alert--banner', description && 'mdk-alert--with-description', className), style: style, ...props, children: [showIcon && _jsx("span", { className: "mdk-alert__icon", children: icon ?? icons[type] }), _jsxs("div", { className: "mdk-alert__content", children: [title && _jsx("div", { className: "mdk-alert__title", children: title }), description && _jsx("div", { className: "mdk-alert__description", children: description })] }), action && _jsx("div", { className: "mdk-alert__action", children: action }), closable && (_jsx("button", { type: "button", className: "mdk-alert__close", onClick: handleClose, "aria-label": "close", children: _jsx(CloseIcon, {}) }))] }));
+});
+Alert.displayName = 'Alert';
+export { Alert };

package/dist/primitives/components/alert-dialog/alert-dialog.example.d.ts

@@ -0,0 +1 @@
+export declare const AlertDialogExample: () => import("react").JSX.Element;

package/dist/primitives/components/alert-dialog/alert-dialog.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for AlertDialog.
+ */
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@tetherto/mdk-react-devkit';
+export const AlertDialogExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { className: "mdk-button mdk-button--variant-secondary mdk-button--size-md", children: "Delete Device" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete Device" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. The device and all associated data will be permanently removed." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Delete" })] })] })] }) }));