@wallarm-org/design-system 1.2.0 → 1.4.0

package/dist/components/FormatNumber/FormatNumber.d.ts

@@ -0,0 +1,32 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+type FormatNumberNotation = 'compact' | 'standard';
+type FormatNumberType = 'decimal' | 'percent' | 'byte';
+interface FormatNumberBaseProps {
+    /** Numeric value to display. null/undefined renders em dash + "No data" tooltip. */
+    value: number | null | undefined;
+    /**
+     * Formatting category. Default: 'decimal'.
+     * - 'decimal': plain number with optional abbreviation
+     * - 'percent': percentage with boundary safety
+     * - 'byte': decimal byte units: 512 B, 2.3 GB
+     */
+    type?: FormatNumberType;
+    /**
+     * 'compact' abbreviates (12k, 59.6M); 'standard' shows full value.
+     * Default: 'compact'. Only applies to type='decimal' and type='byte'.
+     */
+    notation?: FormatNumberNotation;
+    /**
+     * Unit label for accessible name + tooltip: "requests", "errors".
+     * Appended after a space. Only meaningful for type='decimal'.
+     */
+    unit?: string;
+    /** Decimal places for percent. Default: 0. */
+    decimals?: number;
+    ref?: Ref<HTMLSpanElement>;
+}
+type FormatNumberNativeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;
+export type FormatNumberProps = FormatNumberNativeProps & FormatNumberBaseProps & TestableProps;
+export declare const FormatNumber: FC<FormatNumberProps>;
+export {};

package/dist/components/FormatNumber/FormatNumber.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { abbreviateNumber, formatBytes, formatFullNumber, formatPercent } from "../../utils/abbreviateNumber.js";
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+const DASHED_UNDERLINE = 'border-b-1 border-dashed border-border-strong-primary';
+const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, decimals = 0, ref, ...props })=>{
+    if (null == value) return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("span", {
+                    ref: ref,
+                    "data-slot": "format-number",
+                    ...props,
+                    children: /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        color: "secondary",
+                        children: "—"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: "No data"
+            })
+        ]
+    });
+    if (!Number.isFinite(value)) return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-slot": "format-number",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            color: "secondary",
+            children: "—"
+        })
+    });
+    if ('percent' === type) return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-slot": "format-number",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            children: formatPercent(value, decimals)
+        })
+    });
+    if ('byte' === type) {
+        const { display, full } = formatBytes(value);
+        const isAbbreviated = 'compact' === notation && value >= 1000;
+        if (isAbbreviated) return /*#__PURE__*/ jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsx("span", {
+                        ref: ref,
+                        "data-slot": "format-number",
+                        "aria-label": full,
+                        ...props,
+                        children: /*#__PURE__*/ jsx(Text, {
+                            size: "sm",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: cn('whitespace-nowrap tabular-nums', DASHED_UNDERLINE),
+                                children: display
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    children: full
+                })
+            ]
+        });
+        return /*#__PURE__*/ jsx("span", {
+            ref: ref,
+            "data-slot": "format-number",
+            ...props,
+            children: /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                children: full
+            })
+        });
+    }
+    const abbreviated = abbreviateNumber(value);
+    const fullValue = formatFullNumber(value);
+    const isAbbreviated = 'compact' === notation && Math.abs(value) >= 1000;
+    const fullWithUnit = unit ? `${fullValue}\u00A0${unit}` : fullValue;
+    if (isAbbreviated) return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("span", {
+                    ref: ref,
+                    "data-slot": "format-number",
+                    "aria-label": fullWithUnit,
+                    ...props,
+                    children: /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: cn('whitespace-nowrap tabular-nums', DASHED_UNDERLINE),
+                            children: abbreviated
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: fullWithUnit
+            })
+        ]
+    });
+    const displayValue = unit ? `${fullValue}\u00A0${unit}` : fullValue;
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-slot": "format-number",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            children: displayValue
+        })
+    });
+};
+FormatNumber.displayName = 'FormatNumber';
+export { FormatNumber };

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

@@ -0,0 +1 @@
+export { FormatNumber, type FormatNumberProps } from './FormatNumber';

package/dist/components/FormatNumber/index.js

@@ -0,0 +1 @@
+export { FormatNumber } from "./FormatNumber.js";

package/dist/components/Indicator/Indicator.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { TestableProps } from '../../utils/testId';
+import { indicatorVariants } from './classes';
+type IndicatorNativeProps = HTMLAttributes<HTMLSpanElement>;
+type IndicatorVariantProps = VariantProps<typeof indicatorVariants>;
+interface IndicatorBaseProps {
+    ref?: Ref<HTMLSpanElement>;
+}
+export type IndicatorProps = IndicatorNativeProps & IndicatorVariantProps & IndicatorBaseProps & TestableProps;
+export declare const Indicator: FC<IndicatorProps>;
+export {};

package/dist/components/Indicator/Indicator.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { indicatorVariants } from "./classes.js";
+const Indicator = ({ ref, className, size = 'md', color = 'info', ...props })=>/*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        className: cn(indicatorVariants({
+            size,
+            color
+        }), className),
+        "data-slot": "indicator"
+    });
+Indicator.displayName = 'Indicator';
+export { Indicator };

package/dist/components/Indicator/classes.d.ts

@@ -0,0 +1,4 @@
+export declare const indicatorVariants: (props?: ({
+    size?: "md" | "sm" | null | undefined;
+    color?: "ai" | "brand" | "danger" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Indicator/classes.js

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+const indicatorVariants = cva('inline-block shrink-0 rounded-2', {
+    variants: {
+        size: {
+            sm: 'size-6',
+            md: 'size-8'
+        },
+        color: {
+            info: 'bg-icon-info',
+            brand: 'bg-icon-brand',
+            warning: 'bg-icon-warning',
+            success: 'bg-icon-success',
+            ai: 'bg-icon-ai',
+            danger: 'bg-icon-danger'
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'info'
+    }
+});
+export { indicatorVariants };

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

@@ -0,0 +1 @@
+export { Indicator, type IndicatorProps } from './Indicator';

package/dist/components/Indicator/index.js

@@ -0,0 +1 @@
+export { Indicator } from "./Indicator.js";

package/dist/index.d.ts

@@ -36,8 +36,10 @@ export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 export { type Condition, type ExprNode, type FieldMetadata, type FieldType, FilterInput, FilterInputChip, type FilterInputChipData, type FilterInputChipProps, type FilterInputChipVariant, FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, type FilterInputProps, type FilterOperator, type Group, } from './components/FilterInput';
 export { Flex, type FlexProps } from './components/Flex';
 export { FormatDateTime, type FormatDateTimeProps } from './components/FormatDateTime';
+export { FormatNumber, type FormatNumberProps } from './components/FormatNumber';
 export { Heading, type HeadingProps } from './components/Heading';
 export { HTTP_METHOD_COLOR, HTTP_METHODS, HttpMethod, type HttpMethodName, type HttpMethodProps, } from './components/HttpMethod';
+export { Indicator, type IndicatorProps } from './components/Indicator';
 export { InlineEdit, type InlineEditActivationMode, type InlineEditContextValue, InlineEditControl, type InlineEditControlProps, InlineEditDate, type InlineEditDateProps, InlineEditDateTime, type InlineEditDateTimeProps, InlineEditError, type InlineEditErrorProps, InlineEditInput, type InlineEditInputProps, InlineEditNumber, type InlineEditNumberProps, InlineEditPreview, InlineEditPreviewIcon, type InlineEditPreviewIconProps, type InlineEditPreviewProps, InlineEditPreviewValue, type InlineEditPreviewValueProps, type InlineEditProps, InlineEditSelect, type InlineEditSelectProps, type InlineEditStatus, type InlineEditSubmitMode, InlineEditTextarea, type InlineEditTextareaProps, InlineEditTime, type InlineEditTimeProps, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity, } from './components/InlineEdit';
 export { Input, type InputProps } from './components/Input';
 export { InputGroup, InputGroupAddon, InputGroupText, } from './components/InputGroup';

package/dist/index.js

@@ -25,8 +25,10 @@ export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu } from "./components/FilterInput/index.js";
 export { Flex } from "./components/Flex/index.js";
 export { FormatDateTime } from "./components/FormatDateTime/index.js";
+export { FormatNumber } from "./components/FormatNumber/index.js";
 export { Heading } from "./components/Heading/index.js";
 export { HTTP_METHODS, HTTP_METHOD_COLOR, HttpMethod } from "./components/HttpMethod/index.js";
+export { Indicator } from "./components/Indicator/index.js";
 export { InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity } from "./components/InlineEdit/index.js";
 export { Input } from "./components/Input/index.js";
 export { InputGroup, InputGroupAddon, InputGroupText } from "./components/InputGroup/index.js";