@wallarm-org/design-system 0.5.0 → 0.6.0

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

@@ -1,14 +1,26 @@
-import type { ComponentProps, FC, PropsWithChildren, Ref } from 'react';
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const skeletonVariants: (props?: ({
-    variant?: "rect" | "text" | "circular" | "rounded" | null | undefined;
-    asChild?: boolean | null | undefined;
+    transparent?: boolean | null | undefined;
+    rounded?: "none" | 2 | 4 | 6 | 8 | 12 | 16 | 32 | 24 | "full" | null | undefined;
+    withDimensions?: boolean | null | undefined;
+    withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SkeletonNativeProps = ComponentProps<'div'>;
-type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
-export type SkeletonProps = SkeletonNativeProps & SkeletonVariantProps & PropsWithChildren & {
+type SkeletonVariantsProps = VariantProps<typeof skeletonVariants>;
+type SkeletonDimension = `${number}px` | `${number}%`;
+interface SkeletonSharedProps {
     ref?: Ref<HTMLDivElement>;
     loading?: boolean;
+}
+type SkeletonStandaloneProps = SkeletonSharedProps & {
+    width: SkeletonDimension;
+    height: SkeletonDimension;
 };
+type SkeletonWrapProps = SkeletonSharedProps & {
+    children: ReactNode;
+    width?: never;
+    height?: never;
+};
+export type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariantsProps & (SkeletonStandaloneProps | SkeletonWrapProps);
 export declare const Skeleton: FC<SkeletonProps>;
 export {};

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

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

package/dist/components/Skeleton/Skeleton.figma.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Skeleton } from "./Skeleton.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=5451-23064';
+code_connect.connect(Skeleton, figmaNodeUrl, {
+    props: {
+        transparent: code_connect.boolean('Transparent')
+    },
+    example: ({ transparent })=>/*#__PURE__*/ jsx(Skeleton, {
+            width: "100%",
+            height: "20px",
+            transparent: transparent
+        })
+});

package/dist/components/Skeleton/Skeleton.js

@@ -1,40 +1,59 @@
 import { Fragment, jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const skeletonVariants = cva('animate-pulse bg-bg-primary rounded-6', {
+const skeletonVariants = cva(cn('overflow-hidden', 'animate-skeleton'), {
     variants: {
-        variant: {
-            text: 'h-16 w-full',
-            circular: 'rounded-full',
-            rect: '',
-            rounded: 'rounded-12'
+        transparent: {
+            true: '',
+            false: 'bg-bg-surface-1'
         },
-        asChild: {
-            true: 'select-none pointer-events-none overflow-hidden text-transparent *:invisible',
-            false: ''
+        rounded: {
+            none: 'rounded-none',
+            full: 'rounded-full',
+            2: 'rounded-2',
+            4: 'rounded-4',
+            6: 'rounded-6',
+            8: 'rounded-8',
+            12: 'rounded-12',
+            16: 'rounded-16',
+            24: 'rounded-24',
+            32: 'rounded-32'
+        },
+        withDimensions: {
+            true: 'w-(--skeleton-width) h-(--skeleton-height)'
+        },
+        withChildren: {
+            true: 'select-none pointer-events-none text-transparent *:invisible'
         }
     },
     defaultVariants: {
-        variant: 'rect',
-        asChild: false
+        transparent: true
     }
 });
-const Skeleton = ({ variant = 'rect', loading = true, asChild = false, className, children, ref, ...props })=>{
+const Skeleton = ({ children, ref, className, width, height, loading = true, transparent = true, rounded = 6, ...props })=>{
     if (!loading) return /*#__PURE__*/ jsx(Fragment, {
         children: children
     });
-    const Comp = asChild ? Slot : 'div';
-    return /*#__PURE__*/ jsx(Comp, {
+    const style = {
+        ...width ? {
+            '--skeleton-width': width
+        } : {},
+        ...height ? {
+            '--skeleton-height': height
+        } : {}
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
         ref: ref,
         "data-slot": "skeleton",
-        "aria-hidden": true,
-        tabIndex: -1,
+        style: style,
         className: cn(skeletonVariants({
-            variant,
-            asChild
+            transparent,
+            rounded,
+            withDimensions: !!width && !!height,
+            withChildren: !!children
         }), className),
-        ...props,
+        "aria-hidden": true,
         children: children
     });
 };

package/dist/components/Table/TableLoadingState.js

@@ -17,7 +17,8 @@ const TableLoadingState = ()=>{
                             width: column.getSize()
                         },
                         children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-20 w-full"
+                            width: "100%",
+                            height: "20px"
                         })
                     }, column.id))
             }, key);

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonPr
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
 export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
 export { Separator, type SeparatorProps } from './components/Separator';
+export { Skeleton, type SkeletonProps } from './components/Skeleton';
 export { HStack, type HStackProps, Stack, type StackProps, VStack, type VStackProps, } from './components/Stack';
 export { Switch, SwitchControl, SwitchDescription, type SwitchDescriptionProps, SwitchLabel, type SwitchLabelProps, type SwitchProps, } from './components/Switch';
 export { createTableColumnHelper, Table, type TableAccessorColumnDef, TableActionBar, type TableCellContext, type TableColumnBase, type TableColumnDef, type TableColumnHelper, type TableColumnMeta, type TableColumnPinningState, type TableColumnSizingState, type TableDisplayColumnDef, TableEmptyState, type TableExpandedState, type TableGroupingState, type TableOnChangeFn, type TableProps, type TableRow, type TableRowSelectionState, TableSettingsMenu, type TableSortingState, type TableUpdater, type TableVisibilityState, } from './components/Table';

package/dist/index.js

@@ -23,6 +23,7 @@ import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, Segment
 import { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
 import { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator } from "./components/Select/index.js";
 import { Separator } from "./components/Separator/index.js";
+import { Skeleton } from "./components/Skeleton/index.js";
 import { HStack, Stack, VStack } from "./components/Stack/index.js";
 import { Switch, SwitchControl, SwitchDescription, SwitchLabel } from "./components/Switch/index.js";
 import { Table, TableActionBar, TableEmptyState, TableSettingsMenu, createTableColumnHelper } from "./components/Table/index.js";
@@ -35,4 +36,4 @@ import { Toast, ToastActions, Toaster, toaster } from "./components/Toast/index.
 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";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Kbd, KbdGroup, Link, Loader, 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, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, Text, Textarea, ThemeProvider, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, createTableColumnHelper, drawerContentVariants, drawerPositionerVariants, toaster, useDrawerContext, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Kbd, KbdGroup, Link, Loader, 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, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, Text, Textarea, ThemeProvider, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, createTableColumnHelper, drawerContentVariants, drawerPositionerVariants, toaster, useDrawerContext, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.4.2",
-  "generatedAt": "2026-03-04T15:28:50.771Z",
+  "version": "0.5.0",
+  "generatedAt": "2026-03-05T11:22:14.251Z",
   "components": [
     {
       "name": "Alert",
@@ -15746,7 +15746,7 @@
         },
         {
           "name": "autoCapitalize",
-          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "type": "\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
           "required": false
         },
         {
@@ -15776,7 +15776,7 @@
         },
         {
           "name": "enterKeyHint",
-          "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
           "required": false
         },
         {
@@ -15967,7 +15967,7 @@
         },
         {
           "name": "inputMode",
-          "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "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"
         },
@@ -15990,69 +15990,98 @@
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
         {
-          "name": "variant",
-          "type": "{ text: string; circular: string; rect: string; rounded: string; }",
+          "name": "transparent",
+          "type": "{ true: string; false: string; }",
           "required": false,
-          "defaultValue": "rect"
+          "defaultValue": "true"
         },
         {
-          "name": "asChild",
-          "type": "{ true: string; false: string; }",
+          "name": "rounded",
+          "type": "{ none: string; full: string; 2: string; 4: string; 6: string; 8: string; 12: string; 16: string; 24: string; 32: string; }",
           "required": false,
-          "defaultValue": "false"
+          "defaultValue": "6"
+        },
+        {
+          "name": "withDimensions",
+          "type": "{ true: string; }",
+          "required": false
+        },
+        {
+          "name": "withChildren",
+          "type": "{ true: string; }",
+          "required": false
         },
         {
           "name": "loading",
           "type": "boolean | undefined",
           "required": false,
           "defaultValue": "true"
+        },
+        {
+          "name": "width",
+          "type": "SkeletonDimension",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "SkeletonDimension",
+          "required": false
         }
       ],
       "variants": [
         {
-          "name": "variant",
+          "name": "transparent",
           "options": [
-            "text",
-            "circular",
-            "rect",
-            "rounded"
+            "true",
+            "false"
           ],
-          "defaultValue": "rect"
+          "defaultValue": "true"
         },
         {
-          "name": "asChild",
+          "name": "rounded",
           "options": [
-            "true",
-            "false"
-          ],
-          "defaultValue": "false"
+            "none",
+            "full",
+            "2",
+            "4",
+            "6",
+            "8",
+            "12",
+            "16",
+            "24",
+            "32"
+          ]
+        },
+        {
+          "name": "withDimensions",
+          "options": [
+            "true"
+          ]
+        },
+        {
+          "name": "withChildren",
+          "options": [
+            "true"
+          ]
         }
       ],
       "subComponents": [],
       "examples": [
         {
           "name": "Basic",
-          "code": "args => <Skeleton {...args} className='h-40 w-256' />"
-        },
-        {
-          "name": "Variants",
-          "code": "() => (\n  <VStack className='gap-16 w-320'>\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>text</span>\n      <Skeleton variant='text' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>rect (default)</span>\n      <Skeleton variant='rect' className='h-40 w-256' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>rounded</span>\n      <Skeleton variant='rounded' className='h-40 w-256' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>circular</span>\n      <Skeleton variant='circular' className='h-48 w-48' />\n    </VStack>\n  </VStack>\n)"
+          "code": "() => <Skeleton width='200px' height='20px' />"
         },
         {
-          "name": "WithAsChild",
-          "code": "() => (\n  <VStack className='gap-16'>\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>loading=true, asChild</span>\n      <HStack className='gap-8'>\n        <Skeleton asChild loading>\n          <Badge>Select</Badge>\n        </Skeleton>\n        <Skeleton asChild loading>\n          <Button>Submit</Button>\n        </Skeleton>\n      </HStack>\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>loading=false (children rendered)</span>\n      <HStack className='gap-8'>\n        <Skeleton asChild loading={false}>\n          <Badge>Select</Badge>\n        </Skeleton>\n        <Skeleton asChild loading={false}>\n          <Button>Submit</Button>\n        </Skeleton>\n      </HStack>\n    </VStack>\n  </VStack>\n)"
+          "name": "Shapes",
+          "code": "() => (\n  <HStack gap={24} align='start'>\n    <div className='flex flex-col items-end gap-24 w-[400px]'>\n      {/* Title */}\n      <Skeleton width='256px' height='40px' />\n\n      {/* Text */}\n      <Skeleton width='256px' height='24px' />\n\n      {/* Tags row */}\n      <HStack gap={4}>\n        <Skeleton width='48px' height='20px' />\n        <Skeleton width='48px' height='20px' />\n        <Skeleton width='48px' height='20px' />\n        <Skeleton width='48px' height='20px' />\n      </HStack>\n\n      {/* Icon Button */}\n      <Skeleton width='36px' height='36px' />\n\n      {/* Circle + text + badge */}\n      <HStack align='center' gap={4}>\n        <Skeleton width='20px' height='24px' rounded='full' />\n        <Skeleton width='88px' height='24px' />\n        <Skeleton width='32px' height='24px' />\n      </HStack>\n\n      {/* Button */}\n      <Skeleton width='100px' height='36px' rounded={8} />\n\n      {/* Segmented tabs */}\n      <Skeleton width='284px' height='36px' rounded={12} />\n    </div>\n\n    <div className='flex flex-col gap-24 w-[400px]'>\n      {/* Title */}\n      <Heading size='4xl'>Advanced API Security</Heading>\n\n      {/* Text */}\n      <Text size='md'>Advanced API Security</Text>\n\n      {/* Tags row */}\n      <div className='flex flex-row gap-4'>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Badge>+5</Badge>\n      </div>\n\n      {/* Icon Button */}\n      <Button variant='outline' color='neutral' size='large'>\n        <CircleDashed />\n      </Button>\n\n      {/* Circle + text + badge */}\n      <div className='flex flex-row items-center gap-4'>\n        <Globe className='size-[20px] text-text-secondary' />\n        <Text size='md'>34.74.73.20</Text>\n        <Badge>AWS</Badge>\n      </div>\n\n      {/* Button */}\n      <div className='flex w-100'>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n          Button\n        </Button>\n      </div>\n\n      {/* Segmented tabs */}\n      <div className='flex w-284'>\n        <SegmentedTabs defaultValue='item1'>\n          <SegmentedTabsList>\n            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>\n          </SegmentedTabsList>\n        </SegmentedTabs>\n      </div>\n    </div>\n  </HStack>\n)"
         },
         {
-          "name": "LoadingToggle",
-          "code": "({ loading = true }) => (\n  <HStack className='gap-16'>\n    <Skeleton loading={loading} className='h-48 w-48' variant='circular' />\n    <VStack className='gap-8'>\n      <Skeleton loading={loading} variant='text' className='w-200' />\n      <Skeleton loading={loading} variant='text' className='w-128' />\n    </VStack>\n  </HStack>\n)"
-        },
-        {
-          "name": "ShapeVariety",
-          "code": "() => (\n  <VStack className='gap-16'>\n    <HStack className='gap-16 items-center'>\n      <Skeleton variant='circular' className='h-48 w-48' />\n      <VStack className='gap-8 flex-1'>\n        <Skeleton variant='text' className='w-200' />\n        <Skeleton variant='text' className='w-128' />\n      </VStack>\n    </HStack>\n\n    <HStack className='gap-16 items-center'>\n      <Skeleton variant='circular' className='h-36 w-36' />\n      <VStack className='gap-8 flex-1'>\n        <Skeleton variant='text' className='w-160' />\n        <Skeleton variant='text' className='w-96' />\n      </VStack>\n    </HStack>\n  </VStack>\n)"
+          "name": "Wrap",
+          "code": "() => (\n  <HStack gap={24} align='start'>\n    <div className='flex flex-col items-end gap-24 w-[400px]'>\n      {/* Title */}\n      <Skeleton>\n        <Heading size='4xl'>Advanced API Security</Heading>\n      </Skeleton>\n\n      {/* Text */}\n      <Skeleton>\n        <Text size='md'>Advanced API Security</Text>\n      </Skeleton>\n\n      {/* Tags row */}\n      <HStack gap={4}>\n        <Skeleton>\n          <Tag>\n            Tag\n            <TagClose />\n          </Tag>\n        </Skeleton>\n        <Skeleton>\n          <Tag>\n            Tag\n            <TagClose />\n          </Tag>\n        </Skeleton>\n        <Skeleton>\n          <Tag>\n            Tag\n            <TagClose />\n          </Tag>\n        </Skeleton>\n        <Skeleton>\n          <Badge>+5</Badge>\n        </Skeleton>\n      </HStack>\n\n      {/* Icon Button */}\n      <Skeleton rounded={8}>\n        <Button variant='outline' color='neutral' size='large'>\n          <CircleDashed />\n        </Button>\n      </Skeleton>\n\n      {/* Circle + text + badge */}\n      <HStack align='center' gap={4}>\n        <Skeleton rounded='full'>\n          <Globe className='size-[20px] text-text-secondary' />\n        </Skeleton>\n        <Skeleton>\n          <Text size='md'>34.74.73.20</Text>\n        </Skeleton>\n        <Skeleton>\n          <Badge>AWS</Badge>\n        </Skeleton>\n      </HStack>\n\n      {/* Button */}\n      <Skeleton rounded={8}>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n          Button\n        </Button>\n      </Skeleton>\n\n      {/* Segmented tabs */}\n      <Skeleton rounded={12}>\n        <SegmentedTabs defaultValue='item1'>\n          <SegmentedTabsList>\n            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>\n          </SegmentedTabsList>\n        </SegmentedTabs>\n      </Skeleton>\n    </div>\n\n    <div className='flex flex-col gap-24 w-[400px]'>\n      {/* Title */}\n      <Heading size='4xl'>Advanced API Security</Heading>\n\n      {/* Text */}\n      <Text size='md'>Advanced API Security</Text>\n\n      {/* Tags row */}\n      <div className='flex flex-row gap-4'>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Tag>\n          Tag\n          <TagClose />\n        </Tag>\n        <Badge>+5</Badge>\n      </div>\n\n      {/* Icon Button */}\n      <Button variant='outline' color='neutral' size='large'>\n        <CircleDashed />\n      </Button>\n\n      {/* Circle + text + badge */}\n      <div className='flex flex-row items-center gap-4'>\n        <Globe className='size-[20px] text-text-secondary' />\n        <Text size='md'>34.74.73.20</Text>\n        <Badge>AWS</Badge>\n      </div>\n\n      {/* Button */}\n      <div className='flex w-100'>\n        <Button variant='primary' color='brand' size='large'>\n          <CircleDashed />\n          Button\n        </Button>\n      </div>\n\n      {/* Segmented tabs */}\n      <div className='flex w-284'>\n        <SegmentedTabs defaultValue='item1'>\n          <SegmentedTabsList>\n            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>\n          </SegmentedTabsList>\n        </SegmentedTabs>\n      </div>\n    </div>\n  </HStack>\n)"
         },
         {
-          "name": "CardExample",
-          "code": "() => (\n  <VStack className='gap-12 w-320'>\n    <Skeleton variant='rounded' className='h-160 w-full' />\n    <Skeleton variant='text' className='w-200' />\n    <Skeleton variant='text' />\n    <Skeleton variant='text' className='w-240' />\n    <HStack className='gap-8'>\n      <Skeleton variant='rounded' className='h-36 w-100' />\n      <Skeleton variant='circular' className='h-36 w-36' />\n    </HStack>\n  </VStack>\n)"
+          "name": "Transparent",
+          "code": "() => (\n  <div className='flex flex-col gap-8 p-8 rounded-8 bg-orange-100'>\n    <div className='flex gap-24 justify-end'>\n      Transparent: <Skeleton width='200px' height='20px' />\n    </div>\n    <div className='flex gap-24 justify-end'>\n      Not transparent: <Skeleton width='200px' height='20px' transparent={false} />\n    </div>\n  </div>\n)"
         }
       ]
     },

package/dist/theme/components/skeleton.css

@@ -0,0 +1,19 @@
+@keyframes skeleton {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+.animate-skeleton {
+    background-image: linear-gradient(
+            90deg,
+            --alpha(var(--color-slate-600) / 6%) 0%,
+            --alpha(var(--color-slate-600) / 16%) 50%,
+            --alpha(var(--color-slate-600) / 6%) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton 1.5s linear infinite;
+}

package/dist/theme/index.css

@@ -16,6 +16,7 @@
 @import './components/drawer.css';
 @import './components/dialog.css';
 @import './components/tour.css';
+@import './components/skeleton.css';
 
 [data-scope='scroll-area'][data-part='viewport'] {
     scrollbar-width: none;

package/package.json

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