@wallarm-org/design-system 0.22.1 → 0.23.0

package/dist/components/Attribute/Attribute.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface AttributeProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Show skeleton placeholders instead of children */
+    loading?: boolean;
+    children?: ReactNode;
+}
+export declare const Attribute: FC<AttributeProps>;

package/dist/components/Attribute/Attribute.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { Skeleton } from "../Skeleton/index.js";
+const Attribute = ({ ref, loading = false, children, className, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-testid": testId,
+            "data-slot": "attribute",
+            className: cn('flex flex-col', className),
+            children: loading ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        width: "82px",
+                        height: "16px",
+                        rounded: 6
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "pt-4",
+                        children: /*#__PURE__*/ jsx(Skeleton, {
+                            width: "100%",
+                            height: "24px",
+                            rounded: 6
+                        })
+                    })
+                ]
+            }) : children
+        })
+    });
+Attribute.displayName = 'Attribute';
+export { Attribute };

package/dist/components/Attribute/AttributeLabel.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const AttributeLabel: FC<AttributeLabelProps>;

package/dist/components/Attribute/AttributeLabel.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const AttributeLabel = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('label');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-label",
+        className: cn('flex items-center gap-4 flex-wrap font-sans-display text-sm font-normal text-text-secondary', className),
+        children: children
+    });
+};
+AttributeLabel.displayName = 'AttributeLabel';
+export { AttributeLabel };

package/dist/components/Attribute/AttributeLabelDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+    children?: ReactNode;
+}
+export declare const AttributeLabelDescription: FC<AttributeLabelDescriptionProps>;

package/dist/components/Attribute/AttributeLabelDescription.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const AttributeLabelDescription = ({ ref, children, className, ...props })=>{
+    const testId = useTestId("label-description");
+    return /*#__PURE__*/ jsx("p", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-label-description",
+        className: cn('basis-full', className),
+        children: children
+    });
+};
+AttributeLabelDescription.displayName = "AttributeLabelDescription";
+export { AttributeLabelDescription };

package/dist/components/Attribute/AttributeLabelInfo.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeLabelInfoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Tooltip content */
+    children: ReactNode;
+}
+export declare const AttributeLabelInfo: FC<AttributeLabelInfoProps>;

package/dist/components/Attribute/AttributeLabelInfo.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "../../icons/index.js";
+import { useTestId } from "../../utils/testId.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+const AttributeLabelInfo = ({ ref, children, ...props })=>{
+    const testId = useTestId('label-info');
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("span", {
+                    ...props,
+                    ref: ref,
+                    "data-testid": testId,
+                    "data-slot": "attribute-label-info",
+                    className: "inline-flex cursor-help",
+                    children: /*#__PURE__*/ jsx(Info, {
+                        size: "md"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: children
+            })
+        ]
+    });
+};
+AttributeLabelInfo.displayName = 'AttributeLabelInfo';
+export { AttributeLabelInfo };

package/dist/components/Attribute/AttributeValue.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface AttributeValueProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const AttributeValue: FC<AttributeValueProps>;

package/dist/components/Attribute/AttributeValue.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+function isEmpty(children) {
+    return null == children || false === children || 0 === Children.count(children);
+}
+const AttributeValue = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('value');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "attribute-value",
+        className: cn('pt-4 min-h-[28px] flex items-center', className),
+        children: isEmpty(children) ? /*#__PURE__*/ jsx(Text, {
+            size: "sm",
+            color: "secondary",
+            children: "—"
+        }) : children
+    });
+};
+AttributeValue.displayName = 'AttributeValue';
+export { AttributeValue };

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

@@ -0,0 +1,5 @@
+export { Attribute, type AttributeProps } from './Attribute';
+export { AttributeLabel, type AttributeLabelProps } from './AttributeLabel';
+export { AttributeLabelDescription, type AttributeLabelDescriptionProps, } from './AttributeLabelDescription';
+export { AttributeLabelInfo, type AttributeLabelInfoProps } from './AttributeLabelInfo';
+export { AttributeValue, type AttributeValueProps } from './AttributeValue';

package/dist/components/Attribute/index.js

@@ -0,0 +1,6 @@
+import { Attribute } from "./Attribute.js";
+import { AttributeLabel } from "./AttributeLabel.js";
+import { AttributeLabelDescription } from "./AttributeLabelDescription.js";
+import { AttributeLabelInfo } from "./AttributeLabelInfo.js";
+import { AttributeValue } from "./AttributeValue.js";
+export { Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue };

package/dist/components/Flex/Flex.d.ts

@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
     align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
     justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts

@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator, type SeparatorProps } from '../Separator';
 declare const segmentedControlSeparatorVariants: (props?: ({
-    mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
 /**

package/dist/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const skeletonVariants: (props?: ({
     transparent?: boolean | null | undefined;
-    rounded?: "none" | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | "full" | null | undefined;
+    rounded?: "none" | 2 | 4 | 6 | 8 | "full" | 12 | 16 | 24 | 32 | null | undefined;
     withDimensions?: boolean | null | undefined;
     withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
     flexGrow?: boolean | null | undefined;
     flexShrink?: boolean | null | undefined;
-    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 type StackVariantProps = VariantProps<typeof stackVariants>;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert';
+export { Attribute, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
 export { Badge, type BadgeProps } from './components/Badge';
 export { Button, type ButtonProps } from './components/Button';
 export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';

package/dist/index.js

@@ -1,4 +1,5 @@
 import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
+import { Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
 import { Badge } from "./components/Badge/index.js";
 import { Button } from "./components/Button/index.js";
 import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, useCalendarContext } from "./components/Calendar/index.js";
@@ -47,4 +48,4 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };