diff --git a/design/pencil-new.pen b/design/pencil-new.pen new file mode 100644 index 0000000..2acaea5 --- /dev/null +++ b/design/pencil-new.pen @@ -0,0 +1,279 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "bi8Au", + "x": 0, + "y": 0, + "name": "Login Page", + "theme": { + "Mode": "Light", + "Base": "Neutral", + "Accent": "Default" + }, + "clip": true, + "width": 800, + "height": 600, + "fill": "#f8b6b6ff", + "layout": "none", + "children": [ + { + "type": "frame", + "id": "loginCard", + "x": 216, + "y": 36, + "width": 305, + "height": 533, + "fill": "#f9ebebff", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#000000" + }, + "layout": "vertical", + "gap": 24, + "padding": 24, + "children": [ + { + "type": "frame", + "id": "logoContainer", + "width": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "logo", + "fill": "#000000", + "content": "PolyMarket", + "lineHeight": 1.2, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "titleContainer", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "title", + "fill": "#000000", + "content": "Sign in to your account", + "lineHeight": 1.5, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "500" + }, + { + "type": "text", + "id": "subtitle", + "fill": "#000000", + "content": "Enter your email and password to sign in", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "emailInputGroup", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "emailLabelContainer", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "emailLabel", + "fill": "#000000", + "content": "Email", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "emailInput", + "width": "fill_container", + "height": 40, + "fill": "#000000", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#000000" + }, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "emailPlaceholder", + "fill": "#000000", + "content": "your.email@example.com", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "passwordInputGroup", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "W4jnH", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "passwordLabel", + "fill": "#000000", + "content": "Password", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "forgotPassword", + "fill": "#000000", + "content": "Forgot password?", + "lineHeight": 1.4285714285714286, + "textAlign": "right", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "passwordInput", + "width": "fill_container", + "height": 40, + "fill": "#000000", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#000000" + }, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "passwordPlaceholder", + "fill": "#000000", + "content": "••••••••", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "signInButton", + "width": "fill_container", + "height": 40, + "fill": "#000000", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "signInText", + "fill": "#000000", + "content": "Sign in", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "createAccountContainer", + "width": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "createAccount", + "fill": "#000000", + "content": "Create account", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/design/pencil-polymarket.pen b/design/pencil-polymarket.pen new file mode 100644 index 0000000..74ccac1 --- /dev/null +++ b/design/pencil-polymarket.pen @@ -0,0 +1,215 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "simpleMarketCard", + "x": 0, + "y": 0, + "name": "Simple Market Card", + "theme": { + "Mode": "Light", + "Base": "Neutral", + "Accent": "Default" + }, + "enabled": false, + "clip": true, + "width": 350, + "height": 200, + "fill": "#ffffffff", + "layout": "none" + }, + { + "type": "frame", + "id": "marketCard", + "x": 20, + "y": 20, + "width": 310, + "height": 160, + "fill": "#ffffffff", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#e7e7e7ff" + }, + "layout": "none", + "children": [ + { + "type": "frame", + "id": "marketImage", + "x": 12, + "y": 12, + "width": 40, + "height": 40, + "fill": "#f0f0f0", + "cornerRadius": 4, + "layout": "none" + }, + { + "type": "text", + "id": "marketTitle", + "x": 60, + "y": 12, + "name": "Mamdan opens city-owned grocery store b...", + "fill": "#000000", + "textGrowth": "fixed-width-height", + "width": 169, + "height": 16, + "content": "Mamdan opens city-owned grocery store b...", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "chanceContainer", + "x": 258, + "y": 12, + "width": 42, + "height": 40, + "layout": "none", + "children": [ + { + "type": "frame", + "id": "progressBar", + "x": 0, + "y": 0, + "width": 40, + "height": 40, + "fill": "#ffffff", + "cornerRadius": 20, + "stroke": { + "align": "center", + "thickness": 4, + "fill": "#e0e0e0" + }, + "layout": "none", + "children": [ + { + "type": "frame", + "id": "progressFill", + "x": 2, + "y": 2, + "width": 36, + "height": 36, + "fill": "#ffffff", + "cornerRadius": 18, + "stroke": { + "align": "center", + "thickness": 4, + "fill": "#ff0000" + }, + "layout": "none" + }, + { + "type": "text", + "id": "chanceValue", + "x": 10, + "y": 12, + "fill": "#ff0000", + "content": "17%", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "chanceLabel", + "x": 0, + "y": 42, + "fill": "#808080", + "content": "chance", + "fontFamily": "Inter", + "fontSize": 10, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "optionYes", + "x": 12, + "y": 72, + "width": 149, + "height": 40, + "fill": "#e6f9e6", + "cornerRadius": 4, + "layout": "none", + "children": [ + { + "type": "text", + "id": "optionTextYes", + "x": 61, + "y": 10, + "fill": "#008000", + "content": "Yes", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "optionNo", + "x": 166, + "y": 72, + "width": 132, + "height": 40, + "fill": "#ffe6e6", + "cornerRadius": 4, + "layout": "none", + "children": [ + { + "type": "text", + "id": "optionTextNo", + "x": 55, + "y": 10, + "fill": "#ff0000", + "content": "No", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "marketInfo", + "x": 12, + "y": 124, + "fill": "#808080", + "content": "$155k Vol.", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "giftIcon", + "x": 240, + "y": 124, + "width": 16, + "height": 16, + "iconFontName": "gift", + "iconFontFamily": "mdi", + "fill": "#808080" + }, + { + "type": "icon_font", + "id": "bookmarkIcon", + "x": 270, + "y": 124, + "width": 16, + "height": 16, + "iconFontName": "bookmark", + "iconFontFamily": "mdi", + "fill": "#808080" + } + ] + } + ] +} \ No newline at end of file diff --git a/design/pencil-shadcn.pen b/design/pencil-shadcn.pen new file mode 100644 index 0000000..662eb57 --- /dev/null +++ b/design/pencil-shadcn.pen @@ -0,0 +1,5676 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "MzSDs", + "x": 0, + "y": 0, + "name": "shadcn: design system components", + "theme": { + "Mode": "Light", + "Base": "Neutral", + "Accent": "Default" + }, + "clip": true, + "width": 2800, + "height": 3586, + "fill": "$--background", + "layout": "none", + "children": [ + { + "type": "frame", + "id": "PV1ln", + "x": 900, + "y": 2144, + "name": "Sidebar", + "reusable": true, + "clip": true, + "width": 256, + "height": 656, + "fill": "$--sidebar", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + }, + "fill": "$--sidebar-border" + }, + "layout": "vertical", + "gap": 16, + "padding": 8, + "children": [ + { + "type": "frame", + "id": "6xhgh", + "name": "Sidebar Header", + "width": "fill_container", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 320, + "padding": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "1B158", + "name": "Brand", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "u7yK2", + "name": "Brand Logo", + "clip": true, + "width": 32, + "height": 32, + "fill": "$--sidebar-accent", + "cornerRadius": 10, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "nIojH", + "x": 8, + "y": 8, + "width": 16, + "height": 16, + "iconFontName": "hexagon", + "iconFontFamily": "lucide", + "fill": "$--sidebar-accent-foreground" + } + ] + }, + { + "type": "frame", + "id": "3WFtr", + "name": "Brand Name", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "xFmFv", + "name": "Name", + "fill": "$--sidebar-foreground", + "content": "Acme, Inc.", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "f9xLx", + "name": "Description", + "fill": "$--sidebar-foreground", + "content": "Enterprise", + "lineHeight": 1.6666666666666667, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "icon_font", + "id": "DEU9D", + "width": 16, + "height": 16, + "iconFontName": "chevrons-up-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "frame", + "id": "47U5w", + "name": "Sidebar Content", + "slot": [ + "24cM4", + "jBcUh", + "qCCo8" + ], + "width": "fill_container", + "height": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 2 + }, + { + "type": "frame", + "id": "q9yup", + "name": "Sidebar Footer", + "width": 240, + "fill": "$--sidebar", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 320, + "padding": 8, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "M0szX", + "name": "Brand", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "id": "sODDz", + "type": "ref", + "ref": "HWTb9", + "x": 0, + "y": 0 + }, + { + "type": "frame", + "id": "9KhLP", + "name": "Brand Name", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "justifyContent": "center", + "children": [ + { + "type": "text", + "id": "gJPjN", + "name": "Name", + "fill": "$--sidebar-foreground", + "content": "Jon Doe", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "9biS6", + "name": "Email", + "fill": "$--sidebar-foreground", + "content": "joe@acmecorp.com", + "lineHeight": 1.6666666666666667, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "icon_font", + "id": "POlk8", + "width": 16, + "height": 16, + "iconFontName": "chevrons-up-down", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "e8v1X", + "x": 422, + "y": 1732, + "name": "Button/Secondary", + "reusable": true, + "fill": "$--secondary", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "soROh", + "name": "plus", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "SlKX1", + "x": 2, + "y": 2, + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--secondary-foreground" + } + ] + }, + { + "type": "text", + "id": "Tr3Fv", + "name": "Button", + "fill": "$--secondary-foreground", + "content": "Button", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "gou6u", + "x": 200, + "y": 1732, + "name": "Button/Large/Secondary", + "reusable": true, + "fill": "$--secondary", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AOTZ7", + "name": "Leading Icon", + "width": 24, + "height": 24, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "kFgRh", + "x": 0, + "y": 0, + "width": 24, + "height": 24, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--secondary-foreground" + } + ] + }, + { + "type": "text", + "id": "g9Wxn", + "name": "Button", + "fill": "$--secondary-foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "YKnjc", + "x": 422, + "y": 1808, + "name": "Button/Destructive", + "reusable": true, + "fill": "$--destructive", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PqjlB", + "name": "plus", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "RDx8O", + "x": 2, + "y": 2, + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--white" + } + ] + }, + { + "type": "text", + "id": "NDadS", + "name": "Button", + "fill": "$--white", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "xPENL", + "x": 200, + "y": 1808, + "name": "Button/Large/Destructive", + "reusable": true, + "fill": "$--destructive", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "4wJMf", + "name": "Leading Icon", + "width": 24, + "height": 24, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "2PVXA", + "x": 0, + "y": 0, + "width": 24, + "height": 24, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--white" + } + ] + }, + { + "type": "text", + "id": "HazGS", + "name": "Button", + "fill": "$--white", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "C10zH", + "x": 422, + "y": 1884, + "name": "Button/Outline", + "reusable": true, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 1.75 + }, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "l8v2I", + "name": "plus", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "HDFDp", + "x": 2, + "y": 2, + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "poRwU", + "name": "Button", + "fill": "$--foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "ghKmL", + "x": 200, + "y": 1884, + "name": "Button/Large/Outline", + "reusable": true, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 1.75 + }, + "gap": 6, + "padding": [ + 8, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "vLff5", + "name": "Leading Icon", + "width": 24, + "height": 24, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "JvOHX", + "x": 0, + "y": 0, + "width": 24, + "height": 24, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "ydXf3", + "name": "Button", + "fill": "$--foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "3f2VW", + "x": 422, + "y": 1960, + "name": "Button/Ghost", + "reusable": true, + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AeXMI", + "name": "plus", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "HWNdN", + "x": 2, + "y": 2, + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "UZfKV", + "name": "Button", + "fill": "$--foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "l7zpS", + "x": 200, + "y": 1960, + "name": "Button/Large/Ghost", + "reusable": true, + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 6, + "padding": [ + 8, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "h6Jgb", + "name": "Leading Icon", + "width": 24, + "height": 24, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "JjWof", + "x": 0, + "y": 0, + "width": 24, + "height": 24, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "ujxmL", + "name": "Button", + "fill": "$--foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "VSnC2", + "x": 422, + "y": 1656, + "name": "Button/Default", + "reusable": true, + "fill": "$--primary", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "8jVfJ", + "name": "plus", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "WNalu", + "x": 2, + "y": 2, + "width": 16, + "height": 16, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--primary-foreground" + } + ] + }, + { + "type": "text", + "id": "8tnXG", + "name": "Button", + "fill": "$--primary-foreground", + "content": "Button", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "C3KOZ", + "x": 200, + "y": 1656, + "name": "Button/Large/Default", + "reusable": true, + "fill": "$--primary", + "cornerRadius": 6, + "gap": 6, + "padding": [ + 8, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "RO4Ll", + "name": "Leading Icon", + "width": 24, + "height": 24, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "UiOOr", + "x": 0, + "y": 0, + "width": 24, + "height": 24, + "iconFontName": "plus", + "iconFontFamily": "lucide", + "fill": "$--primary-foreground" + } + ] + }, + { + "type": "text", + "id": "NEMHS", + "name": "Button", + "fill": "$--primary-foreground", + "content": "Button", + "lineHeight": 1.4286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "DpPVg", + "x": 200, + "y": 1096, + "name": "Avatar/Text", + "reusable": true, + "width": 40, + "height": 40, + "fill": "$--muted", + "cornerRadius": 9999, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "wVlpW", + "name": "Avatar Title", + "fill": "$--foreground", + "content": "PJ", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "UjXug", + "x": 200, + "y": 1236, + "name": "Badge/Default", + "reusable": true, + "fill": "$--primary", + "cornerRadius": 16, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "transparent" + }, + "gap": 8, + "padding": [ + 2, + 8 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "zHpCv", + "name": "Badge", + "fill": "$--primary-foreground", + "content": "Badge", + "lineHeight": 1.3333333333333333, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "pfIN1", + "x": 200, + "y": 200, + "name": "Accordion/Open", + "reusable": true, + "width": 480, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "ekbu5", + "name": "Accordion Trigger", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 18, + "padding": [ + 16, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "CPImI", + "name": "Accordion Trigger", + "fill": "$--foreground", + "content": "What is a micro-interaction?", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "9eSLt", + "name": "chevron-up", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "path", + "id": "oLEMk", + "x": 3.999999761581421, + "y": 6, + "name": "Vector", + "rotation": 9.213866198408551e-15, + "geometry": "M12 6l-6-6-6 6", + "width": 8, + "height": 4, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--foreground" + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "h6oCR", + "name": "Accordion Content", + "clip": true, + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 16, + 0 + ], + "children": [ + { + "type": "text", + "id": "IaDRg", + "name": "Accordion Contnet", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Micro-interactions are events which have one main task — a single purpose — and they are found all over your device and within apps.", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "QyzNg", + "x": 200, + "y": 508, + "name": "Alert/Default", + "reusable": true, + "width": "fill_container(480)", + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "LuqyG", + "name": "Icon Container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 2, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "LGayV", + "name": "info-circle", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "path", + "id": "DeaWZ", + "x": 9.583333015441895, + "y": 13.333333015441895, + "name": "Vector", + "rotation": 180, + "flipX": true, + "geometry": "M0.5 0l0 5-0.5 0m0-5l1 0", + "width": 0.8333339691162109, + "height": 4.166666030883789, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--foreground" + } + }, + { + "type": "path", + "id": "X45fI", + "x": 10, + "y": 6.666666507720947, + "name": "Vector", + "geometry": "M0 1.41421l0-1.41421", + "width": 0, + "height": 0.41666698455810547, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--foreground" + } + }, + { + "type": "ellipse", + "id": "WjioW", + "x": 2.5, + "y": 2.5, + "name": "Vector", + "width": 15, + "height": 15, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--foreground" + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "Q1t8n", + "name": "Text Container", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "nbvca", + "name": "Alert Title", + "fill": "$--foreground", + "content": "Alert Title", + "lineHeight": 1.5, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + }, + { + "type": "text", + "id": "W4UBy", + "name": "Alert Description", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "This is the alert description to shows some information.", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "BjRan", + "x": 2100, + "y": 2952, + "name": "Textarea Group/Default", + "reusable": true, + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "uAcGD", + "name": "Label Text", + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "a78kl", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "pzw5I", + "name": "Textarea", + "width": "fill_container", + "height": 80, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "gap": 8, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "S4qWY", + "name": "Input Value", + "fill": "$--muted-foreground", + "content": "Placeholder", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "02npo", + "x": 2100, + "y": 2680, + "name": "Input OTP Group/Default", + "reusable": true, + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "Dnb63", + "name": "Label Text", + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "3RstF", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "nGQJv", + "name": "Input OTP Container", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": -1, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "0TODM", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "cornerRadius": [ + 6, + 0, + 0, + 6 + ], + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "vIMKE", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "gUH1w", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "qM9xF", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "m9owt", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "cornerRadius": [ + 0, + 6, + 6, + 0 + ], + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "dL6MK", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "lRQJN", + "name": "Input OTP Divider", + "clip": true, + "width": 40, + "height": 40, + "stroke": { + "align": "inside", + "thickness": { + "top": 1, + "bottom": 1, + "left": 1 + } + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "wgSK2", + "name": "•", + "fill": "$--foreground", + "content": "•", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "6lyN0", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "cornerRadius": [ + 6, + 0, + 0, + 6 + ], + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Hlbwf", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "CLUSe", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "MBOXD", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "6gzzE", + "name": "Input OTP", + "clip": true, + "width": "fill_container", + "height": 40, + "fill": "$--background", + "cornerRadius": [ + 0, + 6, + 6, + 0 + ], + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iEjWl", + "name": "0", + "enabled": false, + "fill": "$--foreground", + "content": "0", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "w5c1O", + "x": 2100.160669376255, + "y": 2132, + "name": "Select Group/Default", + "reusable": true, + "rotation": -0.13948009468075886, + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "c8G05", + "name": "Label Text", + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Yd2lV", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Ch62V", + "name": "Select Trigger", + "width": "fill_container", + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "gap": 10, + "padding": [ + 10, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "V1STL", + "name": "Select option", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Select Option", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "lsKbB", + "width": 16, + "height": 16, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + } + ] + }, + { + "type": "frame", + "id": "1415a", + "x": 2100, + "y": 1700, + "name": "Input Group/Default", + "reusable": true, + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "QRy7x", + "name": "Label Text", + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "BX0XX", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "i0Z3E", + "name": "Input", + "width": "fill_container", + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "gap": 8, + "padding": [ + 10, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SDRKn", + "name": "Input Value", + "fill": "$--muted-foreground", + "content": "Placeholder", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "lxrnE", + "x": 2100, + "y": 3304, + "name": "Tooltip", + "reusable": true, + "clip": true, + "fill": "$--popover", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": [ + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000f", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 3.5, + "spread": -1 + }, + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000001a", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 5.25, + "spread": -1 + } + ], + "gap": 8, + "padding": [ + 6, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "0QjQO", + "name": "Tooltip Text", + "fill": "$--foreground", + "content": "Tooltip", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "c8fiq", + "x": 2100, + "y": 1332, + "name": "Switch/Checked", + "reusable": true, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "AgS9m", + "name": "Switch", + "width": 44, + "height": 24, + "fill": "$--primary", + "cornerRadius": 9999, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "padding": 2, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "Fin40", + "name": "thumb", + "fill": "$--background", + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "effect": [ + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 5.25, + "spread": -2 + }, + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000001a", + "offset": { + "x": 0, + "y": 10 + }, + "blur": 13.125, + "spread": -3 + } + ] + } + ] + }, + { + "type": "text", + "id": "HsFun", + "name": "Switch Label", + "fill": "$--foreground", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "LbK20", + "x": 2100, + "y": 1152, + "name": "Radio/Selected", + "reusable": true, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "9ebgg", + "name": "Radio", + "width": 16, + "height": 16, + "fill": "$--primary-foreground", + "cornerRadius": 9999, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "A16Ri", + "name": "Circle", + "fill": "$--primary", + "width": 10, + "height": 10, + "stroke": { + "align": "inside", + "thickness": 1 + } + } + ] + }, + { + "type": "text", + "id": "GPiWl", + "name": "Label Text", + "fill": "$--foreground", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "hahxH", + "x": 199, + "y": 2728, + "name": "Progress", + "reusable": true, + "clip": true, + "width": "fill_container(360)", + "height": 16, + "fill": "$--secondary", + "cornerRadius": 9999, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "rectangle", + "id": "PTbNh", + "x": 0, + "y": 0, + "name": "Progress", + "fill": "$--primary", + "width": 180, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + } + } + ] + }, + { + "type": "frame", + "id": "ctKFD", + "x": 470, + "y": 1536, + "name": "Breadcrumb Item/Ellipsis", + "reusable": true, + "width": 20, + "height": 20, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "gkO2x", + "name": "icon/dots", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "path", + "id": "nIomk", + "x": 10.666666984558105, + "y": 7.833333492279053, + "name": "Vector", + "geometry": "M0 1.41421l0-1.41421", + "width": 0, + "height": 0.33333349227905273, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--muted-foreground" + } + }, + { + "type": "path", + "id": "O79Qg", + "x": 8, + "y": 7.833333492279053, + "name": "Vector", + "geometry": "M0 1.41421l0-1.41421", + "width": 0, + "height": 0.33333349227905273, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--muted-foreground" + } + }, + { + "type": "path", + "id": "KGOVF", + "x": 5.333333492279053, + "y": 7.833333492279053, + "name": "Vector", + "geometry": "M0 1.41421l0-1.41421", + "width": 0, + "height": 0.33333349227905273, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--muted-foreground" + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "FBqua", + "x": 200, + "y": 1536, + "name": "Breadcrumb Item/Current", + "reusable": true, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Xm9Ew", + "name": "Breadcrumb Item", + "fill": "$--foreground", + "content": "Breadcrumb Item", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "id": "spbsy", + "type": "ref", + "reusable": true, + "ref": "pfIN1", + "x": 200, + "y": 352, + "descendants": { + "9eSLt": { + "type": "frame", + "id": "hqut2", + "name": "chevron-down", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "path", + "id": "nLyMb", + "x": 4, + "y": 6, + "name": "Vector", + "geometry": "M0 0l6 6 6-6", + "width": 8, + "height": 4, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--foreground" + } + } + ] + }, + "h6oCR": { + "enabled": false + } + } + }, + { + "id": "K53jF", + "type": "ref", + "reusable": true, + "ref": "QyzNg", + "x": 200, + "y": 628, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--destructive" + }, + "width": "fill_container(480)", + "descendants": { + "DeaWZ": { + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--destructive" + } + }, + "X45fI": { + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--destructive" + } + }, + "WjioW": { + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--destructive" + } + }, + "nbvca": { + "fill": "$--destructive" + }, + "W4UBy": { + "fill": "$--destructive" + } + } + }, + { + "id": "HWTb9", + "type": "ref", + "reusable": true, + "ref": "DpPVg", + "x": 280, + "y": 1096, + "fill": { + "type": "image", + "enabled": true, + "url": "", + "mode": "fill" + }, + "name": "Avatar/Image", + "descendants": { + "wVlpW": { + "enabled": false + } + } + }, + { + "id": "WuUMk", + "type": "ref", + "reusable": true, + "ref": "UjXug", + "x": 200, + "y": 1296, + "fill": "$--secondary", + "name": "Badge/Secondary", + "descendants": { + "zHpCv": { + "fill": "$--secondary-foreground" + } + } + }, + { + "id": "YvyLD", + "type": "ref", + "reusable": true, + "ref": "UjXug", + "x": 200, + "y": 1356, + "fill": "$--destructive", + "name": "Badge/Destructive", + "descendants": { + "zHpCv": { + "fill": "$--white" + } + } + }, + { + "id": "3IiAS", + "type": "ref", + "reusable": true, + "ref": "UjXug", + "x": 200, + "y": 1416, + "fill": [], + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "name": "Badge/Outline", + "descendants": { + "zHpCv": { + "fill": "$--foreground" + } + } + }, + { + "id": "KUk4t", + "type": "ref", + "reusable": true, + "ref": "FBqua", + "x": 335, + "y": 1536, + "fill": [], + "name": "Breadcrumb Item/Default", + "descendants": { + "Xm9Ew": { + "fill": "$--muted-foreground" + } + } + }, + { + "id": "3s95S", + "type": "ref", + "reusable": true, + "ref": "ctKFD", + "x": 510, + "y": 1536, + "name": "Breadcrumb Item/Separator", + "children": [ + { + "type": "frame", + "id": "6YgZ8", + "name": "icon/chevron-right", + "width": 14, + "height": 14, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "path", + "id": "9zLXv", + "x": 5.249999523162842, + "y": 3.499999761581421, + "name": "Vector", + "geometry": "M0 12l6-6-6-6", + "width": 3.500000476837158, + "height": 7, + "stroke": { + "align": "center", + "thickness": 1.5, + "join": "round", + "cap": "round", + "fill": "$--muted-foreground" + } + } + ] + } + ] + }, + { + "id": "ZIV1t", + "type": "ref", + "reusable": true, + "ref": "C3KOZ", + "x": 342, + "y": 1656, + "padding": 8, + "name": "Icon Button/Large/Default", + "descendants": { + "NEMHS": { + "enabled": false + } + } + }, + { + "id": "AWqtD", + "type": "ref", + "reusable": true, + "ref": "gou6u", + "x": 342, + "y": 1732, + "padding": 8, + "name": "Icon Button/Large/Secondary", + "descendants": { + "g9Wxn": { + "enabled": false + } + } + }, + { + "id": "ilXCy", + "type": "ref", + "reusable": true, + "ref": "xPENL", + "x": 342, + "y": 1808, + "padding": 8, + "name": "Icon Button/Large/Destructive", + "descendants": { + "HazGS": { + "enabled": false + } + } + }, + { + "id": "EXRaV", + "type": "ref", + "reusable": true, + "ref": "ghKmL", + "x": 342, + "y": 1884, + "padding": 8, + "name": "Icon Button/Large/Outline", + "descendants": { + "ydXf3": { + "enabled": false + } + } + }, + { + "id": "WReIy", + "type": "ref", + "reusable": true, + "ref": "l7zpS", + "x": 342, + "y": 1960, + "padding": 8, + "name": "Icon Button/Large/Ghost", + "descendants": { + "ujxmL": { + "enabled": false + } + } + }, + { + "id": "urnwK", + "type": "ref", + "reusable": true, + "ref": "VSnC2", + "x": 544, + "y": 1656, + "padding": 8, + "name": "Icon Button/Default", + "descendants": { + "8tnXG": { + "enabled": false + } + } + }, + { + "id": "PbuYK", + "type": "ref", + "reusable": true, + "ref": "e8v1X", + "x": 544, + "y": 1732, + "padding": 8, + "name": "Icon Button/Secondary", + "descendants": { + "Tr3Fv": { + "enabled": false + } + } + }, + { + "id": "EsgLk", + "type": "ref", + "reusable": true, + "ref": "YKnjc", + "x": 544, + "y": 1808, + "padding": 8, + "name": "Icon Button/Destructive", + "descendants": { + "NDadS": { + "enabled": false + } + } + }, + { + "id": "hXOUF", + "type": "ref", + "reusable": true, + "ref": "C10zH", + "x": 544, + "y": 1884, + "padding": 8, + "name": "Icon Button/Outline", + "descendants": { + "poRwU": { + "enabled": false + } + } + }, + { + "id": "Sx6Z0", + "type": "ref", + "reusable": true, + "ref": "3f2VW", + "x": 544, + "y": 1960, + "padding": 8, + "descendants": { + "UZfKV": { + "enabled": false + } + } + }, + { + "type": "frame", + "id": "pcGlv", + "x": 200, + "y": 2100, + "name": "Card", + "reusable": true, + "width": 360, + "fill": "$--card", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 1.75 + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "CgJv7", + "name": "Card Header", + "slot": [], + "width": "fill_container", + "height": 68, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 8, + "padding": 24, + "justifyContent": "center" + }, + { + "type": "frame", + "id": "frWPV", + "name": "Card Content", + "slot": [], + "width": "fill_container", + "height": 68, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 8, + "padding": 24, + "justifyContent": "center" + }, + { + "type": "frame", + "id": "bvhSM", + "name": "Card Actions", + "slot": [], + "width": "fill_container", + "height": 68, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": 24, + "alignItems": "center" + } + ] + }, + { + "type": "frame", + "id": "coMmv", + "x": 199, + "y": 2404, + "name": "Tab Item/Active", + "reusable": true, + "fill": "$--background", + "cornerRadius": 2, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 1.75 + }, + "gap": 8, + "padding": [ + 6, + 12 + ], + "children": [ + { + "type": "text", + "id": "qYQHc", + "name": "Label Selected", + "fill": "$--foreground", + "content": "Tab Item", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "id": "QY0Ka", + "type": "ref", + "reusable": true, + "ref": "coMmv", + "x": 199, + "y": 2456, + "name": "Tab Item/Inactive", + "fill": [], + "effect": [], + "descendants": { + "qYQHc": { + "fill": "$--muted-foreground" + } + } + }, + { + "type": "frame", + "id": "PbofX", + "x": 199, + "y": 2508, + "name": "Tabs", + "reusable": true, + "slot": [ + "coMmv", + "QY0Ka" + ], + "clip": true, + "width": 80, + "height": 40, + "fill": "$--secondary", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": 4, + "alignItems": "center" + }, + { + "id": "omDwd", + "type": "ref", + "ref": "PbofX", + "x": 199, + "y": 2588, + "width": "fit_content", + "children": [ + { + "id": "WdXPr", + "type": "ref", + "ref": "coMmv", + "x": 4, + "y": 4, + "descendants": { + "qYQHc": { + "content": "Integrations" + } + } + }, + { + "id": "n1AXl", + "type": "ref", + "ref": "QY0Ka", + "x": 116, + "y": 4, + "descendants": { + "qYQHc": { + "content": "Billing" + } + } + }, + { + "id": "lGHqQ", + "type": "ref", + "ref": "QY0Ka", + "x": 189, + "y": 4, + "descendants": { + "qYQHc": { + "content": "Profile" + } + } + }, + { + "id": "3YaMP", + "type": "ref", + "ref": "QY0Ka", + "x": 265, + "y": 4, + "descendants": { + "qYQHc": { + "content": "Advanced" + } + } + } + ] + }, + { + "id": "OtykB", + "type": "ref", + "reusable": true, + "ref": "pcGlv", + "x": 200, + "y": 808, + "width": 480, + "height": "fit_content", + "flipX": false, + "flipY": false, + "name": "Dialog", + "descendants": { + "CgJv7": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "CuAfb", + "name": "Dialog Title", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Add a title here", + "lineHeight": 1.5555555555555556, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "jBiwY", + "name": "Dialog Description", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "And add a detailed description here.", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + "frWPV": { + "enabled": false + }, + "bvhSM": { + "width": "fill_container", + "height": "fit_content", + "children": [ + { + "id": "NtF0f", + "type": "ref", + "ref": "VSnC2", + "x": 24, + "y": 24, + "descendants": { + "8jVfJ": { + "enabled": false + }, + "8tnXG": { + "content": "Continue" + } + } + }, + { + "id": "RCXBi", + "type": "ref", + "ref": "C10zH", + "x": 125, + "y": 24, + "descendants": { + "l8v2I": { + "enabled": false + }, + "poRwU": { + "content": "Cancel" + } + } + } + ] + } + } + }, + { + "type": "frame", + "id": "cTN8T", + "x": 900, + "y": 200, + "name": "Dropdown", + "reusable": true, + "slot": [ + "D24KC", + "j3KBf", + "2JGXl", + "qamCY", + "O0rdg", + "I9z29" + ], + "width": 240, + "height": 80, + "fill": "$--popover", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": [ + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000f", + "offset": { + "x": 0, + "y": 2 + }, + "blur": 3.5, + "spread": -1 + }, + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000001a", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 5.25, + "spread": -1 + } + ], + "layout": "vertical", + "padding": 4, + "alignItems": "center" + }, + { + "type": "frame", + "id": "D24KC", + "x": 900, + "y": 348, + "name": "List Divider", + "reusable": true, + "width": 240, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 4, + 0 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "line", + "id": "O4ze0", + "name": "Line", + "width": "fill_container", + "height": 0, + "stroke": { + "align": "center", + "thickness": 1, + "fill": "$--border" + } + } + ] + }, + { + "type": "frame", + "id": "j3KBf", + "x": 900, + "y": 386, + "name": "List Title", + "reusable": true, + "width": 240, + "cornerRadius": 2, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 8, + 6, + 8, + 32 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "tSAtI", + "name": "Label", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "List Title", + "lineHeight": 1.3333333333333333, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "2JGXl", + "x": 900, + "y": 458, + "name": "List Item/Checked", + "reusable": true, + "width": 240, + "cornerRadius": 2, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 6, + 8 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "kxJ89", + "name": "Item Content Left", + "clip": true, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Jj249", + "name": "Leading Icon", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "RTXW4", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "R8Ps1", + "name": "Label", + "fill": "$--foreground", + "content": "List Item", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "22sgp", + "name": "Item Content Right", + "gap": 8, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "A1EhN", + "name": "⇧⌘A", + "opacity": 0.6000000238418579, + "fill": "$--foreground", + "content": "⇧⌘A", + "lineHeight": 1.3333333333333333, + "textAlign": "right", + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "MW4DH", + "name": "Trailing Icon", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 0.6666666865348816 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "xon77", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + } + ] + } + ] + }, + { + "id": "qamCY", + "type": "ref", + "reusable": true, + "ref": "2JGXl", + "x": 900, + "y": 530, + "name": "List Item/Unchecked", + "descendants": { + "RTXW4": { + "enabled": false + } + } + }, + { + "type": "frame", + "id": "I9z29", + "x": 900, + "y": 602, + "name": "List Search Box/Filled", + "reusable": true, + "width": 240, + "cornerRadius": 2, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 6, + 8 + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "emAje", + "name": "Search Icon", + "clip": true, + "width": 16, + "height": 16, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "Ek0LE", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$--muted-foreground" + } + ] + }, + { + "type": "text", + "id": "tAA5L", + "name": "Label", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Search...", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "9e0Mf", + "name": "Clear Icon", + "clip": true, + "width": 16, + "height": 16, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "GOFWO", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "x", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + } + ] + }, + { + "id": "O0rdg", + "type": "ref", + "reusable": true, + "ref": "I9z29", + "x": 900, + "y": 674, + "name": "List Search Box/Default", + "descendants": { + "tAA5L": { + "fill": "$--muted-foreground" + }, + "9e0Mf": { + "enabled": false + } + } + }, + { + "id": "D9Y8K", + "type": "ref", + "reusable": true, + "ref": "LbK20", + "x": 2100, + "y": 1212, + "name": "Radio/Unselected", + "descendants": { + "A16Ri": { + "enabled": false + } + } + }, + { + "id": "fcMl6", + "type": "ref", + "reusable": true, + "ref": "c8fiq", + "x": 2100, + "y": 1396, + "name": "Switch/Unchecked", + "descendants": { + "AgS9m": { + "justifyContent": "start", + "alignItems": "center", + "fill": "$--input" + } + } + }, + { + "type": "frame", + "id": "ovuDP", + "x": 2100, + "y": 1520, + "name": "Checkbox/Checked", + "reusable": true, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "kfU2y", + "name": "Checkbox", + "width": 16, + "height": 16, + "fill": "$--primary", + "cornerRadius": 4, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--primary" + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "5n2yq", + "width": 12, + "height": 12, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$--primary-foreground" + } + ] + }, + { + "type": "frame", + "id": "dszbm", + "name": "Label Text", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "15v9d", + "name": "Label Text", + "fill": "$--foreground", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlign": "center", + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "id": "J7Uph", + "type": "ref", + "reusable": true, + "ref": "ovuDP", + "x": 2100, + "y": 1580, + "descendants": { + "kfU2y": { + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "fill": "$--primary-foreground" + }, + "5n2yq": { + "enabled": false + } + } + }, + { + "id": "uHFal", + "type": "ref", + "reusable": true, + "ref": "1415a", + "x": 2100, + "y": 1806, + "name": "Input Group/Filled", + "descendants": { + "QRy7x": { + "enabled": true + }, + "SDRKn": { + "fill": "$--foreground", + "content": "Input Value" + } + } + }, + { + "id": "fEUdI", + "type": "ref", + "reusable": true, + "ref": "1415a", + "x": 2100, + "y": 1912, + "name": "Input/Default", + "descendants": { + "QRy7x": { + "enabled": false + } + } + }, + { + "id": "AfQIN", + "type": "ref", + "reusable": true, + "ref": "1415a", + "x": 2100, + "y": 1992, + "name": "Input/Filled", + "descendants": { + "QRy7x": { + "enabled": false + }, + "SDRKn": { + "fill": "$--foreground", + "content": "Input Value" + } + } + }, + { + "id": "A4VOm", + "type": "ref", + "reusable": true, + "ref": "w5c1O", + "x": 2100.160669376255, + "y": 2239, + "name": "Select Group/Filled", + "descendants": { + "V1STL": { + "fill": "$--foreground", + "content": "Selected Option" + } + } + }, + { + "type": "frame", + "id": "cCfrk", + "x": 2100.160669376255, + "y": 2406, + "name": "Combobox/Default", + "reusable": true, + "rotation": -0.13948009468075886, + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "dkouC", + "name": "Label Text", + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mNzWI", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SS77i", + "name": "Select Trigger", + "width": "fill_container", + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "gap": 10, + "padding": [ + 10, + 12 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "bj34E", + "name": "Select option", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Select Option", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "zNxvQ", + "width": 16, + "height": 16, + "iconFontName": "chevrons-up-down", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + } + ] + }, + { + "id": "LgAeW", + "type": "ref", + "reusable": true, + "ref": "cCfrk", + "x": 2100.160669376255, + "y": 2513, + "name": "Combobox/Default", + "descendants": { + "bj34E": { + "content": "Selected Option", + "fill": "$--foreground" + } + } + }, + { + "id": "rxp3e", + "type": "ref", + "reusable": true, + "ref": "02npo", + "x": 2100, + "y": 2786, + "name": "Input OTP Group/Filled", + "descendants": { + "vIMKE": { + "enabled": true + }, + "qM9xF": { + "enabled": true + }, + "dL6MK": { + "enabled": true + }, + "Hlbwf": { + "enabled": true + }, + "MBOXD": { + "enabled": true + }, + "iEjWl": { + "enabled": true + } + } + }, + { + "id": "CrS3L", + "type": "ref", + "reusable": true, + "ref": "BjRan", + "x": 2100, + "y": 3098, + "name": "Textarea Group/Filled", + "descendants": { + "S4qWY": { + "content": "Input Value", + "fill": "$--foreground" + } + } + }, + { + "id": "oVUJY", + "type": "ref", + "reusable": true, + "ref": "pcGlv", + "x": 2100, + "y": 200, + "fill": "$--background", + "clip": false, + "effect": [ + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000001a", + "offset": { + "x": 0, + "y": 20 + }, + "blur": 20 + }, + { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000a", + "offset": { + "x": 0, + "y": 10 + }, + "blur": 10 + } + ], + "width": 360, + "height": "fit_content", + "flipX": false, + "flipY": false, + "textGrowth": "auto", + "name": "Modal/Left", + "descendants": { + "CgJv7": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "EOpIo", + "name": "Modal Title", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Modal Title", + "lineHeight": 1.4, + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "600" + }, + { + "type": "text", + "id": "bVY1H", + "name": "Modal Subtitle", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Modal Subtitle", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + "bvhSM": { + "height": "fit_content", + "children": [ + { + "id": "L6Ngo", + "type": "ref", + "ref": "C3KOZ", + "x": 24, + "y": 24.019943701668048, + "width": "fill_container", + "descendants": { + "NEMHS": { + "content": "Action" + } + } + }, + { + "id": "T9BdN", + "type": "ref", + "ref": "ghKmL", + "x": 184, + "y": 24.039888780686216, + "rotation": 0.015035913220233593, + "width": "fill_container", + "descendants": { + "ydXf3": { + "content": "Action" + } + } + } + ] + } + } + }, + { + "id": "X6bmd", + "type": "ref", + "reusable": true, + "ref": "oVUJY", + "x": 2100, + "y": 500, + "name": "Modal/Center", + "descendants": { + "EOpIo": { + "textAlign": "center" + }, + "bVY1H": { + "textAlign": "center" + } + } + }, + { + "id": "TfbzN", + "type": "ref", + "reusable": true, + "ref": "oVUJY", + "x": 2100, + "y": 800, + "name": "Modal/Icon", + "descendants": { + "EOpIo": { + "type": "frame", + "id": "vbPtf", + "name": "Icon Wrapper", + "width": 48, + "height": 48, + "fill": "$--secondary", + "cornerRadius": 999, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "C6XmO", + "width": 24, + "height": 24, + "iconFontName": "triangle-alert", + "iconFontFamily": "lucide", + "fill": "$--primary" + } + ] + }, + "bVY1H": { + "enabled": false + } + } + }, + { + "type": "frame", + "id": "tjjQe", + "x": 1697, + "y": 2171, + "name": "Pagination Item/Active", + "reusable": true, + "width": 40, + "height": 40, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#0000000d", + "offset": { + "x": 0, + "y": 1 + }, + "blur": 1.75 + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "JP14e", + "name": "1", + "fill": "$--foreground", + "content": "1", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "id": "vbQN4", + "type": "ref", + "reusable": true, + "ref": "tjjQe", + "x": 1777, + "y": 2171, + "name": "Pagination Item/Default", + "fill": [], + "stroke": { + "align": "inside", + "thickness": 1 + }, + "effect": [] + }, + { + "id": "MqebB", + "type": "ref", + "reusable": true, + "ref": "tjjQe", + "x": 1857, + "y": 2171, + "fill": [], + "stroke": { + "align": "inside", + "thickness": 1 + }, + "effect": [], + "name": "Pagination Item/Ellipsis", + "children": [ + { + "type": "icon_font", + "id": "ESsKY", + "width": 16, + "height": 16, + "iconFontName": "ellipsis", + "iconFontFamily": "lucide", + "fill": "$--foreground" + } + ] + }, + { + "type": "frame", + "id": "U5noB", + "x": 1697, + "y": 2251, + "name": "Pagination", + "reusable": true, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "id": "dL111", + "type": "ref", + "ref": "l7zpS", + "x": 0, + "y": 2, + "descendants": { + "h6Jgb": { + "enabled": false + }, + "ujxmL": { + "content": "Previous" + } + } + }, + { + "type": "frame", + "id": "VBg6X", + "name": "Page Numbers Slot", + "slot": [ + "tjjQe", + "vbQN4", + "MqebB" + ], + "clip": true, + "width": 40, + "height": 40, + "gap": 4 + }, + { + "id": "mQBD7", + "type": "ref", + "ref": "l7zpS", + "x": 147, + "y": 2, + "padding": [ + 8, + 24 + ], + "descendants": { + "h6Jgb": { + "enabled": false + }, + "ujxmL": { + "content": "Next" + } + } + } + ] + }, + { + "id": "PiMGI", + "type": "ref", + "reusable": true, + "ref": "pcGlv", + "x": 900, + "y": 2957, + "width": 320, + "name": "Card Action", + "height": "fit_content", + "flipX": false, + "flipY": false, + "textGrowth": "auto", + "descendants": { + "CgJv7": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "vSU0z", + "name": "title", + "fill": "$--card-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Solar Efficiency Pack", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + "frWPV": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "02zLC", + "name": "text", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Boosts rover endurance by optimizing solar panel alignment.", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + } + ] + }, + "bvhSM": { + "height": "fit_content", + "children": [ + { + "id": "C8MFo", + "type": "ref", + "ref": "C10zH", + "x": 24, + "y": 24, + "descendants": { + "poRwU": { + "content": "Request" + } + } + } + ] + } + } + }, + { + "id": "fpgbn", + "type": "ref", + "reusable": true, + "ref": "pcGlv", + "x": 1252, + "y": 2959, + "width": 320, + "name": "Card Plain", + "descendants": { + "CgJv7": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "XRwAR", + "name": "title", + "fill": "$--card-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Active Rovers", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + "frWPV": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "ip4M9", + "name": "number", + "fill": "$--card-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "1,280", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 24, + "fontWeight": "500" + }, + { + "id": "58bG0", + "type": "ref", + "ref": "UjXug", + "x": 24, + "y": 68, + "descendants": { + "zHpCv": { + "content": "-12%" + } + } + } + ] + }, + "bvhSM": { + "enabled": false, + "children": [] + } + } + }, + { + "id": "JENPq", + "type": "ref", + "reusable": true, + "ref": "pcGlv", + "x": 1604, + "y": 2959, + "flipX": false, + "flipY": false, + "width": 320, + "height": "fit_content", + "textGrowth": "auto", + "name": "Card Image", + "descendants": { + "CgJv7": { + "height": "fit_content", + "children": [ + { + "type": "frame", + "id": "Jbgz8", + "name": "image-placeholder", + "width": "fill_container", + "height": 160, + "fill": "$--accent", + "cornerRadius": 4, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + } + }, + "layout": "none" + } + ] + }, + "frWPV": { + "height": "fit_content", + "children": [ + { + "type": "text", + "id": "FFlaK", + "name": "title", + "fill": "$--card-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Aurora Scout", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 20, + "fontWeight": "500" + }, + { + "type": "text", + "id": "4MqKz", + "name": "title", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "SKU: LS-2029", + "lineHeight": 1.5, + "fontFamily": "Inter", + "fontSize": 16, + "fontWeight": "normal" + } + ] + }, + "bvhSM": { + "justifyContent": "space_between", + "children": [ + { + "id": "Jt3oM", + "type": "ref", + "ref": "UjXug", + "x": 24, + "y": 24, + "descendants": { + "zHpCv": { + "content": "$45.00" + } + } + }, + { + "id": "FNWmv", + "type": "ref", + "ref": "C10zH", + "x": 131, + "y": 16, + "descendants": { + "poRwU": { + "content": "Add to favorites" + } + } + } + ] + } + } + }, + { + "type": "frame", + "id": "24cM4", + "x": 1222, + "y": 2159, + "name": "Sidebar Section Title", + "reusable": true, + "width": 240, + "cornerRadius": 2, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pWGDv", + "name": "Label", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Title", + "lineHeight": 1.3333333333333333, + "fontFamily": "Inter", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "qCCo8", + "x": 1222, + "y": 2231, + "name": "Sidebar Item/Active", + "reusable": true, + "width": 240, + "fill": "$--sidebar-accent", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "padding": [ + 6, + 8 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SxIMP", + "name": "Item Content Left", + "clip": true, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nmQwi", + "name": "Leading Icon", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "r6B2W", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "circle", + "iconFontFamily": "lucide", + "fill": "$--sidebar-foreground" + } + ] + }, + { + "type": "text", + "id": "0Ru22", + "name": "Label", + "fill": "$--sidebar-foreground", + "content": "Item", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ttBco", + "name": "Item Content Right", + "gap": 8, + "justifyContent": "end", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "eSZOD", + "name": "Trailing Icon", + "width": 16, + "height": 16, + "stroke": { + "align": "inside", + "thickness": 0.6666666865348816 + }, + "layout": "none", + "children": [ + { + "type": "icon_font", + "id": "VHWXO", + "x": 0, + "y": 0, + "width": 16, + "height": 16, + "iconFontName": "chevron-right", + "iconFontFamily": "lucide", + "fill": "$--sidebar-foreground" + } + ] + } + ] + } + ] + }, + { + "id": "jBcUh", + "type": "ref", + "reusable": true, + "ref": "qCCo8", + "x": 1222, + "y": 2303, + "name": "Sidebar Item/Default", + "fill": [], + "rotation": 0 + }, + { + "type": "frame", + "id": "KOEkG", + "x": 900, + "y": 1486, + "name": "Data Table Header", + "reusable": true, + "width": "fill_container(1024)", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 16, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "id": "Nzncf", + "type": "ref", + "ref": "fEUdI", + "x": 0, + "y": 0, + "descendants": { + "SDRKn": { + "content": "Search" + } + } + }, + { + "id": "slEdc", + "type": "ref", + "ref": "ghKmL", + "x": 902, + "y": 0 + } + ] + }, + { + "type": "frame", + "id": "RXiR9", + "x": 900, + "y": 2000, + "name": "Data Table Footer", + "reusable": true, + "width": "fill_container(1024)", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 16, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "9PRbJ", + "name": "0 of 5 row(s) selected.", + "fill": "$--muted-foreground", + "content": "Showing 10 records", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "id": "SMRMo", + "type": "ref", + "ref": "U5noB", + "x": 797, + "y": 0 + } + ] + }, + { + "type": "frame", + "id": "LoAux", + "x": 900, + "y": 1160, + "name": "Table Row", + "reusable": true, + "slot": [ + "FulCp", + "w3NML" + ], + "width": "fill_container(1024)", + "height": "fit_content(44)", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$--border" + }, + "alignItems": "center" + }, + { + "type": "frame", + "id": "FulCp", + "x": 900, + "y": 1224, + "name": "Table Cell", + "reusable": true, + "slot": [], + "width": "fill_container(293)", + "height": "fit_content(44)", + "stroke": { + "align": "inside", + "thickness": { + "right": 1 + } + }, + "gap": 8, + "padding": 12, + "alignItems": "center" + }, + { + "type": "frame", + "id": "w3NML", + "x": 900, + "y": 1356, + "name": "Table Column Header", + "reusable": true, + "width": 293, + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + } + }, + "gap": 8, + "padding": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RFS3h", + "name": "Label", + "fill": "$--muted-foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Name", + "lineHeight": 1.4285714285714286, + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "bG7YL", + "x": 900, + "y": 836, + "name": "Table", + "reusable": true, + "slot": [ + "LoAux" + ], + "width": "fill_container(1024)", + "height": 300, + "fill": "$--background", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--border" + }, + "layout": "vertical", + "alignItems": "center" + }, + { + "type": "frame", + "id": "shadcnDataTable", + "x": 900, + "y": 1559, + "name": "Data Table", + "reusable": true, + "clip": true, + "width": "fill_container(1024)", + "layout": "vertical", + "gap": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "sdtHeader1", + "name": "Data Table Header", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 16, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "sdtInput1", + "name": "Input/Default", + "width": 274, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "id": "sdtLabel1", + "name": "Label Text", + "enabled": false, + "width": "fill_container", + "fill": { + "type": "color", + "color": "$--white", + "enabled": false + }, + "stroke": { + "align": "inside", + "thickness": 1 + }, + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sdtLabelTxt1", + "name": "Label Text", + "fill": "$--foreground", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "Label Text", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "sdtInputField1", + "name": "Input", + "width": "fill_container", + "height": 40, + "fill": "$--background", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$--input" + }, + "gap": 8, + "padding": [ + 8, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "sdtInputVal1", + "name": "Input Value", + "fill": "$--muted-foreground", + "content": "Search…", + "lineHeight": 1.4285714285714286, + "textAlignVertical": "middle", + "fontFamily": "Inter", + "fontSize": 14, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "id": "sdtBtn1", + "type": "ref", + "ref": "ghKmL", + "x": 902, + "y": 0 + } + ] + }, + { + "type": "frame", + "id": "sdtContent1", + "name": "Data Table Content", + "slot": [ + "LoAux" + ], + "clip": true, + "width": "fill_container", + "height": "fit_content(260)", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center" + }, + { + "id": "sdtFooterRef1", + "type": "ref", + "ref": "RXiR9", + "x": 0, + "y": 332 + } + ] + } + ] + }, + { + "type": "prompt", + "id": "j4hLC", + "x": 3053, + "y": -384, + "model": "cursor-composer", + "width": 400, + "height": 219, + "content": "Design a dashboard with a sidebar on the left into \"dashboard-utility\" frame for a utility company showing current usage and a history in a table." + }, + { + "type": "frame", + "id": "nSNTs", + "x": 3053, + "y": -10, + "name": "dashboard-utility", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 1440, + "height": "fit_content(900)", + "fill": "$--background" + }, + { + "type": "prompt", + "id": "b6D19", + "x": 3053, + "y": 1037, + "model": "cursor-composer", + "width": 400, + "height": 219, + "content": "Design a dashboard into \"dashboard-revenue\" frame for a revenue tracking app with a sidebar, showing revenue stats, history in the content." + }, + { + "type": "frame", + "id": "TZ4am", + "x": 3053, + "y": 1422, + "name": "dashboard-revenue", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 1440, + "height": "fit_content(717)", + "fill": "$--background" + }, + { + "type": "prompt", + "id": "QGYHK", + "x": 3053, + "y": 2320.9999999999995, + "model": "cursor-composer", + "width": 400, + "height": 219, + "content": "Design a dashboard into \"dashboard-football\" frame with a table ranking UEFA teams. Show goal counts, captain name, etc. Put stats on the top." + }, + { + "type": "frame", + "id": "6LMCW", + "x": 3053, + "y": 2652.9999999999995, + "name": "dashboard-football", + "theme": { + "Mode": "Light" + }, + "clip": true, + "width": 1440, + "height": 933, + "fill": "$--background", + "layout": "vertical", + "gap": 24, + "padding": 32 + } + ], + "themes": { + "Mode": [ + "Light", + "Dark" + ], + "Base": [ + "Neutral", + "Gray", + "Stone", + "Zinc", + "Slate" + ], + "Accent": [ + "Default", + "Red", + "Rose", + "Orange", + "Green", + "Blue", + "Yellow", + "Violet" + ] + }, + "variables": { + "--sidebar": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-foreground": { + "type": "color", + "value": [ + { + "value": "#09090b" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#1447e6", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-primary-foreground": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-border": { + "type": "color", + "value": [ + { + "value": "#e4e4e7" + }, + { + "value": "#ffffff1a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent": { + "type": "color", + "value": [ + { + "value": "#f4f4f4" + }, + { + "value": "#2a2a30", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-accent-foreground": { + "type": "color", + "value": [ + { + "value": "#18181b" + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--sidebar-ring": { + "type": "color", + "value": [ + { + "value": "#71717a" + }, + { + "value": "#71717a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--background": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#0a0a0a", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#030712", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#020617", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#0c0a09", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#09090b", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--foreground": { + "type": "color", + "value": [ + { + "value": "#0a0a0a" + }, + { + "value": "#030712", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#020617", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#0c0a09", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#09090b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--card": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#171717", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#111827", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--card-foreground": { + "type": "color", + "value": [ + { + "value": "#0a0a0a" + }, + { + "value": "#030712", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#020617", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#0c0a09", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#09090b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--popover": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#171717", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#111827", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--popover-foreground": { + "type": "color", + "value": [ + { + "value": "#0a0a0a" + }, + { + "value": "#030712", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#020617", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#0c0a09", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#09090b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--primary": { + "type": "color", + "value": [ + { + "value": "#171717" + }, + { + "value": "#111827", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#e5e5e5", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#e5e7eb", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#e2e8f0", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#e5e5e5", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#e4e4e7", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + }, + { + "value": "#dc2626", + "theme": { + "Accent": "Red" + } + }, + { + "value": "#e11d48", + "theme": { + "Accent": "Rose" + } + }, + { + "value": "#ea580c", + "theme": { + "Accent": "Orange" + } + }, + { + "value": "#65a30d", + "theme": { + "Accent": "Green" + } + }, + { + "value": "#1d4ed8", + "theme": { + "Accent": "Blue" + } + }, + { + "value": "#facc15", + "theme": { + "Accent": "Yellow" + } + }, + { + "value": "#7c3aed", + "theme": { + "Accent": "Violet" + } + }, + { + "value": "#ef4444", + "theme": { + "Mode": "Dark", + "Accent": "Red" + } + }, + { + "value": "#f43f5e", + "theme": { + "Mode": "Dark", + "Accent": "Rose" + } + }, + { + "value": "#f97316", + "theme": { + "Mode": "Dark", + "Accent": "Orange" + } + }, + { + "value": "#65a30d", + "theme": { + "Mode": "Dark", + "Accent": "Green" + } + }, + { + "value": "#1d4ed8", + "theme": { + "Mode": "Dark", + "Accent": "Blue" + } + }, + { + "value": "#eab308", + "theme": { + "Mode": "Dark", + "Accent": "Yellow" + } + }, + { + "value": "#8b5cf6", + "theme": { + "Mode": "Dark", + "Accent": "Violet" + } + } + ] + }, + "--primary-foreground": { + "type": "color", + "value": [ + { + "value": "#fafafa" + }, + { + "value": "#171717", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#111827", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + }, + { + "value": "#fef2f2", + "theme": { + "Accent": "Red" + } + }, + { + "value": "#fff1f2", + "theme": { + "Accent": "Rose" + } + }, + { + "value": "#fff7ed", + "theme": { + "Accent": "Orange" + } + }, + { + "value": "#f7fee7", + "theme": { + "Accent": "Green" + } + }, + { + "value": "#eff6ff", + "theme": { + "Accent": "Blue" + } + }, + { + "value": "#713f12", + "theme": { + "Accent": "Yellow" + } + }, + { + "value": "#f5f3ff", + "theme": { + "Accent": "Violet" + } + } + ] + }, + "--secondary": { + "type": "color", + "value": [ + { + "value": "#f5f5f5" + }, + { + "value": "#262626", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#1f2937", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#1e293b", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#292524", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#27272a", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--secondary-foreground": { + "type": "color", + "value": [ + { + "value": "#171717" + }, + { + "value": "#111827", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--muted": { + "type": "color", + "value": [ + { + "value": "#f5f5f5" + }, + { + "value": "#262626", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#1f2937", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#1e293b", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#292524", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#27272a", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--muted-foreground": { + "type": "color", + "value": [ + { + "value": "#737373" + }, + { + "value": "#6b7280", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#64748b", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#78716c", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#71717a", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#a3a3a3", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#9ca3af", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#94a3b8", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#a8a29e", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#a1a1aa", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--accent": { + "type": "color", + "value": [ + { + "value": "#f5f5f5" + }, + { + "value": "#262626", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#1f2937", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#1e293b", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#292524", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#27272a", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + } + ] + }, + "--accent-foreground": { + "type": "color", + "value": [ + { + "value": "#171717" + }, + { + "value": "#111827", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#0f172a", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#1c1917", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#18181b", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#fafafa", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--destructive": { + "type": "color", + "value": [ + { + "value": "#e7000b" + }, + { + "value": "#ff666999", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--border": { + "type": "color", + "value": [ + { + "value": "#e5e5e5" + }, + { + "value": "#e5e7eb", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#e2e8f0", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#e5e5e5", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#e4e4e7", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#ffffff1a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--input": { + "type": "color", + "value": [ + { + "value": "#e5e5e5" + }, + { + "value": "#e5e7eb", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#e2e8f0", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#e5e5e5", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#e4e4e7", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#ffffff1a", + "theme": { + "Mode": "Dark" + } + } + ] + }, + "--ring": { + "type": "color", + "value": [ + { + "value": "#a3a3a3" + }, + { + "value": "#9ca3af", + "theme": { + "Base": "Gray" + } + }, + { + "value": "#94a3b8", + "theme": { + "Base": "Slate" + } + }, + { + "value": "#a8a29e", + "theme": { + "Base": "Stone" + } + }, + { + "value": "#a1a1aa", + "theme": { + "Base": "Zinc" + } + }, + { + "value": "#737373", + "theme": { + "Mode": "Dark" + } + }, + { + "value": "#6b7280", + "theme": { + "Mode": "Dark", + "Base": "Gray" + } + }, + { + "value": "#64748b", + "theme": { + "Mode": "Dark", + "Base": "Slate" + } + }, + { + "value": "#78716c", + "theme": { + "Mode": "Dark", + "Base": "Stone" + } + }, + { + "value": "#71717a", + "theme": { + "Mode": "Dark", + "Base": "Zinc" + } + }, + { + "value": "#7f1d1d", + "theme": { + "Accent": "Red" + } + }, + { + "value": "#fb7185", + "theme": { + "Accent": "Rose" + } + }, + { + "value": "#fb923c", + "theme": { + "Accent": "Orange" + } + }, + { + "value": "#a3e635", + "theme": { + "Accent": "Green" + } + }, + { + "value": "#3b82f6", + "theme": { + "Accent": "Blue" + } + }, + { + "value": "#713f12", + "theme": { + "Accent": "Yellow" + } + }, + { + "value": "#a78bfa", + "theme": { + "Accent": "Violet" + } + }, + { + "value": "#dc2626", + "theme": { + "Mode": "Dark", + "Accent": "Red" + } + }, + { + "value": "#881337", + "theme": { + "Mode": "Dark", + "Accent": "Rose" + } + }, + { + "value": "#7c2d12", + "theme": { + "Mode": "Dark", + "Accent": "Orange" + } + }, + { + "value": "#365314", + "theme": { + "Mode": "Dark", + "Accent": "Green" + } + }, + { + "value": "#2563eb", + "theme": { + "Mode": "Dark", + "Accent": "Blue" + } + }, + { + "value": "#ca8a06", + "theme": { + "Mode": "Dark", + "Accent": "Yellow" + } + }, + { + "value": "#4c1d95", + "theme": { + "Mode": "Dark", + "Accent": "Violet" + } + } + ] + }, + "--white": { + "type": "color", + "value": "#ffffffff" + }, + "--black": { + "type": "color", + "value": "#000000" + } + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 08bab03..51871f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "polyclientvuetify", "version": "0.0.0", "dependencies": { + "@mdi/font": "^7.4.47", "pinia": "^3.0.4", "vue": "^3.5.27", - "vue-router": "^5.0.1" + "vue-router": "^5.0.1", + "vuetify": "^4.0.0-beta.0" }, "devDependencies": { "@playwright/test": "^1.58.1", @@ -1445,6 +1447,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mdi/font": { + "version": "7.4.47", + "resolved": "https://registry.npmmirror.com/@mdi/font/-/font-7.4.47.tgz", + "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==", + "license": "Apache-2.0" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -6820,6 +6828,33 @@ "typescript": ">=5.0.0" } }, + "node_modules/vuetify": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmmirror.com/vuetify/-/vuetify-4.0.0-beta.0.tgz", + "integrity": "sha512-efBGozz9obv7bAqqFgSC1PAxO2NZltJzor+EDZx0Qxp8GssvIOzMQoMnK3axRbldIa5yfWdPAsbZ+lO8tJxgjg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/johnleider" + }, + "peerDependencies": { + "typescript": ">=4.7", + "vite-plugin-vuetify": ">=2.1.0", + "vue": "^3.5.0", + "webpack-plugin-vuetify": ">=3.1.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + }, + "vite-plugin-vuetify": { + "optional": true + }, + "webpack-plugin-vuetify": { + "optional": true + } + } + }, "node_modules/w3c-xmlserializer": { "version": "5.0.0", "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", diff --git a/package.json b/package.json index 8d2ea5b..b4566f8 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,11 @@ "format": "prettier --write --experimental-cli src/" }, "dependencies": { + "@mdi/font": "^7.4.47", "pinia": "^3.0.4", "vue": "^3.5.27", - "vue-router": "^5.0.1" + "vue-router": "^5.0.1", + "vuetify": "^4.0.0-beta.0" }, "devDependencies": { "@playwright/test": "^1.58.1", diff --git a/src/App.vue b/src/App.vue index abfd315..39bf1fc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,32 @@ - + - + diff --git a/src/components/HorizontalProgressBar.vue b/src/components/HorizontalProgressBar.vue new file mode 100644 index 0000000..6de1288 --- /dev/null +++ b/src/components/HorizontalProgressBar.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/src/components/MarketCard.vue b/src/components/MarketCard.vue new file mode 100644 index 0000000..7d07606 --- /dev/null +++ b/src/components/MarketCard.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/src/components/OrderBook.vue b/src/components/OrderBook.vue new file mode 100644 index 0000000..ccbe8bd --- /dev/null +++ b/src/components/OrderBook.vue @@ -0,0 +1,486 @@ + + + + + diff --git a/src/components/TradeComponent.vue b/src/components/TradeComponent.vue new file mode 100644 index 0000000..63bf52b --- /dev/null +++ b/src/components/TradeComponent.vue @@ -0,0 +1,756 @@ + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index fda1e6e..5520653 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,10 +3,12 @@ import { createPinia } from 'pinia' import App from './App.vue' import router from './router' +import vuetify from './plugins/vuetify' const app = createApp(App) app.use(createPinia()) app.use(router) +app.use(vuetify) app.mount('#app') diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts new file mode 100644 index 0000000..08b3ac3 --- /dev/null +++ b/src/plugins/vuetify.ts @@ -0,0 +1,43 @@ +import { createVuetify } from 'vuetify' +import * as components from 'vuetify/components' +import * as directives from 'vuetify/directives' +import 'vuetify/styles' +import '@mdi/font/css/materialdesignicons.css' + +export default createVuetify({ + components, + directives, + theme: { + defaultTheme: 'light', + themes: { + light: { + dark: false, + colors: { + primary: '#1A73E8', + secondary: '#5F6368', + accent: '#34A853', + error: '#EA4335', + info: '#4285F4', + success: '#34A853', + warning: '#FBBC05', + surface: '#FFFFFF', + background: '#F5F5F5' + } + }, + dark: { + dark: true, + colors: { + primary: '#1E88E5', + secondary: '#9E9E9E', + accent: '#4CAF50', + error: '#F44336', + info: '#2196F3', + success: '#4CAF50', + warning: '#FFC107', + surface: '#1E1E1E', + background: '#121212' + } + } + } + } +}) \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index e1eab52..eadbbd2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,8 +1,21 @@ import { createRouter, createWebHistory } from 'vue-router' +import Home from '../views/Home.vue' +import Trade from '../views/Trade.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [], + routes: [ + { + path: '/', + name: 'home', + component: Home + }, + { + path: '/trade', + name: 'trade', + component: Trade + } + ], }) export default router diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..75fb4bb --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/views/Trade.vue b/src/views/Trade.vue new file mode 100644 index 0000000..ca2d01d --- /dev/null +++ b/src/views/Trade.vue @@ -0,0 +1,45 @@ + + + + +