@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/primitives/components/operations-energy-cost-chart/constants.js

@@ -0,0 +1,10 @@
+import { CURRENCY, UNITS } from '../../constants/units';
+export const DEFAULT = {
+    height: 200, // in pixels
+    title: 'Operations vs Energy Cost',
+    unit: `${CURRENCY.USD}/${UNITS.ENERGY_MWH}`,
+};
+export const CONFIG = {
+    cutout: '75%',
+    borderWidth: 6, // in pixels
+};

package/dist/primitives/components/operations-energy-cost-chart/index.d.ts

@@ -0,0 +1,20 @@
+import type { OperationsEnergyCostChartProps } from './types';
+export type { OperationsEnergyCostChartData, OperationsEnergyCostChartProps } from './types';
+export { buildOperationsEnergyCostSlices, buildOperationsEnergyCostTooltip, hasOperationsEnergyCostData, } from './utils';
+/**
+ * Doughnut breakdown of Operations vs Energy cost (USD per MWh).
+ * Wraps `ChartContainer` and `DoughnutChart`; pass `operationalCostsUSD` and
+ * `energyCostsUSD` via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <OperationsEnergyCostChart
+ *   data={{ operationalCostsUSD: 1000, energyCostsUSD: 500 }}
+ * />
+ * ```
+ */
+export declare const OperationsEnergyCostChart: ({ data, className, emptyMessage, isLoading, unit, title, height, }: OperationsEnergyCostChartProps) => import("react").JSX.Element;

package/dist/primitives/components/operations-energy-cost-chart/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ChartContainer } from '../chart-container';
+import { DoughnutChart } from '../doughnut-chart';
+import { buildOperationsEnergyCostSlices, buildOperationsEnergyCostTooltip, hasOperationsEnergyCostData, } from './utils';
+import { CONFIG, DEFAULT } from './constants';
+export { buildOperationsEnergyCostSlices, buildOperationsEnergyCostTooltip, hasOperationsEnergyCostData, } from './utils';
+/**
+ * Doughnut breakdown of Operations vs Energy cost (USD per MWh).
+ * Wraps `ChartContainer` and `DoughnutChart`; pass `operationalCostsUSD` and
+ * `energyCostsUSD` via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <OperationsEnergyCostChart
+ *   data={{ operationalCostsUSD: 1000, energyCostsUSD: 500 }}
+ * />
+ * ```
+ */
+export const OperationsEnergyCostChart = ({ data, className, emptyMessage, isLoading = false, unit = DEFAULT.unit, title = DEFAULT.title, height = DEFAULT.height, }) => {
+    const slices = useMemo(() => buildOperationsEnergyCostSlices({
+        operationalCostsUSD: data?.operationalCostsUSD,
+        energyCostsUSD: data?.energyCostsUSD,
+    }), [data?.operationalCostsUSD, data?.energyCostsUSD]);
+    const empty = !isLoading && !hasOperationsEnergyCostData(data);
+    const tooltip = useMemo(() => buildOperationsEnergyCostTooltip(unit), [unit]);
+    const header = (_jsxs("div", { className: "mdk-operations-energy-cost-chart__header", children: [_jsx("h3", { className: "mdk-operations-energy-cost-chart__title", children: title }), unit ? _jsx("span", { className: "mdk-operations-energy-cost-chart__unit", children: unit }) : null] }));
+    return (_jsx(ChartContainer, { empty: empty, header: header, loading: isLoading, className: className, emptyMessage: emptyMessage, children: !empty && (_jsx(DoughnutChart, { unit: unit, data: slices, height: height, tooltip: tooltip, cutout: CONFIG.cutout, legendPosition: "bottom", borderWidth: CONFIG.borderWidth, formatValue: (value) => value.toFixed(2) })) }));
+};

package/dist/primitives/components/operations-energy-cost-chart/operations-energy-cost-chart.example.d.ts

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

package/dist/primitives/components/operations-energy-cost-chart/operations-energy-cost-chart.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OperationsEnergyCostChart } from '@tetherto/mdk-react-devkit/primitives';
+export const OperationsEnergyCostChartExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(OperationsEnergyCostChart, { data: {
+            energyCostsUSD: 500,
+            operationalCostsUSD: 1000,
+        } }) }));

package/dist/primitives/components/operations-energy-cost-chart/types.d.ts

@@ -0,0 +1,32 @@
+export type OperationsEnergyCostChartData = Partial<{
+    energyCostsUSD: number;
+    operationalCostsUSD: number;
+}>;
+export type OperationsEnergyCostChartProps = Partial<{
+    /**
+     * Chart title
+     * @default "Operations vs Energy Cost"
+     */
+    title: string;
+    /**
+     * Subtitle and tooltip unit label
+     * @default $/MWh
+     */
+    unit: string;
+    /**
+     * Doughnut height in pixels
+     * @default 200
+     */
+    height: number;
+    /** Extra class on the container */
+    className: string;
+    /**
+     * Shows loading overlay on the chart area
+     * @default false
+     */
+    isLoading: boolean;
+    /** Message when both costs are zero or missing */
+    emptyMessage: string;
+    /** `operationalCostsUSD` and `energyCostsUSD` */
+    data: OperationsEnergyCostChartData;
+}>;

package/dist/primitives/components/operations-energy-cost-chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/components/operations-energy-cost-chart/utils.d.ts

@@ -0,0 +1,28 @@
+import type { ChartTooltipConfig } from '../../utils/chart-tooltip';
+import type { DoughnutChartDataset } from '../doughnut-chart';
+import type { OperationsEnergyCostChartData } from './types';
+/**
+ * True when at least one cost bucket is non-zero (drives empty state).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const hasOperationsEnergyCostData: (data?: OperationsEnergyCostChartData) => boolean;
+/**
+ * Builds doughnut slices for Operations vs Energy cost.
+ * Zero buckets are omitted (matches OSS `OperationsEnergyCostChart` helper).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const buildOperationsEnergyCostSlices: ({ operationalCostsUSD, energyCostsUSD, }: OperationsEnergyCostChartData) => DoughnutChartDataset[];
+/**
+ * HTML tooltip showing value, unit, and share of total.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const buildOperationsEnergyCostTooltip: (unit: string) => ChartTooltipConfig;

package/dist/primitives/components/operations-energy-cost-chart/utils.js

@@ -0,0 +1,57 @@
+import { UNITS } from '../../constants/units';
+import { formatPercentShare } from '../../utils/number';
+import { CHART_COLORS } from '../../constants/colors';
+/**
+ * True when at least one cost bucket is non-zero (drives empty state).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const hasOperationsEnergyCostData = (data) => Boolean(data?.operationalCostsUSD || data?.energyCostsUSD);
+/**
+ * Builds doughnut slices for Operations vs Energy cost.
+ * Zero buckets are omitted (matches OSS `OperationsEnergyCostChart` helper).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const buildOperationsEnergyCostSlices = ({ operationalCostsUSD, energyCostsUSD, }) => {
+    const slices = [];
+    if (operationalCostsUSD) {
+        slices.push({
+            label: 'Operations',
+            value: operationalCostsUSD,
+            color: CHART_COLORS.VIOLET,
+        });
+    }
+    if (energyCostsUSD) {
+        slices.push({
+            label: 'Energy',
+            value: energyCostsUSD,
+            color: CHART_COLORS.SKY_BLUE,
+        });
+    }
+    return slices;
+};
+/**
+ * HTML tooltip showing value, unit, and share of total.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const buildOperationsEnergyCostTooltip = (unit) => ({
+    mode: 'nearest',
+    intersect: true,
+    valueFormatter: (value, { chart }) => {
+        const datasetValues = chart.data.datasets[0]?.data;
+        const total = Array.isArray(datasetValues)
+            ? datasetValues.reduce((acc, nextValue) => acc + Number(nextValue), 0)
+            : 0;
+        const numericValue = Number(value);
+        const percentage = formatPercentShare(numericValue, total);
+        return `${numericValue.toFixed(2)} ${unit} (${percentage}${UNITS.PERCENT})`;
+    },
+});

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

@@ -0,0 +1,72 @@
+import type { ComponentSize } from '../../types';
+export type PaginationProps = {
+    /**
+     * Current active page number
+     * @default 1
+     */
+    current?: number;
+    /**
+     * Total number of items
+     * @default 0
+     */
+    total?: number;
+    /**
+     * Number of items per page
+     * @default 20
+     */
+    pageSize?: number;
+    /**
+     * Page size options for the select dropdown
+     * @default [10, 20, 50, 100]
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Show page size changer
+     * @default true
+     */
+    showSizeChanger?: boolean;
+    /**
+     * Show total count text
+     * @default false
+     */
+    showTotal?: boolean;
+    /**
+     * Disable pagination
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Size variant
+     * @default 'sm'
+     */
+    size?: ComponentSize;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+    /**
+     * Callback when page number or page size changes
+     */
+    onChange?: (page: number, pageSize: number) => void;
+    /**
+     * Callback when page size changes
+     */
+    onSizeChange?: (current: number, size: number) => void;
+};
+/**
+ * Pagination component for navigating through pages
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   current={1}
+ *   total={100}
+ *   pageSize={20}
+ *   onChange={(page, pageSize) => console.log(page, pageSize)}
+ * />
+ * ```
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { Button } from '../button';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from '../select';
+import { forwardRef } from 'react';
+/**
+ * Pagination component for navigating through pages
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   current={1}
+ *   total={100}
+ *   pageSize={20}
+ *   onChange={(page, pageSize) => console.log(page, pageSize)}
+ * />
+ * ```
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Pagination = forwardRef(({ current = 1, total = 0, pageSize = 20, pageSizeOptions = [10, 20, 50, 100], showSizeChanger = true, showTotal = false, disabled = false, size = 'sm', className, onChange, onSizeChange, ...props }, ref) => {
+    const totalPages = Math.ceil(total / pageSize);
+    const hasPrev = current > 1;
+    const hasNext = current < totalPages;
+    // Calculate range for current page
+    const rangeStart = total === 0 ? 0 : (current - 1) * pageSize + 1;
+    const rangeEnd = Math.min(current * pageSize, total);
+    const handlePageChange = (page) => {
+        if (page < 1 || page > totalPages || page === current || disabled)
+            return;
+        onChange?.(page, pageSize);
+    };
+    const handlePageSizeChange = (newSize) => {
+        const newTotalPages = Math.ceil(total / newSize);
+        const newCurrent = current > newTotalPages ? newTotalPages : current;
+        onSizeChange?.(newCurrent, newSize);
+        onChange?.(newCurrent, newSize);
+    };
+    const handleEllipsisClick = (direction) => {
+        if (direction === 'forward') {
+            handlePageChange(Math.min(current + 5, totalPages));
+        }
+        else {
+            handlePageChange(Math.max(current - 5, 1));
+        }
+    };
+    // Generate page numbers to display
+    const getPageNumbers = () => {
+        const pages = [];
+        if (totalPages <= 7) {
+            // Show all pages if total is small
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push({ type: 'page', value: i });
+            }
+        }
+        else {
+            // Always show first page
+            pages.push({ type: 'page', value: 1 });
+            if (current > 3) {
+                pages.push({ type: 'ellipsis', value: current - 5, direction: 'backward' });
+            }
+            // Show pages around current
+            const start = Math.max(2, current - 1);
+            const end = Math.min(totalPages - 1, current + 1);
+            for (let i = start; i <= end; i++) {
+                pages.push({ type: 'page', value: i });
+            }
+            if (current < totalPages - 2) {
+                pages.push({ type: 'ellipsis', value: current + 5, direction: 'forward' });
+            }
+            // Always show last page
+            pages.push({ type: 'page', value: totalPages });
+        }
+        return pages;
+    };
+    const renderTotal = () => {
+        if (!showTotal)
+            return null;
+        return (_jsxs("div", { className: "mdk-pagination__total", children: [rangeStart, "-", rangeEnd, " of ", total] }));
+    };
+    return (_jsxs("div", { ref: ref, className: cn('mdk-pagination', `mdk-pagination--${size}`, disabled && 'mdk-pagination--disabled', className), ...props, children: [renderTotal(), _jsx("div", { className: "mdk-pagination__controls", children: _jsxs("div", { className: "mdk-pagination__pages", children: [_jsx(Button, { variant: "icon", icon: _jsx(ChevronLeftIcon, {}), disabled: !hasPrev || disabled, onClick: () => handlePageChange(current - 1), className: "mdk-pagination__button mdk-pagination__button--prev", "aria-label": "Previous page" }), getPageNumbers().map((item, index) => {
+                            if (item.type === 'ellipsis') {
+                                return (_jsxs("button", { className: "mdk-pagination__ellipsis", onClick: () => handleEllipsisClick(item.direction), disabled: disabled, "aria-label": `Jump ${item.direction === 'forward' ? 'forward' : 'backward'} 5 pages`, children: [_jsx("span", { className: "mdk-pagination__ellipsis--dot", children: "\u2022\u2022\u2022" }), _jsx("span", { className: "mdk-pagination__ellipsis--arrow", children: item.direction === 'forward' ? (_jsx(DoubleArrowRightIcon, {})) : (_jsx(DoubleArrowLeftIcon, {})) })] }, `ellipsis-${index}`));
+                            }
+                            return (_jsx(Button, { variant: item.value === current ? 'primary' : 'secondary', disabled: disabled, onClick: () => handlePageChange(item.value), className: cn('mdk-pagination__button mdk-pagination__button--page', item.value === current && 'mdk-pagination__button--active'), "aria-label": `Page ${item.value}`, "aria-current": item.value === current ? 'page' : undefined, children: item.value }, item.value));
+                        }), _jsx(Button, { variant: "icon", icon: _jsx(ChevronRightIcon, {}), disabled: !hasNext || disabled, onClick: () => handlePageChange(current + 1), className: "mdk-pagination__button mdk-pagination__button--next", "aria-label": "Next page" })] }) }), showSizeChanger && (_jsxs(Select, { value: pageSize?.toString(), onValueChange: (value) => handlePageSizeChange(Number(value)), disabled: disabled, "aria-label": "Items per page", children: [_jsx(SelectTrigger, { disabled: disabled, className: "mdk-pagination__size-changer--trigger", children: _jsx(SelectValue, { placeholder: "Actions" }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: pageSizeOptions.map((size) => (_jsxs(SelectItem, { className: "mdk-pagination__size-changer--item", value: size?.toString(), children: [size, " / page"] }, size))) }) })] }))] }));
+});
+Pagination.displayName = 'Pagination';

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for Pagination.
+ */
+import { useState } from 'react';
+import { Pagination } from '@tetherto/mdk-react-devkit';
+export const PaginationExample = () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    return (_jsx(Pagination, { total: 483, current: page, pageSize: pageSize, showTotal: true, onChange: (p, ps) => {
+            setPage(p);
+            setPageSize(ps);
+        } }));
+};

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

@@ -0,0 +1,143 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { FlexAlign, Position } from '../../types';
+import { type FC, type ReactNode } from 'react';
+/**
+ * Popover Root - Container for a single popover
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Click me</PopoverTrigger>
+ *   <PopoverContent>Content here</PopoverContent>
+ * </Popover>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Popover: FC<PopoverPrimitive.PopoverProps>;
+/**
+ * Popover Trigger - Element that triggers the popover
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Popover Anchor - Optional anchor point for positioning
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Popover Portal - Portals the popover content to document.body
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverPortal: FC<PopoverPrimitive.PopoverPortalProps>;
+/**
+ * Popover Close - Button to close the popover
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Popover Arrow - Small arrow pointing to the trigger
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverArrow: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Popover Content - The content shown in the popover
+ * @example
+ * ```tsx
+ * <PopoverContent side="bottom" align="start">
+ *   <div>Popover content</div>
+ *   <PopoverClose />
+ * </PopoverContent>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Whether to show the arrow
+     * @default false
+     */
+    showArrow?: boolean;
+    /**
+     * Whether to show a close button
+     * @default false
+     */
+    showClose?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * SimplePopover - Convenient wrapper for basic popover usage
+ * @example
+ * ```tsx
+ * <SimplePopover
+ *   trigger={<Button>Click me</Button>}
+ *   content={<div>Popover content</div>}
+ * />
+ * ```
+ */
+type SimplePopoverProps = {
+    /**
+     * Element that triggers the popover
+     */
+    trigger: ReactNode;
+    /**
+     * Popover content
+     */
+    content: ReactNode;
+    /**
+     * Position of the popover relative to trigger
+     * @default "bottom"
+     */
+    side?: Position;
+    /**
+     * Alignment of the popover
+     * @default "center"
+     */
+    align?: FlexAlign;
+    /**
+     * Distance from the trigger in pixels
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Whether to show the arrow
+     * @default false
+     */
+    showArrow?: boolean;
+    /**
+     * Whether to show a close button
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Additional class for content
+     */
+    className?: string;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * One-line convenience wrapper that pairs a trigger with floating content — no provider boilerplate.
+ *
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const SimplePopover: FC<SimplePopoverProps>;
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, SimplePopover, };

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../utils';
+import { forwardRef, } from 'react';
+/**
+ * Popover Root - Container for a single popover
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Click me</PopoverTrigger>
+ *   <PopoverContent>Content here</PopoverContent>
+ * </Popover>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+const Popover = PopoverPrimitive.Root;
+/**
+ * Popover Trigger - Element that triggers the popover
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+/**
+ * Popover Anchor - Optional anchor point for positioning
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverAnchor = PopoverPrimitive.Anchor;
+/**
+ * Popover Portal - Portals the popover content to document.body
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverPortal = PopoverPrimitive.Portal;
+/**
+ * Popover Close - Button to close the popover
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverClose = PopoverPrimitive.Close;
+/**
+ * Popover Arrow - Small arrow pointing to the trigger
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverArrow = forwardRef(({ className, ...props }, ref) => (_jsx(PopoverPrimitive.Arrow, { ref: ref, className: cn('mdk-popover__arrow', className), ...props })));
+PopoverArrow.displayName = 'PopoverArrow';
+/**
+ * Popover Content - The content shown in the popover
+ * @example
+ * ```tsx
+ * <PopoverContent side="bottom" align="start">
+ *   <div>Popover content</div>
+ *   <PopoverClose />
+ * </PopoverContent>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const PopoverContent = forwardRef(({ className, align = 'center', sideOffset = 8, showArrow = false, showClose = false, children, ...props }, ref) => (_jsx(PopoverPortal, { children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('mdk-popover__content', className), ...props, children: [showClose && (_jsx(PopoverClose, { className: "mdk-popover__close", "aria-label": "Close", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), children, showArrow && _jsx(PopoverArrow, {})] }) })));
+PopoverContent.displayName = 'PopoverContent';
+/**
+ * One-line convenience wrapper that pairs a trigger with floating content — no provider boilerplate.
+ *
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+const SimplePopover = ({ trigger, content, side = 'bottom', align = 'center', sideOffset = 8, showArrow = false, showClose = false, className, open, onOpenChange, }) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { side: side, align: align, sideOffset: sideOffset, showArrow: showArrow, showClose: showClose, className: className, children: content })] }));
+};
+SimplePopover.displayName = 'SimplePopover';
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, SimplePopover, };

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Popover.
+ */
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@tetherto/mdk-react-devkit';
+export const PopoverExample = () => {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { children: "Filters" }) }), _jsx(PopoverContent, { side: "bottom", align: "start", showArrow: true, showClose: true, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, minWidth: 220 }, children: [_jsx("strong", { children: "Filter by" }), _jsx("p", { style: { margin: 0 }, children: "Place your filter form here." })] }) })] }));
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Progress bar component (Radix UI).
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export * from '@radix-ui/react-progress';

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

@@ -0,0 +1,7 @@
+/**
+ * Progress bar component (Radix UI).
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export * from '@radix-ui/react-progress';

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Progress (Radix Progress primitives re-exported as namespace).
+ * Progress.Root and Progress.Indicator are unstyled — consumers supply their own classes.
+ */
+import { Progress } from '@tetherto/mdk-react-devkit';
+export const ProgressExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(Progress.Root, { className: "mdk-progress", value: 65, max: 100, children: _jsx(Progress.Indicator, { style: { transform: 'translateX(-35%)' } }) }), _jsx(Progress.Root, { className: "mdk-progress mdk-progress--thin", value: 30, max: 100, children: _jsx(Progress.Indicator, { style: { transform: 'translateX(-70%)' } }) }), _jsx(Progress.Root, { className: "mdk-progress", value: 100, max: 100, children: _jsx(Progress.Indicator, { style: { transform: 'translateX(0%)' } }) })] }));