@urbicon-ui/design-content 6.2.0 → 6.3.3

package/content/component-catalog.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-06-22T17:04:55.710Z",
+  "generated": "2026-06-24T07:50:05.631Z",
   "version": "0.2.38",
   "components": [
     {
@@ -51,14 +51,7 @@
         "value": "string | string[]",
         "variant": "'default' | 'separated' | 'ghost'"
       },
-      "slots": [
-        "base",
-        "item",
-        "trigger",
-        "chevron",
-        "content",
-        "contentInner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Collapsible",
@@ -170,15 +163,7 @@
         "size": "'sm' | 'md' | 'lg'",
         "variant": "'soft' | 'inline' | 'filled'"
       },
-      "slots": [
-        "base",
-        "icon",
-        "content",
-        "title",
-        "description",
-        "actions",
-        "dismissButton"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Toast",
@@ -334,12 +319,7 @@
         "status": "'away' | 'busy' | 'offline' | 'online'",
         "statusPosition": "'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'"
       },
-      "slots": [
-        "base",
-        "image",
-        "fallback",
-        "status"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Badge"
@@ -474,12 +454,7 @@
         "size": "'lg' | 'md' | 'sm' | 'xs'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "content",
-        "removeButton",
-        "removeIcon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Alert",
@@ -558,14 +533,7 @@
         "items": "BreadcrumbItem[]",
         "size": "'sm' | 'md' | 'lg'"
       },
-      "slots": [
-        "nav",
-        "list",
-        "item",
-        "link",
-        "currentPage",
-        "separator"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Tab",
@@ -684,11 +652,7 @@
         "buttonGroupConnected": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "content",
-        "spinner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "ButtonGroup",
@@ -759,9 +723,7 @@
         "value": "ButtonGroupValue",
         "variant": "ButtonVariants['variant']"
       },
-      "slots": [
-        "base"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Button",
@@ -915,12 +877,7 @@
         "dividers": "'true'",
         "padding": "'lg' | 'md' | 'none' | 'sm' | 'xl'"
       },
-      "slots": [
-        "base",
-        "header",
-        "content",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Accordion",
@@ -1037,14 +994,7 @@
         "variant": "'filled' | 'ghost' | 'outlined'",
         "size": "'lg' | 'md' | 'sm' | 'xs'"
       },
-      "slots": [
-        "wrapper",
-        "control",
-        "box",
-        "icon",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Toggle",
@@ -1098,13 +1048,7 @@
         "variant": "'card' | 'default' | 'ghost'",
         "size": "'lg' | 'md' | 'sm'"
       },
-      "slots": [
-        "base",
-        "trigger",
-        "chevron",
-        "content",
-        "contentInner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Accordion",
@@ -1176,22 +1120,7 @@
         "size": "'lg' | 'md' | 'sm'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "label",
-        "requiredMark",
-        "inputWrapper",
-        "input",
-        "message",
-        "hint",
-        "listbox",
-        "option",
-        "optionActive",
-        "optionSelected",
-        "noResults",
-        "clear",
-        "chevron"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Select",
@@ -1241,25 +1170,7 @@
         "shortcut": "string | false",
         "size": "CommandPaletteVariants['size']"
       },
-      "slots": [
-        "wrapper",
-        "input",
-        "inputIcon",
-        "clearButton",
-        "list",
-        "group",
-        "groupLabel",
-        "item",
-        "itemHighlighted",
-        "itemDefault",
-        "itemDisabled",
-        "itemIcon",
-        "itemLabel",
-        "itemShortcut",
-        "empty",
-        "footer",
-        "kbd"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Dialog"
@@ -1329,23 +1240,7 @@
         "legendPlacement": "'bottom' | 'left' | 'none' | 'right' | 'top'",
         "orientation": "'horizontal' | 'vertical'"
       },
-      "slots": [
-        "wrapper",
-        "barWrapper",
-        "bar",
-        "segment",
-        "segmentRest",
-        "tooltip",
-        "tooltipLabel",
-        "tooltipDetail",
-        "legend",
-        "legendItem",
-        "legendDot",
-        "legendLabel",
-        "legendValue",
-        "total",
-        "totalLabel"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -1463,6 +1358,53 @@
         "Input"
       ]
     },
+    {
+      "name": "DateRangePicker",
+      "slug": "date-range-picker",
+      "package": "@urbicon-ui/blocks",
+      "group": "components",
+      "description": "Date range picker with a dual-calendar popup for selecting a start and end date — min/max constraints, disabled dates, and native form submission via paired hidden inputs.",
+      "tags": [
+        "form"
+      ],
+      "import": "import { DateRangePicker } from '@urbicon-ui/blocks';",
+      "llmTxtPath": "components/date-range-picker/llm.txt",
+      "variants": [],
+      "keyProps": [
+        "calendarVariant",
+        "class",
+        "clearable",
+        "closeOnClickOutside",
+        "closeOnEscape",
+        "closeOnSelect",
+        "defaultMonth",
+        "defaultYear"
+      ],
+      "keyPropTypes": {
+        "calendarVariant": "'default' | 'bordered' | 'ghost'",
+        "defaultMonth": "MonthIndex",
+        "disabledDates": "Date[]",
+        "displayFormat": "DateFormatOptions",
+        "inputVariant": "'outlined' | 'filled' | 'ghost' | 'underline'",
+        "isDateDisabled": "(date: Date) => boolean",
+        "maxDate": "Date",
+        "minDate": "Date",
+        "onClickOutside": "() => void",
+        "onEscape": "() => void",
+        "onOpenChange": "(open: boolean) => void",
+        "onValueChange": "(value: DateRange | undefined) => void",
+        "size": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+        "value": "DateRange",
+        "valueFormat": "'date' | 'iso'",
+        "weekStartsOn": "WeekdayIndex"
+      },
+      "slots": [],
+      "hasExamples": false,
+      "relatedComponents": [
+        "DatePicker",
+        "Calendar"
+      ]
+    },
     {
       "name": "Dialog",
       "slug": "dialog",
@@ -1525,16 +1467,7 @@
         "size": "DialogVariants['size']",
         "transitionEasing": "(t: number) => number"
       },
-      "slots": [
-        "dialog",
-        "backdrop",
-        "panel",
-        "content",
-        "header",
-        "title",
-        "body",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Drawer"
@@ -1637,15 +1570,7 @@
         "size": "DrawerVariants['size']",
         "transitionEasing": "(t: number) => number"
       },
-      "slots": [
-        "dialog",
-        "backdrop",
-        "panel",
-        "header",
-        "title",
-        "body",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Dialog",
@@ -1860,24 +1785,7 @@
       "keyPropTypes": {
         "placement": "Placement"
       },
-      "slots": [
-        "container",
-        "scrim",
-        "bubble",
-        "arrow",
-        "title",
-        "body",
-        "progress",
-        "dots",
-        "dot",
-        "dotActive",
-        "stepText",
-        "footer",
-        "spacer",
-        "skip",
-        "prev",
-        "next"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -1907,9 +1815,7 @@
         "unstyled"
       ],
       "keyPropTypes": {},
-      "slots": [
-        "article"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuidePanel",
@@ -1953,11 +1859,7 @@
         "size": "GuideBeaconVariants['size']",
         "tour": "GuideTour"
       },
-      "slots": [
-        "beacon",
-        "ping",
-        "dot"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Guide",
@@ -1993,13 +1895,7 @@
         "placement": "Placement",
         "trigger": "'mount' | 'manual'"
       },
-      "slots": [
-        "hint",
-        "title",
-        "body",
-        "dismiss",
-        "arrow"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -2043,10 +1939,7 @@
         "direction": "GuideDirection",
         "size": "GuideMarkerVariants['size']"
       },
-      "slots": [
-        "marker",
-        "icon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuidePanel",
@@ -2079,9 +1972,7 @@
       "keyPropTypes": {
         "direction": "GuideDirection"
       },
-      "slots": [
-        "mention"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideArticle",
@@ -2134,17 +2025,7 @@
         "placement": "GuidePanelVariants['placement']",
         "size": "GuidePanelVariants['size']"
       },
-      "slots": [
-        "panel",
-        "header",
-        "backButton",
-        "title",
-        "closeButton",
-        "body",
-        "list",
-        "listItem",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -2308,14 +2189,7 @@
         "messageType": "'error' | 'helper'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "container",
-        "base",
-        "label",
-        "message",
-        "iconContainer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Textarea",
@@ -2730,12 +2604,7 @@
         "variant": "'outlined' | 'filled' | 'ghost'",
         "layout": "'default' | 'minimal' | 'navigation' | 'table'"
       },
-      "slots": [
-        "base",
-        "info",
-        "controls",
-        "ellipsis"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Table"
@@ -2970,18 +2839,7 @@
         "size": "'lg' | 'md' | 'sm' | 'xs'",
         "indeterminate": "'true'"
       },
-      "slots": [
-        "wrapper",
-        "header",
-        "label",
-        "valueText",
-        "track",
-        "fill",
-        "circularWrapper",
-        "circularTrack",
-        "circularFill",
-        "circularLabel"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Spinner",
@@ -3088,12 +2946,7 @@
         "tier": "InteractiveTier",
         "variant": "RadioItemVariants['variant']"
       },
-      "slots": [
-        "root",
-        "group",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Checkbox",
@@ -3117,11 +2970,11 @@
         "apiPath",
         "class",
         "csrf",
+        "defaultEmail",
         "fetcher",
         "footer",
         "header",
-        "links",
-        "loginUrl"
+        "links"
       ],
       "keyPropTypes": {
         "csrf": "CsrfClientOptions",
@@ -3220,18 +3073,7 @@
         "onNodeClick": "(node: SankeyLaidOutNodeWithMeta) => void",
         "tooltip": "Snippet<[datum: SankeyLaidOutNodeWithMeta | SankeyLaidOutLinkWithMeta, kind: 'node' | 'link']>"
       },
-      "slots": [
-        "wrapper",
-        "svg",
-        "node",
-        "nodeRect",
-        "nodeLabel",
-        "nodeValue",
-        "link",
-        "tooltip",
-        "tooltipLabel",
-        "tooltipDetail"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3304,11 +3146,7 @@
         "fullWidth": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "indicator",
-        "item"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "ButtonGroup",
@@ -3427,23 +3265,7 @@
         "selected": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "base",
-        "trigger",
-        "triggerText",
-        "placeholder",
-        "chevron",
-        "clear",
-        "listbox",
-        "option",
-        "optionCheck",
-        "optionCheckbox",
-        "group",
-        "groupLabel",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3583,13 +3405,7 @@
         "onOpenChange": "(open: boolean) => void",
         "side": "SidebarVariants['side']"
       },
-      "slots": [
-        "backdrop",
-        "panel",
-        "header",
-        "content",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "SidebarLayout",
@@ -3711,10 +3527,7 @@
         "size": "SkeletonVariants['size']",
         "variant": "SkeletonVariants['variant']"
       },
-      "slots": [
-        "base",
-        "wrapper"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Spinner",
@@ -3802,21 +3615,7 @@
         "appearance": "'default' | 'rail'",
         "messageType": "'error' | 'helper'"
       },
-      "slots": [
-        "wrapper",
-        "header",
-        "label",
-        "valueText",
-        "base",
-        "track",
-        "range",
-        "thumb",
-        "mark",
-        "boundaryTick",
-        "rangeStatus",
-        "rangeStatusIcon",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3925,23 +3724,7 @@
         "speed": "SpinnerVariants['speed']",
         "variant": "SpinnerVariants['variant']"
       },
-      "slots": [
-        "base",
-        "svg",
-        "svgCircle",
-        "svgPath",
-        "dots",
-        "dot",
-        "pulse",
-        "pulseCenter",
-        "pulseRing",
-        "ring",
-        "ringElement",
-        "bars",
-        "bar",
-        "content",
-        "srOnly"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Progress",
@@ -4013,18 +3796,7 @@
         "tier": "InteractiveTier",
         "variant": "'default' | 'outlined' | 'minimal'"
       },
-      "slots": [
-        "base",
-        "stepItem",
-        "step",
-        "indicatorColumn",
-        "indicator",
-        "labelGroup",
-        "label",
-        "description",
-        "separator",
-        "content"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Tab"
@@ -4102,13 +3874,7 @@
         "variant": "'enclosed' | 'line' | 'pills' | 'solid'",
         "size": "'lg' | 'md' | 'sm'"
       },
-      "slots": [
-        "base",
-        "list",
-        "trigger",
-        "panel",
-        "indicator"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Stepper\n\nTab props are a discriminated union on `orientation`. `fullWidth` is\nonly available on horizontal tabs — combining it with `orientation=\"vertical\"`\nfails type-check, since vertical triggers are already full-width by design."
@@ -4257,14 +4023,7 @@
         "messageType": "'error' | 'helper'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "base",
-        "label",
-        "footer",
-        "message",
-        "counter"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -4273,7 +4032,7 @@
       "slug": "theme-switcher",
       "package": "@urbicon-ui/blocks",
       "group": "components",
-      "description": "Cycles between light, dark, and system color schemes.\nApplies light/dark classes on the html element and persists to localStorage.",
+      "description": "Cycles between light, dark, and system color schemes. Sets a\n`light`/`dark` class on the `<html>` element for explicit choices and clears\nit in system mode (so the CSS `light-dark()` function follows the OS natively).\nPersists the choice to localStorage.",
       "tags": [
         "action"
       ],
@@ -4324,10 +4083,7 @@
         "theme": "Theme",
         "variant": "ThemeSwitcherVariants['variant']"
       },
-      "slots": [
-        "button",
-        "icon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "LocaleSwitcher"
@@ -4383,16 +4139,7 @@
         "placement": "ToastPlacement",
         "intent": "'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning'"
       },
-      "slots": [
-        "container",
-        "toast",
-        "icon",
-        "content",
-        "title",
-        "description",
-        "dismissButton",
-        "progress"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Alert"
@@ -4481,14 +4228,7 @@
         "intent": "'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'",
         "size": "'lg' | 'md' | 'sm' | 'xs'"
       },
-      "slots": [
-        "wrapper",
-        "control",
-        "track",
-        "thumb",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Checkbox"
@@ -4564,9 +4304,7 @@
         "orientation": "'horizontal' | 'vertical'",
         "padding": "'lg' | 'md' | 'sm' | 'xl' | 'xs'"
       },
-      "slots": [
-        "base"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Button",
@@ -4633,10 +4371,7 @@
         "size": "'lg' | 'md' | 'sm'",
         "visible": "'false' | 'true'"
       },
-      "slots": [
-        "base",
-        "arrow"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Popover"
@@ -4793,7 +4528,7 @@
         "Progress",
         "Tooltip"
       ],
-      "code": "<script lang=\"ts\">\n  import {\n    Avatar, Badge, Button, Card, Progress, Tooltip,\n    SidebarLayout, MenuIcon, HomeIcon, BarChartIcon, UsersIcon, SettingsIcon\n  } from '@urbicon-ui/blocks';\n\n  let sidebarOpen = $state(false);\n  let activeRoute = $state('dashboard');\n\n  const navItems = [\n    { id: 'dashboard', label: 'Dashboard', icon: HomeIcon },\n    { id: 'analytics', label: 'Analytics', icon: BarChartIcon },\n    { id: 'users', label: 'Users', icon: UsersIcon },\n    { id: 'settings', label: 'Settings', icon: SettingsIcon }\n  ];\n\n  const stats = [\n    { label: 'Total Users', value: '12,847', change: '+12.5%', intent: 'success' as const, progress: 78, tooltip: 'Target: 16,500 users by Q2' },\n    { label: 'Revenue', value: '$48,392', change: '+8.2%', intent: 'success' as const, progress: 64, tooltip: 'Target: $75,000 monthly' },\n    { label: 'Active Sessions', value: '1,429', change: '-3.1%', intent: 'danger' as const, progress: 45, tooltip: 'Down from 1,475 last week' },\n    { label: 'Conversion', value: '3.24%', change: '+0.8%', intent: 'success' as const, progress: 81, tooltip: 'Target: 4.0% conversion rate' }\n  ];\n\n  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  const chartData = [40, 65, 45, 80, 55, 70, 85, 60, 90, 75, 95, 88];\n\n  const recentActivity = [\n    { user: 'Sarah Chen', action: 'Purchased Pro plan', time: '2 min ago' },\n    { user: 'Marcus Rivera', action: 'Submitted support ticket', time: '15 min ago' },\n    { user: 'Aisha Patel', action: 'Updated profile settings', time: '1 hour ago' },\n    { user: 'Tom Weber', action: 'Exported analytics report', time: '2 hours ago' },\n    { user: 'Lisa Kim', action: 'Added team member', time: '3 hours ago' }\n  ];\n</script>\n\n<SidebarLayout bind:open={sidebarOpen} sidebarWidth=\"14rem\" data-design-pattern=\"dashboard\">\n  {#snippet sidebarHeader()}\n    <a href=\"/\" class=\"flex h-14 items-center px-4 font-bold text-primary\">Acme Inc</a>\n  {/snippet}\n\n  {#snippet sidebar()}\n    <nav class=\"flex flex-col gap-1 p-3\">\n      {#each navItems as item (item.id)}\n        {@const Icon = item.icon}\n        <button\n          type=\"button\"\n          onclick={() => (activeRoute = item.id)}\n          class={activeRoute === item.id\n            ? 'flex items-center gap-2.5 rounded-lg bg-primary-subtle px-3 py-2 text-sm font-medium text-primary'\n            : 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-text-secondary hover:bg-surface-hover hover:text-text-primary'}\n        >\n          <Icon class=\"h-4 w-4 shrink-0\" />\n          <span>{item.label}</span>\n        </button>\n      {/each}\n    </nav>\n  {/snippet}\n\n  {#snippet sidebarFooter()}\n    <div class=\"flex items-center gap-3 p-3\">\n      <Avatar name=\"Mara Cohen\" size=\"sm\" />\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-xs font-medium text-text-primary\">Mara C</div>\n        <div class=\"truncate text-[10px] text-text-tertiary\">Admin</div>\n      </div>\n    </div>\n  {/snippet}\n\n  {#snippet mobileHeader({ openSidebar })}\n    <Button variant=\"ghost\" size=\"sm\" onclick={openSidebar} aria-label=\"Open menu\">\n      <MenuIcon class=\"h-5 w-5\" />\n    </Button>\n    <span class=\"font-semibold\">Acme Inc</span>\n  {/snippet}\n\n  <div class=\"space-y-6\">\n    <div class=\"flex flex-wrap items-center justify-between gap-3\">\n      <div>\n        <h1 class=\"text-2xl font-bold text-text-primary\">Dashboard</h1>\n        <p class=\"text-sm text-text-tertiary\">Welcome back, Mara</p>\n      </div>\n      <Button size=\"sm\" intent=\"primary\">Export Report</Button>\n    </div>\n\n    <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n      {#each stats as stat (stat.label)}\n        <Card class=\"h-full\" variant=\"elevated\">\n          <Tooltip label={stat.tooltip} placement=\"top\">\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"min-h-8 text-xs font-medium text-text-tertiary\">{stat.label}</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-2xl font-bold tabular-nums text-text-primary\">{stat.value}</span>\n                <Badge variant=\"soft\" intent={stat.intent} size=\"sm\">{stat.change}</Badge>\n              </div>\n              <Progress\n                value={stat.progress}\n                size=\"xs\"\n                intent={stat.intent === 'danger' ? 'danger' : 'primary'}\n              />\n            </div>\n          </Tooltip>\n        </Card>\n      {/each}\n    </div>\n\n    <Card>\n      <div class=\"space-y-4\">\n        <h3 class=\"text-sm font-semibold text-text-primary\">Revenue Overview</h3>\n        <div class=\"flex h-48 items-end gap-2\">\n          {#each chartData as height, i (i)}\n            <div\n              class=\"flex-1 rounded-t transition-all duration-(--blocks-duration-fast) hover:opacity-80\"\n              style=\"height: {height}%; background: {i === chartData.length - 1\n                ? 'var(--color-primary)'\n                : 'var(--color-primary-subtle)'}\"\n            ></div>\n          {/each}\n        </div>\n        <div class=\"flex justify-between gap-1 text-[10px] text-text-quaternary\">\n          {#each months as month (month)}\n            <span>{month}</span>\n          {/each}\n        </div>\n      </div>\n    </Card>\n\n    <Card>\n      <div class=\"space-y-4\">\n        <h3 class=\"text-sm font-semibold text-text-primary\">Recent Activity</h3>\n        <div class=\"space-y-3\">\n          {#each recentActivity as activity (activity.user)}\n            <div class=\"flex items-start gap-3\">\n              <Avatar name={activity.user} size=\"sm\" />\n              <div class=\"min-w-0 flex-1\">\n                <p class=\"truncate text-sm font-medium text-text-primary\">{activity.user}</p>\n                <p class=\"text-xs text-text-tertiary\">{activity.action} · {activity.time}</p>\n              </div>\n            </div>\n          {/each}\n        </div>\n      </div>\n    </Card>\n  </div>\n</SidebarLayout>",
+      "code": "<script lang=\"ts\">\n  import {\n    Avatar, Badge, BarChart, Button, Card, Progress, Tooltip,\n    SidebarLayout, MenuIcon, HomeIcon, BarChartIcon, UsersIcon, SettingsIcon\n  } from '@urbicon-ui/blocks';\n\n  let sidebarOpen = $state(false);\n  let activeRoute = $state('dashboard');\n\n  const navItems = [\n    { id: 'dashboard', label: 'Dashboard', icon: HomeIcon },\n    { id: 'analytics', label: 'Analytics', icon: BarChartIcon },\n    { id: 'users', label: 'Users', icon: UsersIcon },\n    { id: 'settings', label: 'Settings', icon: SettingsIcon }\n  ];\n\n  const stats = [\n    { label: 'Total Users', value: '12,847', change: '+12.5%', intent: 'success' as const, progress: 78, tooltip: 'Target: 16,500 users by Q2' },\n    { label: 'Revenue', value: '$48,392', change: '+8.2%', intent: 'success' as const, progress: 64, tooltip: 'Target: $75,000 monthly' },\n    { label: 'Active Sessions', value: '1,429', change: '-3.1%', intent: 'danger' as const, progress: 45, tooltip: 'Down from 1,475 last week' },\n    { label: 'Conversion', value: '3.24%', change: '+0.8%', intent: 'success' as const, progress: 81, tooltip: 'Target: 4.0% conversion rate' }\n  ];\n\n  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  const chartData = [40, 65, 45, 80, 55, 70, 85, 60, 90, 75, 95, 88];\n  const revenue = months.map((label, i) => ({ label, values: [chartData[i]] }));\n\n  const recentActivity = [\n    { user: 'Sarah Chen', action: 'Purchased Pro plan', time: '2 min ago' },\n    { user: 'Marcus Rivera', action: 'Submitted support ticket', time: '15 min ago' },\n    { user: 'Aisha Patel', action: 'Updated profile settings', time: '1 hour ago' },\n    { user: 'Tom Weber', action: 'Exported analytics report', time: '2 hours ago' },\n    { user: 'Lisa Kim', action: 'Added team member', time: '3 hours ago' }\n  ];\n</script>\n\n<SidebarLayout bind:open={sidebarOpen} sidebarWidth=\"14rem\" data-design-pattern=\"dashboard\">\n  {#snippet sidebarHeader()}\n    <a href=\"/\" class=\"flex h-14 items-center px-4 font-bold text-primary\">Acme Inc</a>\n  {/snippet}\n\n  {#snippet sidebar()}\n    <nav class=\"flex flex-col gap-1 p-3\">\n      {#each navItems as item (item.id)}\n        {@const Icon = item.icon}\n        <button\n          type=\"button\"\n          onclick={() => (activeRoute = item.id)}\n          class={activeRoute === item.id\n            ? 'flex items-center gap-2.5 rounded-lg bg-primary-subtle px-3 py-2 text-sm font-medium text-primary'\n            : 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-text-secondary hover:bg-surface-hover hover:text-text-primary'}\n        >\n          <Icon class=\"h-4 w-4 shrink-0\" />\n          <span>{item.label}</span>\n        </button>\n      {/each}\n    </nav>\n  {/snippet}\n\n  {#snippet sidebarFooter()}\n    <div class=\"flex items-center gap-3 p-3\">\n      <Avatar name=\"Mara Cohen\" size=\"sm\" />\n      <div class=\"min-w-0\">\n        <div class=\"truncate text-xs font-medium text-text-primary\">Mara C</div>\n        <div class=\"truncate text-[10px] text-text-tertiary\">Admin</div>\n      </div>\n    </div>\n  {/snippet}\n\n  {#snippet mobileHeader({ openSidebar })}\n    <Button variant=\"ghost\" size=\"sm\" onclick={openSidebar} aria-label=\"Open menu\">\n      <MenuIcon class=\"h-5 w-5\" />\n    </Button>\n    <span class=\"font-semibold\">Acme Inc</span>\n  {/snippet}\n\n  <div class=\"space-y-6\">\n    <div class=\"flex flex-wrap items-center justify-between gap-3\">\n      <div>\n        <h1 class=\"text-2xl font-bold text-text-primary\">Dashboard</h1>\n        <p class=\"text-sm text-text-tertiary\">Welcome back, Mara</p>\n      </div>\n      <Button size=\"sm\" intent=\"primary\">Export Report</Button>\n    </div>\n\n    <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n      {#each stats as stat (stat.label)}\n        <Card class=\"h-full\" variant=\"elevated\">\n          <Tooltip label={stat.tooltip} placement=\"top\">\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"min-h-8 text-xs font-medium text-text-tertiary\">{stat.label}</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-2xl font-bold tabular-nums text-text-primary\">{stat.value}</span>\n                <Badge variant=\"soft\" intent={stat.intent} size=\"sm\">{stat.change}</Badge>\n              </div>\n              <Progress\n                value={stat.progress}\n                size=\"xs\"\n                intent={stat.intent === 'danger' ? 'danger' : 'primary'}\n              />\n            </div>\n          </Tooltip>\n        </Card>\n      {/each}\n    </div>\n\n    <Card>\n      <div class=\"space-y-4\">\n        <h2 class=\"text-sm font-semibold text-text-primary\">Revenue Overview</h2>\n        <BarChart\n          data={revenue}\n          series={[{ label: 'Revenue' }]}\n          height={192}\n          showLegend={false}\n          ariaLabel=\"Monthly revenue\"\n        />\n      </div>\n    </Card>\n\n    <Card>\n      <div class=\"space-y-4\">\n        <h2 class=\"text-sm font-semibold text-text-primary\">Recent Activity</h2>\n        <div class=\"space-y-3\">\n          {#each recentActivity as activity (activity.user)}\n            <div class=\"flex items-start gap-3\">\n              <Avatar name={activity.user} size=\"sm\" />\n              <div class=\"min-w-0 flex-1\">\n                <p class=\"truncate text-sm font-medium text-text-primary\">{activity.user}</p>\n                <p class=\"text-xs text-text-tertiary\">{activity.action} · {activity.time}</p>\n              </div>\n            </div>\n          {/each}\n        </div>\n      </div>\n    </Card>\n  </div>\n</SidebarLayout>",
       "features": [
         "SidebarLayout as the app shell — responsive sidebar with mobile hamburger overlay",
         "Stat cards with equal height and baseline-aligned values",
@@ -4816,7 +4551,7 @@
         "Alert",
         "Separator"
       ],
-      "code": "<script lang=\"ts\">\n  import { Button, Input, Checkbox, Card, Alert } from '@urbicon-ui/blocks';\n\n  let email = $state('');\n  let password = $state('');\n  let rememberMe = $state(false);\n  let loading = $state(false);\n  let error = $state('');\n\n  let emailValid = $derived(\n    email === '' || /^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(email)\n  );\n  let canSubmit = $derived(email !== '' && password.length >= 8 && emailValid);\n\n  async function handleLogin() {\n    if (!canSubmit) return;\n    loading = true;\n    error = '';\n    await new Promise((r) => setTimeout(r, 1500));\n    // Replace with your auth logic\n    if (email === 'demo@example.com' && password === 'password123') {\n      window.location.href = '/dashboard';\n    } else {\n      error = 'Invalid credentials';\n    }\n    loading = false;\n  }\n</script>\n\n<Card class=\"mx-auto max-w-sm shadow-lg\">\n  <div class=\"p-8\">\n    <h3 class=\"mb-6 text-center text-xl font-bold\">Sign In</h3>\n\n    {#if error}\n      <Alert intent=\"danger\" variant=\"soft\" size=\"sm\" dismissible\n        onDismiss={() => (error = '')}>{error}</Alert>\n    {/if}\n\n    <form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>\n      <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"\n        bind:value={email}\n        error={!emailValid ? 'Invalid email' : undefined} />\n\n      <Input label=\"Password\" type=\"password\"\n        bind:value={password} class=\"mt-4\" />\n\n      <div class=\"mt-4 flex items-center justify-between\">\n        <Checkbox label=\"Remember me\" bind:checked={rememberMe} />\n        <a href=\"/forgot\" class=\"text-sm text-primary\">Forgot?</a>\n      </div>\n\n      <Button intent=\"primary\" class=\"mt-6 w-full\"\n        disabled={!canSubmit} {loading}>\n        Sign in\n      </Button>\n    </form>\n  </div>\n</Card>",
+      "code": "<script lang=\"ts\">\n  import { Button, Input, Checkbox, Card, Alert } from '@urbicon-ui/blocks';\n\n  let email = $state('');\n  let password = $state('');\n  let rememberMe = $state(false);\n  let loading = $state(false);\n  let error = $state('');\n\n  let emailValid = $derived(\n    email === '' || /^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(email)\n  );\n  let canSubmit = $derived(email !== '' && password.length >= 8 && emailValid);\n\n  async function handleLogin() {\n    if (!canSubmit) return;\n    loading = true;\n    error = '';\n    await new Promise((r) => setTimeout(r, 1500));\n    // Replace with your auth logic\n    if (email === 'demo@example.com' && password === 'password123') {\n      window.location.href = '/dashboard';\n    } else {\n      error = 'Invalid credentials';\n    }\n    loading = false;\n  }\n</script>\n\n<Card class=\"mx-auto max-w-sm shadow-lg\">\n  <div class=\"p-8\">\n    <h3 class=\"mb-6 text-center text-xl font-bold\">Sign In</h3>\n\n    {#if error}\n      <Alert intent=\"danger\" variant=\"soft\" size=\"sm\" dismissible\n        onDismiss={() => (error = '')}>{error}</Alert>\n    {/if}\n\n    <form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>\n      <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"\n        bind:value={email}\n        error={!emailValid ? 'Invalid email' : undefined} />\n\n      <Input label=\"Password\" type=\"password\"\n        bind:value={password} class=\"mt-4\" />\n\n      <div class=\"mt-4 flex items-center justify-between\">\n        <Checkbox label=\"Remember me\" bind:checked={rememberMe} />\n        <a href=\"/forgot\" class=\"text-sm text-primary\">Forgot?</a>\n      </div>\n\n      <Button intent=\"primary\" class=\"mt-6 w-full\" type=\"submit\"\n        disabled={loading} {loading}>\n        Sign in\n      </Button>\n    </form>\n  </div>\n</Card>",
       "features": [
         "Client-side email and password validation",
         "Show/hide password toggle",