@wallarm-org/design-system 0.69.0 → 0.70.0

package/dist/components/SimpleCharts/HorizontalBar/HorizontalBar.d.ts

@@ -0,0 +1,30 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../../utils/testId';
+import type { ChartColor } from '../types';
+export interface HorizontalBarDatum {
+    /** Legend label, React key, and `data-name` hook. */
+    name: string;
+    /** Segment size; proportional to the bar total. */
+    value: number;
+    /** Built-in palette; resolves via `resolveChartColor`. Omitted → auto-assigned by index. */
+    color?: ChartColor;
+    /** Tailwind `bg-*` escape hatch; wins over `color` (inline fill is skipped). */
+    className?: string;
+}
+export interface HorizontalBarProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Segments + legend. One array drives both, so colors stay in sync. */
+    data: HorizontalBarDatum[];
+    /** Headline number, rendered as `value.toLocaleString('en-US')`. Omitted → header hidden. */
+    value?: number;
+    /** Delta chip. Rendered as an internal Badge (arrow + number). Omitted → no chip. */
+    delta?: {
+        value: number;
+        trend?: 'up' | 'down';
+    };
+    /** Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. */
+    total?: number;
+    /** Show/hide the legend. Default: true. */
+    legend?: boolean;
+}
+export declare const HorizontalBar: FC<HorizontalBarProps>;

package/dist/components/SimpleCharts/HorizontalBar/HorizontalBar.figma.d.ts

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

package/dist/components/SimpleCharts/HorizontalBar/HorizontalBar.figma.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Chart } from "../Chart/Chart.js";
+import { ChartHeader } from "../Chart/ChartHeader.js";
+import { ChartTitle } from "../Chart/ChartTitle.js";
+import { HorizontalBar } from "./HorizontalBar.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883';
+const sampleData = [
+    {
+        name: 'Critical',
+        value: 42,
+        color: 'red'
+    },
+    {
+        name: 'High',
+        value: 31,
+        color: 'brand'
+    },
+    {
+        name: 'Medium',
+        value: 18,
+        color: 'amber'
+    }
+];
+code_connect.connect(HorizontalBar, figmaNodeUrl, {
+    props: {
+        title: code_connect.string('Title')
+    },
+    example: ({ title })=>/*#__PURE__*/ jsxs(Chart, {
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsx(HorizontalBar, {
+                    data: sampleData,
+                    value: 91,
+                    delta: {
+                        value: 10,
+                        trend: 'up'
+                    }
+                })
+            ]
+        })
+});

package/dist/components/SimpleCharts/HorizontalBar/HorizontalBar.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { ArrowDown, ArrowUp } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.js";
+import { Badge } from "../../Badge/index.js";
+import { resolveChartColor } from "../lib/chartPalette.js";
+import { horizontalBarBarClasses, horizontalBarBarWrapperClasses, horizontalBarHeaderClasses, horizontalBarLegendClasses, horizontalBarLegendDotClasses, horizontalBarLegendItemClasses, horizontalBarLegendLabelClasses, horizontalBarRemainderClasses, horizontalBarRootClasses, horizontalBarSegmentClasses, horizontalBarValueClasses } from "./classes.js";
+import { resolveSegments } from "./lib/resolveSegments.js";
+const formatNumber = (n)=>n.toLocaleString('en-US');
+const HorizontalBar = ({ data, value, delta, total, legend = true, className, ref, 'data-testid': testId, ...props })=>{
+    const segments = useMemo(()=>resolveSegments(data, total), [
+        data,
+        total
+    ]);
+    const slotTestId = (slot)=>testId ? `${testId}--${slot}` : void 0;
+    const legendSegments = useMemo(()=>segments.filter((s)=>!s.isRemainder), [
+        segments
+    ]);
+    const barAriaLabel = useMemo(()=>legend ? void 0 : legendSegments.length ? legendSegments.map((s)=>`${s.key} ${formatNumber(s.value)}`).join(', ') : void 0, [
+        legend,
+        legendSegments
+    ]);
+    const hasDuplicateNames = useMemo(()=>{
+        const seen = new Set();
+        for (const d of data){
+            if (seen.has(d.name)) return true;
+            seen.add(d.name);
+        }
+        return false;
+    }, [
+        data
+    ]);
+    useEffect(()=>{
+        if (hasDuplicateNames && 'production' !== process.env.NODE_ENV) console.warn("[HorizontalBar] `data` contains duplicate `name` values. Names are used as the React key and the `data-name` hook — duplicates cause key collisions and ambiguous selectors. Provide unique names.");
+    }, [
+        hasDuplicateNames
+    ]);
+    const hasBar = data.length > 0;
+    const hasValue = 'number' == typeof value;
+    const hasDelta = !!delta;
+    const deltaDirection = delta ? delta.trend ?? (delta.value >= 0 ? 'up' : 'down') : null;
+    const deltaAbs = delta ? Math.abs(delta.value) : 0;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "horizontal-bar",
+        "data-testid": testId,
+        className: cn(horizontalBarRootClasses, className),
+        children: [
+            (hasValue || hasDelta) && /*#__PURE__*/ jsxs("div", {
+                "data-slot": "horizontal-bar-header",
+                "data-testid": slotTestId('header'),
+                className: horizontalBarHeaderClasses,
+                children: [
+                    hasValue && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "horizontal-bar-value",
+                        "data-testid": slotTestId('value'),
+                        className: horizontalBarValueClasses,
+                        children: formatNumber(value)
+                    }),
+                    delta && /*#__PURE__*/ jsxs(Badge, {
+                        type: "secondary",
+                        color: "w-orange",
+                        size: "medium",
+                        role: "img",
+                        "aria-label": `${deltaDirection} ${formatNumber(deltaAbs)}`,
+                        children: [
+                            'up' === deltaDirection ? /*#__PURE__*/ jsx(ArrowUp, {
+                                "aria-hidden": true
+                            }) : /*#__PURE__*/ jsx(ArrowDown, {
+                                "aria-hidden": true
+                            }),
+                            formatNumber(deltaAbs)
+                        ]
+                    })
+                ]
+            }),
+            hasBar && /*#__PURE__*/ jsx("div", {
+                "data-slot": "horizontal-bar-bar-wrapper",
+                className: horizontalBarBarWrapperClasses,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-slot": "horizontal-bar-bar",
+                    "data-testid": slotTestId('bar'),
+                    "aria-hidden": legend ? 'true' : void 0,
+                    role: barAriaLabel ? 'img' : void 0,
+                    "aria-label": barAriaLabel,
+                    className: horizontalBarBarClasses,
+                    children: segments.map((seg)=>/*#__PURE__*/ jsx("div", {
+                            "data-slot": "horizontal-bar-segment",
+                            "data-testid": slotTestId('segment'),
+                            "data-name": seg.isRemainder ? void 0 : seg.key,
+                            "data-remainder": seg.isRemainder ? 'true' : void 0,
+                            className: cn(horizontalBarSegmentClasses, seg.isRemainder && horizontalBarRemainderClasses, seg.className),
+                            style: {
+                                flexGrow: seg.value,
+                                flexBasis: 0,
+                                backgroundColor: seg.isRemainder || seg.className ? void 0 : resolveChartColor(seg.color)
+                            }
+                        }, seg.key))
+                })
+            }),
+            legend && legendSegments.length > 0 && /*#__PURE__*/ jsx("div", {
+                "data-slot": "horizontal-bar-legend",
+                "data-testid": slotTestId('legend'),
+                className: horizontalBarLegendClasses,
+                children: legendSegments.map((seg)=>/*#__PURE__*/ jsxs("span", {
+                        "data-slot": "horizontal-bar-legend-item",
+                        "data-testid": slotTestId('legend-item'),
+                        "data-name": seg.key,
+                        className: horizontalBarLegendItemClasses,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                "data-slot": "horizontal-bar-legend-dot",
+                                "data-testid": slotTestId('legend-dot'),
+                                "aria-hidden": "true",
+                                className: cn(horizontalBarLegendDotClasses, seg.className),
+                                style: {
+                                    backgroundColor: seg.className ? void 0 : resolveChartColor(seg.color)
+                                }
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: horizontalBarLegendLabelClasses,
+                                children: seg.key
+                            })
+                        ]
+                    }, seg.key))
+            })
+        ]
+    });
+};
+HorizontalBar.displayName = 'HorizontalBar';
+export { HorizontalBar };

package/dist/components/SimpleCharts/HorizontalBar/classes.d.ts

@@ -0,0 +1,11 @@
+export declare const horizontalBarRootClasses: string;
+export declare const horizontalBarBarWrapperClasses: string;
+export declare const horizontalBarBarClasses: string;
+export declare const horizontalBarSegmentClasses: string;
+export declare const horizontalBarRemainderClasses: string;
+export declare const horizontalBarHeaderClasses: string;
+export declare const horizontalBarValueClasses: string;
+export declare const horizontalBarLegendClasses: string;
+export declare const horizontalBarLegendItemClasses: string;
+export declare const horizontalBarLegendDotClasses: string;
+export declare const horizontalBarLegendLabelClasses: string;

package/dist/components/SimpleCharts/HorizontalBar/classes.js

@@ -0,0 +1,12 @@
+const horizontalBarRootClasses = "flex flex-col w-full";
+const horizontalBarBarWrapperClasses = "px-16 py-8 w-full";
+const horizontalBarBarClasses = "flex h-8 w-full overflow-hidden rounded-4";
+const horizontalBarSegmentClasses = "h-full min-w-px";
+const horizontalBarRemainderClasses = "bg-bg-strong-primary";
+const horizontalBarHeaderClasses = "flex items-baseline gap-8 px-16 pt-8";
+const horizontalBarValueClasses = "text-3xl font-medium leading-3xl text-text-primary";
+const horizontalBarLegendClasses = "flex flex-row flex-wrap items-center gap-6 px-12 py-2";
+const horizontalBarLegendItemClasses = "inline-flex items-center gap-4 px-4 py-2";
+const horizontalBarLegendDotClasses = "inline-block size-8 rounded-2 shrink-0";
+const horizontalBarLegendLabelClasses = "text-xs font-mono text-text-primary";
+export { horizontalBarBarClasses, horizontalBarBarWrapperClasses, horizontalBarHeaderClasses, horizontalBarLegendClasses, horizontalBarLegendDotClasses, horizontalBarLegendItemClasses, horizontalBarLegendLabelClasses, horizontalBarRemainderClasses, horizontalBarRootClasses, horizontalBarSegmentClasses, horizontalBarValueClasses };

package/dist/components/SimpleCharts/HorizontalBar/constants.d.ts

@@ -0,0 +1,8 @@
+import type { ChartColor } from '../types';
+/** Reserved key for the auto-generated remainder tail (must not collide with a datum name). */
+export declare const REMAINDER_KEY = "__horizontal-bar-remainder__";
+/**
+ * Auto-cycle order for data without an explicit `color`. Leads with the
+ * warm hues used in the Figma reference (red → brand/w-orange → amber).
+ */
+export declare const HORIZONTAL_BAR_PALETTE: ChartColor[];

package/dist/components/SimpleCharts/HorizontalBar/constants.js

@@ -0,0 +1,16 @@
+const REMAINDER_KEY = '__horizontal-bar-remainder__';
+const HORIZONTAL_BAR_PALETTE = [
+    'red',
+    'brand',
+    'amber',
+    'blue',
+    'green',
+    'purple',
+    'teal',
+    'cyan',
+    'indigo',
+    'pink',
+    'rose',
+    'slate'
+];
+export { HORIZONTAL_BAR_PALETTE, REMAINDER_KEY };

package/dist/components/SimpleCharts/HorizontalBar/index.d.ts

@@ -0,0 +1 @@
+export { HorizontalBar, type HorizontalBarDatum, type HorizontalBarProps, } from './HorizontalBar';

package/dist/components/SimpleCharts/HorizontalBar/index.js

@@ -0,0 +1,2 @@
+import { HorizontalBar } from "./HorizontalBar.js";
+export { HorizontalBar };

package/dist/components/SimpleCharts/HorizontalBar/lib/resolveSegments.d.ts

@@ -0,0 +1,10 @@
+import type { ChartColor } from '../../types';
+import type { HorizontalBarDatum } from '../HorizontalBar';
+export interface ResolvedSegment {
+    key: string;
+    value: number;
+    color?: ChartColor;
+    className?: string;
+    isRemainder: boolean;
+}
+export declare function resolveSegments(data: HorizontalBarDatum[], total?: number): ResolvedSegment[];

package/dist/components/SimpleCharts/HorizontalBar/lib/resolveSegments.js

@@ -0,0 +1,21 @@
+import { HORIZONTAL_BAR_PALETTE, REMAINDER_KEY } from "../constants.js";
+const sanitize = (n)=>'number' == typeof n && Number.isFinite(n) && n > 0 ? n : 0;
+function resolveSegments(data, total) {
+    const segments = data.map((d, i)=>({
+            key: d.name,
+            value: sanitize(d.value),
+            color: d.color ?? HORIZONTAL_BAR_PALETTE[i % HORIZONTAL_BAR_PALETTE.length],
+            className: d.className,
+            isRemainder: false
+        }));
+    const sum = segments.reduce((s, seg)=>s + seg.value, 0);
+    const hasTotal = 'number' == typeof total && Number.isFinite(total) && total > sum;
+    const remainder = hasTotal ? total - sum : 0;
+    if (remainder > 0) segments.push({
+        key: REMAINDER_KEY,
+        value: remainder,
+        isRemainder: true
+    });
+    return segments;
+}
+export { resolveSegments };

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

@@ -1,5 +1,6 @@
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart';
+export { HorizontalBar, type HorizontalBarDatum, type HorizontalBarProps, } from './HorizontalBar';
 export { type ChartTimeFormatters, useChartTimeFormatters } from './hooks';
 export { LineChart, LineChartBody, type LineChartBodyProps, type LineChartDatum, LineChartEmpty, type LineChartEmptyProps, LineChartGrid, type LineChartGridProps, LineChartHoverPopover, LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, type LineChartHoverPopoverProps, LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, LineChartLegend, LineChartLegendItem, type LineChartLegendItemProps, type LineChartLegendOrientation, type LineChartLegendProps, LineChartLine, type LineChartLineProps, type LineChartProps, type LineChartSeries, LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, LineChartZoomBrush, type LineChartZoomBrushProps, LineChartZoomPopover, LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, type LineChartZoomPopoverProps, LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, type LineChartZoomRange, } from './LineChart';
 export { type ChartHourCycle, type ChartTimeFormatterOptions, type ChartTimeOrder, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip, } from './lib';

package/dist/components/SimpleCharts/index.js

@@ -1,7 +1,8 @@
 import { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue } from "./BarList/index.js";
 import { Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle } from "./Chart/index.js";
+import { HorizontalBar } from "./HorizontalBar/index.js";
 import { useChartTimeFormatters } from "./hooks/index.js";
 import { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange } from "./LineChart/index.js";
 import { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "./lib/index.js";
 import { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "./PieChart/index.js";
-export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle, LegendDot, LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, useChartTimeFormatters, withTimezoneChip };
+export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle, HorizontalBar, LegendDot, LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, useChartTimeFormatters, withTimezoneChip };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.68.2",
-  "generatedAt": "2026-07-01T10:15:28.709Z",
+  "version": "0.69.0",
+  "generatedAt": "2026-07-02T05:34:16.725Z",
   "components": [
     {
       "name": "Accordion",
@@ -55563,6 +55563,311 @@
             }
           ]
         },
+        {
+          "name": "HorizontalBar",
+          "props": [
+            {
+              "name": "data",
+              "type": "HorizontalBarDatum[]",
+              "required": true,
+              "description": "Segments + legend. One array drives both, so colors stay in sync."
+            },
+            {
+              "name": "value",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Headline number, rendered as `value.toLocaleString('en-US')`. Omitted → header hidden."
+            },
+            {
+              "name": "delta",
+              "type": "{ value: number; trend?: \"up\" | \"down\" | undefined; } | undefined",
+              "required": false,
+              "description": "Delta chip. Rendered as an internal Badge (arrow + number). Omitted → no chip."
+            },
+            {
+              "name": "total",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`."
+            },
+            {
+              "name": "legend",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Show/hide the legend. Default: true."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        },
         {
           "name": "LineChartBody",
           "props": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",