{ "capturedAt": "2026-08-02T10:01:51.636Z", "file": "CBAR - Design System (Copy)", "sets": [ { "id": "2321:2660", "set": "Accordion Item", "page": "Accordion", "variants": 2, "size": { "width": 680, "height": 237 }, "props": [ { "name": "State", "key": "State", "type": "VARIANT", "default": "Closed", "values": [ "Closed", "Open" ] }, { "name": "Title", "key": "Title#149:24", "type": "TEXT", "default": "Title" }, { "name": "Content", "key": "Content#149:27", "type": "TEXT", "default": "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." }, { "name": "icon", "key": "icon#2322:0", "type": "INSTANCE_SWAP", "default": "2163:108" } ] }, { "id": "2446:316", "set": "Alert", "page": "Alert", "variants": 72, "size": { "width": 1393, "height": 2788 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "default", "values": [ "default", "md", "lg" ] }, { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "solid", "subtle", "outline", "surface" ] }, { "name": "status", "key": "status", "type": "VARIANT", "default": "info", "values": [ "info", "warning", "success", "error", "info-secondary", "neutral" ] } ] }, { "id": "2446:757", "set": "avatar", "page": "Avatar", "variants": 150, "size": { "width": 1007, "height": 1203 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "solid", "subtle", "outline" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xl", "values": [ "xl", "lg", "md", "sm", "xs", "2xs" ] }, { "name": "shape", "key": "shape", "type": "VARIANT", "default": "square", "values": [ "square", "shape" ] }, { "name": "colorPalette", "key": "colorPalette", "type": "VARIANT", "default": "primary", "values": [ "primary", "neutral", "third", "secondary" ] }, { "name": "avatar-type", "key": "avatar-type", "type": "VARIANT", "default": "initials", "values": [ "initials", "avatar" ] } ] }, { "id": "2456:5146", "set": "Badge", "page": "Badge", "variants": 32, "size": { "width": 307, "height": 950 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "solid", "surface" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "sm", "md", "lg" ] }, { "name": "color", "key": "color", "type": "VARIANT", "default": "black", "values": [ "black", "success", "removed", "default" ] }, { "name": ".iconStart?", "key": ".iconStart?#128:85", "type": "BOOLEAN", "default": true }, { "name": ".iconEnd?", "key": ".iconEnd?#128:88", "type": "BOOLEAN", "default": true }, { "name": "leftElement", "key": "leftElement#2459:0", "type": "INSTANCE_SWAP", "default": "2163:386" }, { "name": "rightElement", "key": "rightElement#2459:33", "type": "INSTANCE_SWAP", "default": "2163:176" } ] }, { "id": "2369:1902", "set": "breadcrumb", "page": "Breadcrumb", "variants": 2, "size": { "width": 317, "height": 124 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "md" ] } ] }, { "id": "2446:6959", "set": "Button", "page": "Button", "variants": 560, "size": { "width": 4644, "height": 3180 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "ghost", "solid", "subtle", "outline", "surface" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "active", "disabled" ] }, { "name": "colorPalette", "key": "colorPalette", "type": "VARIANT", "default": "secondary", "values": [ "secondary", "primary", "red", "green", "yellow", "third", "black" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xl", "values": [ "xl", "lg", "md", "xs" ] }, { "name": "iconLeft?", "key": "iconLeft?#2301:242", "type": "BOOLEAN", "default": true }, { "name": "iconRight?", "key": "iconRight?#2301:363", "type": "BOOLEAN", "default": true }, { "name": "iconLeft", "key": "iconLeft#2315:1803", "type": "INSTANCE_SWAP", "default": "2163:605" }, { "name": "iconRight", "key": "iconRight#2315:2404", "type": "INSTANCE_SWAP", "default": "2163:164" } ] }, { "id": "2517:1648", "set": "Card", "page": "Cards", "variants": 8, "size": { "width": 984, "height": 1418 }, "props": [ { "name": "Asset Type", "key": "Asset Type", "type": "VARIANT", "default": "Icon", "values": [ "Icon", "Image" ] }, { "name": "Variant", "key": "Variant", "type": "VARIANT", "default": "Stroke", "values": [ "Stroke", "Default" ] }, { "name": "Direction", "key": "Direction", "type": "VARIANT", "default": "Horizontal", "values": [ "Horizontal", "Vertical" ] }, { "name": "Asset", "key": "Asset#113:13", "type": "BOOLEAN", "default": true }, { "name": "Button", "key": "Button#113:15", "type": "BOOLEAN", "default": true }, { "name": "Heading", "key": "Heading#280:0", "type": "TEXT", "default": "Title" }, { "name": "Body", "key": "Body#280:13", "type": "TEXT", "default": "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " }, { "name": "Icon", "key": "Icon#280:68", "type": "INSTANCE_SWAP", "default": "2517:1476" } ] }, { "id": "2448:956", "set": "Checkmark", "page": "Checkbox", "variants": 36, "size": { "width": 784, "height": 256 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "lg", "md", "sm", "xs" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "Default", "values": [ "Default", "hover", "active", "invalid", "disabled-checked", "disabled-unckecked", "active-secondary", "active-black", "active-turquoise" ] } ] }, { "id": "2290:7748", "set": "FileUpload", "page": "File upload", "variants": 5, "size": { "width": 447, "height": 731 }, "props": [ { "name": "type", "key": "type", "type": "VARIANT", "default": "button", "values": [ "paste", "dropzone", "clearable", "input", "button" ] } ] }, { "id": "2399:522", "set": "IconButton", "page": "Icon Button", "variants": 280, "size": { "width": 630, "height": 3634 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "lg", "values": [ "lg", "md", "xs", "sm" ] }, { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "solid", "subtle", "surface", "outline", "ghost" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "hover" ] }, { "name": "colorPalette", "key": "colorPalette", "type": "VARIANT", "default": "secondary", "values": [ "secondary", "primary", "red", "green", "yellow", "black", "turquoise" ] }, { "name": "icon", "key": "icon#2412:562", "type": "INSTANCE_SWAP", "default": "2163:60" } ] }, { "id": "2249:1168", "set": "Input", "page": "Input", "variants": 40, "size": { "width": 1742, "height": 912 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "outline", "values": [ "outline", "flushed" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "sm", "md", "lg" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "focused", "filled", "disabled", "invalid" ] }, { "name": ".isInvalid?", "key": ".isInvalid?", "type": "VARIANT", "default": "False", "values": [ "False", "True" ] }, { "name": ".isRequired?", "key": ".isRequired?#212:15", "type": "BOOLEAN", "default": false }, { "name": ".leftElement?", "key": ".leftElement?#232:5", "type": "BOOLEAN", "default": true }, { "name": ".rightElement?", "key": ".rightElement?#232:421", "type": "BOOLEAN", "default": true }, { "name": "Label", "key": "Label#248:34", "type": "TEXT", "default": "Email" }, { "name": "placeholder", "key": "placeholder#281:84", "type": "TEXT", "default": "Placeholder" }, { "name": ".label?", "key": ".label?#313:116", "type": "BOOLEAN", "default": true }, { "name": "Instance", "key": "Instance#2420:0", "type": "INSTANCE_SWAP", "default": "2163:60" }, { "name": "leftEkement", "key": "leftEkement#2420:632", "type": "INSTANCE_SWAP", "default": "2163:60" }, { "name": "showErrorMessage?", "key": "showErrorMessage?#2451:0", "type": "BOOLEAN", "default": true }, { "name": "showPlaceholder?", "key": "showPlaceholder?#2456:0", "type": "BOOLEAN", "default": true } ] }, { "id": "2516:1230", "set": "Pagination left", "page": "Pagination", "variants": 5, "size": { "width": 72, "height": 280 }, "props": [ { "name": "state", "key": "state", "type": "VARIANT", "default": "Default", "values": [ "Default", "hover", "focus", "selected", "disabled" ] } ] }, { "id": "2513:739", "set": "Pagination page", "page": "Pagination", "variants": 4, "size": { "width": 72, "height": 228 }, "props": [ { "name": "state", "key": "state", "type": "VARIANT", "default": "Default", "values": [ "Default", "hover", "focus", "selected" ] } ] }, { "id": "2515:71", "set": "Pagination right", "page": "Pagination", "variants": 5, "size": { "width": 72, "height": 280 }, "props": [ { "name": "state", "key": "state", "type": "VARIANT", "default": "Default", "values": [ "Default", "hover", "focus", "selected", "disabled" ] } ] }, { "id": "2264:23", "set": "ProgressCircle", "page": "Progress circle", "variants": 35, "size": { "width": 774, "height": 452 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "sm", "md", "lg", "xl" ] }, { "name": "colorPalette", "key": "colorPalette", "type": "VARIANT", "default": "black", "values": [ "red", "green", "yellow", "primary", "secondary", "black", "third" ] }, { "name": ".valueText?", "key": ".valueText?#406:0", "type": "BOOLEAN", "default": true } ] }, { "id": "2428:3852", "set": "RadioMark", "page": "Radio button", "variants": 44, "size": { "width": 866, "height": 386 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "lg", "md", "sm", "xs" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "active-secondary", "active", "active-black", "disabled", "disabled-checked", "invalid", "invalid-checked", "success", "active-turquoise", "hover" ] } ] }, { "id": "2451:5841", "set": "RadioMark", "page": "Radio button", "variants": 576, "size": { "width": 1166, "height": 1466 }, "props": [ { "name": ".isChecked?", "key": ".isChecked?", "type": "VARIANT", "default": "false", "values": [ "false", "true" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "lg", "md", "sm", "xs" ] }, { "name": "variant", "key": "variant", "type": "VARIANT", "default": "solid", "values": [ "solid", "subtle", "outline", "inverted" ] }, { "name": ".isDisabled?", "key": ".isDisabled?", "type": "VARIANT", "default": "false", "values": [ "false", "true" ] }, { "name": ".focusVisible?", "key": ".focusVisible?", "type": "VARIANT", "default": "false", "values": [ "false", "true" ] }, { "name": "colorPalette", "key": "colorPalette", "type": "VARIANT", "default": "gray", "values": [ "gray", "green", "red", "primary", "secondary", "turquoise" ] } ] }, { "id": "159:2944", "set": "search", "page": "Design System", "variants": 2, "size": { "width": 250, "height": 132 }, "props": [ { "name": "Search", "key": "Search", "type": "VARIANT", "default": "Default", "values": [ "Default", "Opened" ] } ] }, { "id": "2490:502", "set": "search", "page": "Icon Button", "variants": 2, "size": { "width": 250, "height": 132 }, "props": [ { "name": "Search", "key": "Search", "type": "VARIANT", "default": "Default", "values": [ "Default", "Opened" ] } ] }, { "id": "2297:2035", "set": "Select", "page": "Select / Dropdown", "variants": 40, "size": { "width": 1363, "height": 1684 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "sm", "md", "lg" ] }, { "name": "variant", "key": "variant", "type": "VARIANT", "default": "outline", "values": [ "outline", "flushed" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "focused", "disabled", "invalid", "filled" ] }, { "name": ".label?", "key": ".label?#334:3", "type": "BOOLEAN", "default": true }, { "name": "placeholder", "key": "placeholder#334:4", "type": "TEXT", "default": "example@cbar.az" }, { "name": ".isRequired?", "key": ".isRequired?#334:5", "type": "BOOLEAN", "default": false }, { "name": "Label", "key": "Label#334:6", "type": "TEXT", "default": "Select" }, { "name": ".rightElement?", "key": ".rightElement?#334:9", "type": "BOOLEAN", "default": true }, { "name": "errorText", "key": "errorText#334:11", "type": "TEXT", "default": "This is an error text" }, { "name": ".isClearable?", "key": ".isClearable?#334:26", "type": "BOOLEAN", "default": false }, { "name": "showErrorMessage?", "key": "showErrorMessage?#2451:71", "type": "BOOLEAN", "default": true } ] }, { "id": "2452:1745", "set": "Select.Content", "page": "Select / Dropdown", "variants": 4, "size": { "width": 980, "height": 456 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "md", "sm", "lg" ] } ] }, { "id": "2488:1301", "set": "slider", "page": "Slider", "variants": 12, "size": { "width": 285, "height": 360 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "vertical", "values": [ "vertical", "horizontal" ] }, { "name": "position", "key": "position", "type": "VARIANT", "default": "start", "values": [ "start", "middle", "end" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "large", "values": [ "large", "medium" ] } ] }, { "id": "2454:482", "set": "Switch", "page": "Switch", "variants": 18, "size": { "width": 802, "height": 482 }, "props": [ { "name": "Size", "key": "Size", "type": "VARIANT", "default": "xs", "values": [ "xs", "md", "lg" ] }, { "name": "State", "key": "State", "type": "VARIANT", "default": "default", "values": [ "default", "default-secondary", "default-turquoise", "default-black", "disabled", "default-off" ] } ] }, { "id": "2466:14", "set": "tabs", "page": "Tabs", "variants": 38, "size": { "width": 694, "height": 563 }, "props": [ { "name": "variants", "key": "variants", "type": "VARIANT", "default": "line", "values": [ "plain", "line", "subtle", "outline" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "md", "values": [ "lg", "md" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "active", "disabled-selected", "disabled-unselected", "disabled" ] }, { "name": ".iconStart?", "key": ".iconStart?#359:0", "type": "BOOLEAN", "default": true }, { "name": ".iconEnd?", "key": ".iconEnd?#442:0", "type": "BOOLEAN", "default": false }, { "name": "icon", "key": "icon#2466:41", "type": "INSTANCE_SWAP", "default": "2163:60" } ] }, { "id": "2469:1120", "set": "tabsList", "page": "Tabs", "variants": 8, "size": { "width": 585, "height": 544 }, "props": [ { "name": "size", "key": "size", "type": "VARIANT", "default": "md", "values": [ "md", "lg" ] }, { "name": "variant", "key": "variant", "type": "VARIANT", "default": "line", "values": [ "line", "subtle", "outline", "plain" ] } ] }, { "id": "2473:386", "set": "Textarea", "page": "Text area", "variants": 40, "size": { "width": 1763, "height": 979 }, "props": [ { "name": "variant", "key": "variant", "type": "VARIANT", "default": "outline", "values": [ "outline", "flushed" ] }, { "name": "size", "key": "size", "type": "VARIANT", "default": "xs", "values": [ "xs", "sm", "md", "lg" ] }, { "name": "state", "key": "state", "type": "VARIANT", "default": "default", "values": [ "default", "focused", "invalid", "disabled", "filled" ] }, { "name": ".isInvalid?", "key": ".isInvalid?", "type": "VARIANT", "default": "False", "values": [ "False", "True" ] }, { "name": ".isFilled?", "key": ".isFilled?", "type": "VARIANT", "default": "False", "values": [ "False", "True" ] }, { "name": "errorText", "key": "errorText#211:4", "type": "TEXT", "default": "This is an error text" }, { "name": "helperText", "key": "helperText#211:5", "type": "TEXT", "default": "This is a helper text to help user." }, { "name": ".isRequired?", "key": ".isRequired?#212:15", "type": "BOOLEAN", "default": false }, { "name": ".helperText?", "key": ".helperText?#219:0", "type": "BOOLEAN", "default": false }, { "name": "label", "key": "label#248:34", "type": "TEXT", "default": "Textarea" }, { "name": "placeholder", "key": "placeholder#281:84", "type": "TEXT", "default": "Hello" }, { "name": ".label?", "key": ".label?#313:116", "type": "BOOLEAN", "default": true } ] }, { "id": "2414:10758", "set": "Toast", "page": "Toast", "variants": 5, "size": { "width": 473, "height": 470 }, "props": [ { "name": "state", "key": "state", "type": "VARIANT", "default": "success", "values": [ "success", "error", "warning", "info", "neutral" ] }, { "name": "iconLeft?", "key": "iconLeft?#2414:0", "type": "BOOLEAN", "default": true }, { "name": "iconRight?", "key": "iconRight?#2414:3", "type": "BOOLEAN", "default": true }, { "name": "icon", "key": "icon#2414:6", "type": "INSTANCE_SWAP", "default": "2163:653" } ] }, { "id": "2459:409", "set": "Tooltip", "page": "Tooltip", "variants": 1, "size": { "width": 201, "height": 73 }, "props": [ { "name": "placement", "key": "placement", "type": "VARIANT", "default": "bottom", "values": [ "bottom" ] }, { "name": ".showArrow?", "key": ".showArrow?#353:15", "type": "BOOLEAN", "default": true }, { "name": "label", "key": "label#1394:1", "type": "TEXT", "default": "Tooltip content" } ] } ] }