`${v.toFixed(1)}%`,\n },\n ]}\n />"
},
{
"name": "Locales",
"description": "",
"args": "{\n label: \"Locales\",\n value: 72000,\n },\n render: () => (\n \n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
\n ),",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
"
}
]
},
{
"name": "ds-button",
"title": "Button UI",
"description": "Feature-rich button with loading state, start/end icons, rounded variant (full/lg/md/none), fullWidth, double-click debounce, two-step destructive confirmation, and built-in tooltip via Radix. Wraps the shadcn Button primitive.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/button",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"tooltip"
],
"files": [
"components/ds/button.tsx"
],
"props": [
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Shows a spinner and disables the button."
},
{
"name": "loadingText",
"required": false,
"type": "string",
"description": "Text shown next to the spinner during loading. Defaults to children."
},
{
"name": "startIcon",
"required": false,
"type": "React.ReactNode",
"description": "Icon rendered before the button text."
},
{
"name": "endIcon",
"required": false,
"type": "React.ReactNode",
"description": "Icon rendered after the button text."
},
{
"name": "rounded",
"required": false,
"type": "\"full\" | \"lg\" | \"md\" | \"none\"",
"description": "Border radius. @default \"md\""
},
{
"name": "fullWidth",
"required": false,
"type": "boolean",
"description": "Makes the button span the full width of its container."
},
{
"name": "debounceMs",
"required": false,
"type": "number",
"description": "Minimum interval (ms) between clicks — prevents accidental double-submits."
},
{
"name": "confirm",
"required": false,
"type": "{ text: string; duration?: number }",
"description": "Two-step confirmation. First click shows `text`, second click fires `onClick`."
},
{
"name": "tooltip",
"required": false,
"type": "string | { text: string; side?: \"top\" | \"right\" | \"bottom\" | \"left\" }",
"description": "Shows a tooltip on hover. Pass a string or `{ text, side }`."
}
],
"storyTitle": "Actions/Button",
"stories": [
{
"name": "Default",
"description": "Default button with the primary variant.",
"args": "{\n children: \"Button\",\n variant: \"default\",\n loading: false,\n },\n parameters: {\n docs: {\n description: {\n story: \"Default button with the primary variant.\",\n },\n },\n },"
},
{
"name": "Variants",
"description": "All six inherited variants rendered side by side.",
"code": "\n Default \n Secondary \n Outline \n Ghost \n Destructive \n Link \n
"
},
{
"name": "Sizes",
"description": "All size presets from xs to lg.",
"code": "\n XS \n SM \n Default \n LG \n
"
},
{
"name": "Loading",
"description": "`loading=true` replaces the content with a `Loader2` spinner. \nThe button is disabled and `aria-busy` is set.\n\nPass `loadingText` to show custom text alongside the spinner.",
"code": "\n Default \n \n Secondary\n \n \n Delete\n \n \n Save\n \n \n Connect\n \n
"
},
{
"name": "WithIcons",
"description": "Use `startIcon` and `endIcon` to add icons before or after the label.",
"code": "\n
"
},
{
"name": "Rounded",
"description": "Four border-radius presets: `full` (pill, default), `lg`, `md`, and `none`.\n\nThis is especially useful when embedding buttons inside cards or dialogs that already have their own border radius.",
"code": "\n Full \n LG \n MD \n None \n
"
},
{
"name": "FullWidth",
"description": "`fullWidth` makes the button span 100% of its container.\nUseful for mobile layouts, sidebars, and call-to-action sections.",
"code": "\n Full-width button \n \n Secondary action\n \n \n Outline with rounded="md"\n \n
"
},
{
"name": "ConfirmMode",
"description": "Two-step confirmation for destructive actions.\n\n**1st click** — the label changes to the `confirm.text`.\n**2nd click** — within the duration window, fires `onClick`.\n\nIf the user does not click again within the duration (default 3s), the button resets. \nDuring confirming state, the button is not disabled — the user can still click to confirm.",
"args": "{ children: \"Delete item\", variant: \"destructive\" },\n render: (args) => {\n const [deleted, setDeleted] = React.useState(false)\n\n if (deleted) {\n return (\n \n
Item deleted.
\n
setDeleted(false)}>\n Reset\n \n
\n setCount((c) => c + 1)}\n >\n Click me fast\n \n \n Clicks: {count} (max 1/s)\n \n
"
},
{
"name": "Tooltip",
"description": "Add a `tooltip` prop to show a tooltip on hover. \nAccepts a plain string or `{ text, side }` to control placement.",
"code": "\n \n Processing\n \n \n
"
},
{
"name": "KitchenSink",
"description": "All features combined: loading, icons, custom rounded, tooltip, and fullWidth in a single button.",
"args": "{\n children: \"Publish changes\",\n variant: \"default\",\n size: \"lg\",\n fullWidth: false,\n rounded: \"md\",\n startIcon: \n
{\n setLoading(true)\n setTimeout(() => setLoading(false), 2500)\n }}\n />\n \n Click to simulate a 2.5s async operation.\n
\n \n \n ),\n },"
},
{
"name": "WithReferenceLines",
"description": "Candlestick chart with three reference lines marking support, mid target, and resistance levels at key price points.",
"args": "{\n title: \"Equity Price — Support & Resistance\",\n subtitle: \"Reference lines highlight key price levels to watch\",\n data: equityData,\n referenceLines: [\n { value: 150, label: \"Support\", color: \"var(--chart-2)\", dashed: true },\n {\n value: 165,\n label: \"Mid target\",\n color: \"var(--chart-3)\",\n dashed: true,\n },\n {\n value: 175,\n label: \"Resistance\",\n color: \"var(--destructive)\",\n dashed: false,\n },\n ],\n showGrid: true,\n showTooltip: true,\n height: 360,\n },"
},
{
"name": "WithBrush",
"description": "60-day candlestick chart with a brush slider for interactive zoom and pan across a long price series with moving averages.",
"args": "{\n title: \"60-Day Chart — Drag to Zoom\",\n subtitle:\n \"Drag the handles below to focus on any window · drag the bar to pan\",\n data: longSeries,\n showVolume: true,\n movingAverages: [\n { period: 10, label: \"MA 10\", color: \"var(--chart-1)\" },\n { period: 20, label: \"MA 20\", color: \"var(--chart-3)\", dashed: true },\n ],\n showGrid: true,\n showLegend: true,\n showTooltip: true,\n showBrush: true,\n height: 420,\n },"
},
{
"name": "LegendPositions",
"description": "Grid of four candlestick charts demonstrating all four legend positions with MA 5 lines and the first ten trading sessions.",
"args": "{ data: equityData },",
"code": "\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
"
},
{
"name": "LocalePTBR",
"description": "Candlestick chart with Portuguese locale displaying equity OHLC data with localized date and number formatting.",
"args": "{\n title: \"Equity Price — OHLC\",\n subtitle: \"January 2025 · hollow = bullish · filled = bearish\",\n data: equityData,\n showGrid: true,\n showTooltip: true,\n height: 340,\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the candlestick chart with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Equity Price — OHLC\",\n subtitle: \"January 2025 · hollow = bullish · filled = bearish\",\n data: equityData,\n showGrid: true,\n showTooltip: true,\n height: 340,\n },\n render: (args) => \n
\n \n
\n \n
\n
\n ),"
},
{
"name": "Tones",
"description": "",
"code": "\n
"
},
{
"name": "MediaStyles",
"description": "",
"code": "\n
"
},
{
"name": "Sizes",
"description": "",
"code": "\n
"
},
{
"name": "AlignStart",
"description": "",
"args": "{\n align: \"start\",\n titleUpper: false,\n tone: \"primary\",\n icon: BarChart3Icon,\n title: \"Analytical reports\",\n description: \"Export and share dashboards with the team.\",\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "AsLink",
"description": "",
"args": "{\n href: \"#indicadores\",\n tone: \"violet\",\n titleUpper: false,\n icon: TargetIcon,\n title: \"Explore indicators\",\n description: \"Browse the 17 goals and their targets.\",\n actionLabel: \"Access\",\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "WithBadge",
"description": "",
"args": "{\n badge: \"New\",\n tone: \"success\",\n titleUpper: false,\n icon: LeafIcon,\n title: \"Impact dashboard\",\n description: \"Track environmental results in real time.\",\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },\n render: (args) => (\n \n
\n ),"
}
]
},
{
"name": "ds-card-stat",
"title": "Card Stat",
"description": "A statistical display card with label, value, trend indicator, optional icon, and loading skeleton.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "string | number"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "locale",
"required": false,
"type": "string"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "trend",
"required": false,
"type": "CardStatTrend | boolean"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"muted\" | \"flat\""
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number | string) => string"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "valueClassName",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Data Display/CardStat",
"stories": [
{
"name": "Default",
"description": "Standard configuration showing the CardStat component with revenue data, currency formatting, up trend, and a description.",
"args": "{\n label: \"Revenue\",\n value: 45231.89,\n format: \"currency\",\n decimals: 2,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n description: \"+20.1% from last month\",\n trend: \"up\",\n icon: DollarSignIcon,\n size: \"sm\",\n variant: \"default\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard configuration showing the CardStat component with revenue data, currency formatting, up trend, and a description.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying four placeholder CardStat cards while data is being fetched.",
"args": "{\n label: \"Revenue\",\n value: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying four placeholder CardStat cards while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing four CardStat cards with dash placeholders when no data is available.",
"args": "{\n label: \"Revenue\",\n value: 0,\n empty: true,\n icon: DollarSignIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing four CardStat cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Locales",
"description": "Demonstrates locale-aware formatting with Brazilian Portuguese (pt-BR), German (de-DE), and English (en-US) locales.",
"args": "{\n label: \"Revenue\",\n value: 0,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Demonstrates locale-aware formatting with Brazilian Portuguese (pt-BR), German (de-DE), and English (en-US) locales.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStat component.",
"args": "{ label: \"Revenue\", value: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStat component.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
},
{
"name": "Abbreviated",
"description": "Set `abbreviate` to shorten large numbers with locale-aware suffixes.\nEnglish uses T/B/M/K; Portuguese uses tri/bi/mi/mil.\n\n```tsx\nMarket Cap\ncurrency\nen-US\nUSD\nValor de Mercado\ncurrency\npt-BR\nBRL\n```",
"args": "{ label: \"Revenue\", value: 0 },\n parameters: {\n docs: {\n description: {\n story: [\n \"Set `abbreviate` to shorten large numbers with locale-aware suffixes.\",\n \"English uses T/B/M/K; Portuguese uses tri/bi/mi/mil.\",\n \"\",\n \"```tsx\",\n '\n
\n ),",
"code": "\n
"
},
{
"name": "AbbreviatedCompact",
"description": "Dense grid demonstrating abbreviation across different orders of magnitude — thousands, millions, billions, trillions.\nen-US",
"args": "{ label: \"Label\", value: 0 },\n parameters: {\n docs: {\n description: {\n story: [\n \"Dense grid demonstrating abbreviation across different orders of magnitude — thousands, millions, billions, trillions.\",\n 'All cards use `locale=\"en-US\"` with `abbreviate` and format-specific formatting.',\n ].join(\"\\n\"),\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "MutedVariant",
"description": "muted\nIdeal for embedding KPIs inside panels or cards where the outer container already provides elevation.\n\n```tsx\nmuted\nRevenue\ncurrency\n```",
"args": "{ label: \"Revenue\", value: 0 },\n parameters: {\n docs: {\n description: {\n story: [\n 'Use `variant=\"muted\"` for a flat card — no border, no shadow, `bg-muted` background.',\n \"Ideal for embedding KPIs inside panels or cards where the outer container already provides elevation.\",\n \"\",\n \"```tsx\",\n '\n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
\n ),",
"code": "\n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
"
},
{
"name": "FlatVariant",
"description": "flat\nIdeal for areas where the container already has a colored background and the card needs to stand out in white.\n\n```tsx\nflat\nRevenue\ncurrency\n```",
"args": "{ label: \"Revenue\", value: 0 },\n parameters: {\n docs: {\n description: {\n story: [\n 'Use `variant=\"flat\"` for a borderless, shadowless card with a white background (`bg-background`).',\n \"Ideal for areas where the container already has a colored background and the card needs to stand out in white.\",\n \"\",\n \"```tsx\",\n '\n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
\n ),",
"code": "\n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
"
},
{
"name": "AllTrends",
"description": "Demonstrates all trend directions — up, down, and neutral — side by side with different metrics.",
"args": "{\n label: \"Metric\",\n value: 0,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Demonstrates all trend directions — up, down, and neutral — side by side with different metrics.\",\n },\n },\n },\n render: () => (\n \n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
\n ),",
"code": "\n `${v} ms`}\n description=\"−12 ms vs yesterday\"\n trend=\"up\"\n />\n
"
}
]
},
{
"name": "ds-card-stat-compact",
"title": "Card Stat Compact",
"description": "A compact statistical card with trend badge, description, icon, and loading skeleton.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-compact",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat-compact.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "string | number"
},
{
"name": "trend",
"required": false,
"type": "CardStatTrend | boolean"
},
{
"name": "trendValue",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"muted\" | \"flat\""
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Data Display/CardStatCompact",
"stories": [
{
"name": "Default",
"description": "Standard horizontal compact card showing total revenue with currency value and trend badge.",
"args": "{\n label: \"Total Revenue\",\n value: 124500,\n format: \"currency\",\n decimals: 2,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n trend: \"up\",\n trendValue: \"+26.8%\",\n icon: DollarSignIcon,\n size: \"sm\",\n variant: \"default\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard horizontal compact card showing total revenue with currency value and trend badge.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying four CardStatCompact placeholders while data is being fetched.",
"args": "{\n label: \"Total Revenue\",\n value: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying four CardStatCompact placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing four compact cards with dash placeholders when no data is available.",
"args": "{\n label: \"Total Revenue\",\n value: 0,\n empty: true,\n icon: DollarSignIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing four compact cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatCompact component with multiple metrics.",
"args": "{ label: \"Metric\", value: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatCompact component with multiple metrics.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
},
{
"name": "FlatVariant",
"description": "flat\n\n```tsx\nflat\nRevenue\ncurrency\n```",
"args": "{ label: \"Metric\", value: 0 },\n parameters: {\n docs: {\n description: {\n story: [\n 'Use `variant=\"flat\"` para card sem borda, sem sombra e fundo branco (`bg-background`).',\n \"\",\n \"```tsx\",\n '\n
\n ),",
"code": "\n
"
},
{
"name": "AllVariants",
"description": "Demonstrates all available variant configurations side by side — revenue, users, orders, and churn rate.",
"args": "{\n label: \"Metric\",\n value: 0,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Demonstrates all available variant configurations side by side — revenue, users, orders, and churn rate.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
}
]
},
{
"name": "ds-card-stat-comparison",
"title": "Card Stat Comparison",
"description": "A side-by-side comparison card for current vs. previous period values with trend indicators.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-comparison",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/card-stat-comparison.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "current",
"required": true,
"type": "number"
},
{
"name": "previous",
"required": true,
"type": "number"
},
{
"name": "currentLabel",
"required": false,
"type": "string"
},
{
"name": "previousLabel",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Data Display/CardStatComparison",
"stories": [
{
"name": "Default",
"description": "Standard configuration comparing current month revenue against the previous month with automatic delta calculation.",
"args": "{\n label: \"Monthly Revenue\",\n current: 124500,\n previous: 98200,\n format: \"currency\",\n decimals: 2,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n currentLabel: \"This month\",\n previousLabel: \"Last month\",\n icon: DollarSignIcon,\n size: \"sm\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard configuration comparing current month revenue against the previous month with automatic delta calculation.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying two CardStatComparison placeholders while data is being fetched.",
"args": "{\n label: \"Monthly Revenue\",\n current: 0,\n previous: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying two CardStatComparison placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing two comparison cards with dash placeholders when no data is available.",
"args": "{\n label: \"Monthly Revenue\",\n current: 0,\n previous: 0,\n empty: true,\n icon: DollarSignIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing two comparison cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatComparison component.",
"args": "{ label: \"Comparison\", current: 0, previous: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatComparison component.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v} min`}\n currentLabel=\"This week\"\n previousLabel=\"Last week\"\n icon={ActivityIcon}\n size={size}\n />\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v} min`}\n currentLabel=\"This week\"\n previousLabel=\"Last week\"\n icon={ActivityIcon}\n size={size}\n />\n
\n
\n ))}\n
\n `${v} min`}\n currentLabel=\"This week\"\n previousLabel=\"Last week\"\n icon={ActivityIcon}\n />\n
\n ),",
"code": "\n `${v} min`}\n currentLabel=\"This week\"\n previousLabel=\"Last week\"\n icon={ActivityIcon}\n />\n
"
}
]
},
{
"name": "ds-card-stat-gauge",
"title": "Card Stat Gauge",
"description": "A statistical card with a gauge visualization for showing metrics within a target range.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-gauge",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat-gauge.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "number"
},
{
"name": "min",
"required": false,
"type": "number"
},
{
"name": "max",
"required": false,
"type": "number"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "zones",
"required": false,
"type": "CardStatGaugeZone[]"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Data Display/CardStatGauge",
"stories": [
{
"name": "Default",
"description": "Standard semi-circular SVG gauge showing an NPS score of 78 out of 100 with default color zones.",
"args": "{\n label: \"NPS Score\",\n value: 78,\n format: \"integer\",\n decimals: 0,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n min: 0,\n max: 100,\n description: \"Promoters vs detractors\",\n size: \"sm\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard semi-circular SVG gauge showing an NPS score of 78 out of 100 with default color zones.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying four CardStatGauge placeholders while data is being fetched.",
"args": "{\n label: \"NPS Score\",\n value: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying four CardStatGauge placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing four gauge cards with dash placeholders when no data is available.",
"args": "{\n label: \"NPS Score\",\n value: 0,\n empty: true,\n description: \"Awaiting survey responses\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing four gauge cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatGauge component with various metrics.",
"args": "{ label: \"Gauge\", value: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatGauge component with various metrics.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v}%`}\n description=\"Production cluster avg\"\n icon={CpuIcon}\n size={size}\n />\n `${v} pts`}\n description=\"Story points per sprint\"\n size={size}\n />\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v}%`}\n description=\"Production cluster avg\"\n icon={CpuIcon}\n size={size}\n />\n `${v} pts`}\n description=\"Story points per sprint\"\n size={size}\n />\n
\n
\n ))}\n
\n `${v}%`}\n description=\"Production cluster avg\"\n icon={CpuIcon}\n zones={[\n { label: \"Low\", color: \"#10b981\", max: 50 },\n { label: \"Medium\", color: \"#f59e0b\", max: 80 },\n { label: \"High\", color: \"#f97316\", max: 95 },\n { label: \"Critical\", color: \"#ef4444\", max: 100 },\n ]}\n />\n `${v} pts`}\n description=\"Story points per sprint\"\n zones={[\n { label: \"Behind\", color: \"#ef4444\", max: 25 },\n { label: \"On track\", color: \"#f59e0b\", max: 50 },\n { label: \"Ahead\", color: \"#10b981\", max: 100 },\n ]}\n />\n
\n ),",
"code": "\n `${v}%`}\n description=\"Production cluster avg\"\n icon={CpuIcon}\n zones={[\n { label: \"Low\", color: \"#10b981\", max: 50 },\n { label: \"Medium\", color: \"#f59e0b\", max: 80 },\n { label: \"High\", color: \"#f97316\", max: 95 },\n { label: \"Critical\", color: \"#ef4444\", max: 100 },\n ]}\n />\n `${v} pts`}\n description=\"Story points per sprint\"\n zones={[\n { label: \"Behind\", color: \"#ef4444\", max: 25 },\n { label: \"On track\", color: \"#f59e0b\", max: 50 },\n { label: \"Ahead\", color: \"#10b981\", max: 100 },\n ]}\n />\n
"
}
]
},
{
"name": "ds-card-stat-heatbar",
"title": "Card Stat Heatbar",
"description": "A statistical card with a segmented heatbar visualization for multi-zone metric display.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-heatbar",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"progress",
"skeleton"
],
"files": [
"components/ds/card-stat-heatbar.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "number"
},
{
"name": "min",
"required": false,
"type": "number"
},
{
"name": "max",
"required": false,
"type": "number"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "zones",
"required": false,
"type": "CardStatHeatbarZone[]"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Data Display/CardStatHeatbar",
"stories": [
{
"name": "Default",
"description": "Standard segmented color bar showing customer satisfaction at 87 with a triangle pointer and tooltip on hover.",
"args": "{\n label: \"Customer Satisfaction\",\n value: 87,\n format: \"integer\",\n decimals: 0,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n description: \"Based on 2,847 responses this month\",\n icon: HeartIcon,\n size: \"sm\",\n min: 0,\n max: 100,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard segmented color bar showing customer satisfaction at 87 with a triangle pointer and tooltip on hover.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying four CardStatHeatbar placeholders while data is being fetched.",
"args": "{\n label: \"Customer Satisfaction\",\n value: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying four CardStatHeatbar placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing four heatbar cards with dash placeholders when no data is available.",
"args": "{\n label: \"Customer Satisfaction\",\n value: 0,\n empty: true,\n icon: HeartIcon,\n description: \"Based on survey responses\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing four heatbar cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatHeatbar component with custom zone configurations.",
"args": "{ label: \"Heatbar\", value: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatHeatbar component with custom zone configurations.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v}s`}\n description=\"Core Web Vitals average\"\n icon={ZapIcon}\n zones={[\n { label: \"Fast\", color: \"#10b981\", max: 25 },\n { label: \"OK\", color: \"#3b82f6\", max: 50 },\n { label: \"Slow\", color: \"#f59e0b\", max: 75 },\n { label: \"Poor\", color: \"#ef4444\", max: 100 },\n ]}\n size={size}\n />\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n `${v}s`}\n description=\"Core Web Vitals average\"\n icon={ZapIcon}\n zones={[\n { label: \"Fast\", color: \"#10b981\", max: 25 },\n { label: \"OK\", color: \"#3b82f6\", max: 50 },\n { label: \"Slow\", color: \"#f59e0b\", max: 75 },\n { label: \"Poor\", color: \"#ef4444\", max: 100 },\n ]}\n size={size}\n />\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
},
{
"name": "AllHeatbars",
"description": "Demonstrates four heatbar configurations — customer satisfaction, page load speed, security score, and SLA compliance.",
"args": "{\n label: \"Heatbar\",\n value: 0,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Demonstrates four heatbar configurations — customer satisfaction, page load speed, security score, and SLA compliance.\",\n },\n },\n },\n render: () => (\n \n `${v}s`}\n description=\"Core Web Vitals average\"\n icon={ZapIcon}\n zones={[\n { label: \"Fast\", color: \"#10b981\", max: 25 },\n { label: \"OK\", color: \"#3b82f6\", max: 50 },\n { label: \"Slow\", color: \"#f59e0b\", max: 75 },\n { label: \"Poor\", color: \"#ef4444\", max: 100 },\n ]}\n />\n
\n ),",
"code": "\n `${v}s`}\n description=\"Core Web Vitals average\"\n icon={ZapIcon}\n zones={[\n { label: \"Fast\", color: \"#10b981\", max: 25 },\n { label: \"OK\", color: \"#3b82f6\", max: 50 },\n { label: \"Slow\", color: \"#f59e0b\", max: 75 },\n { label: \"Poor\", color: \"#ef4444\", max: 100 },\n ]}\n />\n
"
}
]
},
{
"name": "ds-card-stat-highlight",
"title": "Card Stat Highlight",
"description": "A high-emphasis statistical card with a colored background for key metric prominence.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-highlight",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat-highlight.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "string | number"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "trend",
"required": false,
"type": "CardStatTrend | boolean"
},
{
"name": "trendValue",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
},
{
"name": "background",
"required": false,
"type": "string",
"description": "Override card background via CSS token `--card-highlight-background`.\nAccepts any CSS color or `var(--my-token)`."
},
{
"name": "color",
"required": false,
"type": "string",
"description": "Override card text color via CSS token `--card-highlight-color`."
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"primary\" | \"emerald\" | \"amber\" | \"rose\" | \"violet\" | \"sky\" | \"white\"",
"options": [
"primary",
"emerald",
"amber",
"rose",
"violet",
"sky",
"white"
],
"default": "primary"
}
],
"storyTitle": "Data Display/CardStatHighlight",
"stories": [
{
"name": "Default",
"description": "Standard hero KPI card with primary variant showing total revenue, up trend, and quarterly comparison.",
"args": "{\n label: \"Total Revenue\",\n value: 2400000,\n format: \"currency\",\n decimals: 2,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n trend: \"up\",\n trendValue: \"+18%\",\n description: \"vs last quarter\",\n icon: DollarSignIcon,\n variant: \"primary\",\n size: \"sm\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard hero KPI card with primary variant showing total revenue, up trend, and quarterly comparison.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying six CardStatHighlight placeholders across all color variants while data is being fetched.",
"args": "{\n label: \"Total Revenue\",\n value: 0,\n loading: true,\n variant: \"primary\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying six CardStatHighlight placeholders across all color variants while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing six hero cards across all color variants with dash placeholders when no data is available.",
"args": "{\n label: \"Total Revenue\",\n value: 0,\n empty: true,\n variant: \"primary\",\n icon: DollarSignIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing six hero cards across all color variants with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatHighlight component with primary, emerald, and violet variants.",
"args": "{ label: \"Metric\", value: 0 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatHighlight component with primary, emerald, and violet variants.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
},
{
"name": "BannerKPI",
"description": "Full-width hero KPI in emerald variant showing Q4 total revenue with 18% year-over-year growth and a trend description.",
"args": "{\n label: \"Total Revenue — Q4 2024\",\n value: 2400000,\n format: \"currency\",\n trend: \"up\",\n trendValue: \"+18% YoY\",\n description: \"ahead of forecast\",\n icon: TrendingUpIcon,\n variant: \"emerald\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Full-width hero KPI in emerald variant showing Q4 total revenue with 18% year-over-year growth and a trend description.\",\n },\n },\n },"
},
{
"name": "ColorTokens",
"description": "The `background` and `color` props accept any CSS color or `var(--my-token)`. They set `--card-highlight-background` and `--card-highlight-color` as CSS custom properties and apply via `bg-(--card-highlight-background)` and `text-(--card-highlight-color)` — escaping the 7-variant enum for per-instance customization.",
"args": "{ label: \"Custom KPI\", value: 12847 },\n render: () => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"The `background` and `color` props accept any CSS color or `var(--my-token)`. They set `--card-highlight-background` and `--card-highlight-color` as CSS custom properties and apply via `bg-(--card-highlight-background)` and `text-(--card-highlight-color)` — escaping the 7-variant enum for per-instance customization.\",\n },\n },\n },",
"code": "\n
"
}
]
},
{
"name": "ds-card-stat-list",
"title": "Card Stat List",
"description": "A statistical card containing a list of labeled items with icons and trend indicators.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-list",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat-list.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "items",
"required": true,
"type": "CardStatListItem[]"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Data Display/CardStatList",
"stories": [
{
"name": "Default",
"description": "Standard stacked metrics card displaying five performance indicators with trend icons and color-coded values.",
"args": "{\n label: \"Performance Overview\",\n icon: BarChart2Icon,\n size: \"sm\",\n items: [\n {\n label: \"Sessions\",\n value: 57891,\n format: \"integer\",\n trend: \"up\",\n trendValue: \"+12%\",\n },\n {\n label: \"Bounce Rate\",\n value: 0.342,\n format: \"percent\",\n decimals: 1,\n trend: \"down\",\n trendValue: \"−3pts\",\n },\n {\n label: \"Avg. Duration\",\n value: \"3m 42s\",\n trend: \"up\",\n trendValue: \"+8%\",\n },\n {\n label: \"Conversions\",\n value: 1284,\n format: \"integer\",\n trend: \"up\",\n trendValue: \"+8%\",\n },\n {\n label: \"Revenue / Session\",\n value: 2.15,\n format: \"currency\",\n trend: \"neutral\",\n trendValue: \"0%\",\n },\n ],\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard stacked metrics card displaying five performance indicators with trend icons and color-coded values.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying two CardStatList placeholders while data is being fetched.",
"args": "{\n label: \"Performance Overview\",\n items: [],\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying two CardStatList placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing two list cards with dash placeholders when no data is available.",
"args": "{\n label: \"Performance Overview\",\n items: [],\n empty: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing two list cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatList component with five performance metrics.",
"args": "{ label: \"Metric\", items: [] },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatList component with five performance metrics.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing three progress cards with dash placeholders when no data is available.",
"args": "{\n label: \"Monthly Orders\",\n value: 0,\n goal: 100,\n empty: true,\n icon: ShoppingCartIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing three progress cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatProgress component with orders, revenue, and customer goals.",
"args": "{ label: \"Goal\", value: 0, goal: 100 },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatProgress component with orders, revenue, and customer goals.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
}
]
},
{
"name": "ds-card-stat-sparkline",
"title": "Card Stat Sparkline",
"description": "A statistical card with an inline sparkline chart for visual trend representation.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stat-sparkline",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"card-stat-shared",
"card",
"skeleton"
],
"files": [
"components/ds/card-stat-sparkline.tsx"
],
"props": [
{
"name": "label",
"required": true,
"type": "string"
},
{
"name": "value",
"required": true,
"type": "string | number"
},
{
"name": "data",
"required": false,
"type": "number[]"
},
{
"name": "trend",
"required": false,
"type": "CardStatTrend | boolean"
},
{
"name": "trendValue",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType"
},
{
"name": "size",
"required": false,
"type": "CardStatSize"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "empty",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Data Display/CardStatSparkline",
"stories": [
{
"name": "Default",
"description": "Standard sparkline card showing weekly sessions with an upward Catmull-Rom SVG line chart and trend badge.",
"args": "{\n label: \"Weekly Sessions\",\n value: 57891,\n format: \"integer\",\n decimals: 0,\n locale: \"en-US\",\n currency: \"USD\",\n abbreviate: false,\n data: WEEKLY_SESSIONS,\n trend: \"up\",\n trendValue: \"+5.2% vs last week\",\n icon: EyeIcon,\n size: \"sm\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Standard sparkline card showing weekly sessions with an upward Catmull-Rom SVG line chart and trend badge.\",\n },\n },\n },"
},
{
"name": "PercentLocale",
"description": "Regression check: `value` is a 0-1 fraction rendered with `format=\"percent\"`. The two cards use the same value with different `locale` — the headline must respect the decimal separator (\"32,4%\" for pt-BR vs \"32.4%\" for en-US).",
"args": "{\n label: \"Bounce Rate\",\n value: 0.324,\n data: WEEKLY_BOUNCE,\n },\n parameters: {\n docs: {\n description: {\n story:\n 'Regression check: `value` is a 0-1 fraction rendered with `format=\"percent\"`. The two cards use the same value with different `locale` — the headline must respect the decimal separator (\"32,4%\" for pt-BR vs \"32.4%\" for en-US).',\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Loading",
"description": "Loading skeleton state displaying four CardStatSparkline placeholders while data is being fetched.",
"args": "{\n label: \"Weekly Sessions\",\n value: 0,\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading skeleton state displaying four CardStatSparkline placeholders while data is being fetched.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "EmptyState",
"description": "Empty state showing four sparkline cards with dash placeholders when no data is available.",
"args": "{\n label: \"Weekly Sessions\",\n value: 0,\n empty: true,\n icon: EyeIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Empty state showing four sparkline cards with dash placeholders when no data is available.\",\n },\n },\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "AllSizes",
"description": "Comparison across sm, md, and lg size presets for the CardStatSparkline component with sessions, revenue, orders, and bounce rate.",
"args": "{ label: \"Metric\", value: 0, data: [] },\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison across sm, md, and lg size presets for the CardStatSparkline component with sessions, revenue, orders, and bounce rate.\",\n },\n },\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n {`size=\"${size}\"`}\n
\n
\n
\n
\n ))}\n
\n
\n ),",
"code": "\n
"
}
]
},
{
"name": "ds-card-stats",
"title": "Card Stats (All)",
"description": "A portfolio of all statistical display cards: CardStat, CardStatCompact, CardStatProgress, CardStatComparison, CardStatSparkline, CardStatHighlight, CardStatList, CardStatGauge, and CardStatHeatbar.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/card-stats",
"dependencies": [],
"registryDependencies": [
"ds-card-stat",
"ds-card-stat-compact",
"ds-card-stat-progress",
"ds-card-stat-comparison",
"ds-card-stat-sparkline",
"ds-card-stat-highlight",
"ds-card-stat-list",
"ds-card-stat-gauge",
"ds-card-stat-heatbar"
],
"files": [
"components/ds/card-stats.tsx"
],
"storyTitle": "Data Display/CardStatsDashboard",
"props": [],
"stories": [
{
"name": "Dashboard",
"description": "Full dashboard layout combining all CardStat variants — compact counters, sparklines, comparison, progress, gauge, heatbar, and list components in a realistic grid.",
"code": "\n
\n {/* Banner KPI */}\n
\n\n {/* Row 1 — compact counters */}\n
\n
\n\n {/* Row 2 — sparklines */}\n
\n
\n\n {/* Row 3 — comparison + progress */}\n
\n
\n\n {/* Row 4 — gauge + heatbar + list */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n {/* ── Row 5 — Mini Icon Cards ── */}\n
\n Mini Icon Cards\n \n
\n
\n
\n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "Cards",
"description": "",
"args": "{\n variant: \"cards\",\n slidesPerView: { sm: 1, md: 2, lg: 3 },\n showDots: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => (\n \n {i + 1} \n \n Card item {i + 1}\n \n \n ))}\n \n ),"
},
{
"name": "Showcase",
"description": "",
"args": "{\n variant: \"showcase\",\n navPosition: \"overlay\",\n showDots: true,\n dotPosition: \"overlay\",\n navVariant: \"primary\",\n },\n render: (args) => (\n \n {Array.from({ length: 5 }).map((_, i) => (\n \n Showcase {i + 1}\n \n ))}\n \n ),"
},
{
"name": "Minimal",
"description": "",
"args": "{ variant: \"minimal\", showDots: true },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "Autoplay",
"description": "",
"args": "{\n variant: \"default\",\n autoplayInterval: 3000,\n loop: true,\n showDots: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "WithProgress",
"description": "",
"args": "{\n variant: \"default\",\n showProgress: true,\n showDots: true,\n loop: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "PrimaryNav",
"description": "",
"args": "{\n variant: \"default\",\n navVariant: \"primary\",\n showDots: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "SecondaryNav",
"description": "",
"args": "{\n variant: \"default\",\n navVariant: \"secondary\",\n showDots: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "Vertical",
"description": "",
"args": "{\n variant: \"default\",\n orientation: \"vertical\",\n showDots: true,\n },\n render: (args) => (\n \n
\n {Array.from({ length: 6 }).map((_, i) => (\n \n {i + 1}\n \n {Array.from({ length: 9 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true, loadingSlideCount: 4 },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
},
{
"name": "OverlayDots",
"description": "",
"args": "{\n variant: \"default\",\n dotPosition: \"overlay\",\n showDots: true,\n },\n render: (args) => (\n \n {Array.from({ length: 6 }).map((_, i) => slide(i))}\n \n ),"
}
]
},
{
"name": "ds-cascader",
"title": "Cascader",
"description": "Seleção em cascata níveis — ReUI Cascader.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/cascader",
"dependencies": [],
"registryDependencies": [
"popover",
"button"
],
"files": [
"components/ds/cascader.tsx"
],
"props": [
{
"name": "options",
"required": true,
"type": "CascaderOption[]"
},
{
"name": "value",
"required": false,
"type": "string[]"
},
{
"name": "onValueChange",
"required": false,
"type": "(value: string[]) => void"
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Form/Cascader",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n options: [\n {\n label: \"Brazil\",\n value: \"br\",\n children: [\n { label: \"SP\", value: \"sp\" },\n { label: \"RJ\", value: \"rj\" },\n ],\n },\n { label: \"USA\", value: \"us\", children: [{ label: \"NY\", value: \"ny\" }] },\n ],\n },"
}
]
},
{
"name": "ds-changelog",
"title": "Changelog",
"description": "Visualização estruturada de release notes com categorização semântica e timeline de versões.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/changelog",
"dependencies": [
"date-fns",
"lucide-react"
],
"registryDependencies": [
"badge",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/changelog.tsx"
],
"props": [
{
"name": "releases",
"required": true,
"type": "ChangelogRelease[]",
"description": "Release list in descending chronological order."
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Loading state."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization setting."
}
],
"storyTitle": "Data Display/Changelog",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n locale: \"pt-BR\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(canvas.getByText(\"v1.11.0\")).toBeInTheDocument()\n await expect(canvas.getByText(\"v1.10.0\")).toBeInTheDocument()\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n loading: true,\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n
\n \n pt-BR:\n \n
\n
\n \n en-US:\n \n
\n
\n
\n ),"
}
]
},
{
"name": "ds-comparison",
"title": "Comparison",
"description": "Before/after slider — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/comparison",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/comparison.tsx"
],
"props": [
{
"name": "before",
"required": true,
"type": "string"
},
{
"name": "after",
"required": true,
"type": "string"
},
{
"name": "beforeLabel",
"required": false,
"type": "string"
},
{
"name": "afterLabel",
"required": false,
"type": "string"
},
{
"name": "altBefore",
"required": false,
"type": "string"
},
{
"name": "altAfter",
"required": false,
"type": "string"
}
],
"storyTitle": "Data Display/Comparison",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n before: \"https://picsum.photos/600/400?1\",\n after: \"https://picsum.photos/600/400?2\",\n },"
}
]
},
{
"name": "ds-confetti",
"description": "Confetti animation with 4 presets. Also exports useConfetti hook.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/confetti",
"dependencies": [
"canvas-confetti"
],
"registryDependencies": [],
"files": [
"components/ds/confetti.tsx"
],
"storyTitle": "Feedback/Confetti",
"props": [
{
"name": "variant",
"control": "inline-radio",
"options": [
"burst",
"fireworks",
"rain",
"sides"
]
}
],
"stories": [
{
"name": "WithHook",
"description": "Use the `useConfetti()` hook for programmatic control.",
"code": "\n
Click a button to fire
\n
\n {([\"burst\", \"fireworks\", \"rain\", \"sides\"] as ConfettiVariant[]).map(\n (v) => (\n fire(v)} variant=\"outline\">\n 🎉 {v}\n \n )\n )}\n
\n
` — fires when `trigger` flips to `true`.",
"code": " setTrigger(false)}\n >\n {\n setTrigger(false)\n requestAnimationFrame(() => setTrigger(true))\n }}\n >\n 🎊 Celebrate!\n \n "
},
{
"name": "AllVariants",
"description": "",
"code": "\n fire(\"burst\")}>\n 🎉 Burst\n \n fire(\"fireworks\")}>\n 🎆 Fireworks (2s)\n \n fire(\"rain\")}>\n 🌧️ Rain\n \n fire(\"sides\")}>\n 🎊 Sides\n \n
"
},
{
"name": "CustomColors",
"description": "",
"code": "\n fire(\"burst\", {\n colors: [\"#6366f1\", \"#8b5cf6\", \"#a78bfa\"],\n particleCount: 120,\n spread: 90,\n })\n }\n >\n 💜 LEMA Colors\n "
}
]
},
{
"name": "ds-confirm-dialog",
"title": "Confirm Dialog",
"description": "Diálogo de confirmação com typed confirmation para ações irreversíveis de alto risco.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/confirm-dialog",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"dialog",
"button",
"input",
"spinner",
"ui-i18n"
],
"files": [
"components/ds/confirm-dialog.tsx"
],
"props": [
{
"name": "open",
"required": false,
"type": "boolean",
"description": "Controlled open state."
},
{
"name": "onOpenChange",
"required": false,
"type": "(open: boolean) => void",
"description": "Callback fired on open change."
},
{
"name": "title",
"required": true,
"type": "React.ReactNode",
"description": "Dialog title heading."
},
{
"name": "description",
"required": true,
"type": "React.ReactNode",
"description": "Detailed explanation of what will be affected."
},
{
"name": "confirmWord",
"required": false,
"type": "string",
"description": "Target word user must type to unlock confirmation."
},
{
"name": "requireTyping",
"required": false,
"type": "boolean",
"description": "Whether typed confirmation is enforced."
},
{
"name": "intent",
"required": false,
"type": "\"destructive\" | \"warning\"",
"description": "Visual risk intent."
},
{
"name": "onConfirm",
"required": true,
"type": "() => void | Promise",
"description": "Action executed upon confirmation."
},
{
"name": "onCancel",
"required": false,
"type": "() => void",
"description": "Action executed upon cancellation."
},
{
"name": "confirmLabel",
"required": false,
"type": "string",
"description": "Custom label for confirm button."
},
{
"name": "cancelLabel",
"required": false,
"type": "string",
"description": "Custom label for cancel button."
},
{
"name": "trigger",
"required": false,
"type": "React.ReactNode",
"description": "Optional custom trigger element."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization locale."
},
{
"name": "className",
"required": false,
"type": "string",
"description": "Extra styling on modal content."
}
],
"storyTitle": "Feedback/ConfirmDialog",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Excluir Dados da Simulação\",\n description: \"Esta ação não pode ser desfeita.\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n const trigger = canvas.getByRole(\"button\")\n await expect(trigger).toBeInTheDocument()\n await userEvent.click(trigger)\n // Dialog opens in document.body\n const dialogHeading = await within(document.body).findByText(\n \"Excluir Dados da Simulação\"\n )\n await expect(dialogHeading).toBeInTheDocument()\n },"
},
{
"name": "SpecificResourceName",
"description": "",
"args": "{\n title: \"Revogar Chave de API de Produção\",\n description:\n \"Todas as requisições ativas usando este token serão interrompidas imediatamente.\",\n confirmWord: \"api_live_lema_prod\",\n },"
},
{
"name": "WarningIntent",
"description": "",
"args": "{\n intent: \"warning\",\n title: \"Interromper Conexão com o Cluster\",\n description:\n \"O cluster entrará em modo offline durante a janela de manutenção.\",\n confirmWord: \"OFFLINE\",\n },"
},
{
"name": "WithoutTypingRequirement",
"description": "",
"args": "{\n requireTyping: false,\n title: \"Redefinir Configuração Padrão\",\n description:\n \"Deseja retornar as opções de visualização aos valores originais de fábrica?\",\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n pt-BR}\n title=\"Excluir\"\n description=\"Confirmação em Português\"\n onConfirm={() => {}}\n />\n en-US}\n title=\"Delete\"\n description=\"Confirmation in English\"\n onConfirm={() => {}}\n />\n es-ES}\n title=\"Eliminar\"\n description=\"Confirmación en Español\"\n onConfirm={() => {}}\n />\n fr-FR}\n title=\"Supprimer\"\n description=\"Confirmation en Français\"\n onConfirm={() => {}}\n />\n
"
}
]
},
{
"name": "ds-contact-bento",
"title": "ContactBento",
"description": "Grid bento com o formulário de contato como tile principal e tiles satélite — composto de ds-bento-grid e ds-contact-form.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/contact-bento",
"dependencies": [],
"registryDependencies": [
"ds-bento-grid",
"ds-contact-form"
],
"files": [
"components/ds/contact-bento.tsx"
],
"props": [
{
"name": "formProps",
"required": false,
"type": "ContactFormProps"
},
{
"name": "children",
"required": false,
"type": "React.ReactNode",
"description": "Additional `BentoGridItem` tiles rendered beside the form (office locations, stats...)."
}
],
"storyTitle": "Contact/ContactBento",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n \n \n \n \n "
}
]
},
{
"name": "ds-contact-channels",
"title": "ContactChannels",
"description": "Linha de cartões de canal de contato (e-mail, telefone, chat) — composto de ds-card-icon.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/contact-channels",
"dependencies": [],
"registryDependencies": [
"ds-card-icon"
],
"files": [
"components/ds/contact-channels.tsx"
],
"props": [
{
"name": "channels",
"required": true,
"type": "ContactChannel[]"
}
],
"storyTitle": "Contact/ContactChannels",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
}
]
},
{
"name": "ds-contact-form",
"title": "ContactForm",
"description": "Formulário de contato (nome, e-mail, assunto, tópico e mensagem) com estados idle/submitting/success/error.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/contact-form",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"field",
"input",
"textarea",
"button",
"ds-pill-group",
"ui-i18n"
],
"files": [
"components/ds/contact-form.tsx"
],
"props": [
{
"name": "topics",
"required": false,
"type": "ContactFormTopic[]",
"description": "Optional topic/department chips rendered above the message field."
},
{
"name": "showSubject",
"required": false,
"type": "boolean",
"description": "Shows the subject field. Defaults to true when `topics` is omitted."
},
{
"name": "onSubmit",
"required": false,
"type": "(values: ContactFormValues) => Promise | void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Contact/ContactForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "WithTopics",
"description": "",
"args": "{ topics },"
},
{
"name": "WithoutSubject",
"description": "",
"args": "{ showSubject: false },"
},
{
"name": "SubmitError",
"description": "",
"args": "{\n onSubmit: async () => false,\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as UILocale[]).map((locale) => (\n
"
}
]
},
{
"name": "ds-contact-split",
"title": "ContactSplit",
"description": "Seção de contato split com formulário de um lado e um slot flexível do outro — composto de ds-hero-section e ds-contact-form.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/contact-split",
"dependencies": [],
"registryDependencies": [
"ds-hero-section",
"ds-contact-form",
"badge"
],
"files": [
"components/ds/contact-split.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "formProps",
"required": false,
"type": "ContactFormProps"
},
{
"name": "aside",
"required": true,
"type": "React.ReactNode",
"description": "Content shown beside the form — plug in `OfficeLocations`, `TeamRoster`,\na `CardIcon` list, or plain copy, depending on the variant you need."
}
],
"storyTitle": "Contact/ContactSplit",
"stories": [
{
"name": "WithOfficeLocations",
"description": "",
"args": "{\n aside: (\n \n {offices.map((office) => (\n \n ),\n },"
},
{
"name": "WithTeam",
"description": "",
"args": "{\n aside: (\n \n {team.map((member) => (\n \n ),\n },"
}
]
},
{
"name": "ds-contribution-graph",
"title": "Contribution Graph",
"description": "Graph estilo GitHub 7x20 — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/contribution-graph",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/contribution-graph.tsx"
],
"props": [
{
"name": "data",
"required": false,
"type": "number[][] // 7 x weeks"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"storyTitle": "Data Display/ContributionGraph",
"stories": [
{
"name": "Default",
"description": "",
"args": "{}"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true }"
}
]
},
{
"name": "ds-copy-block",
"title": "CopyBlock",
"description": "Exibe um trecho de texto ou código com um botão acoplado para cópia rápida.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/copy-block",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"tooltip",
"ui-i18n"
],
"files": [
"components/ds/copy-block.tsx"
],
"props": [
{
"name": "value",
"required": true,
"type": "string",
"description": "The text to display and copy."
},
{
"name": "size",
"required": false,
"type": "CopyBlockSize",
"description": "Defines the size of the block."
},
{
"name": "truncate",
"required": false,
"type": "boolean",
"description": "Whether the text should truncate if it exceeds the container width.\nIf false, it will wrap to the next line."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization for the tooltip texts."
}
],
"storyTitle": "Data Display/CopyBlock",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n value: \"npm install @lema-ufpb/design-system\",\n size: \"md\",\n },"
},
{
"name": "AllSizes",
"description": "The component supports 3 sizes: sm, md and lg.",
"args": "{\n value: \"\",\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story: \"The component supports 3 sizes: sm, md and lg.\",\n },\n },\n },"
},
{
"name": "Locales",
"description": "",
"args": "{\n value: \"\",\n },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Truncated",
"description": "Use `truncate={true}` when the block may be in a container smaller than the content and you want to force a single line. When `false`, the text wraps to multiple lines.",
"args": "{\n value:\n \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ\",\n truncate: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Use `truncate={true}` when the block may be in a container smaller than the content and you want to force a single line. When `false`, the text wraps to multiple lines.\",\n },\n },\n },"
}
]
},
{
"name": "ds-counter",
"title": "Counter",
"description": "A precision numeric input with button controls, direct keyboard entry support, and inputProps passthrough for native HTML attributes.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/counter",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/counter.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "number"
},
{
"name": "defaultValue",
"required": false,
"type": "number"
},
{
"name": "min",
"required": false,
"type": "number"
},
{
"name": "max",
"required": false,
"type": "number"
},
{
"name": "step",
"required": false,
"type": "number"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "maxWidth",
"required": false,
"type": "string | number"
},
{
"name": "onChange",
"required": false,
"type": "(value: number) => void"
},
{
"name": "onBlur",
"required": false,
"type": "(e: React.FocusEvent) => void"
},
{
"name": "onKeyDown",
"required": false,
"type": "(e: React.KeyboardEvent) => void"
},
{
"name": "id",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "inputProps",
"required": false,
"type": "Omit< React.ComponentProps<\"input\">, | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"min\" | \"max\" | \"step\" | \"onBlur\" | \"onKeyDown\" | \"id\" | \"disabled\" | \"ref\" | \"className\" >"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"ghost\" | \"outline\"",
"options": [
"default",
"ghost",
"outline"
],
"default": "default"
}
],
"storyTitle": "Form/Counter",
"stories": [
{
"name": "Default",
"description": "Default counter with min=0, max=10, and step=1 constraints.",
"args": "{\n defaultValue: 0,\n min: 0,\n max: 10,\n step: 1,\n size: \"md\",\n variant: \"default\",\n loading: false,\n disabled: false,\n locale: \"en-US\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Default counter with min=0, max=10, and step=1 constraints.\",\n },\n },\n },"
},
{
"name": "MaxWidth",
"description": "Use `maxWidth` to cap how wide the counter grows. Accepts any valid CSS value (`px`, `%`, `rem`, etc.).",
"args": "{\n defaultValue: 5,\n min: 0,\n max: 100,\n maxWidth: \"320px\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Use `maxWidth` to cap how wide the counter grows. Accepts any valid CSS value (`px`, `%`, `rem`, etc.).\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) locale applied to the counter.",
"args": "{\n defaultValue: 0,\n min: 0,\n max: 10,\n step: 1,\n locale: \"pt-BR\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Portuguese (pt-BR) locale applied to the counter.\",\n },\n },\n },"
},
{
"name": "FluidWidth",
"description": "The counter fills its container by default. `maxWidth` constrains the growth.",
"code": "\n
\n
\n Full width (default)\n
\n
\n
\n
\n
\n
\n
\n
\n Controlled value: {count} \n
\n
\n
\n {([\"default\", \"ghost\", \"outline\"] as const).map((variant) => (\n
\n \n {variant}\n \n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n \n {size}\n \n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n {size} \n
\n ))}\n
\n
\n
\n {loading ? \"Fetching value…\" : `Loaded with value ${value}`}\n
\n
\n
\n ),",
"code": "\n
"
}
]
},
{
"name": "ds-cron-builder",
"description": "Visual cron expression builder with simple and advanced modes.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/cron-builder",
"dependencies": [],
"registryDependencies": [
"skeleton",
"button",
"label",
"input",
"badge",
"select",
"toggle-group",
"tabs",
"ui-i18n"
],
"files": [
"components/ds/cron-builder.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "string"
},
{
"name": "onChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "mode",
"required": false,
"type": "CronBuilderMode"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Form/CronBuilder",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n value: \"0 9 * * 1-5\",\n mode: \"simple\",\n },"
},
{
"name": "Advanced",
"description": "",
"args": "{\n value: \"30 14 * * 3\",\n mode: \"advanced\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n value: \"* * * * *\",\n loading: true,\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n value: \"0 0 1 * *\",\n disabled: true,\n },"
},
{
"name": "Controlled",
"description": "",
"code": "\n
\n
\n Current value: {cron} \n
\n
\n {([\"default\", \"primary\", \"muted\", \"glow\"] as const).map((tone) => (\n
\n ),",
"code": "\n {([\"default\", \"primary\", \"muted\", \"glow\"] as const).map((tone) => (\n
"
},
{
"name": "AlignLeft",
"description": "",
"args": "{\n title: \"Left aligned CTA\",\n description: \"Content aligns to the left for editorial layouts.\",\n align: \"left\",\n primaryAction: { label: \"Get started\" },\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ title: \"Loading\", loading: true }"
}
]
},
{
"name": "ds-cta-centered",
"title": "Cta Centered",
"description": "CTA centrado editorial — blockus CTA #01-08.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/cta-centered",
"dependencies": [],
"registryDependencies": [
"ds-cta"
],
"files": [
"components/ds/cta-centered.tsx"
],
"storyTitle": "CTA/CtaCentered",
"props": [],
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Build faster\",\n description: \"Drop in blocks and ship.\",\n primaryAction: { label: \"Get access\" },\n secondaryAction: { label: \"Learn more\" },\n tone: \"glow\",\n badge: \"New\",\n },"
},
{
"name": "Primary",
"description": "",
"args": "{\n title: \"Start today\",\n description: \"Trusted by 1k+ teams.\",\n primaryAction: { label: \"Try free\" },\n tone: \"primary\",\n },"
}
]
},
{
"name": "ds-cta-newsletter",
"title": "Cta Newsletter",
"description": "CTA com captura email inline — blockus #17-24.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/cta-newsletter",
"dependencies": [],
"registryDependencies": [
"ds-cta",
"input",
"button",
"ui-i18n"
],
"files": [
"components/ds/cta-newsletter.tsx"
],
"props": [
{
"name": "onSubscribe",
"required": false,
"type": "(email: string) => Promise | void"
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "disclaimer",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "CTA/CtaNewsletter",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Stay updated\",\n description: \"Subscribe for latest releases.\",\n badge: \"Newsletter\",\n },"
},
{
"name": "WithHandler",
"description": "",
"args": "{\n title: \"Join waitlist\",\n description: \"Be first to access.\",\n onSubscribe: async () => {\n await new Promise((r) => setTimeout(r, 500))\n return true\n },\n },"
},
{
"name": "Locales",
"description": "",
"args": "{ title: \"Stay updated\", description: \"Description\" },\n render: () => (\n \n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
\n ),",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
"
}
]
},
{
"name": "ds-cta-split",
"title": "Cta Split",
"description": "CTA split imagem + conteúdo — blockus #09-16.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/cta-split",
"dependencies": [],
"registryDependencies": [
"ds-cta"
],
"files": [
"components/ds/cta-split.tsx"
],
"props": [
{
"name": "imageSrc",
"required": false,
"type": "string"
},
{
"name": "imageAlt",
"required": false,
"type": "string"
},
{
"name": "reverse",
"required": false,
"type": "boolean"
}
],
"storyTitle": "CTA/CtaSplit",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Ship in hours\",\n description: \"A new way to build pages.\",\n imageSrc: \"https://picsum.photos/600/600\",\n primaryAction: { label: \"Get started\" },\n secondaryAction: { label: \"Learn more\" },\n },"
},
{
"name": "Reverse",
"description": "",
"args": "{\n title: \"Reverse layout\",\n description: \"Image on the right.\",\n imageSrc: \"https://picsum.photos/600/600\",\n reverse: true,\n primaryAction: { label: \"Explore\" },\n },"
},
{
"name": "WithoutImage",
"description": "",
"args": "{\n title: \"No image CTA\",\n description: \"Falls back to single column.\",\n primaryAction: { label: \"Contact\" },\n },"
}
]
},
{
"name": "ds-culture-gallery",
"title": "Culture Gallery",
"description": "Mosaico e grade fotográfica da cultura institucional e equipe em ação.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/culture-gallery",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/culture-gallery.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "CultureGalleryItem[]"
},
{
"name": "layout",
"required": false,
"type": "\"mosaic\" | \"grid\"",
"options": [
"mosaic",
"grid"
],
"default": "mosaic"
}
],
"stories": [
{
"name": "GridLayout",
"description": "",
"args": "{\n layout: \"grid\",\n },"
}
]
},
{
"name": "ds-cursor",
"title": "Cursor",
"description": "Cursor remoto com label para collab — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/cursor",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ds/cursor.tsx"
],
"props": [
{
"name": "name",
"required": false,
"type": "string"
},
{
"name": "color",
"required": false,
"type": "string"
},
{
"name": "x",
"required": false,
"type": "number"
},
{
"name": "y",
"required": false,
"type": "number"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Effects/Cursor",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ name: \"Ana\", x: 40, y: 40 },\n render: (args) => (\n \n
\n ),"
}
]
},
{
"name": "ds-cursor-spotlight",
"title": "CursorSpotlight",
"description": "Glow radial que segue o cursor do ponteiro, com fallback estático em prefers-reduced-motion.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/cursor-spotlight",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/cursor-spotlight.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "number",
"description": "Diameter of the glow, in pixels."
},
{
"name": "tone",
"required": false,
"type": "\"primary\" | \"violet\" | \"sky\"",
"options": [
"primary",
"violet",
"sky"
],
"default": "primary"
}
],
"storyTitle": "Data Display/CursorSpotlight",
"stories": [
{
"name": "AllTones",
"description": "",
"code": "\n {([\"primary\", \"violet\", \"sky\"] as const).map((tone) => (\n
\n {tone}
\n \n ))}\n \n GitHub\n \n ),\n },\n stats,\n chart: (\n \n Chart placeholder\n
\n ),\n table: (\n \n DataTable placeholder\n
\n ),\n },"
},
{
"name": "Inset",
"description": "",
"args": "{\n variant: \"inset\",\n sidebar: { teams, navMain, user },\n header: { title: \"Dashboard\" },\n stats,\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
},
{
"name": "WithoutSidebar",
"description": "",
"args": "{\n header: { title: \"Documents\" },\n stats,\n },"
},
{
"name": "A11y",
"description": "",
"args": "{\n sidebar: { teams, navMain, user },\n header: { title: \"Documents\" },\n stats,\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(canvas.getByText(\"Documents\")).toBeInTheDocument()\n },"
}
]
},
{
"name": "ds-dashboard-layout",
"title": "Dashboard Layout",
"description": "A base layout for complex dashboards with sidebar and header.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/dashboard-layout",
"dependencies": [
"class-variance-authority",
"cn"
],
"registryDependencies": [
"sidebar"
],
"files": [
"components/ds/dashboard-layout.tsx"
],
"props": [
{
"name": "sidebar",
"required": true,
"type": "React.ReactNode",
"description": "The sidebar component to render"
},
{
"name": "header",
"required": false,
"type": "React.ReactNode",
"description": "The global header/topbar"
},
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "The main content"
},
{
"name": "defaultOpen",
"required": false,
"type": "boolean",
"description": "Default state of the sidebar"
}
],
"storyTitle": "Layout/DashboardLayout",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n sidebar: undefined,\n header: undefined,\n children: undefined,\n },\n render: (args) => (\n Dashboard Overview
}\n >\n \n
\n \n
\n \n ),"
}
]
},
{
"name": "ds-dashbox",
"title": "Dashbox",
"description": "A structured dashboard card with collapse/expand, fullscreen, refresh, loading skeleton, status badge, and configurable body padding.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/dashbox",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"tooltip",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/dashbox.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Layout/Dashbox",
"stories": [
{
"name": "Default",
"description": "Default Dashbox with title, description, and placeholder content.",
"args": "{\n title: \"My Dashbox\",\n description: \"An example panel with simple content.\",\n size: \"md\",\n bodyPadding: \"md\",\n loading: false,\n locale: \"en-US\",\n showToolbar: true,\n showHeader: true,\n showMaximize: true,\n showMinimize: true,\n children: (\n \n Place any content here — charts, tables, metrics.\n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default Dashbox with title, description, and placeholder content.\",\n },\n },\n },"
},
{
"name": "NoHeader",
"description": "Dashbox with showHeader={false} — header, toolbar, and status badge are hidden.",
"args": "{\n showHeader: false,\n title: \"My Dashbox\",\n children: (\n \n Content without header or toolbar.\n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Dashbox with showHeader={false} — header, toolbar, and status badge are hidden.\",\n },\n },\n },"
},
{
"name": "WithStatus",
"description": "Dashbox with a live status badge in the header.",
"args": "{\n title: \"API Status\",\n status: \"live\",\n children: (\n \n Service is responding normally.\n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Dashbox with a live status badge in the header.\",\n },\n },\n },"
},
{
"name": "AllStatuses",
"description": "Comparison of all four status badges — live, warning, error, and idle.",
"code": "\n
\n \n Real-time data stream active.\n
\n \n
\n \n High latency detected in region us-east-1.\n
\n \n
\n \n Service currently unavailable.\n
\n \n
\n \n Maintenance mode active.\n
\n \n
\n \n \n {[\"Jan\", \"Feb\", \"Mar\"].map((m) => (\n
\n
{m}
\n
\n ${Math.floor(Math.random() * 500 + 100)}k\n
\n
\n ))}\n
\n Click the refresh button to see the spin animation.\n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Dashbox with a refresh button that triggers an async onRefresh callback.\",\n },\n },\n },"
},
{
"name": "LocalizedToolbar",
"description": "Toolbar labels and status badge translated to Portuguese (pt-BR).",
"args": "{\n title: \"Overview\",\n description: \"Example with locale pt-PR\",\n status: \"live\",\n locale: \"pt-BR\",\n onRefresh: async () => {\n await new Promise((r) => setTimeout(r, 800))\n },\n children: (\n \n Hover over the buttons in the top right corner to see the translated\n tooltips and status badge.\n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Toolbar labels and status badge translated to Portuguese (pt-BR).\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Loading state — the entire Dashbox body is replaced by animated skeleton placeholders.",
"args": "{\n title: \"Loading...\",\n loading: true,\n children: null,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading state — the entire Dashbox body is replaced by animated skeleton placeholders.\",\n },\n },\n },"
},
{
"name": "NoPadding",
"description": "Dashbox with bodyPadding='none' — content stretches edge-to-edge.",
"args": "{\n title: \"No Padding\",\n bodyPadding: \"none\",\n children: (\n \n \n Edge-to-edge content area\n \n
\n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Dashbox with bodyPadding='none' — content stretches edge-to-edge.\",\n },\n },\n },"
},
{
"name": "WithProgressBars",
"description": "Two Dashbox panels side-by-side containing ProgressBar components with different intents.",
"code": "\n
{\n await new Promise((r) => setTimeout(r, 800))\n }}\n >\n \n \n\n \n \n \n \n
\n Content in small size variant.
\n \n
\n Content in medium size variant.
\n \n
\n Content in large size variant.
\n \n
\n {maximized\n ? \"Chart at full height — fills the fullscreen viewport\"\n : \"Chart at standard height (220px)\"}\n \n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"`children` can be a function receiving `{ maximized, minimized }`, so content (e.g. a chart) can grow to fill the fullscreen viewport and shrink back to its standard size when restored.\",\n },\n },\n },"
}
]
},
{
"name": "ds-dashrow",
"title": "Dashrow",
"description": "Responsive layout container for dashboard panels with resizable split ratios and N-child support.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/dashrow",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"ui-i18n"
],
"files": [
"components/ds/dashrow.tsx"
],
"props": [
{
"name": "alignment",
"required": false,
"type": "DashrowAlignment",
"description": "Width ratio between children on desktop (lg+).\n- `left` — first child gets 60%, rest share 40%\n- `right` — first child gets 40%, last gets 60%\n- `equal` — all children share equally\n@default \"left\""
},
{
"name": "gap",
"required": false,
"type": "DashrowGap",
"description": "@default \"md\""
},
{
"name": "padding",
"required": false,
"type": "DashrowPadding",
"description": "@default \"none\""
},
{
"name": "storageKey",
"required": false,
"type": "string",
"description": "A unique key used to persist panel sizes in sessionStorage.\nIf omitted, sizes are not persisted across renders."
},
{
"name": "resizable",
"required": false,
"type": "boolean",
"description": "@default true"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "children",
"required": true,
"type": "ReactNode"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "position",
"required": false,
"type": "\"first\" | \"last\" | \"middle\"",
"options": [
"first",
"last",
"middle"
],
"default": "first"
}
],
"storyTitle": "Layout/Dashrow",
"stories": [
{
"name": "Default",
"description": "Default Dashrow with left-aligned split between main and side panels.",
"args": "{\n alignment: \"left\",\n gap: \"md\",\n padding: \"none\",\n resizable: true,\n locale: \"en-US\",\n children: (\n <>\n \n \n \n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default Dashrow with left-aligned split between main and side panels.\",\n },\n },\n },"
},
{
"name": "AllAlignments",
"description": "Comparison of all three alignment presets — left (60/40), right (40/60), and equal (50/50).",
"args": "{ children: null },\n render: () => (\n \n {([\"left\", \"right\", \"equal\"] as const).map((align) => (\n
\n
\n alignment="{align}"\n
\n
\n \n \n \n \n \n
\n ))}\n
\n {([\"left\", \"right\", \"equal\"] as const).map((align) => (\n
\n
\n alignment="{align}"\n
\n
\n \n \n \n \n \n
\n ))}\n
\n \n Main panel content. Charts, tables, or metrics.\n
\n \n \n \n Secondary panel with supplementary information.\n
\n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Portuguese (pt-BR) locale applied to the drag-resize tooltips.\",\n },\n },\n },"
},
{
"name": "EqualHeightStretch",
"description": "Dashrow automatically stretches the shorter panel to match the taller sibling's height.",
"args": "{\n alignment: \"left\",\n children: (\n <>\n \n \n \n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Dashrow automatically stretches the shorter panel to match the taller sibling's height.\",\n },\n },\n },"
},
{
"name": "ThreePanels",
"description": "Three panels — a divider is placed between each adjacent pair.",
"args": "{\n alignment: \"equal\",\n children: (\n <>\n \n \n \n \n \n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"Three panels — a divider is placed between each adjacent pair.\",\n },\n },\n },"
},
{
"name": "Persistent",
"description": "Resize the panels then refresh — the split is persisted in `sessionStorage`.",
"args": "{\n alignment: \"left\",\n storageKey: \"storybook-persistent-demo\",\n children: (\n <>\n \n \n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Resize the panels then refresh — the split is persisted in `sessionStorage`.\",\n },\n },\n },"
},
{
"name": "NotResizable",
"description": "With `resizable={false}`, the divider handle is hidden.",
"args": "{\n alignment: \"left\",\n resizable: false,\n children: (\n <>\n \n \n \n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story: \"With `resizable={false}`, the divider handle is hidden.\",\n },\n },\n },"
},
{
"name": "WithRealContent",
"description": "Dashrow with live content — progress bars, status badges, and refresh actions inside Dashbox panels.",
"args": "{ children: null },\n render: () => (\n \n {\n await new Promise((r) => setTimeout(r, 800))\n }}\n >\n \n \n\n \n \n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Dashrow with live content — progress bars, status badges, and refresh actions inside Dashbox panels.\",\n },\n },\n },",
"code": "\n {\n await new Promise((r) => setTimeout(r, 800))\n }}\n >\n \n \n\n \n \n \n "
},
{
"name": "GapVariants",
"description": "Comparison of all four gap presets — none, sm, md, and lg.",
"args": "{ children: null },\n render: () => (\n \n {([\"none\", \"sm\", \"md\", \"lg\"] as const).map((g) => (\n
\n
\n gap="{g}"\n
\n
\n \n \n \n \n \n
\n ))}\n
\n {([\"none\", \"sm\", \"md\", \"lg\"] as const).map((g) => (\n
\n
\n gap="{g}"\n
\n
\n \n \n \n \n \n
\n ))}\n
\n \n \n \n \n ),\n },\n globals: { viewport: { value: \"mobile1\", isRotated: false } },\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n story:\n \"On mobile (<1024px), boxes stack vertically and the divider is hidden.\",\n },\n },\n },"
},
{
"name": "Desktop",
"description": "Desktop (1024px+) — panels side-by-side with the draggable divider visible.",
"args": "{\n alignment: \"left\",\n children: (\n <>\n \n \n \n \n \n ),\n },\n globals: { viewport: { value: \"desktop\", isRotated: false } },\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n story:\n \"Desktop (1024px+) — panels side-by-side with the draggable divider visible.\",\n },\n },\n },"
}
]
},
{
"name": "ds-data-table",
"title": "Data Table",
"description": "A high-performance virtualized data table with built-in toolbar, pagination, and sorting capabilities.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/data-table",
"dependencies": [
"@tanstack/react-table",
"@tanstack/react-virtual",
"lucide-react"
],
"registryDependencies": [
"button",
"skeleton",
"ds-pagination",
"ds-search-bar",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/data-table.tsx"
],
"storyTitle": "Data Display/DataTable",
"props": [
{
"name": "size",
"control": "radio",
"options": [
"default",
"compact"
],
"default": "default"
},
{
"name": "textSize",
"control": "select",
"options": [
"xs",
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "loading",
"control": "boolean",
"default": "false"
},
{
"name": "showSearch",
"control": "boolean",
"default": "false"
},
{
"name": "showDownload",
"control": "boolean",
"default": "false"
},
{
"name": "pagination",
"control": "boolean",
"default": "false"
},
{
"name": "paginationRounded",
"control": "radio",
"options": [
"full",
"light",
"none"
],
"default": "full"
},
{
"name": "selectRows",
"control": "boolean",
"default": "false"
},
{
"name": "title",
"control": "text",
"default": ""
},
{
"name": "subtitle",
"control": "text",
"default": ""
},
{
"name": "voiceSearch",
"control": "boolean",
"default": "false"
},
{
"name": "rounded",
"control": "boolean",
"default": "true"
},
{
"name": "manualPagination",
"control": "boolean",
"default": "false"
},
{
"name": "manualSorting",
"control": "boolean",
"default": "false"
},
{
"name": "locale",
"control": "inline-radio",
"options": [
"en-US",
"pt-BR",
"es-ES",
"fr-FR"
],
"default": "en-US"
}
],
"stories": [
{
"name": "Default",
"description": "Default data table with simple column definitions and 20 student records.",
"args": "{\n ...base,\n loading: false,\n size: \"default\",\n rounded: true,\n showSearch: false,\n pagination: false,\n manualPagination: false,\n defaultPageSize: 10,\n defaultGlobalFilter: \"\",\n selectRows: false,\n stickyColumns: 0,\n showDownload: false,\n voiceSearch: false,\n hasMore: false,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default data table with simple column definitions and 20 student records.\",\n },\n },\n },"
},
{
"name": "TitleAndSubtitle",
"description": "Data table with title and subtitle text displayed above the table.",
"args": "{\n ...base,\n title: \"Enrolled Students\",\n subtitle: \"Academic term 2025.1 — Department of Computing · UFPB\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Data table with title and subtitle text displayed above the table.\",\n },\n },\n },"
},
{
"name": "FluidLastColumn",
"description": "Omit `width` from a column to make it fill all remaining space via `flexGrow: 1`.\nEvery other column keeps its fixed size (`flexGrow: 0`); the fluid column absorbs\nwhatever width the container provides — with no empty gap at the right edge.\n\n```tsx\n// Fixed width — rigid, no growth\ncol({ key: 'name', label: 'Name', width: 190 })\n\n// No width — grows to fill remaining space\ncol({ key: 'city', label: 'City' })\n```\n\nHeader and body cells use the same `colStyle()` function, so they grow in perfect sync.\nThe resize handle is only rendered for fixed-width columns, so the fluid column stays\nclean. Resize any adjacent column and the fluid column adjusts automatically.",
"args": "{\n data: STUDENTS_20 as unknown as object[],\n columns: FLUID_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Enrolled Students\",\n subtitle:\n \"Last column (City) has no width — it fills the remaining table width\",\n height: 400,\n },"
},
{
"name": "WithSearch",
"description": "Global filter powered by TanStack Table's `getFilteredRowModel`. Searches across all columns simultaneously and resets the page index to 0 on each keystroke.",
"args": "{\n ...base,\n title: \"Real-time Search\",\n subtitle: \"Filters across every column as you type\",\n showSearch: true,\n },"
},
{
"name": "VoiceSearch",
"description": "Enables the microphone button inside the search bar via `voiceSearch`. Uses the browser's Web Speech API — the button is hidden automatically in unsupported environments. Click the mic to dictate; the transcribed text is applied to the global filter in real time.",
"args": "{\n ...base,\n title: \"Voice Search\",\n subtitle: \"Click the microphone icon and speak to filter rows\",\n showSearch: true,\n voiceSearch: true,\n },"
},
{
"name": "Sortable",
"description": "Set `enableSorting: true` on a column (or `sortable: true` via `col()`). Clicking the header cycles **asc → desc → none** via TanStack Table's `getSortedRowModel`.\n\n**Visual feedback uses only semantic tokens — no hardcoded colours:**\n\n- **Hover** → `hover:text-foreground` + `hover:border-b-2 hover:border-ring`\n- **Sorted (asc/desc)** → `text-primary` + `border-b-2 border-primary`\n- **Sort icon** → `opacity-100` when active, `opacity-60` when idle\n- **Body cells** → `bg-muted/30` tint on the active sorted column (non-sticky only)\n\nBecause every token is resolved from `globals.css` at runtime, the hover and sorted states\nadapt automatically to light/dark mode and any theme variant without extra CSS.",
"args": "{\n ...base,\n title: \"Sortable columns\",\n subtitle:\n \"Click a header to sort — click again to reverse, third click to clear\",\n },"
},
{
"name": "ManualSorting",
"description": "With `manualSorting`, the table stops sorting rows itself — it only tracks the clicked column/direction via the controlled `sorting` prop and reports changes through `onSortingChange`.\n\nThe consumer owns the actual ordering (e.g. re-fetching from a server with `?sort=` params) and passes back already-sorted `data`. Mirrors the `manualPagination` / `pageIndex` / `onPageChange` pattern.",
"args": "{ data: [], columns: [] },\n render: () => {\n const [sorting, setSorting] = React.useState([\n { id: \"name\", desc: false },\n ])\n\n const sortedData = React.useMemo(() => {\n const [sort] = sorting\n if (!sort) return STUDENTS_20\n const copy = [...STUDENTS_20]\n copy.sort((a, b) => {\n const av = a[sort.id as keyof Student]\n const bv = b[sort.id as keyof Student]\n const cmp = av < bv ? -1 : av > bv ? 1 : 0\n return sort.desc ? -cmp : cmp\n })\n return copy\n }, [sorting])\n\n return (\n []}\n height={400}\n title=\"Students — server-sorted\"\n subtitle=\"`data` is pre-sorted by the consumer; the table only reflects the active sort\"\n manualSorting\n sorting={sorting}\n onSortingChange={setSorting}\n />\n )\n },",
"code": "[]}\n height={400}\n title=\"Students — server-sorted\"\n subtitle=\"`data` is pre-sorted by the consumer; the table only reflects the active sort\"\n manualSorting\n sorting={sorting}\n onSortingChange={setSorting}\n />"
},
{
"name": "WithPagination",
"description": "Uses TanStack Table's `getPaginationRowModel`. Combine with `pageSizeOptions` for a per-page selector. Works seamlessly with the global search filter.",
"args": "{\n ...base,\n title: \"Students — paginated\",\n pagination: true,\n defaultPageSize: 5,\n pageSizeOptions: [5, 10, 20],\n height: 280,\n },"
},
{
"name": "PaginationPtBR",
"description": "Paginated table with `locale=\"pt-BR\"` — button labels and the row counter are resolved automatically from `UI_I18N[\"pt-BR\"]` with no manual `labels` prop.",
"args": "{\n data: STUDENTS_200 as unknown as object[],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Students — paginated\",\n subtitle: 'locale=\"pt-BR\" — labels resolved automatically from UI_I18N',\n pagination: true,\n defaultPageSize: 10,\n pageSizeOptions: [5, 10, 20],\n height: 400,\n locale: \"pt-BR\",\n },"
},
{
"name": "PaginationRoundedFull",
"description": "Pagination buttons with `paginationRounded=\"full\"` — fully rounded (pill-style, default).",
"args": "{\n data: STUDENTS_200 as unknown as object[],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Rounded Full\",\n subtitle: 'paginationRounded=\"full\" — pill-shaped buttons',\n pagination: true,\n defaultPageSize: 10,\n height: 400,\n paginationRounded: \"full\",\n },"
},
{
"name": "PaginationRoundedLight",
"description": "Pagination buttons with `paginationRounded=\"light\"` — slightly rounded corners.",
"args": "{\n data: STUDENTS_200 as unknown as object[],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Rounded Light\",\n subtitle: 'paginationRounded=\"light\" — subtle rounding',\n pagination: true,\n defaultPageSize: 10,\n height: 400,\n paginationRounded: \"light\",\n },"
},
{
"name": "PaginationRoundedNone",
"description": "Pagination buttons with `paginationRounded=\"none\"` — square corners.",
"args": "{\n data: STUDENTS_200 as unknown as object[],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Rounded None\",\n subtitle: 'paginationRounded=\"none\" — square buttons',\n pagination: true,\n defaultPageSize: 10,\n height: 400,\n paginationRounded: \"none\",\n },"
},
{
"name": "SearchAndPagination",
"description": "Combined global search and pagination — filtering resets the page index on each keystroke.",
"args": "{\n ...base,\n title: \"Students\",\n subtitle: \"Search + pagination in a single table\",\n showSearch: true,\n pagination: true,\n defaultPageSize: 8,\n pageSizeOptions: [5, 8, 15, 20],\n height: 380,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Combined global search and pagination — filtering resets the page index on each keystroke.\",\n },\n },\n },"
},
{
"name": "WithCustomCells",
"description": "Mix `col()` helpers with native `ColumnDef` objects for full control.\n\n- **GPA** — colour-coded: green ≥ 8.5, amber < 7\n- **Absences** — red when ≥ 10\n- **Status** — `Badge` with an icon derived from a status map\n- **Scholar** — checkmark icon or em dash",
"args": "{\n data: STUDENTS_20 as unknown as object[],\n columns: RICH_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Student Overview\",\n subtitle: \"Colour-coded GPA · status badge · scholarship icon\",\n showSearch: true,\n height: 420,\n },"
},
{
"name": "RowSelection",
"description": "Enable `selectRows` to inject a checkbox column managed by TanStack Table's `rowSelection` state.\nThe header checkbox selects/deselects the entire current page and shows an indeterminate state when partially selected.\n\nUse `onSelectedRowsChange` to receive the array of selected row objects whenever the selection changes.\nThe callback fires synchronously via a `useEffect` scoped to `rowSelection` state, so it reflects\nthe current page's selection after every toggle.\n\n```tsx\nconst [selected, setSelected] = React.useState([])\n\n\n```",
"args": "{ data: [], columns: [] },\n render: () => {\n const [selected, setSelected] = React.useState([])\n return (\n \n
setSelected(rows as Student[])}\n height={400}\n />\n \n {selected.length === 0 ? (\n \n No rows selected — use the checkboxes above.\n \n ) : (\n \n {selected.length} {\" \"}\n {selected.length === 1 ? \"student\" : \"students\"} selected:{\" \"}\n \n {selected\n .slice(0, 4)\n .map((s) => s.name)\n .join(\", \")}\n {selected.length > 4 && ` +${selected.length - 4} more`}\n \n \n )}\n
\n \n
setSelected(rows as Student[])}\n height={400}\n />\n \n {selected.length === 0 ? (\n \n No rows selected — use the checkboxes above.\n \n ) : (\n \n {selected.length} {\" \"}\n {selected.length === 1 ? \"student\" : \"students\"} selected:{\" \"}\n \n {selected\n .slice(0, 4)\n .map((s) => s.name)\n .join(\", \")}\n {selected.length > 4 && ` +${selected.length - 4} more`}\n \n \n )}\n
\n ([])\n\n 0 ? (\n \n \n ) : null\n }\n/>\n```",
"args": "{ data: [], columns: [] },\n render: () => {\n const [rows, setRows] = React.useState(STUDENTS_20)\n const [selected, setSelected] = React.useState([])\n const [lastDeleted, setLastDeleted] = React.useState(null)\n\n function handleDelete() {\n const ids = new Set(selected.map((s) => s.id))\n setLastDeleted(ids.size)\n setRows((prev) => prev.filter((s) => !ids.has(s.id)))\n setSelected([])\n }\n\n return (\n \n
[]}\n title=\"Students\"\n subtitle=\"Select rows to reveal the bulk-delete toolbar button\"\n selectRows\n onSelectedRowsChange={(r) => setSelected(r as Student[])}\n pagination\n defaultPageSize={8}\n height={380}\n toolbar={\n selected.length > 0 ? (\n \n \n {lastDeleted} {lastDeleted === 1 ? \"row\" : \"rows\"} removed.{\" \"}\n {rows.length} remaining.\n
\n )}\n \n
[]}\n title=\"Students\"\n subtitle=\"Select rows to reveal the bulk-delete toolbar button\"\n selectRows\n onSelectedRowsChange={(r) => setSelected(r as Student[])}\n pagination\n defaultPageSize={8}\n height={380}\n toolbar={\n selected.length > 0 ? (\n \n \n {lastDeleted} {lastDeleted === 1 ? \"row\" : \"rows\"} removed.{\" \"}\n {rows.length} remaining.\n
\n )}\n (null)\n return (\n \n
setSelected(row as Student)}\n />\n {selected && (\n \n {selected.name} \n {\" — \"}\n \n {selected.course}, semester {selected.semester}\n \n \n GPA {selected.gpa.toFixed(1)}\n \n
\n )}\n \n
setSelected(row as Student)}\n />\n {selected && (\n \n {selected.name} \n {\" — \"}\n \n {selected.course}, semester {selected.semester}\n \n \n GPA {selected.gpa.toFixed(1)}\n \n
\n )}\n [],\n title: \"Enrolled Students\",\n subtitle: \"Source: SIGAA — 2025.1\",\n height: 400,\n footer: (\n \n \n \n \n \n
\n ),\n },"
},
{
"name": "KitchenSink",
"description": "All features active at once: title, subtitle, search, sortable columns, row selection, pagination, download, and footer.",
"args": "{\n data: STUDENTS_200 as unknown as object[],\n columns: RICH_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Faculty Portal — Student Progress\",\n subtitle: \"UFPB · Department of Computing · 2025.1\",\n showSearch: true,\n showDownload: true,\n selectRows: true,\n pagination: true,\n defaultPageSize: 7,\n pageSizeOptions: [5, 7, 10, 20, 50],\n height: 380,\n onDownload: () => alert(\"Exporting CSV...\"),\n footer: (\n \n \n \n \n \n
\n ),\n },"
},
{
"name": "TenThousandRows",
"description": "**10 000 rows** rendered without pagination.\n\nOnly the rows visible inside the scrollable viewport are mounted in the DOM.\n`@tanstack/react-virtual` measures the container, calculates a virtual window,\nand updates it on scroll — keeping frame-rate smooth even at this scale.\n\n> Data is generated lazily on first mount — not at module load — to avoid blocking Storybook on import.",
"args": "{ data: [], columns: [] },\n render: () => {\n const [data] = React.useState(() => generateStudents(10_000))\n return (\n []}\n title=\"10 000 Rows\"\n subtitle=\"Scroll to see virtualization in action — only visible rows are in the DOM\"\n showSearch\n height={480}\n />\n )\n },",
"code": "[]}\n title=\"10 000 Rows\"\n subtitle=\"Scroll to see virtualization in action — only visible rows are in the DOM\"\n showSearch\n height={480}\n />"
},
{
"name": "HundredThousandRows",
"description": "**100 000 rows** in a single scrollable viewport.\n\nThe total virtual height of all rows is pre-calculated, so the browser's\nnative scrollbar reflects the correct proportion — but only a tiny DOM window\nof real `` elements is ever mounted at once.\n\n> Data is generated lazily on first mount — not at module load — to avoid blocking Storybook on import.",
"args": "{ data: [], columns: [] },\n render: () => {\n const [data] = React.useState(() => generateStudents(100_000))\n return (\n []}\n title=\"100 000 Rows\"\n subtitle=\"Virtual DOM window: ~15 rows regardless of dataset size\"\n height={480}\n />\n )\n },",
"code": "[]}\n title=\"100 000 Rows\"\n subtitle=\"Virtual DOM window: ~15 rows regardless of dataset size\"\n height={480}\n />"
},
{
"name": "VirtualizedWithPagination",
"description": "Pagination and virtualization work together: TanStack Table slices the filtered rows into pages; the virtualizer renders only the visible rows within that page.",
"args": "{ data: [], columns: [] },\n render: () => {\n const [data] = React.useState(() => generateStudents(10_000))\n return (\n []}\n title=\"10 000 Rows with Pagination\"\n showSearch\n pagination\n defaultPageSize={50}\n pageSizeOptions={[20, 50, 100, 200]}\n height={480}\n />\n )\n },",
"code": "[]}\n title=\"10 000 Rows with Pagination\"\n showSearch\n pagination\n defaultPageSize={50}\n pageSizeOptions={[20, 50, 100, 200]}\n height={480}\n />"
},
{
"name": "LoadingSkeleton",
"description": "When `loading=true` and `data=[]`, the table renders an animated skeleton that mirrors the exact column layout. Placeholders are only shown for slots you actually pass (`title`, `subtitle`, `showSearch`, `pagination`, `footer`).",
"args": "{\n data: [],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"Enrolled Students\",\n subtitle: \"Academic term 2025.1\",\n showSearch: true,\n pagination: true,\n height: 380,\n footer: Source: SIGAA ,\n },\n render: (args) => [],\n title: \"Enrolled Students\",\n subtitle: \"Background refresh in progress\",\n showSearch: true,\n height: 380,\n },\n render: (args) => [],\n title: \"No results\",\n subtitle: \"Try adjusting your filters or check back later\",\n height: 340,\n },"
},
{
"name": "EmptyAfterSearch",
"description": "The same empty state is shown when a search term matches no rows. The search field stays interactive so the user can clear the filter. `defaultGlobalFilter` pre-fills the search bar on mount.",
"args": "{\n data: STUDENTS_20 as unknown as object[],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"No results for this search\",\n showSearch: true,\n defaultGlobalFilter: \"zzz_no_match\",\n height: 340,\n labels: {\n noData: \"No students match your search\",\n noDataDescription: \"Try searching by name, course, or enrollment ID.\",\n },\n },"
},
{
"name": "EmptyStatePtBR",
"description": "Empty state with `locale=\"pt-BR\"` — the built-in message and description resolve automatically from `UI_I18N[\"pt-BR\"]` without any `labels` override.",
"args": "{\n data: [],\n columns: SIMPLE_COLUMNS as unknown as DataTableColumnDef[],\n title: \"No results\",\n subtitle: \"Try adjusting your filters or check back later\",\n height: 340,\n locale: \"pt-BR\",\n },"
},
{
"name": "ColHelper",
"description": "The exported `col()` function converts a simple descriptor into a full `DataTableColumnDef`.\n\n```tsx\nimport { col } from '@/components/ds/data-table'\n\nconst columns: DataTableColumnDef[] = [\n // Sortable plain column\n col({ key: 'name', label: 'Name', sortable: true }),\n\n // Fixed-width centred column with number formatting\n col({ key: 'gpa', label: 'GPA', width: 80, align: 'center', format: 'number' }),\n\n // Custom cell renderer — receives (value, row)\n col({\n key: 'status',\n label: 'Status',\n cell: (_, row) => {row.status} ,\n }),\n]\n```",
"args": "{ data: [], columns: [] },\n render: () => (\n ({\n key: \"name\",\n label: \"Name\",\n width: 190,\n sortable: true,\n }),\n col({\n key: \"course\",\n label: \"Course\",\n width: 220,\n sortable: true,\n }),\n col({\n key: \"semester\",\n label: \"Semester\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"gpa\",\n label: \"GPA\",\n width: 80,\n align: \"center\",\n format: \"number\",\n sortable: true,\n }),\n col({\n key: \"absences\",\n label: \"Absences\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"status\",\n label: \"Status\",\n width: 120,\n cell: (v) => {String(v)} ,\n }),\n col({ key: \"city\", label: \"City\", width: 140 }),\n ]}\n showSearch\n pagination\n defaultPageSize={8}\n pageSizeOptions={[5, 8, 10, 20]}\n height={380}\n />\n ),",
"code": "({\n key: \"name\",\n label: \"Name\",\n width: 190,\n sortable: true,\n }),\n col({\n key: \"course\",\n label: \"Course\",\n width: 220,\n sortable: true,\n }),\n col({\n key: \"semester\",\n label: \"Semester\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"gpa\",\n label: \"GPA\",\n width: 80,\n align: \"center\",\n format: \"number\",\n sortable: true,\n }),\n col({\n key: \"absences\",\n label: \"Absences\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"status\",\n label: \"Status\",\n width: 120,\n cell: (v) => {String(v)} ,\n }),\n col({ key: \"city\", label: \"City\", width: 140 }),\n ]}\n showSearch\n pagination\n defaultPageSize={8}\n pageSizeOptions={[5, 8, 10, 20]}\n height={380}\n />"
},
{
"name": "ResizableColumns",
"description": "Hover the right edge of any column header to reveal the resize handle, then drag left or right to adjust the width.\n\n**How it works:**\n\n- `columnResizeMode: 'onChange'` updates widths in real time as you drag\n- `header.getResizeHandler()` from TanStack Table manages the drag lifecycle (mouse + touch)\n- `header.column.getIsResizing()` drives the handle colour: `bg-border` at rest → `bg-primary/50` on hover → `bg-primary` while dragging\n- Only columns with an explicit `width` in `col()` get a resize handle — flex-grow columns are excluded to avoid an initial-width jump\n- Width overrides live in TanStack's internal `columnSizing` state and are passed as `override` to `colStyle`, switching those columns from flex to fixed-width",
"args": "{ data: [], columns: [] },\n render: () => (\n ({\n key: \"enrollmentId\",\n label: \"Enrollment ID\",\n width: 130,\n sortable: true,\n }),\n col({\n key: \"name\",\n label: \"Name\",\n width: 200,\n sortable: true,\n }),\n col({\n key: \"course\",\n label: \"Course\",\n width: 200,\n sortable: true,\n }),\n col({\n key: \"semester\",\n label: \"Sem.\",\n width: 70,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"gpa\",\n label: \"GPA\",\n width: 80,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"absences\",\n label: \"Absences\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"city\",\n label: \"City\",\n width: 150,\n sortable: true,\n }),\n ]}\n title=\"Resizable Columns\"\n subtitle=\"Drag the right edge of any column header to resize it\"\n showSearch\n height={400}\n />\n ),",
"code": "({\n key: \"enrollmentId\",\n label: \"Enrollment ID\",\n width: 130,\n sortable: true,\n }),\n col({\n key: \"name\",\n label: \"Name\",\n width: 200,\n sortable: true,\n }),\n col({\n key: \"course\",\n label: \"Course\",\n width: 200,\n sortable: true,\n }),\n col({\n key: \"semester\",\n label: \"Sem.\",\n width: 70,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"gpa\",\n label: \"GPA\",\n width: 80,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"absences\",\n label: \"Absences\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"city\",\n label: \"City\",\n width: 150,\n sortable: true,\n }),\n ]}\n title=\"Resizable Columns\"\n subtitle=\"Drag the right edge of any column header to resize it\"\n showSearch\n height={400}\n />"
},
{
"name": "NumberFormats",
"description": "Demonstrates the built-in number formatting via `format` + the new `locale` and `formatOptions` props on `col()`.\n\n| Column | `format` | `locale` | `formatOptions` override |\n| --- | --- | --- | --- |\n| Total Budget | `currency` | `pt-BR` (default) | — |\n| Disbursed | `currency` | `pt-BR` (default) | — |\n| Execution | `percent` | `pt-BR` | `minimumFractionDigits: 1` |\n| Avg Cost/Item | `number` | `pt-BR` | `minimumFractionDigits: 2, maximumFractionDigits: 2` |\n| Items | `number` | `pt-BR` | `maximumFractionDigits: 0` |\n\n**`locale` and `formatOptions` are spread into `Intl.NumberFormat`**, so any combination the browser supports works:\n\n```tsx\n// BRL — default, no extra config needed\ncol({ key: 'budget', label: 'Budget', format: 'currency' })\n\n// USD — override currency\ncol({ key: 'budget', label: 'Budget', format: 'currency', locale: 'en-US',\n formatOptions: { currency: 'USD' } })\n\n// Percent with 1 decimal in pt-BR\ncol({ key: 'rate', label: 'Execution Rate', format: 'percent', locale: 'pt-BR',\n formatOptions: { minimumFractionDigits: 1 } })\n\n// Fixed 2 decimals in pt-BR\ncol({ key: 'cost', label: 'Cost', format: 'number', locale: 'pt-BR',\n formatOptions: { minimumFractionDigits: 2, maximumFractionDigits: 2 } })\n```",
"args": "{ data: [], columns: [] },\n render: () => (\n ({\n key: \"id\",\n label: \"Process #\",\n width: 110,\n sortable: true,\n }),\n col({\n key: \"project\",\n label: \"Project\",\n width: 360,\n sortable: true,\n }),\n col({\n key: \"agency\",\n label: \"Agency\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"totalBudget\",\n label: \"Total Budget\",\n width: 180,\n align: \"right\",\n sortable: true,\n format: \"currency\",\n }),\n col({\n key: \"disbursed\",\n label: \"Disbursed\",\n width: 140,\n align: \"right\",\n sortable: true,\n format: \"currency\",\n }),\n col({\n key: \"executionRate\",\n label: \"Execution\",\n width: 120,\n align: \"right\",\n sortable: true,\n format: \"percent\",\n locale: \"pt-BR\",\n formatOptions: { minimumFractionDigits: 1 },\n }),\n col({\n key: \"costPerItem\",\n label: \"Avg Cost/Item\",\n width: 170,\n align: \"right\",\n sortable: true,\n format: \"number\",\n locale: \"pt-BR\",\n formatOptions: { minimumFractionDigits: 2, maximumFractionDigits: 2 },\n }),\n col({\n key: \"items\",\n label: \"Items\",\n width: 70,\n align: \"center\",\n sortable: true,\n format: \"number\",\n locale: \"pt-BR\",\n formatOptions: { maximumFractionDigits: 0 },\n }),\n ]}\n title=\"Research & Extension Projects — UFPB\"\n subtitle=\"Budget execution by project · fiscal year 2025\"\n showSearch\n height={420}\n />\n ),",
"code": "({\n key: \"id\",\n label: \"Process #\",\n width: 110,\n sortable: true,\n }),\n col({\n key: \"project\",\n label: \"Project\",\n width: 360,\n sortable: true,\n }),\n col({\n key: \"agency\",\n label: \"Agency\",\n width: 90,\n align: \"center\",\n sortable: true,\n }),\n col({\n key: \"totalBudget\",\n label: \"Total Budget\",\n width: 180,\n align: \"right\",\n sortable: true,\n format: \"currency\",\n }),\n col({\n key: \"disbursed\",\n label: \"Disbursed\",\n width: 140,\n align: \"right\",\n sortable: true,\n format: \"currency\",\n }),\n col({\n key: \"executionRate\",\n label: \"Execution\",\n width: 120,\n align: \"right\",\n sortable: true,\n format: \"percent\",\n locale: \"pt-BR\",\n formatOptions: { minimumFractionDigits: 1 },\n }),\n col({\n key: \"costPerItem\",\n label: \"Avg Cost/Item\",\n width: 170,\n align: \"right\",\n sortable: true,\n format: \"number\",\n locale: \"pt-BR\",\n formatOptions: { minimumFractionDigits: 2, maximumFractionDigits: 2 },\n }),\n col({\n key: \"items\",\n label: \"Items\",\n width: 70,\n align: \"center\",\n sortable: true,\n format: \"number\",\n locale: \"pt-BR\",\n formatOptions: { maximumFractionDigits: 0 },\n }),\n ]}\n title=\"Research & Extension Projects — UFPB\"\n subtitle=\"Budget execution by project · fiscal year 2025\"\n showSearch\n height={420}\n />"
},
{
"name": "Primitives",
"description": "The `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell` primitives are exported for fully custom layouts — no DataTable state management or virtualization.",
"args": "{ data: [], columns: [] },\n parameters: {\n docs: {\n description: {\n story:\n \"The `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell` primitives are exported for fully custom layouts — no DataTable state management or virtualization.\",\n },\n },\n },\n render: () => {\n type CourseRow = {\n course: string\n enrolled: number\n avgGpa: number\n status: \"ok\" | \"alert\"\n }\n const rows: CourseRow[] = [\n { course: \"Computer Science\", enrolled: 6, avgGpa: 8.8, status: \"ok\" },\n {\n course: \"Electrical Engineering\",\n enrolled: 5,\n avgGpa: 7.1,\n status: \"alert\",\n },\n { course: \"Mathematics\", enrolled: 5, avgGpa: 7.2, status: \"ok\" },\n { course: \"Physics\", enrolled: 4, avgGpa: 8.2, status: \"ok\" },\n { course: \"Statistics\", enrolled: 3, avgGpa: 7.7, status: \"ok\" },\n ]\n\n return (\n \n
\n \n \n Course \n Enrolled \n Avg GPA \n Status \n \n \n \n {rows.map((row) => (\n \n {row.course} \n {row.enrolled} \n \n {row.avgGpa.toFixed(1)}\n \n \n \n {row.status === \"alert\" ? (\n <>\n \n \n ))}\n \n
\n
\n
\n \n \n Course \n Enrolled \n Avg GPA \n Status \n \n \n \n {rows.map((row) => (\n \n {row.course} \n {row.enrolled} \n \n {row.avgGpa.toFixed(1)}\n \n \n \n {row.status === \"alert\" ? (\n <>\n \n \n ))}\n \n
\n
\n
"
}
]
},
{
"name": "ds-date-range-picker",
"title": "Date Range Picker",
"description": "Seleção intuitiva de intervalos de datas com presets e suporte aos 4 locales.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/date-range-picker",
"dependencies": [
"date-fns",
"react-day-picker",
"lucide-react"
],
"registryDependencies": [
"button",
"calendar",
"popover",
"ui-i18n"
],
"files": [
"components/ds/date-range-picker.tsx"
],
"props": [
{
"name": "date",
"required": false,
"type": "DateRange",
"description": "Selected date range { from, to }."
},
{
"name": "onSelect",
"required": false,
"type": "(range?: DateRange) => void",
"description": "Callback fired when a range is selected."
},
{
"name": "presets",
"required": false,
"type": "boolean",
"description": "Whether to display quick selection presets."
},
{
"name": "placeholder",
"required": false,
"type": "string",
"description": "Placeholder displayed when no date is selected."
},
{
"name": "disabled",
"required": false,
"type": "boolean",
"description": "Disables the trigger and calendar interaction."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization setting."
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"description": "Button trigger size."
}
],
"storyTitle": "Form/DateRangePicker",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n locale: \"pt-BR\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(canvas.getByRole(\"button\")).toBeInTheDocument()\n },"
},
{
"name": "WithPreselectedRange",
"description": "",
"args": "{\n locale: \"pt-BR\",\n date: {\n from: subDays(new Date(), 14),\n to: new Date(),\n },\n },"
},
{
"name": "WithoutPresets",
"description": "",
"args": "{\n presets: false,\n locale: \"pt-BR\",\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n disabled: true,\n date: {\n from: subDays(new Date(), 7),\n to: new Date(),\n },\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n
"
}
]
},
{
"name": "ds-deck",
"title": "Deck",
"description": "Swipe deck de cards — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/deck",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/deck.tsx"
],
"props": [
{
"name": "cards",
"required": true,
"type": "React.ReactNode[]"
}
],
"storyTitle": "Navigation/Deck",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n cards: [\n \n Card 1\n
,\n \n Card 2\n
,\n \n Card 3\n
,\n ],\n },"
}
]
},
{
"name": "ds-description-list",
"title": "Description List",
"description": "A description list component.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/description-list",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/description-list.tsx"
],
"props": [
{
"name": "layout",
"required": false,
"type": "\"vertical\" | \"horizontal\" | \"grid\"",
"options": [
"vertical",
"horizontal",
"grid"
],
"default": "vertical"
}
],
"storyTitle": "Data Display/DescriptionList",
"stories": [
{
"name": "Vertical",
"description": "Default vertical layout.",
"code": "\n \n Applicant Information \n \n \n \n \n \n "
},
{
"name": "Horizontal",
"description": "Horizontal layout for wider screens.",
"code": "\n \n Applicant Information \n \n \n \n \n \n "
},
{
"name": "Grid",
"description": "Grid layout for dense data display.",
"code": "\n \n Applicant Information \n \n \n \n \n \n "
}
]
},
{
"name": "ds-diff-viewer",
"description": "Line-level diff viewer with unified and split modes. No external dependencies.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/diff-viewer",
"dependencies": [],
"registryDependencies": [
"skeleton",
"badge",
"card",
"toggle-group"
],
"files": [
"components/ds/diff-viewer.tsx"
],
"props": [
{
"name": "oldValue",
"required": true,
"type": "string"
},
{
"name": "newValue",
"required": true,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "oldLabel",
"required": false,
"type": "string"
},
{
"name": "newLabel",
"required": false,
"type": "string"
},
{
"name": "mode",
"required": false,
"type": "DiffMode"
},
{
"name": "maxLines",
"required": false,
"type": "number",
"description": "Max lines to display before truncating — 0 = unlimited"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "showLineNumbers",
"required": false,
"type": "boolean",
"description": "Show line numbers"
}
],
"storyTitle": "Data Display/DiffViewer",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"package.json\",\n oldValue: OLD_JSON,\n newValue: NEW_JSON,\n oldLabel: \"v1.2.0\",\n newLabel: \"v1.3.0\",\n mode: \"unified\",\n },"
},
{
"name": "SplitMode",
"description": "",
"args": "{\n title: \"package.json — Split View\",\n oldValue: OLD_JSON,\n newValue: NEW_JSON,\n oldLabel: \"v1.2.0\",\n newLabel: \"v1.3.0\",\n mode: \"split\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n title: \"Loading diff…\",\n oldValue: \"\",\n newValue: \"\",\n loading: true,\n },"
},
{
"name": "NoChanges",
"description": "",
"args": "{\n title: \"No Changes\",\n oldValue: OLD_JSON,\n newValue: OLD_JSON,\n oldLabel: \"Before\",\n newLabel: \"After\",\n },"
},
{
"name": "CodeDiff",
"description": "",
"args": "{\n title: \"button.tsx\",\n oldLabel: \"main\",\n newLabel: \"feat/icon-button\",\n oldValue: `export function Button({ children, variant = \"default\", ...props }) {\n return (\n \n {children}\n \n )\n}`,\n newValue: `export function Button({ children, variant = \"default\", size = \"md\", icon, ...props }) {\n return (\n \n {icon && {icon} }\n {children}\n \n )\n}`,\n },"
},
{
"name": "LongDiff",
"description": "",
"args": "{\n title: \"Large file diff (truncated at 30 lines)\",\n maxLines: 30,\n oldValue: Array.from(\n { length: 50 },\n (_, i) => `line ${i + 1}: original content here`\n ).join(\"\\n\"),\n newValue: Array.from({ length: 55 }, (_, i) =>\n i % 7 === 0\n ? `line ${i + 1}: MODIFIED content here`\n : i >= 50\n ? `line ${i + 1}: new line added`\n : `line ${i + 1}: original content here`\n ).join(\"\\n\"),\n },"
}
]
},
{
"name": "ds-direction-aware-hover",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/direction-aware-hover",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/direction-aware-hover.tsx"
],
"props": [
{
"name": "imageSrc",
"required": true,
"type": "string",
"description": "URL da imagem de fundo"
},
{
"name": "imageAlt",
"required": false,
"type": "string",
"description": "Texto alternativo da imagem"
},
{
"name": "imageClassName",
"required": false,
"type": "string",
"description": "Classes extras para a imagem"
},
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "Conteúdo do overlay animado"
}
],
"storyTitle": "Data Display/DirectionAwareHover",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n imageSrc:\n \"https://images.unsplash.com/photo-1550537687-c91072c4792d?q=80&w=600&auto=format&fit=crop\",\n imageAlt: \"Foto de exemplo\",\n className: \"w-80 h-96\",\n children: (\n \n
Arquitetura Moderna
\n
\n Descubra os detalhes incríveis desta nova construção no centro da\n cidade.\n
\n
\n
Imóveis Premium \n \n Focar Aqui (Tab)\n \n \n ),\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Simula o estado de foco. Use a tecla TAB para focar no botão interno e o overlay permanecerá visível devido ao `focus-within`.\",\n },\n },\n },"
}
]
},
{
"name": "ds-drawer",
"title": "Drawer UI",
"description": "A full-featured drawer wrapper with optional header, scrollable body, footer, direction-aware close button, snap points, scale background, and escape/pointer-down-outside event handlers.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/drawer",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"drawer"
],
"files": [
"components/ds/drawer.tsx"
],
"props": [
{
"name": "direction",
"required": false,
"type": "DrawerDirection"
},
{
"name": "title",
"required": false,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "React.ReactNode"
},
{
"name": "trigger",
"required": false,
"type": "React.ReactNode"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "children",
"required": false,
"type": "React.ReactNode"
},
{
"name": "showCloseButton",
"required": false,
"type": "boolean"
},
{
"name": "open",
"required": false,
"type": "boolean"
},
{
"name": "onOpenChange",
"required": false,
"type": "(open: boolean) => void"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "shouldScaleBackground",
"required": false,
"type": "boolean"
},
{
"name": "snapPoints",
"required": false,
"type": "(number | string)[]"
},
{
"name": "activeSnapPoint",
"required": false,
"type": "number | string | null"
},
{
"name": "setActiveSnapPoint",
"required": false,
"type": "(snapPoint: number | string | null) => void"
},
{
"name": "onEscapeKeyDown",
"required": false,
"type": "React.ComponentPropsWithoutRef< typeof DrawerContent >[\"onEscapeKeyDown\"]"
},
{
"name": "onPointerDownOutside",
"required": false,
"type": "React.ComponentPropsWithoutRef< typeof DrawerContent >[\"onPointerDownOutside\"]"
}
],
"storyTitle": "Layout/Drawer",
"stories": [
{
"name": "Default",
"description": "Bottom drawer with form fields (name, email) and a save/cancel footer.",
"code": "Open Drawer}\n footer={\n <>\n Cancel \n Save changes \n \n }\n >\n \n
\n "
},
{
"name": "FromLeft",
"description": "Left-side drawer with a vertical navigation menu.",
"code": "Open Menu}\n >\n \n {[\"Dashboard\", \"Analytics\", \"Settings\", \"Help Center\"].map(\n (item, i) => (\n \n {item}\n \n )\n )}\n \n "
},
{
"name": "FromRight",
"description": "Right-side drawer showing a list of notifications with badges and timestamps.",
"code": "\n \n {[\n {\n msg: \"New comment on your post\",\n time: \"2m ago\",\n variant: \"default\" as const,\n },\n {\n msg: \"Server deployment complete\",\n time: \"15m ago\",\n variant: \"secondary\" as const,\n },\n {\n msg: \"Payment received — $249.00\",\n time: \"1h ago\",\n variant: \"secondary\" as const,\n },\n {\n msg: \"Security alert: new login\",\n time: \"3h ago\",\n variant: \"destructive\" as const,\n },\n ].map(({ msg, time, variant }) => (\n
\n \n {msg} \n {time} \n
\n \n New\n \n Actions}\n >\n \n {[\"New File\", \"Upload\", \"Share\"].map((action) => (\n \n {action}\n \n ))}\n
\n "
},
{
"name": "Confirmation",
"description": "Bottom drawer with a destructive delete confirmation dialog.",
"code": "Delete Item}\n footer={\n <>\n Cancel \n Delete \n \n }\n >\n \n Are you sure you want to delete this item? All associated data will be\n permanently removed.\n
\n "
},
{
"name": "ScrollableContent",
"description": "Right drawer with scrollable body content and a submit/cancel footer.",
"code": "Scrollable Content}\n footer={\n <>\n Submit \n Cancel \n \n }\n >\n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat.\n
\n ))}\n
No Header}\n footer={\n \n Done\n \n }\n >\n \n This drawer has no title or description. Content starts right after the\n close button.\n
\n "
},
{
"name": "NoCloseButton",
"description": "Left drawer without a close button — dismiss via drag gesture or backdrop tap.",
"code": "Open}\n >\n \n This drawer hides the close button. Use drag gestures or the backdrop to\n dismiss.\n
\n "
},
{
"name": "ProgrammaticControl",
"description": "Bottom drawer controlled externally via open/onOpenChange props."
}
]
},
{
"name": "ds-dynamic-island",
"description": "Dynamic island notification component.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/dynamic-island",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/dynamic-island.tsx"
],
"props": [
{
"name": "state",
"required": false,
"type": "\"idle\" | \"compact\" | \"expanded\""
},
{
"name": "icon",
"required": false,
"type": "React.ReactNode"
},
{
"name": "title",
"required": false,
"type": "React.ReactNode"
},
{
"name": "subtitle",
"required": false,
"type": "React.ReactNode"
},
{
"name": "onClick",
"required": false,
"type": "() => void"
},
{
"name": "intent",
"required": false,
"type": "\"default\" | \"success\" | \"warning\" | \"destructive\"",
"options": [
"default",
"success",
"warning",
"destructive"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Feedback/DynamicIsland",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n state: \"compact\",\n title: \"Uploading 3 files\",\n subtitle: \"24%\",\n icon: \n
\n
}\n intent=\"default\"\n onClick={() =>\n setState(state === \"expanded\" ? \"compact\" : \"expanded\")\n }\n >\n
\n
\n
\n
\n JD \n \n
\n Jane Doe \n iPhone \n
\n
\n
0:24 \n
\n
\n
{\n e.stopPropagation()\n setState(\"idle\")\n }}\n >\n {\n e.stopPropagation()\n setState(\"compact\")\n }}\n >\n \n
\n \n
\n
\n setState(\"idle\")}>\n Idle\n \n setState(\"compact\")}\n >\n Compact\n \n setState(\"expanded\")}\n >\n Expanded\n \n
\n
\n
"
},
{
"name": "AllIntents",
"description": "",
"code": "\n
"
},
{
"name": "MusicPlayer",
"description": "",
"code": "\n }\n icon={\n \n
\n
\n
\n \n Chill Study Beats\n \n Lofi Girl \n
\n
{\n e.stopPropagation()\n setIsPlaying(!isPlaying)\n }}\n aria-label={isPlaying ? \"Pause\" : \"Play\"}\n >\n {isPlaying ? (\n \n\n
\n
\n
"
},
{
"name": "Locales",
"description": "",
"code": "\n
"
}
]
},
{
"name": "ds-empty-state-illustration",
"description": "Empty state with 8 animated SVG illustrations for common UI contexts.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/empty-state-illustration",
"dependencies": [],
"registryDependencies": [
"skeleton",
"button"
],
"files": [
"components/ds/empty-state-illustration.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "EmptyStateVariant"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "action",
"required": false,
"type": "React.ReactNode"
},
{
"name": "size",
"required": false,
"type": "EmptyStateSize"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "illustration",
"required": false,
"type": "React.ReactNode",
"description": "Override the SVG illustration with a custom node"
}
],
"storyTitle": "Feedback/EmptyStateIllustration",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n variant: \"default\",\n size: \"md\",\n },"
},
{
"name": "AllVariants",
"description": "",
"code": "\n {(\n [\n \"default\",\n \"search\",\n \"error\",\n \"success\",\n \"inbox\",\n \"filter\",\n \"upload\",\n \"locked\",\n ] as EmptyStateVariant[]\n ).map((variant) => (\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
"
},
{
"name": "WithAction",
"description": "",
"args": "{\n variant: \"default\",\n title: \"No projects yet\",\n description:\n \"Create your first project to get started with the design system.\",\n action: Create Project ,\n size: \"md\",\n },"
},
{
"name": "ErrorWithRetry",
"description": "",
"args": "{\n variant: \"error\",\n title: \"Failed to load data\",\n description:\n \"We couldn't fetch the data. Please check your connection and try again.\",\n action: (\n \n \n Contact Support\n \n Retry \n
\n ),\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n variant: \"default\",\n loading: true,\n size: \"md\",\n },"
},
{
"name": "CustomIllustration",
"description": "",
"args": "{\n title: \"No notifications\",\n description: \"You're all caught up! Check back later.\",\n illustration: (\n \n 🔔\n
\n ),\n },"
}
]
},
{
"name": "ds-event-calendar",
"title": "Event Calendar",
"description": "Calendário mensal com eventos — ReUI Event Calendar 6.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/event-calendar",
"dependencies": [],
"registryDependencies": [
"card",
"skeleton"
],
"files": [
"components/ds/event-calendar.tsx"
],
"props": [
{
"name": "events",
"required": true,
"type": "CalendarEvent[]"
},
{
"name": "month",
"required": false,
"type": "Date"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Dashboard/EventCalendar",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ events: [{ id: \"1\", title: \"Meeting\", date: \"2026-09-10\" }] },"
},
{
"name": "Loading",
"description": "",
"args": "{ events: [], loading: true }"
}
]
},
{
"name": "ds-fade",
"title": "Fade",
"description": "Fade mask com variantes x/y/top/bottom/left/right — inspirado em Launch UI Fade.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/fade",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/fade.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"x\" | \"y\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"top-lg\" | \"bottom-lg\" | \"left-lg\" | \"right-lg\"",
"options": [
"x",
"y",
"top",
"bottom",
"left",
"right",
"top-lg",
"bottom-lg",
"left-lg",
"right-lg"
],
"default": "x"
}
],
"stories": [
{
"name": "X",
"description": "",
"args": "{ variant: \"x\" },"
},
{
"name": "Y",
"description": "",
"args": "{ variant: \"y\" },"
},
{
"name": "AllVariants",
"description": "",
"code": "\n {([\"top\", \"bottom\", \"left\", \"right\"] as const).map((v) => (\n \n fade-{v}\n \n ))}\n
"
}
]
},
{
"name": "ds-faqs",
"title": "Faqs",
"description": "Seção FAQ core com heading, accordion, busca opcional.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/faqs",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"ds-accordion",
"input",
"empty",
"ui-i18n"
],
"files": [
"components/ds/faqs.tsx"
],
"props": [
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "items",
"required": true,
"type": "AccordionItem[]"
},
{
"name": "searchable",
"required": false,
"type": "boolean"
},
{
"name": "search",
"required": false,
"type": "string"
},
{
"name": "onSearchChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "iconVariant",
"required": false,
"type": "\"chevron\" | \"plus\" | \"arrow\" | \"sign\""
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "FAQ/Faqs",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ items, title: \"FAQs\", description: \"Quick answers\" },"
},
{
"name": "Searchable",
"description": "",
"args": "{\n items: [\n ...items,\n { value: \"5\", trigger: \"Billing question\", children: \"Billing info.\" },\n { value: \"6\", trigger: \"Support hours\", children: \"24/7.\" },\n ],\n searchable: true,\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{ items },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Loading",
"description": "",
"args": "{ items, loading: true }"
},
{
"name": "Empty",
"description": "",
"args": "{ items, searchable: true, search: \"xyz\" }"
}
]
},
{
"name": "ds-faqs-support",
"title": "Faqs Support",
"description": "FAQs com card suporte lateral — blockus #14 #19.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/faqs-support",
"dependencies": [],
"registryDependencies": [
"ds-faqs",
"card",
"button"
],
"files": [
"components/ds/faqs-support.tsx"
],
"props": [
{
"name": "supportTitle",
"required": false,
"type": "string"
},
{
"name": "supportDescription",
"required": false,
"type": "string"
},
{
"name": "supportAction",
"required": false,
"type": "{ label: string; href?: string; onClick?: () => void }"
}
],
"storyTitle": "FAQ/FaqsSupport",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n items,\n supportTitle: \"Still have questions?\",\n supportDescription: \"Our team is here to help.\",\n supportAction: { label: \"Contact us\", href: \"#\" },\n },"
},
{
"name": "WithoutSupport",
"description": "",
"args": "{ items }"
}
]
},
{
"name": "ds-faqs-tabs",
"title": "Faqs Tabs",
"description": "FAQs agrupadas por abas — blockus #03 #07.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/faqs-tabs",
"dependencies": [],
"registryDependencies": [
"ds-faqs",
"tabs"
],
"files": [
"components/ds/faqs-tabs.tsx"
],
"props": [
{
"name": "groups",
"required": true,
"type": "FaqsTabsGroup[]"
},
{
"name": "defaultGroup",
"required": false,
"type": "string"
}
],
"storyTitle": "FAQ/FaqsTabs",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ groups }"
},
{
"name": "Searchable",
"description": "",
"args": "{ groups, searchable: true }"
}
]
},
{
"name": "ds-feature-spotlight",
"title": "Feature Spotlight",
"description": "Destaque ancorado para apresentar novas funcionalidades e guias passo a passo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/feature-spotlight",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"popover",
"button",
"ui-i18n"
],
"files": [
"components/ds/feature-spotlight.tsx"
],
"props": [
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "The element to anchor the spotlight to."
},
{
"name": "title",
"required": true,
"type": "React.ReactNode",
"description": "Title of highlighted feature."
},
{
"name": "description",
"required": true,
"type": "React.ReactNode",
"description": "Description explaining the feature."
},
{
"name": "open",
"required": false,
"type": "boolean",
"description": "Controlled open state."
},
{
"name": "onOpenChange",
"required": false,
"type": "(open: boolean) => void",
"description": "Open state change callback."
},
{
"name": "step",
"required": false,
"type": "number",
"description": "Current step number in a tour."
},
{
"name": "totalSteps",
"required": false,
"type": "number",
"description": "Total steps in tour."
},
{
"name": "onNext",
"required": false,
"type": "() => void",
"description": "Next step callback."
},
{
"name": "onPrevious",
"required": false,
"type": "() => void",
"description": "Previous step callback."
},
{
"name": "onDismiss",
"required": false,
"type": "() => void",
"description": "Dismiss callback."
},
{
"name": "side",
"required": false,
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"description": "Popover placement side."
},
{
"name": "align",
"required": false,
"type": "\"start\" | \"center\" | \"end\"",
"description": "Popover alignment."
},
{
"name": "showBeacon",
"required": false,
"type": "boolean",
"description": "Whether to render a pulsing beacon ring on the target."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization locale."
},
{
"name": "className",
"required": false,
"type": "string",
"description": "Content box custom classes."
}
],
"storyTitle": "Feedback/FeatureSpotlight",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n locale: \"pt-BR\",\n },\n play: async () => {\n const popoverHeading = await within(document.body).findByText(\n \"Novo Formato de Exportação\"\n )\n await expect(popoverHeading).toBeInTheDocument()\n },"
},
{
"name": "MultiStepTour",
"description": "",
"args": "{\n step: 2,\n totalSteps: 4,\n title: \"Ajuste de Hiperparâmetros\",\n description:\n \"Configure a taxa de aprendizado e o número de épocas da estimação bayesiana antes de executar a simulação.\",\n onNext: () => alert(\"Próximo passo!\"),\n onPrevious: () => alert(\"Passo anterior!\"),\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n \n \n Export\n \n \n
"
}
]
},
{
"name": "ds-feature-sticky",
"title": "Feature Sticky",
"description": "Seção feature com texto e mockup sticky (left/right) — inspirado em Launch UI Feature Sticky.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/feature-sticky",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"badge",
"skeleton"
],
"files": [
"components/ds/feature-sticky.tsx"
],
"props": [
{
"name": "badge",
"required": false,
"type": "string"
},
{
"name": "heading",
"required": false,
"type": "string"
},
{
"name": "subheading",
"required": false,
"type": "string"
},
{
"name": "items",
"required": false,
"type": "FeatureStickyItem[]"
},
{
"name": "media",
"required": false,
"type": "React.ReactNode"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "sticky",
"required": false,
"type": "\"left\" | \"right\"",
"options": [
"left",
"right"
],
"default": "left"
}
],
"stories": [
{
"name": "Left",
"description": "",
"args": "{ sticky: \"left\" },"
},
{
"name": "Right",
"description": "",
"args": "{ sticky: \"right\" },"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-feedback-widget",
"description": "Floating feedback widget component.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/feedback-widget",
"dependencies": [],
"registryDependencies": [
"button",
"dialog",
"radio-group",
"textarea"
],
"files": [
"components/ds/feedback-widget.tsx"
],
"props": [
{
"name": "onSubmit",
"required": false,
"type": "(data: { rating: number; text: string }) => Promise | void"
},
{
"name": "intent",
"required": false,
"type": "\"default\" | \"primary\""
},
{
"name": "position",
"required": false,
"type": "\"br\" | \"bl\"",
"options": [
"br",
"bl"
],
"default": "br"
}
],
"storyTitle": "Feedback/FeedbackWidget",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n position: \"br\",\n intent: \"primary\",\n onSubmit: async (data) => {\n console.log(\"Feedback submitted:\", data)\n await new Promise((resolve) => setTimeout(resolve, 1500))\n },\n },"
},
{
"name": "BottomLeft",
"description": "",
"args": "{\n position: \"bl\",\n intent: \"default\",\n },"
}
]
},
{
"name": "ds-file-preview",
"description": "File preview card with auto-detected type icons, size formatting and hover actions.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/file-preview",
"dependencies": [],
"registryDependencies": [
"skeleton",
"button",
"badge"
],
"files": [
"components/ds/file-preview.tsx"
],
"props": [
{
"name": "fileName",
"required": true,
"type": "string"
},
{
"name": "fileSize",
"required": false,
"type": "number"
},
{
"name": "fileType",
"required": false,
"type": "string"
},
{
"name": "previewUrl",
"required": false,
"type": "string",
"description": "URL for image previews"
},
{
"name": "onDownload",
"required": false,
"type": "() => void"
},
{
"name": "onPreview",
"required": false,
"type": "() => void"
},
{
"name": "onRemove",
"required": false,
"type": "() => void"
},
{
"name": "size",
"required": false,
"type": "FilePreviewSize"
},
{
"name": "variant",
"required": false,
"type": "FilePreviewVariant"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Media/FilePreview",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n fileName: \"design-system-v2.pdf\",\n fileSize: 4200000,\n onDownload: () => alert(\"Download\"),\n onRemove: () => alert(\"Remove\"),\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{\n fileName: \"document.pdf\",\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n {}}\n onRemove={() => {}}\n />\n ))}\n
\n ),",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n {}}\n onRemove={() => {}}\n />\n ))}\n
"
},
{
"name": "AllFileTypes",
"description": "",
"args": "{\n fileName: \"report.pdf\",\n },\n render: () => (\n {} },\n {\n fileName: \"photo.jpg\",\n fileSize: 512000,\n previewUrl: \"https://picsum.photos/seed/file/100/100\",\n onDownload: () => {},\n },\n { fileName: \"data.xlsx\", fileSize: 156000, onDownload: () => {} },\n { fileName: \"video.mp4\", fileSize: 104857600, onDownload: () => {} },\n { fileName: \"component.tsx\", fileSize: 8200, onDownload: () => {} },\n { fileName: \"readme.md\", fileSize: 3400, onDownload: () => {} },\n { fileName: \"archive.zip\", fileSize: 52428800, onDownload: () => {} },\n { fileName: \"unknown.bin\", fileSize: 102400 },\n ]}\n />\n ),",
"code": " {} },\n {\n fileName: \"photo.jpg\",\n fileSize: 512000,\n previewUrl: \"https://picsum.photos/seed/file/100/100\",\n onDownload: () => {},\n },\n { fileName: \"data.xlsx\", fileSize: 156000, onDownload: () => {} },\n { fileName: \"video.mp4\", fileSize: 104857600, onDownload: () => {} },\n { fileName: \"component.tsx\", fileSize: 8200, onDownload: () => {} },\n { fileName: \"readme.md\", fileSize: 3400, onDownload: () => {} },\n { fileName: \"archive.zip\", fileSize: 52428800, onDownload: () => {} },\n { fileName: \"unknown.bin\", fileSize: 102400 },\n ]}\n />"
},
{
"name": "WithImageThumbnail",
"description": "",
"args": "{\n fileName: \"hero-banner.png\",\n fileSize: 890000,\n fileType: \"image/png\",\n previewUrl: \"https://picsum.photos/seed/banner/300/200\",\n onPreview: () => {},\n onDownload: () => {},\n onRemove: () => {},\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n fileName: \"loading.pdf\",\n },\n render: () => \n \n \n "
},
{
"name": "Empty",
"description": "",
"code": "\n \n \n "
}
]
},
{
"name": "ds-filter-sidebar",
"title": "Filter Sidebar",
"description": "Filtros categoria e preço — ReUI Filter Sidebar.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/filter-sidebar",
"dependencies": [],
"registryDependencies": [
"card",
"checkbox",
"label",
"slider",
"skeleton"
],
"files": [
"components/ds/filter-sidebar.tsx"
],
"props": [
{
"name": "categories",
"required": false,
"type": "string[]"
},
{
"name": "priceRange",
"required": false,
"type": "[number, number]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Dashboard/FilterSidebar",
"stories": [
{
"name": "Default",
"description": "",
"args": "{}"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true }"
}
]
},
{
"name": "ds-floating-card",
"title": "FloatingCard",
"description": "Card com tilt 3D sutil ao seguir o ponteiro, para exibir screenshots/mockups em heroes.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/floating-card",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/floating-card.tsx"
],
"props": [
{
"name": "intensity",
"required": false,
"type": "number",
"description": "Maximum tilt rotation in degrees."
}
],
"storyTitle": "Effects/FloatingCard",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n Product screenshot
\n "
},
{
"name": "CustomIntensity",
"description": "",
"code": "\n
\n intensity=4
\n \n \n intensity=16
\n \n \n
"
}
]
},
{
"name": "ds-footer-brand-backdrop",
"title": "Footer Brand Backdrop",
"description": "Rodapé de vanguarda com mega letreiro tipográfico de fundo, grade compacta de links, newsletter e status.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/footer-brand-backdrop",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"ds-footer-wordmark",
"ds-social-links",
"ds-system-status-badge",
"ds-footer-bottom-bar",
"ds-footer-menu",
"ui-i18n"
],
"files": [
"components/ds/footer-brand-backdrop.tsx"
],
"props": [
{
"name": "wordmarkText",
"required": false,
"type": "string"
},
{
"name": "wordmarkVariant",
"required": false,
"type": "\"outline\" | \"muted\" | \"gradient\""
},
{
"name": "brand",
"required": false,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "columns",
"required": true,
"type": "FooterGroupData[]"
},
{
"name": "socialLinks",
"required": false,
"type": "SocialLinkItem[]"
},
{
"name": "showStatusBadge",
"required": false,
"type": "boolean"
},
{
"name": "status",
"required": false,
"type": "SystemHealthStatus"
},
{
"name": "statusUptime",
"required": false,
"type": "string"
},
{
"name": "statusHref",
"required": false,
"type": "string"
},
{
"name": "brandName",
"required": false,
"type": "string"
},
{
"name": "legalLinks",
"required": false,
"type": "LegalLinkItem[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "spacing",
"required": false,
"type": "\"normal\" | \"relaxed\"",
"options": [
"normal",
"relaxed"
],
"default": "normal"
}
],
"stories": [
{
"name": "MutedVariant",
"description": "",
"args": "{\n wordmarkVariant: \"muted\",\n },"
},
{
"name": "GradientVariant",
"description": "",
"args": "{\n wordmarkVariant: \"gradient\",\n },"
},
{
"name": "CustomInstitution",
"description": "",
"args": "{\n wordmarkText: \"UFPB\",\n wordmarkVariant: \"outline\",\n brandName: \"Universidade Federal da Paraíba\",\n },"
}
]
},
{
"name": "ds-footer-cta",
"title": "Footer CTA",
"description": "Bloco de rodapé integrado com cartão de conversão de alto impacto posicionado antes dos links.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/footer-cta",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"ds-social-links",
"ds-footer-bottom-bar",
"ds-footer-menu",
"ui-i18n"
],
"files": [
"components/ds/footer-cta.tsx"
],
"props": [
{
"name": "ctaTitle",
"required": false,
"type": "string"
},
{
"name": "ctaDescription",
"required": false,
"type": "string"
},
{
"name": "primaryAction",
"required": false,
"type": "FooterCtaAction"
},
{
"name": "secondaryAction",
"required": false,
"type": "FooterCtaAction"
},
{
"name": "columns",
"required": false,
"type": "FooterGroupData[]"
},
{
"name": "brand",
"required": false,
"type": "React.ReactNode"
},
{
"name": "socialLinks",
"required": false,
"type": "SocialLinkItem[]"
},
{
"name": "brandName",
"required": false,
"type": "string"
},
{
"name": "legalLinks",
"required": false,
"type": "LegalLinkItem[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "ctaTone",
"required": false,
"type": "\"card\" | \"primary\" | \"glow\"",
"options": [
"card",
"primary",
"glow"
],
"default": "glow"
}
],
"stories": [
{
"name": "PrimaryTone",
"description": "",
"args": "{\n ctaTone: \"primary\",\n },"
},
{
"name": "CardTone",
"description": "",
"args": "{\n ctaTone: \"card\",\n },"
}
]
},
{
"name": "ds-footer-mega",
"title": "Footer Mega",
"description": "Rodapé institucional completo com múltiplas colunas de links, apresentação de missão, newsletter e barra inferior.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/footer-mega",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"ds-social-links",
"ds-footer-newsletter",
"ds-system-status-badge",
"ds-app-store-badges",
"ds-footer-bottom-bar",
"ds-footer-menu",
"ui-i18n"
],
"files": [
"components/ds/footer-mega.tsx"
],
"props": [
{
"name": "brand",
"required": false,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "columns",
"required": true,
"type": "FooterGroupData[]"
},
{
"name": "socialLinks",
"required": false,
"type": "SocialLinkItem[]"
},
{
"name": "showNewsletter",
"required": false,
"type": "boolean"
},
{
"name": "newsletterTitle",
"required": false,
"type": "string"
},
{
"name": "newsletterDescription",
"required": false,
"type": "string"
},
{
"name": "onSubscribe",
"required": false,
"type": "(email: string) => Promise | void"
},
{
"name": "showAppBadges",
"required": false,
"type": "boolean"
},
{
"name": "appStoreUrl",
"required": false,
"type": "string"
},
{
"name": "googlePlayUrl",
"required": false,
"type": "string"
},
{
"name": "showStatusBadge",
"required": false,
"type": "boolean"
},
{
"name": "status",
"required": false,
"type": "SystemHealthStatus"
},
{
"name": "statusUptime",
"required": false,
"type": "string"
},
{
"name": "statusHref",
"required": false,
"type": "string"
},
{
"name": "brandName",
"required": false,
"type": "string"
},
{
"name": "legalLinks",
"required": false,
"type": "LegalLinkItem[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "tone",
"required": false,
"type": "\"plain\" | \"card\"",
"options": [
"plain",
"card"
],
"default": "plain"
}
],
"stories": [
{
"name": "WithAppBadges",
"description": "",
"args": "{\n showAppBadges: true,\n appStoreUrl: \"https://apple.com\",\n googlePlayUrl: \"https://google.com\",\n },"
},
{
"name": "CardTone",
"description": "",
"args": "{\n tone: \"card\",\n },"
}
]
},
{
"name": "ds-footer-menu",
"title": "Footer Menu",
"description": "A responsive footer navigation that displays in columns on desktop and as an accordion on mobile.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/footer-menu",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"accordion",
"ui-i18n"
],
"files": [
"components/ds/footer-menu.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "FooterGroupData[]"
},
{
"name": "upper",
"required": false,
"type": "boolean",
"description": "@default false"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
}
],
"storyTitle": "Footer/FooterMenu",
"stories": [
{
"name": "Default",
"description": "Default footer menu with four columns (Product, Company, Resources, Social) in uppercase mode.",
"args": "{\n data: footerData,\n size: \"md\",\n upper: true,\n locale: \"en-US\",\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Default footer menu with four columns (Product, Company, Resources, Social) in uppercase mode.\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization — two-column layout with translated headings.",
"args": "{\n data: [\n {\n title: \"Product\",\n options: [\n { name: \"Features\", url: \"#\" },\n { name: \"Integrations\", url: \"#\" },\n { name: \"Pricing\", url: \"#\" },\n ],\n },\n {\n title: \"Company\",\n options: [\n { name: \"About Us\", url: \"#\" },\n { name: \"Careers\", url: \"#\" },\n { name: \"Contact\", url: \"#\" },\n ],\n },\n ],\n size: \"md\",\n locale: \"pt-BR\",\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Portuguese (pt-BR) localization — two-column layout with translated headings.\",\n },\n },\n },"
},
{
"name": "Simple",
"description": "Simplified footer menu with two columns and large size preset, no uppercase toggle.",
"args": "{\n data: footerData.slice(0, 2),\n size: \"lg\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Simplified footer menu with two columns and large size preset, no uppercase toggle.\",\n },\n },\n },"
}
]
},
{
"name": "ds-footer-newsletter",
"title": "Footer Newsletter",
"description": "Captura atômica de e-mail para newsletter com validação, estado de envio e confirmação acessível.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/footer-newsletter",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"input",
"label",
"ui-i18n"
],
"files": [
"components/ds/footer-newsletter.tsx"
],
"props": [
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "onSubscribe",
"required": false,
"type": "(email: string) => Promise | void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "showPrivacyNotice",
"required": false,
"type": "boolean"
},
{
"name": "layout",
"required": false,
"type": "\"inline\" | \"stacked\"",
"options": [
"inline",
"stacked"
],
"default": "inline"
}
],
"stories": [
{
"name": "StackedLayout",
"description": "",
"args": "{\n layout: \"stacked\",\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n
\n \n pt-BR:\n \n
\n
\n \n en-US:\n \n
\n
\n \n es-ES:\n \n
\n
\n \n fr-FR:\n \n
\n
\n
\n \n Outline:\n \n
\n
\n \n Muted Fill:\n \n
\n
\n \n Gradient:\n \n
\n
| void"
},
{
"name": "onBackToLogin",
"required": false,
"type": "() => void"
},
{
"name": "resendCooldown",
"required": false,
"type": "number"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"flat\"",
"options": [
"default",
"flat"
],
"default": "default"
}
],
"storyTitle": "Auth/ForgotPasswordForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n variant: \"default\",\n resendCooldown: 60,\n },"
},
{
"name": "FlatVariant",
"description": "",
"args": "{\n variant: \"flat\",\n },"
}
]
},
{
"name": "ds-form-builder",
"title": "Form Builder",
"description": "Gera um formulário validado a partir de um schema zod (validação) e uma lista de campos (rótulo, tipo de widget, opções) — react-hook-form + Field/FieldGroup.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/form-builder",
"dependencies": [
"react-hook-form",
"zod",
"@hookform/resolvers"
],
"registryDependencies": [
"field",
"button",
"input",
"textarea",
"select",
"switch",
"checkbox",
"spinner"
],
"files": [
"components/ds/form-builder.tsx"
],
"props": [
{
"name": "schema",
"required": true,
"type": "z.ZodType",
"description": "Validation only — field rendering comes from `fields`, not schema introspection."
},
{
"name": "fields",
"required": true,
"type": "FormFieldConfig[]"
},
{
"name": "defaultValues",
"required": false,
"type": "FieldValues"
},
{
"name": "onSubmit",
"required": true,
"type": "(values: FieldValues) => void | Promise"
},
{
"name": "submitLabel",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "className",
"required": false,
"type": "string"
}
],
"storyTitle": "Form/FormBuilder",
"stories": [
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-founder-letter",
"title": "Founder Letter",
"description": "Carta aberta ou mensagem do coordenador/diretor com retrato, prosa editorial, drop cap e assinatura.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/founder-letter",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/founder-letter.tsx"
],
"props": [
{
"name": "title",
"required": true,
"type": "string"
},
{
"name": "paragraphs",
"required": true,
"type": "string[]"
},
{
"name": "authorName",
"required": true,
"type": "string"
},
{
"name": "authorRole",
"required": true,
"type": "string"
},
{
"name": "authorAvatar",
"required": false,
"type": "string"
},
{
"name": "authorSignature",
"required": false,
"type": "string"
},
{
"name": "withDropCap",
"required": false,
"type": "boolean"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"elevated\" | \"muted\"",
"options": [
"default",
"elevated",
"muted"
],
"default": "default"
}
],
"stories": [
{
"name": "WithoutDropCap",
"description": "",
"args": "{\n withDropCap: false,\n },"
},
{
"name": "Elevated",
"description": "",
"args": "{\n variant: \"elevated\",\n },"
}
]
},
{
"name": "ds-funnel-chart",
"description": "Funnel chart for visualizing conversion rates between sequential stages.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/funnel-chart",
"dependencies": [],
"registryDependencies": [
"chart",
"skeleton",
"card",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/funnel-chart.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "FunnelStage[]"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "height",
"required": false,
"type": "number",
"description": "Chart canvas height in px"
},
{
"name": "showLabels",
"required": false,
"type": "boolean",
"description": "Show value labels inside/beside each bar"
},
{
"name": "showPercentage",
"required": false,
"type": "boolean",
"description": "Show conversion rate between consecutive stages"
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string",
"description": "Custom value formatter — overrides format/decimals/locale/currency"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Charts/FunnelChart",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n data: MARKETING_DATA,\n title: \"Marketing Funnel\",\n subtitle: \"Q3 2026 conversion pipeline\",\n showLabels: true,\n showPercentage: true,\n height: 320,\n },"
},
{
"name": "WithCurrency",
"description": "",
"args": "{\n data: [\n { name: \"Pipeline\", value: 2500000 },\n { name: \"Qualified\", value: 1800000 },\n { name: \"Proposal\", value: 900000 },\n { name: \"Negotiation\", value: 400000 },\n { name: \"Won\", value: 180000 },\n ],\n title: \"Revenue Funnel\",\n subtitle: \"Quarterly revenue pipeline\",\n format: \"currency\",\n currency: \"USD\",\n abbreviate: true,\n height: 320,\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n data: [],\n title: \"Marketing Funnel\",\n subtitle: \"Loading conversion data…\",\n loading: true,\n height: 320,\n },"
},
{
"name": "EmptyData",
"description": "",
"args": "{\n data: [],\n title: \"Marketing Funnel\",\n height: 320,\n },"
},
{
"name": "NoLabels",
"description": "",
"args": "{\n data: MARKETING_DATA,\n title: \"Clean Funnel\",\n showLabels: false,\n showPercentage: false,\n height: 320,\n },"
},
{
"name": "Locales",
"description": "",
"args": "{\n data: MARKETING_DATA,\n },\n render: () => (\n \n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
\n ),",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
"
},
{
"name": "ThreeStages",
"description": "",
"args": "{\n data: [\n { name: \"Awareness\", value: 50000 },\n { name: \"Interest\", value: 18000 },\n { name: \"Purchase\", value: 4200 },\n ],\n title: \"Sales Funnel\",\n subtitle: \"3-stage simplified view\",\n height: 240,\n },"
},
{
"name": "CustomColors",
"description": "",
"args": "{\n data: [\n { name: \"Impressions\", value: 100000, color: \"var(--color-violet-500)\" },\n { name: \"Clicks\", value: 32000, color: \"var(--color-indigo-500)\" },\n { name: \"Signups\", value: 8400, color: \"var(--color-blue-500)\" },\n { name: \"Active\", value: 3100, color: \"var(--color-cyan-500)\" },\n ],\n title: \"Product Adoption\",\n height: 280,\n },"
}
]
},
{
"name": "ds-gallery-filterable",
"title": "GalleryFilterable",
"description": "Galeria de imagens com filtro de categorias — composto de ds-image-gallery e ds-pill-group.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/gallery-filterable",
"dependencies": [],
"registryDependencies": [
"ds-image-gallery",
"ds-pill-group"
],
"files": [
"components/ds/gallery-filterable.tsx"
],
"props": [
{
"name": "categories",
"required": true,
"type": "GalleryFilterCategory[]"
},
{
"name": "items",
"required": true,
"type": "GalleryFilterableItem[]"
},
{
"name": "allLabel",
"required": false,
"type": "string"
},
{
"name": "layout",
"required": false,
"type": "ImageGalleryLayout"
},
{
"name": "columns",
"required": false,
"type": "ImageGalleryColumns"
},
{
"name": "aspect",
"required": false,
"type": "ImageGalleryAspect"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Gallery/GalleryFilterable",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
}
]
},
{
"name": "ds-gallery-split",
"title": "GallerySplit",
"description": "Seção split com texto de um lado e colagem de imagens do outro — composto de ds-hero-section e ds-image-gallery.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/gallery-split",
"dependencies": [],
"registryDependencies": [
"ds-hero-section",
"ds-image-gallery",
"badge"
],
"files": [
"components/ds/gallery-split.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "items",
"required": true,
"type": "ImageGalleryItem[]"
},
{
"name": "columns",
"required": false,
"type": "ImageGalleryColumns"
}
],
"storyTitle": "Gallery/GallerySplit",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
}
]
},
{
"name": "ds-gallery-video",
"title": "GalleryVideo",
"description": "Grid de vídeos que abrem em diálogo ao clicar — composto de ds-video-dialog.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/gallery-video",
"dependencies": [],
"registryDependencies": [
"ds-video-dialog"
],
"files": [
"components/ds/gallery-video.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "GalleryVideoItem[]"
},
{
"name": "columns",
"required": false,
"type": "2 | 3 | 4"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Gallery/GalleryVideo",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "TwoColumns",
"description": "",
"args": "{ columns: 2 },"
}
]
},
{
"name": "ds-gantt",
"title": "Gantt",
"description": "Timeline Gantt com barras e progresso — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/gantt",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton"
],
"files": [
"components/ds/gantt.tsx"
],
"props": [
{
"name": "tasks",
"required": true,
"type": "GanttTask[]"
},
{
"name": "range",
"required": false,
"type": "[number, number]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"storyTitle": "Data Display/Gantt",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ tasks }"
},
{
"name": "Loading",
"description": "",
"args": "{ tasks, loading: true }"
}
]
},
{
"name": "ds-geomap-chart",
"title": "Geomap Chart",
"description": "A geographic map component for rendering GeoJSON/TopoJSON data with tooltips, zooming, choropleth, and point markers.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/geomap-chart",
"dependencies": [
"react-simple-maps",
"geojson",
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"tooltip",
"format-utils"
],
"files": [
"components/ds/geomap-chart.tsx"
],
"props": [
{
"name": "geoData",
"required": true,
"type": "FeatureCollection | string",
"description": "GeoJSON FeatureCollection object **or** a URL string.\nWhen a string is passed, react-simple-maps fetches it internally —\nideal for files served from `/public` (e.g. `\"/geojson/world.geojson\"`)."
},
{
"name": "featureIdProperty",
"required": false,
"type": "string",
"description": "Which feature property to use as the ID when the GeoJSON features have no\ntop-level `id` field (e.g. `\"sigla\"` for Brazilian states, `\"ISO_A3\"` for\nNatural Earth country files). Takes precedence over `properties.id`."
},
{
"name": "data",
"required": false,
"type": "GeoMapFeature[]",
"description": "Values to overlay on features (choropleth / highlight) — matched by id"
},
{
"name": "markers",
"required": false,
"type": "GeoMapMarker[]",
"description": "Point markers to render on top of the map"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "height",
"required": false,
"type": "number",
"description": "Chart canvas height in px — width is always 100%"
},
{
"name": "projection",
"required": false,
"type": "GeoProjection",
"description": "D3 projection name — defaults to \"geoMercator\""
},
{
"name": "projectionConfig",
"required": false,
"type": "{ scale?: number center?: [number, number] rotate?: [number, number, number] }"
},
{
"name": "enableZoom",
"required": false,
"type": "boolean",
"description": "Enable zoom and pan via scroll / drag"
},
{
"name": "zoomRange",
"required": false,
"type": "[number, number]",
"description": "Min/max zoom multiplier when enableZoom is true"
},
{
"name": "colorRange",
"required": false,
"type": "[string, string]",
"description": "Choropleth: interpolate fill between these two colors by value"
},
{
"name": "defaultFill",
"required": false,
"type": "string",
"description": "Default fill for features with no matching data entry"
},
{
"name": "selectedFeatureIds",
"required": false,
"type": "(string | number)[]",
"description": "Feature IDs to highlight with a distinct stroke"
},
{
"name": "selectedStroke",
"required": false,
"type": "string",
"description": "Stroke color for selected features"
},
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "showLegend",
"required": false,
"type": "boolean",
"description": "Show a color scale legend when `colorRange` is set.\nDefaults to `true` whenever `colorRange` is provided."
},
{
"name": "legendPosition",
"required": false,
"type": "LegendPosition",
"description": "Where to render the legend.\nOverlay options (`top-left`, `top-right`, `bottom-left`, `bottom-right`) float\ninside the map canvas. `\"bottom\"` renders below the canvas.\nDefaults to `\"bottom-right\"`."
},
{
"name": "legendLabel",
"required": false,
"type": "string",
"description": "Short label displayed above the gradient bar in the legend"
},
{
"name": "legendOrientation",
"required": false,
"type": "LegendOrientation",
"description": "Gradient bar direction in the legend — defaults to `\"horizontal\"`"
},
{
"name": "onFeatureClick",
"required": false,
"type": "( feature: GeoMapFeature | null, originalId: string | number ) => void"
},
{
"name": "onMarkerClick",
"required": false,
"type": "(marker: GeoMapMarker) => void"
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Show animated skeleton in place of the map while data loads"
}
],
"storyTitle": "Data Display/GeoMapChart",
"stories": [
{
"name": "Default",
"description": "Neutral world map using the Natural Earth projection with a muted fill and no tooltip or data overlay.",
"args": "{\n title: \"World Map\",\n subtitle: \"Neutral — no data overlay\",\n geoData: \"/geojson/world.geojson\",\n data: [],\n markers: [],\n projection: \"geoNaturalEarth1\",\n enableZoom: false,\n zoomRange: [1, 8],\n selectedFeatureIds: [],\n showTooltip: false,\n legendPosition: \"bottom-right\",\n legendOrientation: \"horizontal\",\n loading: false,\n locale: \"en-US\",\n format: undefined,\n decimals: 0,\n abbreviate: false,\n currency: undefined,\n height: 420,\n defaultFill: \"var(--muted)\",\n },"
},
{
"name": "Choropleth",
"description": "South America choropleth map coloring countries by active student enrollment with a vertical color legend and footer summary.",
"args": "{\n title: \"Enrollment by Country\",\n subtitle: \"Active students — South America 2025\",\n geoData: \"/geojson/world.geojson\",\n projection: \"geoMercator\",\n projectionConfig: { scale: 350, center: [-60, -15] },\n height: 420,\n colorRange: [\"#dbeafe\", \"#1d4ed8\"],\n legendOrientation: \"vertical\",\n\n data: [\n { id: \"BRA\", name: \"Brazil\", value: 98400 },\n { id: \"ARG\", name: \"Argentina\", value: 64200 },\n { id: \"COL\", name: \"Colombia\", value: 52100 },\n { id: \"PER\", name: \"Peru\", value: 38700 },\n { id: \"VEN\", name: \"Venezuela\", value: 31500 },\n { id: \"CHL\", name: \"Chile\", value: 28900 },\n { id: \"ECU\", name: \"Ecuador\", value: 22300 },\n { id: \"BOL\", name: \"Bolivia\", value: 18600 },\n ],\n showTooltip: true,\n valueFormatter: (v) =>\n formatValue(v, \"integer\", { abbreviate: true }) + \" students\",\n footer: (\n \n \n Brazil leads with 98.4k active students \n \n
\n ),\n },"
},
{
"name": "WithLegend",
"description": "Brazil states choropleth demonstrating configurable legend position and orientation via the Controls panel.",
"args": "{\n title: \"Legend — position & orientation\",\n subtitle:\n \"Switch legendPosition and legendOrientation in the controls panel\",\n geoData: \"/geojson/brazil-states.geojson\",\n projection: \"geoMercator\",\n projectionConfig: { scale: 700, center: [-54, -15] },\n height: 420,\n featureIdProperty: \"postal\",\n colorRange: [\"#dcfce7\", \"#16a34a\"],\n legendLabel: \"Active students\",\n legendPosition: \"bottom-right\",\n legendOrientation: \"horizontal\",\n data: [\n { id: \"SP\", name: \"Sao Paulo\", value: 98400 },\n { id: \"MG\", name: \"Minas Gerais\", value: 64200 },\n { id: \"RJ\", name: \"Rio de Janeiro\", value: 52100 },\n { id: \"BA\", name: \"Bahia\", value: 38700 },\n { id: \"RS\", name: \"Rio Grande do Sul\", value: 31500 },\n { id: \"PR\", name: \"Parana\", value: 28900 },\n { id: \"SC\", name: \"Santa Catarina\", value: 22300 },\n { id: \"GO\", name: \"Goias\", value: 18600 },\n ],\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"integer\", { abbreviate: true }),\n },"
},
{
"name": "BrazilStates",
"description": "Full Brazil states choropleth with enrollment data using feature ID mapping to postal codes and a green color gradient.",
"args": "{\n title: \"Enrollment by State — Brazil\",\n subtitle: \"Active students 2025\",\n geoData: \"/geojson/brazil-states.geojson\",\n projection: \"geoMercator\",\n projectionConfig: { scale: 700, center: [-54, -15] },\n height: 480,\n featureIdProperty: \"postal\",\n colorRange: [\"#dcfce7\", \"#16a34a\"],\n data: [\n { id: \"SP\", name: \"Sao Paulo\", value: 98400 },\n { id: \"MG\", name: \"Minas Gerais\", value: 64200 },\n { id: \"RJ\", name: \"Rio de Janeiro\", value: 52100 },\n { id: \"BA\", name: \"Bahia\", value: 38700 },\n { id: \"RS\", name: \"Rio Grande do Sul\", value: 31500 },\n { id: \"PR\", name: \"Parana\", value: 28900 },\n { id: \"SC\", name: \"Santa Catarina\", value: 22300 },\n { id: \"GO\", name: \"Goias\", value: 18600 },\n { id: \"CE\", name: \"Ceara\", value: 15200 },\n { id: \"PE\", name: \"Pernambuco\", value: 13800 },\n { id: \"AM\", name: \"Amazonas\", value: 11200 },\n { id: \"PA\", name: \"Para\", value: 10800 },\n { id: \"MA\", name: \"Maranhao\", value: 9600 },\n { id: \"MT\", name: \"Mato Grosso\", value: 8400 },\n { id: \"ES\", name: \"Espirito Santo\", value: 7900 },\n { id: \"PB\", name: \"Paraiba\", value: 7100 },\n { id: \"RN\", name: \"Rio Grande do Norte\", value: 6800 },\n { id: \"AL\", name: \"Alagoas\", value: 5900 },\n { id: \"PI\", name: \"Piaui\", value: 5400 },\n { id: \"MS\", name: \"Mato Grosso do Sul\", value: 5100 },\n { id: \"SE\", name: \"Sergipe\", value: 4300 },\n { id: \"RO\", name: \"Rondonia\", value: 3800 },\n { id: \"TO\", name: \"Tocantins\", value: 3200 },\n { id: \"AC\", name: \"Acre\", value: 2100 },\n { id: \"DF\", name: \"Federal District\", value: 1900 },\n { id: \"AP\", name: \"Amapa\", value: 1700 },\n { id: \"RR\", name: \"Roraima\", value: 1200 },\n ],\n showTooltip: true,\n valueFormatter: (v) =>\n formatValue(v, \"integer\", { abbreviate: true }) + \" students\",\n footer: (\n \n \n SP leads with 98.4k active students \n \n
\n ),\n },"
},
{
"name": "WithMarkers",
"description": "World map zoomed to Brazil showing six campus location markers with tooltip values and interactive marker clicks.",
"args": "{\n title: \"Campus Locations\",\n subtitle: \"Distribution of physical campuses\",\n geoData: \"/geojson/world.geojson\",\n projection: \"geoMercator\",\n projectionConfig: { scale: 700, center: [-50, -15] },\n height: 420,\n defaultFill: \"var(--muted)\",\n markers: [\n {\n id: \"campus-sp-1\",\n coordinates: [-46.63, -23.55],\n label: \"SP Central\",\n value: 12400,\n },\n {\n id: \"campus-sp-2\",\n coordinates: [-47.93, -22.12],\n label: \"SP Interior\",\n value: 5200,\n },\n {\n id: \"campus-rj\",\n coordinates: [-43.17, -22.9],\n label: \"Rio\",\n value: 8800,\n },\n {\n id: \"campus-mg\",\n coordinates: [-43.93, -19.92],\n label: \"BH\",\n value: 6300,\n },\n {\n id: \"campus-rs\",\n coordinates: [-51.23, -30.03],\n label: \"POA\",\n value: 4100,\n },\n {\n id: \"campus-pr\",\n coordinates: [-49.26, -25.43],\n label: \"CWB\",\n value: 3700,\n },\n ],\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"integer\") + \" students\",\n footer: (\n \n 6 campuses — click a marker for details \n \n ),\n },"
},
{
"name": "WithHighlight",
"description": "Brazil states choropleth with SP, MG, and RJ highlighted using `selectedFeatureIds` and a custom primary stroke color.",
"args": "{\n title: \"Selected States\",\n subtitle: \"SP, MG and RJ highlighted — control via selectedFeatureIds\",\n geoData: \"/geojson/brazil-states.geojson\",\n projection: \"geoMercator\",\n projectionConfig: { scale: 700, center: [-54, -15] },\n height: 480,\n featureIdProperty: \"postal\",\n data: [\n { id: \"SP\", name: \"Sao Paulo\", value: 98400 },\n { id: \"MG\", name: \"Minas Gerais\", value: 64200 },\n { id: \"RJ\", name: \"Rio de Janeiro\", value: 52100 },\n ],\n colorRange: [\"#dbeafe\", \"#1d4ed8\"],\n selectedFeatureIds: [\"SP\", \"MG\", \"RJ\"],\n selectedStroke: \"var(--primary)\",\n showTooltip: true,\n valueFormatter: (v) =>\n formatValue(v, \"integer\", { abbreviate: true }) + \" students\",\n },"
},
{
"name": "UsaStates",
"description": "US states choropleth using the geoAlbersUsa projection with median household income data and an amber color gradient.",
"args": "{\n title: \"Median Household Income — US States\",\n subtitle: \"Estimated annual income (USD thousands) — 2023\",\n geoData: \"/geojson/us-states-topo.json\",\n projection: \"geoAlbersUsa\",\n height: 420,\n colorRange: [\"#fef3c7\", \"#b45309\"],\n defaultFill: \"var(--muted)\",\n showTooltip: true,\n valueFormatter: (v) =>\n formatValue(v * 1000, \"currency\", {\n currency: \"USD\",\n abbreviate: true,\n decimals: 0,\n }) + \" / year\",\n data: [\n { id: \"01\", name: \"Alabama\", value: 58 },\n { id: \"02\", name: \"Alaska\", value: 85 },\n { id: \"04\", name: \"Arizona\", value: 72 },\n { id: \"05\", name: \"Arkansas\", value: 57 },\n { id: \"06\", name: \"California\", value: 84 },\n { id: \"08\", name: \"Colorado\", value: 84 },\n { id: \"09\", name: \"Connecticut\", value: 90 },\n { id: \"10\", name: \"Delaware\", value: 75 },\n { id: \"12\", name: \"Florida\", value: 67 },\n { id: \"13\", name: \"Georgia\", value: 71 },\n { id: \"15\", name: \"Hawaii\", value: 92 },\n { id: \"16\", name: \"Idaho\", value: 67 },\n { id: \"17\", name: \"Illinois\", value: 74 },\n { id: \"18\", name: \"Indiana\", value: 67 },\n { id: \"19\", name: \"Iowa\", value: 70 },\n { id: \"20\", name: \"Kansas\", value: 68 },\n { id: \"21\", name: \"Kentucky\", value: 61 },\n { id: \"22\", name: \"Louisiana\", value: 57 },\n { id: \"23\", name: \"Maine\", value: 68 },\n { id: \"24\", name: \"Maryland\", value: 98 },\n { id: \"25\", name: \"Massachusetts\", value: 93 },\n { id: \"26\", name: \"Michigan\", value: 70 },\n { id: \"27\", name: \"Minnesota\", value: 84 },\n { id: \"28\", name: \"Mississippi\", value: 52 },\n { id: \"29\", name: \"Missouri\", value: 67 },\n { id: \"30\", name: \"Montana\", value: 68 },\n { id: \"31\", name: \"Nebraska\", value: 71 },\n { id: \"32\", name: \"Nevada\", value: 70 },\n { id: \"33\", name: \"New Hampshire\", value: 87 },\n { id: \"34\", name: \"New Jersey\", value: 92 },\n { id: \"35\", name: \"New Mexico\", value: 60 },\n { id: \"36\", name: \"New York\", value: 79 },\n { id: \"37\", name: \"North Carolina\", value: 68 },\n { id: \"38\", name: \"North Dakota\", value: 70 },\n { id: \"39\", name: \"Ohio\", value: 68 },\n { id: \"40\", name: \"Oklahoma\", value: 60 },\n { id: \"41\", name: \"Oregon\", value: 73 },\n { id: \"42\", name: \"Pennsylvania\", value: 71 },\n { id: \"44\", name: \"Rhode Island\", value: 74 },\n { id: \"45\", name: \"South Carolina\", value: 63 },\n { id: \"46\", name: \"South Dakota\", value: 68 },\n { id: \"47\", name: \"Tennessee\", value: 65 },\n { id: \"48\", name: \"Texas\", value: 69 },\n { id: \"49\", name: \"Utah\", value: 82 },\n { id: \"50\", name: \"Vermont\", value: 74 },\n { id: \"51\", name: \"Virginia\", value: 85 },\n { id: \"53\", name: \"Washington\", value: 89 },\n { id: \"54\", name: \"West Virginia\", value: 55 },\n { id: \"55\", name: \"Wisconsin\", value: 72 },\n { id: \"56\", name: \"Wyoming\", value: 71 },\n ],\n footer: (\n \n \n MD highest ($98k) · MS lowest ($52k) — US Census ACS 2023 \n \n
\n ),\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the geo map with an animated skeleton that mirrors the title and subtitle structure.",
"args": "{\n title: \"World Map\",\n subtitle: \"Neutral — no data overlay\",\n geoData: \"/geojson/world.geojson\",\n projection: \"geoNaturalEarth1\",\n height: 420,\n showTooltip: false,\n defaultFill: \"var(--muted)\",\n },\n render: (args) => \n {([\"1\", \"2\", \"3\", \"4\", \"5\"] as const).map((v) => (\n \n glass-{v}\n \n ))}\n
"
}
]
},
{
"name": "ds-globe-3d",
"description": "3D Globe component.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/globe-3d",
"dependencies": [
"cobe"
],
"registryDependencies": [],
"files": [
"components/ds/globe-3d.tsx"
],
"props": [
{
"name": "markers",
"required": false,
"type": "Array<{ location: [number, number]; size: number }>"
},
{
"name": "baseColor",
"required": false,
"type": "[number, number, number]"
},
{
"name": "glowColor",
"required": false,
"type": "[number, number, number]"
},
{
"name": "markerColor",
"required": false,
"type": "[number, number, number]"
}
],
"storyTitle": "Data Display/Globe3D",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n
"
},
{
"name": "WithMarkers",
"description": "",
"code": "\n
"
}
]
},
{
"name": "ds-glow",
"title": "Glow",
"description": "Glow posicional (top/above/center/below) com radial gradient blur — inspirado em Launch UI Glow.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/glow",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/glow.tsx"
],
"props": [
{
"name": "color",
"required": false,
"type": "string"
},
{
"name": "size",
"required": false,
"type": "number"
},
{
"name": "position",
"required": false,
"type": "\"top\" | \"above\" | \"above-inner\" | \"center\" | \"bottom-inner\" | \"below\" | \"below-inner\"",
"options": [
"top",
"above",
"above-inner",
"center",
"bottom-inner",
"below",
"below-inner"
],
"default": "top"
},
{
"name": "intensity",
"required": false,
"type": "\"subtle\" | \"medium\" | \"strong\"",
"options": [
"subtle",
"medium",
"strong"
],
"default": "medium"
}
],
"stories": [
{
"name": "Top",
"description": "",
"args": "{ position: \"top\" },"
},
{
"name": "Center",
"description": "",
"args": "{ position: \"center\" },"
},
{
"name": "AllPositions",
"description": "",
"code": "\n {([\"top\", \"above\", \"center\", \"bottom-inner\", \"below\"] as const).map(\n (p) => (\n
\n {p} \n \n {([\"primary\", \"violet\", \"sky\", \"neutral\"] as const).map((tone) => (\n
\n \n {tone}\n
\n \n {([\"sm\", \"md\", \"lg\"] as const).map((radius) => (\n
\n \n {radius}\n
\n \n {([\"default\", \"blurred\", \"solid\"] as const).map((v, idx) => (\n
\n \n \n {v} \n \n \n
\n ))}\n
\n \n \n transparent over hero \n \n \n
\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((s, idx) => (\n
\n \n \n \n \n
\n ))}\n
\n
\n \n sticky top-0 \n \n \n
\n Scroll content\n
\n
\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((l) => (\n \n Announcement — {l}\n \n ))}\n
"
}
]
},
{
"name": "ds-header-brand",
"title": "Header Brand",
"description": "Identidade do header com logo medallion, título e subtítulo, tamanhos sm/md/lg e skeleton.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/header-brand",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton"
],
"files": [
"components/ds/header-brand.tsx"
],
"props": [
{
"name": "href",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "logo",
"required": false,
"type": "React.ReactNode"
},
{
"name": "logoSrc",
"required": false,
"type": "string"
},
{
"name": "logoAlt",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Header/HeaderBrand",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ title: \"LEMA\", subtitle: \"UFPB\", logo: \n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
\n ),",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
"
},
{
"name": "WithLogoSrc",
"description": "",
"args": "{\n title: \"LEMA\",\n logoSrc: \"https://picsum.photos/80/80\",\n logoAlt: \"LEMA logo\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ title: \"LEMA\", subtitle: \"Subtitle\", loading: true },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
\n ),",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
"
},
{
"name": "LongTitle",
"description": "",
"args": "{\n title: \"Laboratório de Engenharia e Mídias Avançadas da UFPB\",\n subtitle: \"Universidade Federal da Paraíba\",\n logo: \n
\n ),"
}
]
},
{
"name": "ds-header-centered",
"title": "Header Centered",
"description": "Header com brand centralizado e nav abaixo, com split actions laterais.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/header-centered",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"ds-header",
"ds-header-brand",
"ds-header-nav",
"ds-header-actions",
"ds-header-mobile-drawer"
],
"files": [
"components/ds/header-centered.tsx"
],
"props": [
{
"name": "brand",
"required": true,
"type": "HeaderBrandProps"
},
{
"name": "navItems",
"required": false,
"type": "HeaderNavItem[]"
},
{
"name": "leftActions",
"required": false,
"type": "HeaderActionItem[]"
},
{
"name": "rightActions",
"required": false,
"type": "HeaderActionItem[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "sticky",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Header/HeaderCentered",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n brand,\n navItems: nav,\n rightActions: [{ label: \"Cart (0)\", variant: \"outline\" as const }],\n },"
},
{
"name": "WithSplitActions",
"description": "",
"args": "{\n brand,\n navItems: nav,\n leftActions: [{ label: \"Search\", variant: \"ghost\" as const }],\n rightActions: [\n { label: \"Sign in\", variant: \"ghost\" as const },\n { label: \"Cart\", variant: \"default\" as const },\n ],\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ brand, navItems: nav, loading: true }"
}
]
},
{
"name": "ds-header-command",
"title": "Header Command",
"description": "Header SaaS com command palette (⌘K), busca global, user menu e notificações.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/header-command",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"ds-header",
"ds-header-brand",
"ds-header-nav",
"ds-header-actions",
"ds-header-mobile-drawer",
"ds-header-user-menu",
"command",
"kbd"
],
"files": [
"components/ds/header-command.tsx"
],
"props": [
{
"name": "brand",
"required": true,
"type": "HeaderBrandProps"
},
{
"name": "navItems",
"required": false,
"type": "HeaderNavItem[]"
},
{
"name": "commandGroups",
"required": false,
"type": "HeaderCommandGroup[]"
},
{
"name": "searchPlaceholder",
"required": false,
"type": "string"
},
{
"name": "onSearch",
"required": false,
"type": "(value: string) => void"
},
{
"name": "user",
"required": false,
"type": "HeaderUserData | null"
},
{
"name": "userGroups",
"required": false,
"type": "HeaderUserMenuItem[][]"
},
{
"name": "notifications",
"required": false,
"type": "number"
},
{
"name": "actions",
"required": false,
"type": "HeaderActionItem[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "sticky",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Header/HeaderCommand",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n brand,\n navItems: nav,\n searchPlaceholder: \"Search or jump to...\",\n commandGroups: [\n {\n heading: \"Suggestions\",\n items: [\n {\n label: \"Create project\",\n icon: \n
\n Custom mega content\n
\n
Promo card
\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
\n {s} \n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((s) => (\n
\n {s} \n
\n ))}\n
\n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Compact search bar in collapsed state with full rounded corners.\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization — placeholder text translated.",
"args": "{\n placeholder: \"Search indicators...\",\n rounded: \"full\",\n locale: \"pt-BR\",\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story: \"Portuguese (pt-BR) localization — placeholder text translated.\",\n },\n },\n },"
},
{
"name": "Square",
"description": "Search bar with square corners (rounded='none') and always-expanded state.",
"args": "{\n rounded: \"none\",\n placeholder: \"Square search...\",\n isExpanded: true,\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Search bar with square corners (rounded='none') and always-expanded state.\",\n },\n },\n },"
},
{
"name": "Expanded",
"description": "Search bar pre-expanded with a custom placeholder.",
"args": "{\n isExpanded: true,\n placeholder: \"Type something...\",\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story: \"Search bar pre-expanded with a custom placeholder.\",\n },\n },\n },"
},
{
"name": "InHeaderMock",
"description": "Search bar rendered inside a mock header layout with navigation links.",
"code": ""
}
]
},
{
"name": "ds-header-simple",
"title": "Header Simple",
"description": "Bloco minimal SaaS: brand + nav desktop + search + actions + mobile drawer.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/header-simple",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"ds-header",
"ds-header-brand",
"ds-header-nav",
"ds-header-actions",
"ds-header-mobile-drawer",
"ds-header-search"
],
"files": [
"components/ds/header-simple.tsx"
],
"props": [
{
"name": "brand",
"required": true,
"type": "HeaderBrandProps"
},
{
"name": "navItems",
"required": false,
"type": "HeaderNavItem[]"
},
{
"name": "actions",
"required": false,
"type": "HeaderActionItem[]"
},
{
"name": "showSearch",
"required": false,
"type": "boolean"
},
{
"name": "onSearch",
"required": false,
"type": "(value: string) => void"
},
{
"name": "searchPlaceholder",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "sticky",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Header/HeaderSimple",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ brand, navItems, actions, size: \"md\" }"
},
{
"name": "WithSearch",
"description": "",
"args": "{\n brand,\n navItems,\n actions,\n showSearch: true,\n searchPlaceholder: \"Search docs...\",\n size: \"md\",\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{ brand, navItems, actions },\n parameters: { a11y: { disable: true } },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((s, idx) => (\n
\n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((s, idx) => (\n
\n
\n ))}\n
\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((l, idx) => (\n
\n
\n ))}\n
\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((l, idx) => (\n
\n
\n ))}\n
\n
\n
\n
\n
\n
\n Hero overlay — header is transparent\n \n
\n Scroll down to see it turn blurred with shadow.\n
\n
\n
\n
\n
\n Scroll content — header becomes blurred after {`8px`}\n
\n
\n {([\"blue\", \"green\", \"orange\", \"purple\", \"red\"] as const).map((p) => (\n
"
},
{
"name": "SmallCells",
"description": "Compact heatmap with `cellSize=28` and reduced gap for a dense day-by-hour engagement density visualization.",
"args": "{\n title: \"Platform Logins — Compact View\",\n subtitle: \"cellSize=28 · week × hour density map\",\n data: engagementData,\n palette: \"blue\",\n showScale: true,\n cellSize: 28,\n gap: 2,\n },"
},
{
"name": "FlatCells",
"description": "The default behavior: cells auto-fill the available width at a fixed `32px` height. Pass `cellHeight` to override — smaller for dense grids, larger for readability.",
"args": "{\n title: \"Absence Rate — Custom Cell Height\",\n subtitle: \"cellHeight=48 · taller cells for better readability\",\n data: absenceByMonth,\n palette: \"red\",\n showValues: true,\n showScale: true,\n cellHeight: 48,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "LocalePTBR",
"description": "Heatmap with Portuguese locale displaying average grade data with localized number formatting.",
"args": "{\n title: \"Average Grade by Subject & Class Group\",\n subtitle: \"Semester 2025.1 — hover over cells for details\",\n data: subjectVsClass,\n palette: \"blue\",\n showScale: true,\n showValues: false,\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the heatmap with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Average Grade by Subject & Class\",\n subtitle: \"Semester 2025.1\",\n data: subjectVsClass,\n palette: \"blue\",\n showValues: true,\n showScale: true,\n },\n render: (args) => \n \n \n \n \n
\n ),\n },"
}
]
},
{
"name": "ds-hero-announcement",
"title": "HeroAnnouncement",
"description": "Hero centralizado com badge de anúncio e mural de logos em marquee — composto de ds-hero-section, ds-announcement-badge e ds-marquee.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-announcement",
"dependencies": [],
"registryDependencies": [
"ds-hero-section",
"ds-announcement-badge",
"ds-marquee"
],
"files": [
"components/ds/hero-announcement.tsx"
],
"props": [
{
"name": "announcement",
"required": false,
"type": "HeroAnnouncementItem"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "logos",
"required": false,
"type": "React.ReactNode[]",
"description": "Logos rendered inside a Marquee below the actions."
},
{
"name": "logosLabel",
"required": false,
"type": "string"
}
],
"storyTitle": "Hero/HeroAnnouncement",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "WithoutLogos",
"description": "",
"args": "{ logos: [] },"
}
]
},
{
"name": "ds-hero-bento",
"title": "HeroBento",
"description": "Hero centralizado seguido de um grid bento — composto de ds-hero-section e ds-bento-grid.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-bento",
"dependencies": [],
"registryDependencies": [
"ds-hero-section",
"ds-bento-grid",
"badge"
],
"files": [
"components/ds/hero-bento.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "A `BentoGrid` (with its `BentoGridItem`s) rendered below the copy."
}
],
"storyTitle": "Hero/HeroBento",
"stories": []
},
{
"name": "ds-hero-cycling",
"title": "HeroCycling",
"description": "Hero centralizado com título que alterna palavras — composto de ds-hero-section e ds-text-rotator.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-cycling",
"dependencies": [],
"registryDependencies": [
"badge",
"ds-hero-section",
"ds-text-rotator"
],
"files": [
"components/ds/hero-cycling.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "titlePrefix",
"required": false,
"type": "React.ReactNode"
},
{
"name": "titleSuffix",
"required": false,
"type": "React.ReactNode"
},
{
"name": "words",
"required": true,
"type": "string[]"
},
{
"name": "rotatorInterval",
"required": false,
"type": "number"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
}
],
"storyTitle": "Hero/HeroCycling",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "FastRotation",
"description": "",
"args": "{ rotatorInterval: 1200 },"
}
]
},
{
"name": "ds-hero-glow",
"title": "Hero Glow",
"description": "Hero com glow radial superior e grid sutil — inspirado em Launch UI Hero Top Glow.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-glow",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"badge",
"skeleton"
],
"files": [
"components/ds/hero-glow.tsx"
],
"props": [
{
"name": "badge",
"required": false,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "glowColor",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "glow",
"required": false,
"type": "\"top\" | \"center\" | \"none\"",
"options": [
"top",
"center",
"none"
],
"default": "top"
}
],
"stories": [
{
"name": "Top",
"description": "",
"args": "{ glow: \"top\" },\n render: (args) => (\n \n Get Started \n \n GitHub\n \n \n }\n />\n ),"
},
{
"name": "Center",
"description": "",
"args": "{ glow: \"center\" },"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-hero-layers",
"title": "Hero Layers",
"description": "Hero com screenshots em camadas sobrepostas (Layers) — inspirado em Launch UI Hero Layers.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-layers",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"badge",
"skeleton"
],
"files": [
"components/ds/hero-layers.tsx"
],
"props": [
{
"name": "badge",
"required": false,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "layers",
"required": false,
"type": "HeroLayersItem[]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "inset",
"required": false,
"type": "\"true\" | \"false\"",
"options": [
"true",
"false"
]
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{},\n render: (args) => (\n \n Get Started \n \n GitHub\n \n \n }\n />\n ),"
},
{
"name": "Inset",
"description": "",
"args": "{ inset: true },\n render: (args) => (\n \n Get Started}\n />\n
\n ),"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-hero-section",
"title": "HeroSection",
"description": "Shell de layout de seção Hero composível em subcomponentes atômicos com alinhamentos center, left e split.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/hero-section",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/hero-section.tsx"
],
"props": [
{
"name": "align",
"required": false,
"type": "\"center\" | \"left\" | \"split\"",
"options": [
"center",
"left",
"split"
],
"default": "center"
},
{
"name": "spacing",
"required": false,
"type": "\"compact\" | \"default\" | \"spacious\"",
"options": [
"compact",
"default",
"spacious"
],
"default": "default"
},
{
"name": "container",
"required": false,
"type": "\"default\" | \"narrow\" | \"wide\" | \"full\"",
"options": [
"default",
"narrow",
"wide",
"full"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"default\" | \"large\" | \"display\"",
"options": [
"default",
"large",
"display"
],
"default": "default"
},
{
"name": "gradient",
"required": false,
"type": "\"true\" | \"false\"",
"options": [
"true",
"false"
]
}
],
"storyTitle": "Hero/HeroSection",
"stories": [
{
"name": "CompleteCenteredHero",
"description": "",
"code": "\n \n \n LEMA Design System v2.0 disponível\n \n \n\n \n Construa interfaces{\" \"}\n \n\n \n O ecossistema definitivo de componentes React 19, Tailwind CSS v4 e\n shadcn/ui padronizado pela Universidade Federal da Paraíba.\n \n\n \n \n\n \n \n \n
Preview da Aplicação
\n
\n Moldura de alta fidelidade para demonstrar telas de sistemas\n administrativos, dashboards de pesquisa e portais institucionais.\n
\n
\n \n "
},
{
"name": "SplitHeroWithVideo",
"description": "",
"code": "\n \n
\n \n Vídeo de demonstração interativa\n \n \n\n
\n Governança e design unificados para squads modernas\n \n\n
\n Elimine retrabalho entre design e engenharia com especificações\n spec-first, testes automatizados de acessibilidade e documentação\n interativa no Storybook.\n \n\n
\n Começar Agora \n \n Ver Documentação\n \n \n
\n \n "
},
{
"name": "WithSocialProofMarquee",
"description": "",
"code": "\n \n A tecnologia que move a inovação na UFPB\n \n\n \n Utilizado por mais de 20 laboratórios e projetos estratégicos de\n tecnologia e pesquisa.\n \n\n \n
\n {[\"LEMA\", \"CI UFPB\", \"STI\", \"PRPG\", \"CCEN\", \"CCS\", \"CE\"].map(\n (item) => (\n \n {item}\n "
}
]
},
{
"name": "ds-hero-stats",
"title": "HeroStats",
"description": "Hero centralizado seguido de tira de estatísticas — composto de ds-hero-section e ds-card-stat.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-stats",
"dependencies": [],
"registryDependencies": [
"badge",
"ds-hero-section",
"ds-card-stat"
],
"files": [
"components/ds/hero-stats.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "stats",
"required": true,
"type": "HeroStatsItem[]"
}
],
"storyTitle": "Hero/HeroStats",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "ThreeStats",
"description": "",
"args": "{ stats: stats.slice(0, 3) },"
}
]
},
{
"name": "ds-hero-terminal",
"title": "HeroTerminal",
"description": "Hero split com preview de terminal/navegador — composto de ds-hero-section, ds-background-glow e ds-browser-mockup.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-terminal",
"dependencies": [],
"registryDependencies": [
"badge",
"ds-hero-section",
"ds-background-glow",
"ds-browser-mockup"
],
"files": [
"components/ds/hero-terminal.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "browserUrl",
"required": false,
"type": "string"
},
{
"name": "browserVariant",
"required": false,
"type": "BrowserMockupProps[\"variant\"]"
},
{
"name": "glowTone",
"required": false,
"type": "BackgroundGlowProps[\"tone\"]"
}
],
"storyTitle": "Hero/HeroTerminal",
"stories": [
{
"name": "VioletGlow",
"description": "",
"args": "{ glowTone: \"violet\", browserVariant: \"default\" },\n render: (args) => (\n \n \n Preview content\n
\n \n ),"
}
]
},
{
"name": "ds-hero-video",
"title": "HeroVideo",
"description": "Hero centralizado com thumbnail de vídeo em diálogo — composto de ds-hero-section e ds-video-dialog.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-video",
"dependencies": [],
"registryDependencies": [
"badge",
"ds-hero-section",
"ds-video-dialog"
],
"files": [
"components/ds/hero-video.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "videoSrc",
"required": true,
"type": "string"
},
{
"name": "thumbnailSrc",
"required": true,
"type": "string"
},
{
"name": "videoTitle",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Hero/HeroVideo",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "WithoutActions",
"description": "",
"args": "{ actions: undefined },"
}
]
},
{
"name": "ds-hero-waitlist",
"title": "HeroWaitlist",
"description": "Hero centralizado com captura de e-mail — composto de ds-hero-section e ds-waitlist-form.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/hero-waitlist",
"dependencies": [],
"registryDependencies": [
"badge",
"ds-hero-section",
"ds-waitlist-form"
],
"files": [
"components/ds/hero-waitlist.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "title",
"required": true,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "socialProof",
"required": false,
"type": "React.ReactNode"
},
{
"name": "onSubmit",
"required": false,
"type": "WaitlistFormProps[\"onSubmit\"]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Hero/HeroWaitlist",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "WithoutSocialProof",
"description": "",
"args": "{ socialProof: undefined },"
}
]
},
{
"name": "ds-how-it-works",
"title": "How It Works",
"description": "Seção explicativa em passos numerados com variante horizontal/vertical.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/how-it-works",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/how-it-works.tsx"
],
"props": [
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "steps",
"required": true,
"type": "HowItWorksStep[]"
},
{
"name": "variant",
"required": false,
"type": "\"number\" | \"icon\" | \"card\""
},
{
"name": "orientation",
"required": false,
"type": "\"horizontal\" | \"vertical\""
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Marketing/HowItWorks",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n steps,\n title: \"How it works\",\n description: \"Three simple steps to get started.\",\n },"
},
{
"name": "WithIcons",
"description": "",
"args": "{ steps, variant: \"icon\" }"
},
{
"name": "Vertical",
"description": "",
"args": "{ steps, orientation: \"vertical\" }"
},
{
"name": "AllSizes",
"description": "",
"args": "{ steps },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Loading",
"description": "",
"args": "{ steps, loading: true }"
}
]
},
{
"name": "ds-how-it-works-timeline",
"title": "How It Works Timeline",
"description": "Timeline vertical com linha conectora — blockus #03 #10 #17.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/how-it-works-timeline",
"dependencies": [],
"registryDependencies": [
"ds-how-it-works"
],
"files": [
"components/ds/how-it-works-timeline.tsx"
],
"storyTitle": "Marketing/HowItWorksTimeline",
"props": [],
"stories": [
{
"name": "Default",
"description": "",
"args": "{ steps }"
},
{
"name": "WithIcons",
"description": "",
"args": "{\n steps: steps.map((s, i) => ({ ...s, icon: {i + 1} })),\n variant: \"icon\",\n },"
}
]
},
{
"name": "ds-icon-button",
"title": "Icon Button",
"description": "An icon-only button with optional tooltip, loading state, size and rounded variants built on the Button and Tooltip primitives.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/icon-button",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"button",
"tooltip"
],
"files": [
"components/ds/icon-button.tsx"
],
"props": [
{
"name": "icon",
"required": true,
"type": "React.ReactNode",
"description": "The icon to display. Typically a lucide icon."
},
{
"name": "label",
"required": true,
"type": "string",
"description": "Accessible label. Used as aria-label and default tooltip text."
},
{
"name": "tooltip",
"required": false,
"type": "string | false",
"description": "Tooltip text. Defaults to `label`. Pass `false` to disable the tooltip."
},
{
"name": "tooltipSide",
"required": false,
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"description": "Side the tooltip appears on. @default \"bottom\""
},
{
"name": "variant",
"required": false,
"type": "IconButtonVariant",
"description": "Visual variant. @default \"ghost\""
},
{
"name": "size",
"required": false,
"type": "IconButtonSize",
"description": "Button size. @default \"icon\""
},
{
"name": "rounded",
"required": false,
"type": "IconButtonRounded",
"description": "Border radius. @default \"md\""
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Shows a spinner and disables interaction."
}
],
"storyTitle": "Actions/IconButton",
"stories": [
{
"name": "Default",
"description": "Default IconButton with a Bell icon and ghost variant.",
"args": "{\n icon: \n
\n ),",
"code": "\n
"
},
{
"name": "Sizes",
"description": "Four icon sizes — icon-xs to icon-lg.",
"args": "{ icon: \n
\n xs · 24px \n
\n
\n sm · 32px \n
\n
\n icon · 36px \n
\n
\n lg · 40px \n
\n
\n
\n xs · 24px \n
\n
\n sm · 32px \n
\n
\n icon · 36px \n
\n
\n lg · 40px \n
\n
\n {([\"none\", \"md\", \"full\"] as const).map((r) => (\n
\n
\n
\n
{r} \n
\n ))}\n
\n {([\"none\", \"md\", \"full\"] as const).map((r) => (\n
\n
\n
\n
{r} \n
\n ))}\n
\n
\n
}\n label=\"Top\"\n tooltipSide=\"top\"\n variant=\"outline\"\n />\n
\n
}\n label=\"Left\"\n tooltipSide=\"left\"\n variant=\"outline\"\n />\n
}\n label=\"Center\"\n tooltip={false}\n variant=\"secondary\"\n />\n
}\n label=\"Right\"\n tooltipSide=\"right\"\n variant=\"outline\"\n />\n
\n
}\n label=\"Bottom\"\n tooltipSide=\"bottom\"\n variant=\"outline\"\n />\n
\n
\n
\n
}\n label=\"Top\"\n tooltipSide=\"top\"\n variant=\"outline\"\n />\n
\n
}\n label=\"Left\"\n tooltipSide=\"left\"\n variant=\"outline\"\n />\n
}\n label=\"Center\"\n tooltip={false}\n variant=\"secondary\"\n />\n
}\n label=\"Right\"\n tooltipSide=\"right\"\n variant=\"outline\"\n />\n
\n
}\n label=\"Bottom\"\n tooltipSide=\"bottom\"\n variant=\"outline\"\n />\n
\n
\n
\n ),",
"code": "\n
"
},
{
"name": "States",
"description": "Comparison between idle, loading, and disabled states.",
"args": "{ icon: \n {([\"Idle\", \"Loading\", \"Disabled\"] as const).map((state) => (\n
\n {state} \n
\n ))}\n
\n {([\"Idle\", \"Loading\", \"Disabled\"] as const).map((state) => (\n
\n {state} \n
\n ))}\n
\n
} label=\"Edit\" size=\"icon-sm\" />\n
} label=\"Copy\" size=\"icon-sm\" />\n
} label=\"Copy link\" size=\"icon-sm\" />\n\n
\n\n
} label=\"Comment\" size=\"icon-sm\" />\n
} label=\"Like\" size=\"icon-sm\" />\n
} label=\"Save\" size=\"icon-sm\" />\n\n
\n\n
} label=\"Share\" size=\"icon-sm\" />\n
}\n label=\"Delete\"\n size=\"icon-sm\"\n variant=\"destructive\"\n />\n
}\n label=\"More options\"\n size=\"icon-sm\"\n />\n
\n
} label=\"Edit\" size=\"icon-sm\" />\n
} label=\"Copy\" size=\"icon-sm\" />\n
} label=\"Copy link\" size=\"icon-sm\" />\n\n
\n\n
} label=\"Comment\" size=\"icon-sm\" />\n
} label=\"Like\" size=\"icon-sm\" />\n
} label=\"Save\" size=\"icon-sm\" />\n\n
\n\n
} label=\"Share\" size=\"icon-sm\" />\n
}\n label=\"Delete\"\n size=\"icon-sm\"\n variant=\"destructive\"\n />\n
}\n label=\"More options\"\n size=\"icon-sm\"\n />\n
\n {[\"Design System v2\", \"Component Library\", \"Storybook Setup\"].map(\n (name) => (\n
\n {name} \n \n
\n \n {[\"Design System v2\", \"Component Library\", \"Storybook Setup\"].map(\n (name) => (\n
\n {name} \n \n
\n ",
"description": "Callback fired when value is confirmed/saved."
},
{
"name": "placeholder",
"required": false,
"type": "string",
"description": "Placeholder shown when the value is empty."
},
{
"name": "validate",
"required": false,
"type": "(val: string) => string | undefined",
"description": "Validation function returning an error string or undefined if valid."
},
{
"name": "disabled",
"required": false,
"type": "boolean",
"description": "Whether editing is disabled."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale for tooltips and button labels."
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Form/InlineEdit",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n value: \"Modelo Econométrico v1\",\n locale: \"pt-BR\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n const trigger = canvas.getByRole(\"button\")\n await expect(trigger).toBeInTheDocument()\n await userEvent.click(trigger)\n const input = canvas.getByRole(\"textbox\")\n await expect(input).toBeInTheDocument()\n },"
},
{
"name": "WithValidation",
"description": "",
"args": "{\n value: \"Modelo Válido\",\n locale: \"pt-BR\",\n },"
},
{
"name": "AsyncSave",
"description": "",
"args": "{\n value: \"Simulação Fiscal 2026\",\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n disabled: true,\n value: \"Campo Bloqueado\",\n },"
},
{
"name": "AllSizes",
"description": "",
"code": "\n
\n \n Pequeno (sm):\n \n {}} />\n
\n
\n \n Médio (md):\n \n {}} />\n
\n
\n \n Grande (lg):\n \n {}}\n />\n
\n
\n {}} />\n {}} />\n {}} />\n {}} />\n
"
}
]
},
{
"name": "ds-input",
"title": "Input UI",
"description": "Extended input with icon prefix/suffix, clearable button, character counter with maxLength, loading spinner, i18n labels, and error state.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/input",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"input",
"label",
"ui-i18n"
],
"files": [
"components/ds/input.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
},
{
"name": "icon",
"required": false,
"type": "React.ReactNode"
},
{
"name": "iconPlacement",
"required": false,
"type": "\"left\" | \"right\""
},
{
"name": "clearable",
"required": false,
"type": "boolean"
},
{
"name": "showCount",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "error",
"required": false,
"type": "string"
},
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "rounded",
"required": false,
"type": "\"none\" | \"light\" | \"full\"",
"options": [
"none",
"light",
"full"
],
"default": "light"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"muted\"",
"options": [
"default",
"muted"
],
"default": "default"
},
{
"name": "bordered",
"required": false,
"type": "\"true\" | \"false\"",
"options": [
"true",
"false"
]
}
],
"storyTitle": "Form/Input",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n placeholder: \"Type something…\",\n },"
},
{
"name": "WithIcon",
"description": "",
"args": "{\n placeholder: \"Search…\",\n icon: \n
"
},
{
"name": "SizesWithIcon",
"description": "",
"code": "\n
"
},
{
"name": "SizesComparison",
"description": "",
"code": "\n
\n \n Without icon\n \n
\n
\n \n With left icon\n \n
\n
\n \n With right icon\n \n
\n
\n
"
},
{
"name": "AllRadius",
"description": "Comparison of all three border radius presets — pill, rounded, and square.",
"code": "\n
"
},
{
"name": "Variants",
"description": "Comparison of default and white background variants.",
"code": "\n
"
},
{
"name": "Disabled",
"description": "Disabled state — input is non-interactive with muted background styling.",
"args": "{\n disabled: true,\n placeholder: \"e.g., user@example.com\",\n defaultValue: \"disabled.user@example.com\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Disabled state — input is non-interactive with muted background styling.\",\n },\n },\n },"
},
{
"name": "WithValue",
"description": "Email input pre-filled with a default email address.",
"args": "{\n defaultValue: \"support@lema.ufpb.br\",\n \"aria-label\": \"Email address\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Email input pre-filled with a default email address.\",\n },\n },\n },"
},
{
"name": "Invalid",
"description": "Invalid state with aria-invalid attribute triggering red border and focus ring styling.",
"args": "{\n \"aria-invalid\": true,\n placeholder: \"e.g., user@example.com\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Invalid state with aria-invalid attribute triggering red border and focus ring styling.\",\n },\n },\n },"
}
]
},
{
"name": "ds-input-password",
"title": "Input Password",
"description": "A secure password input field with a toggle visibility button and custom size/radius options.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/input-password",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"input",
"button",
"ui-i18n"
],
"files": [
"components/ds/input-password.tsx"
],
"storyTitle": "Form/PasswordInput",
"props": [
{
"name": "disabled",
"control": "boolean",
"default": "false"
},
{
"name": "placeholder",
"control": "text",
"default": ""
},
{
"name": "size",
"control": "inline-radio",
"options": [
"sm",
"default",
"lg"
],
"default": "default"
},
{
"name": "radius",
"control": "inline-radio",
"options": [
"pill",
"rounded",
"square"
],
"default": "pill"
},
{
"name": "variant",
"control": "inline-radio",
"options": [
"default",
"white"
],
"default": "default"
},
{
"name": "defaultValue",
"control": "text",
"default": ""
},
{
"name": "locale",
"control": "inline-radio",
"options": [
"en-US",
"pt-BR",
"es-ES",
"fr-FR"
],
"default": "en-US"
}
],
"stories": [
{
"name": "Default",
"description": "Default password input with pill border radius and a visibility toggle button.",
"args": "{\n placeholder: \"Enter your password...\",\n size: \"default\",\n radius: \"pill\",\n variant: \"default\",\n locale: \"en-US\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default password input with pill border radius and a visibility toggle button.\",\n },\n },\n },"
},
{
"name": "Small",
"description": "Password input in small size with compact padding.",
"args": "{\n size: \"sm\",\n placeholder: \"Enter your password...\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Password input in small size with compact padding.\",\n },\n },\n },"
},
{
"name": "Large",
"description": "Password input in large size with spacious padding.",
"args": "{\n size: \"lg\",\n placeholder: \"Enter your password...\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Password input in large size with spacious padding.\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization — toggle button aria-label translated.",
"args": "{\n placeholder: \"Enter your password...\",\n locale: \"pt-BR\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Portuguese (pt-BR) localization — toggle button aria-label translated.\",\n },\n },\n },"
},
{
"name": "AllSizes",
"description": "Comparison of all three size presets — sm, default, and lg.",
"code": ""
},
{
"name": "AllRadius",
"description": "Comparison of all three border radius presets — pill, rounded, and square.",
"code": ""
},
{
"name": "Variants",
"description": "Comparison of default and white background variants.",
"code": ""
},
{
"name": "Disabled",
"description": "Disabled state — input is non-interactive with muted background styling.",
"args": "{\n disabled: true,\n placeholder: \"Enter your password...\",\n defaultValue: \"super_secret_password\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Disabled state — input is non-interactive with muted background styling.\",\n },\n },\n },"
},
{
"name": "WithValue",
"description": "Password input pre-filled with a default password value — initially hidden.",
"args": "{\n defaultValue: \"secret_password_123\",\n \"aria-label\": \"Password\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Password input pre-filled with a default password value — initially hidden.\",\n },\n },\n },"
},
{
"name": "Invalid",
"description": "Invalid state with aria-invalid attribute triggering red border and focus ring.",
"args": "{\n \"aria-invalid\": true,\n placeholder: \"Enter your password...\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Invalid state with aria-invalid attribute triggering red border and focus ring.\",\n },\n },\n },"
}
]
},
{
"name": "ds-integration-tile",
"title": "Integration Tile",
"description": "Tile de integração com logo e status — átomo base integrations.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/integration-tile",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/integration-tile.tsx"
],
"props": [
{
"name": "name",
"required": true,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ReactNode"
},
{
"name": "iconSrc",
"required": false,
"type": "string"
},
{
"name": "iconAlt",
"required": false,
"type": "string"
},
{
"name": "status",
"required": false,
"type": "\"connected\" | \"available\" | \"coming\""
},
{
"name": "href",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Integrations/IntegrationTile",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n name: \"Slack\",\n description: \"Team communication platform\",\n icon: \n
\n ),",
"code": "\n
"
},
{
"name": "Statuses",
"description": "",
"args": "{ name: \"App\" },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Loading",
"description": "",
"args": "{ name: \"Loading\", loading: true }"
}
]
},
{
"name": "ds-integrations",
"title": "Integrations",
"description": "Grid de integrações com busca — blockus #01-12.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/integrations",
"dependencies": [],
"registryDependencies": [
"ds-integration-tile",
"input",
"empty",
"ui-i18n"
],
"files": [
"components/ds/integrations.tsx"
],
"props": [
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "integrations",
"required": true,
"type": "Integration[]"
},
{
"name": "searchable",
"required": false,
"type": "boolean"
},
{
"name": "search",
"required": false,
"type": "string"
},
{
"name": "onSearchChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "columns",
"required": false,
"type": "3 | 4"
}
],
"storyTitle": "Integrations/Integrations",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ integrations: tiles }"
},
{
"name": "Searchable",
"description": "",
"args": "{ integrations: tiles, searchable: true },"
},
{
"name": "Loading",
"description": "",
"args": "{ integrations: tiles, loading: true }"
},
{
"name": "Empty",
"description": "",
"args": "{ integrations: [] }"
}
]
},
{
"name": "ds-integrations-marquee",
"title": "Integrations Marquee",
"description": "Parede de logos em marquee infinita — blockus #13-24.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/integrations-marquee",
"dependencies": [],
"registryDependencies": [
"ds-integration-tile"
],
"files": [
"components/ds/integrations-marquee.tsx"
],
"props": [
{
"name": "rows",
"required": true,
"type": "IntegrationTileProps[][]"
},
{
"name": "speed",
"required": false,
"type": "\"slow\" | \"normal\" | \"fast\""
},
{
"name": "pauseOnHover",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Integrations/IntegrationsMarquee",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ rows: [row, row.slice().reverse()] }"
},
{
"name": "Speeds",
"description": "",
"args": "{ rows: [row] },\n render: () => (\n \n
\n ),",
"code": "\n
"
}
]
},
{
"name": "ds-kanban-board",
"title": "Kanban Board",
"description": "Kanban board com drag-and-drop real (@dnd-kit) — reordena e move cards entre colunas por ponteiro ou teclado.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/kanban-board",
"dependencies": [
"@dnd-kit/core",
"@dnd-kit/sortable",
"@dnd-kit/utilities"
],
"registryDependencies": [
"card",
"badge",
"scroll-area"
],
"files": [
"components/ds/kanban-board.tsx"
],
"props": [
{
"name": "columns",
"required": true,
"type": "KanbanColumnData[]"
},
{
"name": "onColumnsChange",
"required": false,
"type": "(columns: KanbanColumnData[]) => void"
}
],
"storyTitle": "Dashboard/KanbanBoard",
"stories": []
},
{
"name": "ds-keyboard-shortcut",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/keyboard-shortcut",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/keyboard-shortcut.tsx"
],
"props": [
{
"name": "keys",
"required": true,
"type": "string[]",
"description": "Array de teclas. Ex: [\"command\", \"k\"], [\"ctrl\", \"shift\", \"p\"]"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "sm"
}
],
"storyTitle": "Data Display/KeyboardShortcut",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n keys: [\"command\", \"k\"],\n },"
},
{
"name": "Sizes",
"description": "",
"args": "{\n keys: [],\n },\n render: () => (\n \n
\n Small: \n
\n
\n Medium: \n
\n
\n Large: \n
\n
\n
\n Small: \n
\n
\n Medium: \n
\n
\n Large: \n
\n
setOpen(true)}>Open lightbox \n setOpen(true)}>Open single image \n {}}\n showThumbnails={false}\n />\n "
}
]
},
{
"name": "ds-line-chart",
"title": "Line Chart",
"description": "A responsive line chart with plain lines, gradient area fills, stacked areas, reference lines, and brush zoom.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/line-chart",
"dependencies": [
"recharts",
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n",
"format-utils",
"chart-axis-width"
],
"files": [
"components/ds/line-chart.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "Record[]"
},
{
"name": "dataKeys",
"required": true,
"type": "LineChartKey[] | string[]",
"description": "Keys to plot — accepts plain strings or { key, label, color, dashed } objects"
},
{
"name": "categoryKey",
"required": true,
"type": "string",
"description": "Object key mapped to the category (X) axis"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "variant",
"required": false,
"type": "LineChartVariant"
},
{
"name": "curve",
"required": false,
"type": "LineCurve"
},
{
"name": "dots",
"required": false,
"type": "LineDotVisibility",
"description": "When to show data-point dots"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "showGrid",
"required": false,
"type": "boolean"
},
{
"name": "showLegend",
"required": false,
"type": "boolean"
},
{
"name": "legendPosition",
"required": false,
"type": "LegendPosition",
"description": "@default \"bottom\""
},
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "connectNulls",
"required": false,
"type": "boolean",
"description": "Bridge over null / undefined values instead of breaking the line"
},
{
"name": "referenceLines",
"required": false,
"type": "LineChartReferenceLine[]",
"description": "Horizontal threshold lines — targets, SLA limits, averages, etc."
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string",
"description": "Format value-axis tick labels and tooltip values"
},
{
"name": "showBrush",
"required": false,
"type": "boolean",
"description": "Show a range brush below the chart to scroll and zoom the category axis.\nThe brush occupies ~30 px of the chart height, so increase `height`\naccordingly when enabling."
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Show animated skeleton in place of the chart while data loads"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "xAxisLabel",
"required": false,
"type": "string",
"description": "Label centred on the horizontal (category/value) axis"
},
{
"name": "yAxisLabel",
"required": false,
"type": "string",
"description": "Label centred on the vertical (value/category) axis"
}
],
"storyTitle": "Data Display/LineChart",
"stories": [
{
"name": "Default",
"description": "Default smooth line chart showing weekly active user growth over 8 weeks with hover-activated dots.",
"args": "{\n title: \"Weekly Active Users\",\n subtitle: \"Platform engagement over 8 weeks\",\n data: weeklyActiveUsers,\n dataKeys: [{ key: \"users\", label: \"Active Users\" }],\n categoryKey: \"week\",\n variant: \"line\",\n curve: \"smooth\",\n dots: \"hover\",\n height: 280,\n showGrid: true,\n showLegend: false,\n legendPosition: \"bottom\",\n showTooltip: true,\n connectNulls: false,\n showBrush: false,\n loading: false,\n locale: \"en-US\",\n format: undefined,\n decimals: 0,\n abbreviate: false,\n currency: undefined,\n },"
},
{
"name": "Area",
"description": "Line chart with a gradient area fill using `var(--chart-1)` for emphasizing the magnitude beneath the curve.",
"args": "{\n title: \"Weekly Active Users\",\n subtitle: \"Gradient area fill using var(--chart-1)\",\n data: weeklyActiveUsers,\n dataKeys: [{ key: \"users\", label: \"Active Users\" }],\n categoryKey: \"week\",\n variant: \"area\",\n curve: \"smooth\",\n showGrid: true,\n showTooltip: true,\n },"
},
{
"name": "WithAxisLabels",
"description": "Pass `xAxisLabel` and `yAxisLabel` to render centred axis titles. The chart margins are automatically expanded to prevent clipping.",
"args": "{\n data: weeklyActiveUsers,\n dataKeys: [{ key: \"users\", label: \"Active Users\" }],\n categoryKey: \"week\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Pass `xAxisLabel` and `yAxisLabel` to render centred axis titles. The chart margins are automatically expanded to prevent clipping.\",\n },\n },\n },\n render: () => (\n \n
\n +81.7% growth since week 1 \n \n
\n \n
\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
\n ),",
"code": "\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
"
},
{
"name": "WithBrush",
"description": "Multi-series area chart with a brush slider for interactive zoom across 52 weeks of login and download data.",
"args": "{\n title: \"Platform Usage — Full Academic Year\",\n subtitle: \"Drag the handles to zoom in on any stretch of weeks\",\n data: weeklyPlatformUsage,\n dataKeys: [\n { key: \"logins\", label: \"Logins\" },\n { key: \"downloads\", label: \"Downloads\" },\n ],\n categoryKey: \"week\",\n variant: \"area\",\n curve: \"smooth\",\n showGrid: true,\n showLegend: true,\n showTooltip: true,\n showBrush: true,\n height: 340,\n },"
},
{
"name": "WithBrushArea",
"description": "Stacked area chart with a brush slider combining area-stacked series and interactive range zoom for weekly totals.",
"args": "{\n title: \"Stacked Area + Brush\",\n subtitle: \"showBrush + area-stacked — scroll to explore weekly totals\",\n data: weeklyPlatformUsage,\n dataKeys: [\n { key: \"logins\", label: \"Logins\" },\n { key: \"downloads\", label: \"Downloads\" },\n ],\n categoryKey: \"week\",\n variant: \"area-stacked\",\n curve: \"smooth\",\n showGrid: true,\n showLegend: true,\n showTooltip: true,\n showBrush: true,\n height: 340,\n },"
},
{
"name": "LocalePTBR",
"description": "Line chart with Portuguese locale displaying weekly active users and platform engagement in localized format.",
"args": "{\n title: \"Weekly Active Users\",\n subtitle: \"Platform engagement — 8 weeks\",\n data: weeklyActiveUsers,\n dataKeys: [{ key: \"users\", label: \"Active Users\" }],\n categoryKey: \"week\",\n variant: \"line\",\n curve: \"smooth\",\n dots: \"hover\",\n showGrid: true,\n showTooltip: true,\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the line chart with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Weekly Active Users\",\n subtitle: \"Platform engagement over 8 weeks\",\n data: weeklyActiveUsers,\n dataKeys: [{ key: \"users\", label: \"Active Users\" }],\n categoryKey: \"week\",\n variant: \"line\",\n curve: \"smooth\",\n showGrid: true,\n showTooltip: true,\n },\n render: (args) => \n \n ),\n },"
}
]
},
{
"name": "ds-location-picker",
"description": "Address autocomplete picker with async search callback — decoupled from any geocoding API.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/location-picker",
"dependencies": [],
"registryDependencies": [
"skeleton",
"popover",
"command",
"badge",
"button",
"ui-i18n"
],
"files": [
"components/ds/location-picker.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "LocationSuggestion | null"
},
{
"name": "onChange",
"required": false,
"type": "(value: LocationSuggestion | null) => void"
},
{
"name": "onSearch",
"required": false,
"type": "(query: string) => Promise",
"description": "Async search function — called with the query string.\nShould return a list of suggestions.\nConnect any API here: Google Places, Mapbox, ViaCEP, etc."
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "searchPlaceholder",
"required": false,
"type": "string"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "clearable",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Form/LocationPicker",
"stories": [
{
"name": "Default",
"description": "Type 'João' or 'Praia' to see suggestions from the mock API.",
"code": "\n
\n {value && (\n
\n Selected: {value.label}{\" \"}\n {value.lat\n ? `(${value.lat.toFixed(4)}, ${value.lng?.toFixed(4)})`\n : \"\"}\n
\n )}\n
\n
"
},
{
"name": "Loading",
"description": "",
"code": "\n
"
},
{
"name": "Disabled",
"description": "",
"code": "\n
"
},
{
"name": "NoSearch",
"description": "Without `onSearch`, shows an empty state inside the dropdown.",
"code": "\n
"
}
]
},
{
"name": "ds-login-form",
"title": "LoginForm",
"description": "Bloco completo de formulário de login pronto para produção integrando social login, credenciais e passkey.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/login-form",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"ds-social-auth-group",
"ds-auth-separator",
"ds-passkey-prompt",
"input",
"button",
"checkbox",
"label",
"ui-i18n"
],
"files": [
"components/ds/login-form.tsx"
],
"props": [
{
"name": "onSubmit",
"required": false,
"type": "(data: LoginFormData) => Promise | void"
},
{
"name": "onSocialLogin",
"required": false,
"type": "(provider: SocialProvider) => Promise | void"
},
{
"name": "onForgotPassword",
"required": false,
"type": "() => void"
},
{
"name": "onSignUp",
"required": false,
"type": "() => void"
},
{
"name": "onPasskeyLogin",
"required": false,
"type": "() => Promise | void"
},
{
"name": "socialProviders",
"required": false,
"type": "SocialProvider[]"
},
{
"name": "showPasskey",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "errorMessage",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"flat\"",
"options": [
"default",
"flat"
],
"default": "default"
}
],
"storyTitle": "Auth/LoginForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n variant: \"default\",\n socialProviders: [\"google\", \"github\", \"govbr\"],\n },"
},
{
"name": "FlatVariant",
"description": "",
"args": "{\n variant: \"flat\",\n socialProviders: [\"google\", \"govbr\"],\n },"
},
{
"name": "WithError",
"description": "",
"args": "{\n errorMessage:\n \"Credenciais inválidas. Verifique seu e-mail e senha institucional.\",\n },"
},
{
"name": "LoadingState",
"description": "",
"args": "{\n loading: true,\n },"
}
]
},
{
"name": "ds-logo-cloud-glow",
"title": "LogoCloudGlow",
"description": "Mural de logos centralizado dentro de um card com glow que reage ao ponteiro — composto de ds-press-wall e ds-cursor-spotlight.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/logo-cloud-glow",
"dependencies": [],
"registryDependencies": [
"ds-press-wall",
"ds-cursor-spotlight"
],
"files": [
"components/ds/logo-cloud-glow.tsx"
],
"props": [
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "tone",
"required": false,
"type": "CursorSpotlightTone"
},
{
"name": "children",
"required": true,
"type": "React.ReactNode"
}
],
"storyTitle": "LogoCloud/LogoCloudGlow",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ kicker: \"Trusted by industry leaders\", children: [] as never },\n render: (args) => (\n \n {logos.map((name) => (\n \n {name} \n \n ))}\n \n ),"
},
{
"name": "VioletTone",
"description": "",
"args": "{ tone: \"violet\", children: [] as never },\n render: (args) => (\n \n {logos.map((name) => (\n \n {name} \n \n ))}\n \n ),"
}
]
},
{
"name": "ds-logo-cloud-grouped",
"title": "LogoCloudGrouped",
"description": "Mural de logos com filtro de indústria/categoria — composto de ds-press-wall e ds-pill-group.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/logo-cloud-grouped",
"dependencies": [],
"registryDependencies": [
"ds-press-wall",
"ds-pill-group"
],
"files": [
"components/ds/logo-cloud-grouped.tsx"
],
"props": [
{
"name": "groups",
"required": true,
"type": "LogoCloudGroup[]"
},
{
"name": "items",
"required": true,
"type": "LogoCloudGroupedItem[]"
},
{
"name": "allLabel",
"required": false,
"type": "string"
},
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "LogoCloud/LogoCloudGrouped",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
}
]
},
{
"name": "ds-logo-cloud-quotes",
"title": "LogoCloudQuotes",
"description": "Pares de logo do cliente + depoimento curto em grid de cartões — composto de ds-pull-quote.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/logo-cloud-quotes",
"dependencies": [],
"registryDependencies": [
"ds-pull-quote"
],
"files": [
"components/ds/logo-cloud-quotes.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "LogoCloudQuoteItem[]"
}
],
"storyTitle": "LogoCloud/LogoCloudQuotes",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
}
]
},
{
"name": "ds-logo-cloud-stats",
"title": "LogoCloudStats",
"description": "Estatística em destaque acima de um mural de logos — composto de ds-press-wall.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/logo-cloud-stats",
"dependencies": [],
"registryDependencies": [
"ds-press-wall"
],
"files": [
"components/ds/logo-cloud-stats.tsx"
],
"props": [
{
"name": "headline",
"required": true,
"type": "React.ReactNode",
"description": "Big headline, e.g. \"Trusted by 500+ companies\"."
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "kicker",
"required": false,
"type": "string"
},
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "`PressWallLogo` items rendered below."
}
],
"storyTitle": "LogoCloud/LogoCloudStats",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n headline: \"Trusted by 500+ companies\",\n description: \"From startups to Fortune 500 enterprises.\",\n kicker: \"As seen in\",\n children: [] as never,\n },\n render: (args) => (\n \n {logos.map((name) => (\n \n {name} \n \n ))}\n \n ),"
}
]
},
{
"name": "ds-magic-link-form",
"title": "MagicLinkForm",
"description": "Formulário de autenticação sem senha (magic link) com confirmação e temporizador de reenvio.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/magic-link-form",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"input",
"button",
"ui-i18n"
],
"files": [
"components/ds/magic-link-form.tsx"
],
"props": [
{
"name": "onSendLink",
"required": false,
"type": "(email: string) => Promise | void"
},
{
"name": "onBack",
"required": false,
"type": "() => void"
},
{
"name": "resendCooldown",
"required": false,
"type": "number"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"clean\"",
"options": [
"default",
"clean"
],
"default": "default"
}
],
"storyTitle": "Auth/MagicLinkForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n resendCooldown: 30,\n },\n render: (args) => (\n \n
\n ),"
}
]
},
{
"name": "ds-magnetic-element",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/magnetic-element",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/magnetic-element.tsx"
],
"props": [
{
"name": "asChild",
"required": false,
"type": "boolean"
},
{
"name": "strengthValue",
"required": false,
"type": "number",
"description": "Força do efeito magnético. Valores maiores puxam mais. Padrão: 20"
},
{
"name": "strength",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Delight/MagneticElement",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n strengthValue: 30,\n children: (\n \n Hover Me\n \n ),\n },"
},
{
"name": "Strong",
"description": "",
"args": "{\n strengthValue: 60,\n children: (\n \n \n \n ✨\n
\n \n
Efeito Magnético \n
\n Este card reage fortemente ao movimento do cursor.\n
\n
\n \n ),\n },"
},
{
"name": "AsChild",
"description": "",
"args": "{\n asChild: true,\n strengthValue: 40,\n children: (\n \n Usando asChild\n \n ),\n },"
}
]
},
{
"name": "ds-manifesto-statement",
"title": "Manifesto Statement",
"description": "Declaração de manifesto institucional com tipografia editorial grande e citações autorais.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/manifesto-statement",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/manifesto-statement.tsx"
],
"props": [
{
"name": "statement",
"required": true,
"type": "React.ReactNode"
},
{
"name": "eyebrow",
"required": false,
"type": "string"
},
{
"name": "author",
"required": false,
"type": "string"
},
{
"name": "size",
"required": false,
"type": "\"default\" | \"lg\" | \"xl\"",
"options": [
"default",
"lg",
"xl"
],
"default": "default"
},
{
"name": "align",
"required": false,
"type": "\"left\" | \"center\"",
"options": [
"left",
"center"
],
"default": "left"
}
],
"stories": [
{
"name": "Centered",
"description": "",
"args": "{\n align: \"center\",\n size: \"lg\",\n statement: (\n <>\n A tecnologia deve servir à{\" \"}\n clareza cognitiva e ao bem\n público, sem ruídos desnecessários.\n \n ),\n },"
},
{
"name": "Large",
"description": "",
"args": "{\n align: \"center\",\n size: \"xl\",\n statement: \"Construindo o futuro com rigor acadêmico e impacto real.\",\n author: \"Diretoria Colegiada\",\n },"
}
]
},
{
"name": "ds-markdown-editor",
"description": "Markdown editor with edit/preview/split modes, toolbar, and fullscreen.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/markdown-editor",
"dependencies": [],
"registryDependencies": [
"skeleton",
"button",
"separator",
"toggle-group"
],
"files": [
"components/ds/markdown-editor.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "string"
},
{
"name": "onChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "mode",
"required": false,
"type": "MarkdownEditorMode"
},
{
"name": "showToolbar",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Form/MarkdownEditor",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n value: SAMPLE_MD,\n mode: \"split\",\n height: 400,\n },"
},
{
"name": "EditOnly",
"description": "",
"args": "{\n value: SAMPLE_MD,\n mode: \"edit\",\n height: 400,\n },"
},
{
"name": "PreviewOnly",
"description": "",
"args": "{\n value: SAMPLE_MD,\n mode: \"preview\",\n height: 400,\n },"
},
{
"name": "Empty",
"description": "",
"args": "{\n value: \"\",\n mode: \"split\",\n height: 400,\n placeholder: \"Start writing…\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n value: \"\",\n loading: true,\n height: 400,\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n value: SAMPLE_MD,\n disabled: true,\n height: 400,\n },"
},
{
"name": "NoToolbar",
"description": "",
"args": "{\n value: SAMPLE_MD,\n showToolbar: false,\n mode: \"split\",\n height: 360,\n },"
}
]
},
{
"name": "ds-marquee",
"title": "Marquee",
"description": "Carrossel de rolagem contínua para logos de clientes, depoimentos ou cartões de dados.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/marquee",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/marquee.tsx"
],
"props": [
{
"name": "pauseOnHover",
"required": false,
"type": "boolean"
},
{
"name": "fadeEdges",
"required": false,
"type": "boolean"
},
{
"name": "repeat",
"required": false,
"type": "number"
},
{
"name": "direction",
"required": false,
"type": "\"left\" | \"right\" | \"up\" | \"down\"",
"options": [
"left",
"right",
"up",
"down"
],
"default": "left"
},
{
"name": "speed",
"required": false,
"type": "\"slow\" | \"normal\" | \"fast\"",
"options": [
"slow",
"normal",
"fast"
],
"default": "normal"
}
],
"storyTitle": "Data Display/Marquee",
"stories": [
{
"name": "ReverseDirection",
"description": "",
"code": "\n
\n {logos.map((logo) => (\n \n {logo}\n \n
\n {[\n {\n name: \"Ana Silva\",\n role: \"Frontend Lead\",\n text: \"O LEMA Design System acelerou nossa entrega em 4x.\",\n },\n {\n name: \"Carlos Melo\",\n role: \"Tech Lead\",\n text: \"Acessibilidade e tipografia de alto padrão prontas para uso.\",\n },\n {\n name: \"Mariana Costa\",\n role: \"Product Manager\",\n text: \"A consistência visual entre squads melhorou drasticamente.\",\n },\n ].map((item) => (\n \n \n \n
\n \n {item.name.slice(0, 2).toUpperCase()}\n \n \n
\n
\n {item.name}\n
\n
{item.role}
\n
\n
\n “{item.text}”\n
\n \n \n ))}\n \n
\n
\n {logos.map((logo) => (\n \n {logo}\n \n {([\"primary\", \"violet\", \"sky\", \"neutral\"] as const).map((tone) => (\n
\n \n {tone}\n
\n \n {([\"sm\", \"md\", \"lg\"] as const).map((density) => (\n
\n \n {density}\n
\n \n
"
},
{
"name": "Loading",
"description": "",
"args": "{\n loading: true,\n },"
}
]
},
{
"name": "ds-milestone-stepper",
"title": "Milestone Stepper",
"description": "Linha do tempo de marcos cronológicos e trajetória histórica com anos tabulares.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/milestone-stepper",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/milestone-stepper.tsx"
],
"props": [
{
"name": "milestones",
"required": true,
"type": "MilestoneItem[]"
},
{
"name": "orientation",
"required": false,
"type": "\"vertical\" | \"horizontal\"",
"options": [
"vertical",
"horizontal"
],
"default": "vertical"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "Horizontal",
"description": "",
"args": "{\n orientation: \"horizontal\",\n },"
}
]
},
{
"name": "ds-mini-card",
"title": "Mini Card",
"description": "Compact stat label+value unit for horizontal summary strips. Compose with MiniCardGroup (pill, outlined, elevated, ghost variants) and MiniCardStrip (auto-dividers). Supports icons, sub-values, intent colors, and delta change indicators. Size propagates via context.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/mini-card",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton"
],
"files": [
"components/ds/mini-card.tsx"
],
"props": [
{
"name": "height",
"required": false,
"type": "\"short\" | \"tall\"",
"description": "\"short\" (inset margins) for within-group, \"tall\" (full stretch) for between-groups"
},
{
"name": "className",
"required": false,
"type": "string"
}
],
"storyTitle": "Data Display/MiniCard",
"stories": [
{
"name": "Default",
"description": "Minimal — just a label and a value. No icon, no sub, no delta.",
"args": "{\n format: \"integer\",\n decimals: 0,\n locale: \"en-US\",\n currency: \"USD\",\n iconIntent: \"default\",\n intent: \"default\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Minimal — just a label and a value. No icon, no sub, no delta.\",\n },\n },\n },"
},
{
"name": "WithIcon",
"description": "An icon placed before the label/value stack. Use `iconIntent` to color it independently from the value.",
"args": "{\n label: \"Contributors\",\n value: 1450,\n icon: UsersIcon,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"An icon placed before the label/value stack. Use `iconIntent` to color it independently from the value.\",\n },\n },\n },"
},
{
"name": "WithSub",
"description": "The `sub` prop renders a muted secondary value at baseline — ideal for \"used/total\" patterns.",
"args": "{\n label: \"Capacity Used\",\n value: 53,\n sub: \"/153\",\n },\n parameters: {\n docs: {\n description: {\n story:\n 'The `sub` prop renders a muted secondary value at baseline — ideal for \"used/total\" patterns.',\n },\n },\n },"
},
{
"name": "WithDelta",
"description": "Pass a signed string like `\"+18%\"` and direction is inferred automatically. Or pass `\"up\"` / `\"down\"` / `\"neutral\"` for icon-only indicators.",
"code": ""
},
{
"name": "FormatValues",
"description": "Use `format`, `locale`, `currency`, and `decimals` to format numeric values. Set `locale` on `MiniCardGroup` and all children inherit it — override per-card when needed.",
"code": "\n
\n
\n format: integer — pt-BR locale\n
\n
\n
\n
\n
\n
\n format: currency — pt-BR / BRL\n
\n
\n
\n
\n
\n
format: percent
\n
\n
\n
\n
\n
\n format: float — 2 decimals\n
\n
\n
\n
\n
\n
\n Locale via MiniCardGroup — all children inherit\n
\n
\n \n
\n
\n {(\n [\n [\"default\", \"Selected\", 53],\n [\"success\", \"Completed\", 84],\n [\"warning\", \"Medium Risk\", \"High (78.4)\"],\n [\"destructive\", \"Pending\", 12],\n ] as const\n ).map(([intent, label, value]) => (\n
\n \n {intent}\n \n
\n ))}\n
\n
"
},
{
"name": "AllSizes",
"description": "All three size presets. Typography scales with `text-xs / text-sm / text-base` for values and matching label sizes.",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n \n {size}\n \n
\n ))}\n
\n {(\n [\n [\"ghost\", \"No container\"],\n [\"pill\", \"Muted fill\"],\n [\"outlined\", \"Border + card bg\"],\n [\"elevated\", \"Border + shadow\"],\n ] as const\n ).map(([variant, desc]) => (\n
\n \n {desc}\n \n \n \n
\n ))}\n
\n {([\"success\", \"warning\", \"destructive\"] as const).map((accent) => (\n \n
"
},
{
"name": "SizeFromGroup",
"description": "Set `size` on the group and all children inherit it via context — no need to repeat the prop on each card.",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n \n \n ))}\n
"
},
{
"name": "StripLayout",
"description": "Full horizontal strip — `MiniCardStrip` auto-inserts tall separators between its children. Groups can mix variants while the strip handles global spacing.",
"code": "\n \n \n\n \n \n\n \n \n\n "
},
{
"name": "RiskMatrixSummaryBar",
"description": "Replica of the risk-matrix summary bar from the design reference — a full horizontal strip inside a `h-16` toolbar.",
"code": "\n \n \n \n\n \n \n\n \n \n\n \n
"
},
{
"name": "FinancialStrip",
"description": "Financial summary panel using `elevated` variant with accent border and delta indicators for value change.",
"code": "\n \n \n\n \n \n "
},
{
"name": "Loading",
"description": "Skeleton loading state — dimensions match the real content to prevent layout shift.",
"code": "\n
\n
\n
Group with divide
\n
\n \n
\n
\n
Full strip
\n
\n \n \n \n \n \n
\n
\n
\n
\n MiniCardStrip wrap — groups move to the next row when there is not\n enough space\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n MiniCardGroup wrap — items inside the group wrap on very narrow\n screens\n
\n
\n \n \n
\n
\n
\n
"
},
{
"name": "ColorTokens",
"description": "The `accent` prop accepts any CSS color or `var(--my-token)`. It sets `--mini-card-accent` as a CSS custom property and applies to the icon (`text-(--mini-card-accent)`) and value (`text-(--mini-card-accent)`). Delta indicators keep their own semantic colors (`text-success`, `text-destructive`, `text-muted-foreground`) and are unaffected by `accent`.",
"code": "\n
\n
\n Direct CSS color values — icon and value inherit the accent\n
\n
\n
\n
\n
\n
\n Design system token references\n
\n
\n
\n
\n
\n
\n accent in a group — simulating per-category KPI strips\n
\n
\n \n \n \n \n \n
\n
\n
\n
\n English (en-US)\n
\n
\n
\n
\n
\n Español (es-ES)\n
\n
\n
\n
\n
\n Français (fr-FR)\n
\n
\n
\n
\n
\n ),"
},
{
"name": "Large",
"description": "",
"args": "{ frame: \"large\", children: \n
\n ),"
},
{
"name": "Mobile",
"description": "",
"args": "{ frame: \"mobile\" },\n render: (args) => (\n \n \n ),"
},
{
"name": "Inset",
"description": "",
"args": "{ frame: \"large\", inset: true, children: \n
\n ),"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-modal",
"title": "Modal",
"description": "A flexible modal dialog built on Dialog with size variants (sm/md/lg/xl/2xl/full), intent system (default/destructive/success/warning/info), defaultOpen for uncontrolled usage, scrollable body, auto async confirm tracking, loading skeleton, escape/pointer-down-outside/interact-outside event handlers, and i18n support.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/modal",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"dialog",
"button",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/modal.tsx"
],
"props": [
{
"name": "open",
"required": false,
"type": "boolean",
"description": "Controlled open state"
},
{
"name": "defaultOpen",
"required": false,
"type": "boolean"
},
{
"name": "onOpenChange",
"required": false,
"type": "(open: boolean) => void"
},
{
"name": "onEscapeKeyDown",
"required": false,
"type": "React.ComponentPropsWithoutRef< typeof DialogContent >[\"onEscapeKeyDown\"]"
},
{
"name": "onPointerDownOutside",
"required": false,
"type": "React.ComponentPropsWithoutRef< typeof DialogContent >[\"onPointerDownOutside\"]"
},
{
"name": "onInteractOutside",
"required": false,
"type": "React.ComponentPropsWithoutRef< typeof DialogContent >[\"onInteractOutside\"]"
},
{
"name": "trigger",
"required": false,
"type": "React.ReactNode",
"description": "Element that opens the modal when clicked"
},
{
"name": "title",
"required": false,
"type": "React.ReactNode"
},
{
"name": "description",
"required": false,
"type": "React.ReactNode"
},
{
"name": "children",
"required": false,
"type": "React.ReactNode"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode",
"description": "Custom footer — replaces the auto-generated confirm/cancel buttons"
},
{
"name": "icon",
"required": false,
"type": "React.ReactNode",
"description": "Custom icon — overrides the intent default icon"
},
{
"name": "onConfirm",
"required": false,
"type": "() => void | Promise",
"description": "Quick-wire confirm action. Supports async — tracks loading automatically"
},
{
"name": "onCancel",
"required": false,
"type": "() => void",
"description": "Quick-wire cancel action. Called on cancel button click"
},
{
"name": "confirmLabel",
"required": false,
"type": "string"
},
{
"name": "cancelLabel",
"required": false,
"type": "string"
},
{
"name": "confirmLoading",
"required": false,
"type": "boolean",
"description": "Manual loading override for the confirm button"
},
{
"name": "closeOnConfirm",
"required": false,
"type": "boolean",
"description": "When true, wraps the confirm button in DialogClose so it closes after click"
},
{
"name": "size",
"required": false,
"type": "ModalSize"
},
{
"name": "intent",
"required": false,
"type": "ModalIntent"
},
{
"name": "scrollable",
"required": false,
"type": "boolean",
"description": "Makes the body scrollable with a sticky header and footer"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Shows skeleton placeholders instead of children"
},
{
"name": "showCloseButton",
"required": false,
"type": "boolean"
},
{
"name": "maximize",
"required": false,
"type": "boolean",
"description": "When true, shows a button to expand modal to full screen"
},
{
"name": "onMaximized",
"required": false,
"type": "(maximized: boolean) => void",
"description": "Callback fired when the maximize state changes"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "className",
"required": false,
"type": "string",
"description": "Applied to the scrollable body wrapper (or directly to content when non-scrollable)"
}
],
"storyTitle": "Feedback/Modal",
"stories": [
{
"name": "Default",
"description": "Default modal with form fields and auto confirm/cancel footer.",
"code": "Edit Profile}\n onConfirm={() => {}}\n closeOnConfirm\n >\n \n "
},
{
"name": "IntentDestructive",
"description": "Destructive intent: red icon accent + matching confirm button. `onConfirm` returns a Promise — loading state is tracked automatically.",
"code": "\n Show Success}\n confirmLabel=\"Done\"\n closeOnConfirm\n />"
},
{
"name": "IntentWarning",
"description": "Warning intent: amber icon accent.",
"code": "Show Warning}\n confirmLabel=\"Discard\"\n cancelLabel=\"Stay\"\n onConfirm={() => {}}\n closeOnConfirm\n />"
},
{
"name": "IntentInfo",
"description": "Info intent: sky-blue icon accent.",
"code": "What's New}\n confirmLabel=\"Got it\"\n closeOnConfirm\n />"
},
{
"name": "Sizes",
"description": "All six size variants: sm, md, lg, xl, 2xl, full. Each adjusts `max-width` at the sm breakpoint.",
"code": "\n {([\"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"full\"] as const).map((size) => (\n
{size}}\n onConfirm={() => {}}\n closeOnConfirm\n >\n \n Content area for a {size} modal. The max-width\n adjusts per size, with responsive fallback to viewport − 2rem on\n small screens.\n
\n \n ))}\n View Terms}\n confirmLabel=\"Accept\"\n cancelLabel=\"Decline\"\n onConfirm={() => {}}\n closeOnConfirm\n >\n \n {Array.from({ length: 8 }).map((_, i) => (\n
\n \n
\n {i + 1}.{\" \"}\n {\n [\n \"Acceptance\",\n \"Privacy Policy\",\n \"Data Usage\",\n \"User Conduct\",\n \"Intellectual Property\",\n \"Limitations\",\n \"Governing Law\",\n \"Contact\",\n ][i]\n }\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n
\n
\n ))}\n
Sign Out }\n confirmLabel=\"Sign out\"\n onConfirm={() => {}}\n closeOnConfirm\n />"
},
{
"name": "AsyncConfirm",
"description": "When `onConfirm` returns a Promise, the confirm button shows a spinner automatically. No extra state management needed.",
"code": "Publish}\n confirmLabel=\"Publish\"\n onConfirm={() => new Promise((resolve) => setTimeout(resolve, 2000))}\n closeOnConfirm\n >\n \n
\n Q1 2025 — Academic Performance Report\n
\n
\n Last edited 2 hours ago · 42 pages\n
\n
\n \n
\n Reset to defaults\n \n
\n \n \n Cancel\n \n \n \n \n
\n
\n {[\n { icon: BellIcon, label: \"Push notifications\", badge: \"On\" },\n { icon: ShieldIcon, label: \"Security alerts\", badge: \"On\" },\n { icon: UserIcon, label: \"Account activity\", badge: \"Off\" },\n { icon: LockIcon, label: \"Two-factor prompts\", badge: \"On\" },\n ].map(({ icon: Icon, label, badge }) => (\n
\n \n {label} \n
\n \n {badge}\n \n Simulate session alert}\n confirmLabel=\"Stay logged in\"\n cancelLabel=\"Log out\"\n onConfirm={() => {}}\n closeOnConfirm\n />"
},
{
"name": "Maximize",
"description": "Shows an **expand** button (`Maximize2` icon) beside the close button.\nClick toggles to fullscreen (`h-dvh w-full`), replacing the icon with `Minimize2`.\nClick again or close the modal to return to the original size.\n\n**Note:** `maximize` auto-suppresses DialogContent's built-in close button\nto avoid duplicates — both close and maximize are rendered inside the header.",
"code": "Open Report}\n onConfirm={() => {}}\n closeOnConfirm\n >\n \n {Array.from({ length: 2 }).map((_, i) => (\n
\n \n Section {i + 1}\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n
\n \n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n \n {locale}\n \n }\n onConfirm={() => {}}\n closeOnConfirm\n />\n ))}\n
"
}
]
},
{
"name": "ds-morphing-dialog",
"description": "Morphing Dialog using framer-motion.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/morphing-dialog",
"dependencies": [],
"registryDependencies": [
"button"
],
"files": [
"components/ds/morphing-dialog.tsx"
],
"props": [
{
"name": "children",
"required": true,
"type": "React.ReactNode"
}
],
"storyTitle": "Layout/MorphingDialog",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ children: null },\n render: () => {\n return (\n \n \n \n Retro Computing\n \n \n A look back at the 80s\n \n \n\n \n \n
\n
\n \n Retro Computing\n \n \n A look back at the 80s\n \n
\n
\n
\n
\n The 1980s was a decade of rapid technological advancement,\n particularly in the realm of personal computing. Home computers\n became increasingly accessible, transforming how people worked,\n played, and communicated. Iconic machines like the Commodore 64,\n ZX Spectrum, and early Apple Macintoshes defined a\n generation's relationship with technology.\n \n
\n \n )\n },",
"code": "\n \n \n Retro Computing\n \n \n A look back at the 80s\n \n \n\n \n \n
\n
\n \n Retro Computing\n \n \n A look back at the 80s\n \n
\n
\n
\n
\n The 1980s was a decade of rapid technological advancement,\n particularly in the realm of personal computing. Home computers\n became increasingly accessible, transforming how people worked,\n played, and communicated. Iconic machines like the Commodore 64,\n ZX Spectrum, and early Apple Macintoshes defined a\n generation's relationship with technology.\n \n
\n "
}
]
},
{
"name": "ds-multi-select",
"title": "MultiSelect",
"description": "Combobox que permite selecionar múltiplos itens de uma lista.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/multi-select",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"popover",
"command",
"badge",
"button",
"ui-i18n"
],
"files": [
"components/ds/multi-select.tsx"
],
"props": [
{
"name": "options",
"required": true,
"type": "Option[]"
},
{
"name": "value",
"required": true,
"type": "string[]"
},
{
"name": "onChange",
"required": true,
"type": "(value: string[]) => void"
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "maxCount",
"required": false,
"type": "number"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Form/MultiSelect",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n options: MOCK_OPTIONS,\n value: [],\n onChange: () => {},\n },"
},
{
"name": "MaxCount",
"description": "With `maxCount=2`, selecting 3 items shows the first 2 and '+1 selected'.",
"args": "{\n options: MOCK_OPTIONS,\n value: [\"mobile\", \"tablet\", \"desktop\", \"watch\"],\n maxCount: 2,\n onChange: () => {},\n },\n parameters: {\n docs: {\n description: {\n story:\n \"With `maxCount=2`, selecting 3 items shows the first 2 and '+1 selected'.\",\n },\n },\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n options: MOCK_OPTIONS,\n value: [\"mobile\"],\n disabled: true,\n onChange: () => {},\n },"
},
{
"name": "AllSizes",
"description": "The component supports 3 badge sizes: sm, md and lg.",
"args": "{\n options: MOCK_OPTIONS,\n value: [\"mobile\", \"tablet\"],\n onChange: () => {},\n },\n parameters: {\n docs: {\n description: {\n story: \"The component supports 3 badge sizes: sm, md and lg.\",\n },\n },\n },"
},
{
"name": "Locales",
"description": "",
"args": "{\n options: MOCK_OPTIONS,\n value: [\"mobile\"],\n onChange: () => {},\n },"
}
]
},
{
"name": "ds-nav-dots",
"title": "Nav Dots",
"description": "Dot-based section navigation with automatic scroll tracking and tooltips.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/nav-dots",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"tooltip",
"ui-i18n"
],
"files": [
"components/ds/nav-dots.tsx"
],
"props": [
{
"name": "sections",
"required": true,
"type": "NavDotsSection[]",
"description": "Array of sections to navigate between"
},
{
"name": "active",
"required": false,
"type": "number",
"description": "Initially active section index"
},
{
"name": "scrollOnClick",
"required": false,
"type": "boolean",
"description": "Enable smooth scroll when clicking a dot"
},
{
"name": "scrollContainer",
"required": false,
"type": "React.RefObject | \"window\" | null",
"description": "Scroll container to observe. Defaults to `null` which means the\ncomponent will walk up the DOM to find the nearest scrollable ancestor.\nPass a ref or `\"window\"` to override."
},
{
"name": "scrollMargin",
"required": false,
"type": "string",
"description": "IntersectionObserver rootMargin (default: \"0px\")"
},
{
"name": "onActiveChange",
"required": false,
"type": "(index: number) => void",
"description": "Callback when the active section changes"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"stories": [
{
"name": "Default",
"description": "Vertical dot navigation on the right side — scroll the container to see active dot tracking.",
"args": "{\n sections,\n position: \"right\",\n orientation: \"vertical\",\n active: 0,\n scrollOnClick: true,\n scrollMargin: \"0px\",\n locale: \"en-US\",\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Vertical dot navigation on the right side — scroll the container to see active dot tracking.\",\n },\n },\n },"
},
{
"name": "Horizontal",
"description": "Horizontal dot navigation at the top center — active state changes as sections scroll into view.",
"args": "{\n sections,\n orientation: \"horizontal\",\n position: \"right\",\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Horizontal dot navigation at the top center — active state changes as sections scroll into view.\",\n },\n },\n },"
},
{
"name": "LeftPosition",
"description": "Vertical dot navigation pinned to the left edge of the scrollable container.",
"args": "{\n sections,\n position: \"left\",\n orientation: \"vertical\",\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Vertical dot navigation pinned to the left edge of the scrollable container.\",\n },\n },\n },"
},
{
"name": "WithActive",
"description": "Dot navigation with initial active section set to index 2 (Features).",
"args": "{\n sections,\n active: 2,\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Dot navigation with initial active section set to index 2 (Features).\",\n },\n },\n },"
},
{
"name": "WithCallback",
"description": "Dot navigation that fires an onActiveChange callback logged in the Actions panel.",
"args": "{\n sections,\n onActiveChange: fn(),\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Dot navigation that fires an onActiveChange callback logged in the Actions panel.\",\n },\n },\n },"
},
{
"name": "DisabledScroll",
"description": "Dot navigation with scrollOnClick={false} — dots are display-only without scroll behavior.",
"args": "{\n sections,\n scrollOnClick: false,\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Dot navigation with scrollOnClick={false} — dots are display-only without scroll behavior.\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization — section labels and tooltip text translated.",
"args": "{\n sections: sections.map((s) => ({\n ...s,\n label:\n s.id === \"s-intro\"\n ? \"Introduction\"\n : s.id === \"s-process\"\n ? \"Process\"\n : s.id === \"s-features\"\n ? \"Features\"\n : \"Tips\",\n })),\n position: \"right\",\n orientation: \"vertical\",\n locale: \"pt-BR\",\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Portuguese (pt-BR) localization — section labels and tooltip text translated.\",\n },\n },\n },"
},
{
"name": "AllStates",
"description": "Side-by-side comparison of all active states (0–3) in a single view.",
"args": "{\n sections,\n },\n render: () => (\n \n {sections.map((_, idx) => (\n
\n ))}\n
\n {sections.map((_, idx) => (\n
\n ))}\n
\n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Default NavUser with full avatar, name, email, and dropdown action groups.\",\n },\n },\n },"
},
{
"name": "WithoutAvatar",
"description": "NavUser without an avatar URL — uses initials fallback instead.",
"args": "{\n user: { ...mockUser, avatarUrl: undefined },\n groups: defaultGroups,\n },\n render: (args) => (\n \n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"NavUser without an avatar URL — uses initials fallback instead.\",\n },\n },\n },"
},
{
"name": "DashboardMock",
"description": "NavUser rendered inside a mock dashboard header with navigation links.",
"args": "{\n user: mockUser,\n groups: defaultGroups,\n },\n render: (args) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"NavUser rendered inside a mock dashboard header with navigation links.\",\n },\n },\n },"
}
]
},
{
"name": "ds-navbar-floating",
"title": "Navbar Floating",
"description": "Navbar flutuante com blur, borda e menu mobile — inspirado em Launch UI Navbar Floating.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/navbar-floating",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"skeleton"
],
"files": [
"components/ds/navbar-floating.tsx"
],
"props": [
{
"name": "brand",
"required": false,
"type": "React.ReactNode"
},
{
"name": "links",
"required": false,
"type": "NavbarFloatingLink[]"
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"muted\"",
"options": [
"default",
"muted"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "Muted",
"description": "",
"args": "{ variant: \"muted\" },"
},
{
"name": "WithActions",
"description": "",
"args": "{\n actions: (\n <>\n \n Entrar\n \n \n Começar\n \n \n ),\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
}
]
},
{
"name": "ds-notification-center",
"title": "Notification Center",
"description": "A notification center component.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/notification-center",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"popover",
"button"
],
"files": [
"components/ds/notification-center.tsx"
],
"props": [
{
"name": "notifications",
"required": true,
"type": "NotificationItem[]"
},
{
"name": "onMarkAllAsRead",
"required": false,
"type": "() => void"
},
{
"name": "emptyText",
"required": false,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "className",
"required": false,
"type": "string"
}
],
"storyTitle": "Dashboard/NotificationCenter",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n notifications: sampleNotifications,\n onMarkAllAsRead: fn(),\n },"
},
{
"name": "Empty",
"description": "",
"args": "{\n notifications: [],\n onMarkAllAsRead: fn(),\n },"
}
]
},
{
"name": "ds-number-field",
"title": "Number Field",
"description": "Campo numérico com spinbuttons — ReUI Number Field.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/number-field",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"input"
],
"files": [
"components/ds/number-field.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "number"
},
{
"name": "defaultValue",
"required": false,
"type": "number"
},
{
"name": "min",
"required": false,
"type": "number"
},
{
"name": "max",
"required": false,
"type": "number"
},
{
"name": "step",
"required": false,
"type": "number"
},
{
"name": "onChange",
"required": false,
"type": "(value: number) => void"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"storyTitle": "Form/NumberField",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ defaultValue: 5, min: 0, max: 10 }"
}
]
},
{
"name": "ds-office-locations",
"title": "OfficeLocations",
"description": "Grid interativo de unidades e endereços com horários e status de funcionamento.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/office-locations",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/office-locations.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Data Display/OfficeLocations",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n \n {offices.map((office) => (\n \n
"
},
{
"name": "AllSizes",
"description": "",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n \n {offices.slice(0, 2).map((office) => (\n \n ))}\n
"
},
{
"name": "CustomBusinessHours",
"description": "",
"code": "\n \n \n
"
},
{
"name": "Loading",
"description": "",
"code": "\n \n {offices.slice(0, 3).map((office) => (\n \n
"
},
{
"name": "Locales",
"description": "",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as UILocale[]).map((locale) => (\n \n \n ))}\n
"
}
]
},
{
"name": "ds-onboarding",
"title": "Onboarding",
"description": "Passos de onboarding com progresso — ReUI Onboarding 9.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/onboarding",
"dependencies": [],
"registryDependencies": [
"card",
"button",
"progress",
"skeleton"
],
"files": [
"components/ds/onboarding.tsx"
],
"props": [
{
"name": "steps",
"required": true,
"type": "OnboardingStep[]"
},
{
"name": "current",
"required": false,
"type": "number"
},
{
"name": "onNext",
"required": false,
"type": "() => void"
},
{
"name": "onSkip",
"required": false,
"type": "() => void"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Onboarding/Onboarding",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ steps: [{ title: \"Welcome\" }, { title: \"Setup\" }] },"
},
{
"name": "Loading",
"description": "",
"args": "{ steps: [], loading: true }"
}
]
},
{
"name": "ds-otp-input",
"title": "OTP Input",
"description": "An OTP input for verification codes.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/otp-input",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"input-otp",
"skeleton"
],
"files": [
"components/ds/otp-input.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Form/OtpInput",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "Sizes",
"description": "The component supports `sm`, `md`, and `lg` sizes."
},
{
"name": "Invalid",
"description": "Set `invalid` to true to apply error styling.",
"args": "{\n invalid: true,\n },\n parameters: {\n docs: {\n description: {\n story: \"Set `invalid` to true to apply error styling.\",\n },\n },\n },"
},
{
"name": "Disabled",
"description": "Set `disabled` to true to disable interactions.",
"args": "{\n disabled: true,\n },\n parameters: {\n docs: {\n description: {\n story: \"Set `disabled` to true to disable interactions.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Set `loading` to true to render skeleton placeholders.",
"args": "{\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story: \"Set `loading` to true to render skeleton placeholders.\",\n },\n },\n },"
}
]
},
{
"name": "ds-page-header",
"title": "Page Header",
"description": "Cabeçalho de página padronizado com breadcrumbs, título, tags, ações e navegação de retorno.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/page-header",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/page-header.tsx"
],
"props": [
{
"name": "title",
"required": true,
"type": "React.ReactNode",
"description": "Primary title of the page."
},
{
"name": "description",
"required": false,
"type": "React.ReactNode",
"description": "Secondary description or help text."
},
{
"name": "breadcrumbs",
"required": false,
"type": "React.ReactNode",
"description": "Breadcrumb navigation component or elements rendered above title."
},
{
"name": "actions",
"required": false,
"type": "React.ReactNode",
"description": "Actions or button group aligned to the right."
},
{
"name": "badge",
"required": false,
"type": "React.ReactNode",
"description": "Optional status badge rendered next to the title."
},
{
"name": "metadata",
"required": false,
"type": "React.ReactNode",
"description": "Additional metadata tags or info rendered below the description."
},
{
"name": "onBack",
"required": false,
"type": "() => void",
"description": "Callback fired when clicking the back button."
},
{
"name": "backHref",
"required": false,
"type": "string",
"description": "Optional URL for back button if functioning as a link."
},
{
"name": "backLabel",
"required": false,
"type": "string",
"description": "Accessible label for back button. Defaults to localized \"Back\"."
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Loading state showing matched skeleton components."
},
{
"name": "as",
"required": false,
"type": "\"header\" | \"section\" | \"div\"",
"description": "Root HTML element to render. Defaults to 'header'."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale for text translation."
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"compact\" | \"banner\"",
"options": [
"default",
"compact",
"banner"
],
"default": "default"
}
],
"storyTitle": "Layout/PageHeader",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Projetos e Modelos\",\n description: \"Gerencie modelos econômicos e conjuntos de dados do LEMA.\",\n actions: (\n <>\n \n \n \n \n \n ),\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(canvas.getByRole(\"heading\", { level: 1 })).toHaveTextContent(\n \"Projetos e Modelos\"\n )\n },"
},
{
"name": "WithBreadcrumbsAndBadge",
"description": "",
"args": "{\n breadcrumbs: (\n \n Home \n / \n Economia \n / \n Modelos \n
\n ),\n title: \"Modelo DSGE Brasil\",\n badge: Produção v2.1 ,\n description: \"Parâmetros calibrados para o Banco Central do Brasil.\",\n metadata: (\n <>\n \n Criado em 12/03/2025\n \n • \n Autor: Prof. LEMA \n \n ),\n actions: (\n \n \n ),\n },"
},
{
"name": "WithBackButton",
"description": "",
"args": "{\n title: \"Detalhes da Simulação #481\",\n description: \"Convergência de equilíbrio atingida em 142 iterações.\",\n onBack: () => alert(\"Voltar acionado!\"),\n actions: (\n \n Baixar Relatório\n \n ),\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(\n canvas.getByRole(\"button\", { name: \"Voltar\" })\n ).toBeInTheDocument()\n },"
},
{
"name": "AllSizes",
"description": "",
"code": "\n
Ação sm}\n />\n Ação md}\n />\n Ação lg}\n />\n \n
Default}\n />\n Compact}\n />\n Banner}\n />\n Home / Modelos ,\n actions: Carregando ,\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n
{}}\n />\n {}}\n />\n {}}\n />\n {}}\n />\n \n {(\n [\n { size: \"sm\", spinnerClass: \"size-6\" },\n { size: \"md\", spinnerClass: \"size-10\" },\n { size: \"lg\", spinnerClass: \"size-14\" },\n { size: \"xl\", spinnerClass: \"size-20\" },\n { size: \"2xl\", spinnerClass: \"size-28\" },\n { size: \"4xl\", spinnerClass: \"size-40\" },\n ] as const\n ).map(({ size, spinnerClass }) => (\n
\n ))}\n
\n {(\n [\n { size: \"sm\", heightClass: \"h-0.5\" },\n { size: \"md\", heightClass: \"h-1\" },\n { size: \"lg\", heightClass: \"h-1.5\" },\n ] as const\n ).map(({ size, heightClass }) => (\n
\n ))}\n
\n \n \n \n \n 1 \n \n \n \n 2\n \n \n \n 3 \n \n \n \n \n \n \n "
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization — previous/next button text translated.",
"args": "{ locale: \"pt-BR\" },\n parameters: {\n docs: {\n description: {\n story:\n \"Portuguese (pt-BR) localization — previous/next button text translated.\",\n },\n },\n },",
"code": "\n \n \n \n \n 1 \n \n \n \n 2\n \n \n \n 3 \n \n \n \n \n \n \n "
},
{
"name": "RoundedFull",
"description": "Fully rounded buttons via `rounded=\"full\"`. The default is `rounded=\"md\"` (`rounded-md`).",
"code": "\n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n "
},
{
"name": "RoundedLight",
"description": "Lightly rounded buttons via `rounded=\"light\"`.",
"code": "\n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n "
},
{
"name": "RoundedNone",
"description": "Square buttons via `rounded=\"none\"`.",
"code": "\n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n "
},
{
"name": "CustomText",
"description": "Pagination with custom text labels for previous and next buttons.",
"code": "\n \n \n \n \n 1 \n \n \n \n 2\n \n \n \n 3 \n \n \n \n \n "
}
]
},
{
"name": "ds-particle-field",
"title": "Particle Field",
"description": "Fundo de constelação (partículas conectadas por linhas) para hero sections, em canvas 2D com DPR limitado e pausa automática fora da viewport.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/particle-field",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/particle-field.tsx"
],
"props": [
{
"name": "tone",
"required": false,
"type": "\"primary\" | \"violet\" | \"sky\" | \"neutral\"",
"options": [
"primary",
"violet",
"sky",
"neutral"
],
"default": "primary"
},
{
"name": "density",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Effects/ParticleField",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ tone: \"primary\", density: \"md\" },"
},
{
"name": "AllTones",
"description": "",
"code": "\n {([\"primary\", \"violet\", \"sky\", \"neutral\"] as const).map((tone) => (\n
\n \n {tone}\n
\n \n {([\"sm\", \"md\", \"lg\"] as const).map((density) => (\n
\n \n {density}\n
\n \n {([\"primary\", \"violet\", \"sky\", \"warm\", \"cool\", \"neutral\"] as const).map(\n (tone) => (\n
\n \n {tone}\n \n \n {([\"sm\", \"md\", \"lg\"] as const).map((density) => (\n
\n \n {density} ·{\" \"}\n {density === \"sm\" ? \"45\" : density === \"md\" ? \"90\" : \"140\"} estrelas\n \n \n {([\"slow\", \"normal\", \"fast\"] as const).map((speed) => (\n
\n \n {speed}\n \n \n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n só pulso\n \n
\n
\n
\n
\n
\n Parallax por profundidade\n \n
\n Mova o cursor. Estrelas maiores (cross) deslocam até 6px; as menores,\n quase nada. Profundidade = `0.4 + (raio/2.8)*0.6`.\n
\n
\n interactive \n \n lg · violet\n \n
\n
\n
\n
\n
\n
\n Também funciona no claro\n \n
\n Em `bg-background`, o `tone=primary` usa `var(--primary)` escuro. As\n cadentes ainda riscam — teste em `bg-zinc-950` para o efeito hero\n noturno completo.\n
\n
\n
\n
\n \n warm · amber\n \n
\n
\n \n cool · sky\n \n
\n
| void"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "supported",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"card\" | \"button\"",
"options": [
"card",
"button"
],
"default": "card"
}
],
"storyTitle": "Actions/PasskeyPrompt",
"stories": [
{
"name": "CardVariant",
"description": "",
"args": "{\n variant: \"card\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "ButtonVariant",
"description": "",
"args": "{\n variant: \"button\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "Loading",
"description": "",
"args": "{\n variant: \"card\",\n loading: true,\n },\n render: (args) => (\n \n ),"
}
]
},
{
"name": "ds-password-strength-meter",
"title": "PasswordStrengthMeter",
"description": "Indicador dinâmico de segurança de senha com 4 níveis semânticos e checklist de requisitos em tempo real.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/password-strength-meter",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"ui-i18n"
],
"files": [
"components/ds/password-strength-meter.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"storyTitle": "Feedback/PasswordStrengthMeter",
"stories": [
{
"name": "Empty",
"description": "",
"args": "{\n password: \"\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "WeakPassword",
"description": "",
"args": "{\n password: \"senha\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "MediumPassword",
"description": "",
"args": "{\n password: \"SenhaLonga\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "StrongPassword",
"description": "",
"args": "{\n password: \"SenhaForte123\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "ExcellentPassword",
"description": "",
"args": "{\n password: \"SenhaExcepcional@2026\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "WithoutChecklist",
"description": "",
"args": "{\n password: \"MinhaSenha@456\",\n showChecklist: false,\n },\n render: (args) => (\n \n ),"
}
]
},
{
"name": "ds-phone-input",
"title": "Phone Input",
"description": "Phone input field with country code selection and flags.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/phone-input",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"command",
"popover",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/phone-input.tsx"
],
"props": [
{
"name": "value",
"required": false,
"type": "string"
},
{
"name": "onChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "country",
"required": false,
"type": "string"
},
{
"name": "onCountryChange",
"required": false,
"type": "(country: string) => void"
},
{
"name": "countries",
"required": false,
"type": "CountryData[]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "invalid",
"required": false,
"type": "boolean"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n placeholder: \"(00) 00000-0000\",\n \"aria-label\": \"Phone number\",\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{},"
},
{
"name": "Disabled",
"description": "",
"args": "{\n disabled: true,\n value: \"11 98888-8888\",\n },"
},
{
"name": "Invalid",
"description": "",
"args": "{\n invalid: true,\n value: \"numero_invalido\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n loading: true,\n },"
}
]
},
{
"name": "ds-pie-chart",
"title": "Pie Chart",
"description": "A responsive pie and donut chart with interactive center label, legend, and outer slice labels.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/pie-chart",
"dependencies": [
"recharts",
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/pie-chart.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "PieChartItem[]"
},
{
"name": "variant",
"required": false,
"type": "PieChartVariant"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "showLegend",
"required": false,
"type": "boolean"
},
{
"name": "legendPosition",
"required": false,
"type": "LegendPosition",
"description": "@default \"bottom\""
},
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "showLabels",
"required": false,
"type": "boolean",
"description": "Show percentage labels on the outside of each slice"
},
{
"name": "innerLabel",
"required": false,
"type": "string",
"description": "Center label shown when no slice is hovered (donut only) — defaults to \"Total\""
},
{
"name": "paddingAngle",
"required": false,
"type": "number",
"description": "Gap between slices in degrees"
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string",
"description": "Format slice values in the tooltip, legend, and donut center"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale used for default number and percentage formatting"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Show animated skeleton in place of the chart while data loads"
}
],
"storyTitle": "Data Display/PieChart",
"stories": [
{
"name": "Default",
"description": "Standard pie chart showing enrollment distribution across four program types with legend and tooltip.",
"args": "{\n title: \"Enrollment by Program\",\n subtitle: \"Semester 2025.1 — 7,540 students total\",\n data: enrollmentByProgram,\n variant: \"pie\",\n height: 280,\n showLegend: true,\n legendPosition: \"bottom\",\n showTooltip: true,\n showLabels: false,\n paddingAngle: 0,\n loading: false,\n locale: \"en-US\",\n format: undefined,\n decimals: 0,\n abbreviate: false,\n currency: undefined,\n valueFormatter: formatStudents,\n },"
},
{
"name": "Donut",
"description": "Donut chart with an interactive center label showing the total student count; hover a slice to see its breakdown.",
"args": "{\n title: \"Enrollment by Program\",\n subtitle: \"Hover a slice to see its breakdown in the center\",\n data: enrollmentByProgram,\n variant: \"donut\",\n showLegend: true,\n showTooltip: false,\n innerLabel: \"Students\",\n valueFormatter: formatStudents,\n },"
},
{
"name": "DonutBudget",
"description": "Donut chart showing budget allocation percentages with a Budget center label and percentage value formatter.",
"args": "{\n title: \"Budget Allocation\",\n subtitle: \"Fiscal year 2025 — percentage of total\",\n data: budgetAllocation,\n variant: \"donut\",\n showLegend: true,\n showTooltip: false,\n innerLabel: \"Budget\",\n valueFormatter: formatPct,\n height: 300,\n },"
},
{
"name": "WithSliceLabels",
"description": "Pie chart with percentage labels rendered outside each slice showing the breakdown of absence reasons.",
"args": "{\n title: \"Absences by Reason\",\n subtitle: \"Labels show percentage per category\",\n data: absencesByReason,\n variant: \"pie\",\n showLegend: true,\n showTooltip: true,\n showLabels: true,\n height: 300,\n },"
},
{
"name": "DonutWithLabels",
"description": "Donut chart combining a center label with outer slice labels for a comprehensive absence reason breakdown.",
"args": "{\n title: \"Absences by Reason\",\n subtitle: \"Donut + outer labels — both at once\",\n data: absencesByReason,\n variant: \"donut\",\n showLegend: false,\n showTooltip: true,\n showLabels: true,\n innerLabel: \"Absences\",\n height: 300,\n },"
},
{
"name": "PaddedSlices",
"description": "Donut chart with `paddingAngle={4}` creating visible gaps between enrollment program slices for visual separation.",
"args": "{\n title: \"Enrollment by Program\",\n subtitle: \"paddingAngle={4} — visible gap between slices\",\n data: enrollmentByProgram,\n variant: \"donut\",\n paddingAngle: 4,\n showLegend: true,\n showTooltip: true,\n innerLabel: \"Students\",\n valueFormatter: formatStudents,\n },"
},
{
"name": "CustomColors",
"description": "Donut chart using semantic color tokens for completed, in-progress, and dropped course status with padding between slices.",
"args": "{\n title: \"Course Completion Rate\",\n subtitle:\n \"Semantic tokens: var(--chart-2), var(--chart-3), var(--destructive)\",\n data: completionRate,\n variant: \"donut\",\n showLegend: true,\n showTooltip: true,\n innerLabel: \"Students\",\n valueFormatter: formatPct,\n paddingAngle: 3,\n },"
},
{
"name": "NoLegend",
"description": "Pie chart relying solely on tooltips for slice identification, with the legend hidden for a cleaner presentation.",
"args": "{\n title: \"Budget Allocation\",\n subtitle: \"Tooltip only — no legend\",\n data: budgetAllocation,\n variant: \"pie\",\n showLegend: false,\n showTooltip: true,\n height: 300,\n },"
},
{
"name": "WithLocale",
"description": "Pie chart using Portuguese locale to format percentage values with a comma as the decimal separator and outer labels.",
"args": "{\n title: \"Budget (BR Locale)\",\n subtitle: \"locale='pt-BR' formats percentages with a comma\",\n data: budgetAllocation,\n variant: \"pie\",\n showLegend: true,\n showTooltip: true,\n showLabels: true,\n locale: \"pt-BR\",\n height: 300,\n },"
},
{
"name": "LegendPositions",
"description": "Grid of four donut charts placing the legend at top, right, bottom, and left positions for comparison.",
"args": "{ data: enrollmentByProgram },\n render: () => (\n \n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
\n ))}\n
\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
\n ))}\n
\n
\n \n 7,540 enrolled \n \n \n 48 courses \n \n
\n
\n \n
\n
\n
\n Group disabled (all items)\n
\n
\n
\n
\n
\n Individual items disabled\n
\n
\n
\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n ))}\n
\n
\n
\n Locale: pt-BR — contagens formatadas com separador brasileiro\n
\n
\n
\n
\n
\n Risk Matrix \n \n Showing:{\" \"}\n {filter ? (items.find((i) => i.value === filter)?.count ?? 0) : 95}{\" \"}\n entries\n \n
\n
setFilter(v as string | null)}\n label=\"Filter by risk level\"\n />\n \n \n {filter\n ? `Showing ${items.find((i) => i.value === filter)?.label} entries`\n : \"Showing all entries\"}\n \n
\n \n {logos.map((name) => (\n \n {name} \n \n ))}\n "
},
{
"name": "AllSizes",
"description": "",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n {logos.slice(0, 4).map((name) => (\n \n {name} \n \n ))}\n \n ))}\n
\n {logos.slice(0, 4).map((name) => (\n \n {name} \n \n ))}\n "
},
{
"name": "WithAwards",
"description": "",
"code": "\n
\n {logos.slice(0, 3).map((name) => (\n \n {name} \n \n ))}\n \n
\n
\n {logos.slice(0, 4).map((name) => (\n \n {name} \n \n ))}\n "
}
]
},
{
"name": "ds-pricing-calculator",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/pricing-calculator",
"dependencies": [],
"registryDependencies": [
"slider",
"switch",
"label",
"button",
"badge"
],
"files": [
"components/ds/pricing-calculator.tsx"
],
"props": [
{
"name": "basePrice",
"required": false,
"type": "number"
},
{
"name": "unitLabel",
"required": false,
"type": "string"
},
{
"name": "unitPrice",
"required": false,
"type": "number"
},
{
"name": "minUnits",
"required": false,
"type": "number"
},
{
"name": "maxUnits",
"required": false,
"type": "number"
},
{
"name": "step",
"required": false,
"type": "number"
},
{
"name": "discountPercent",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "features",
"required": false,
"type": "string[]"
}
],
"storyTitle": "SaaS/PricingCalculator",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n basePrice: 0,\n unitLabel: \"usuários\",\n unitPrice: 45.5,\n minUnits: 1,\n maxUnits: 50,\n step: 1,\n discountPercent: 15,\n title: \"Plano Corporativo\",\n description:\n \"Arraste o slider para simular o custo mensal para o seu time.\",\n className: \"w-full max-w-4xl mx-auto\",\n },"
},
{
"name": "HighVolumeAPI",
"description": "",
"args": "{\n basePrice: 99,\n unitLabel: \"milhões de requisições\",\n unitPrice: 5,\n minUnits: 1,\n maxUnits: 100,\n step: 5,\n discountPercent: 25,\n currency: \"$\",\n title: \"Plataforma de APIs\",\n description:\n \"Escale suas aplicações sem preocupações. O plano base inclui 1 milhão de requisições.\",\n features: [\n \"Rate limits personalizados\",\n \"SLA de 99.99%\",\n \"IPs dedicados\",\n \"Suporte via Slack\",\n ],\n className: \"w-full max-w-4xl mx-auto\",\n },"
}
]
},
{
"name": "ds-pricing-card",
"title": "Pricing Card",
"description": "Card de plano com preço, badge popular, features e CTA — átomo base pricing.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/pricing-card",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"badge",
"button",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/pricing-card.tsx"
],
"props": [
{
"name": "name",
"required": true,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "price",
"required": true,
"type": "number"
},
{
"name": "originalPrice",
"required": false,
"type": "number"
},
{
"name": "period",
"required": false,
"type": "\"month\" | \"year\" | \"lifetime\""
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "badge",
"required": false,
"type": "string"
},
{
"name": "features",
"required": false,
"type": "PricingFeature[]"
},
{
"name": "action",
"required": false,
"type": "{ label: string; href?: string; onClick?: () => void }"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "featured",
"required": false,
"type": "\"true\" | \"false\"",
"options": [
"true",
"false"
]
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"storyTitle": "Pricing/PricingCard",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n name: \"Pro\",\n description: \"For growing teams\",\n price: 49,\n period: \"month\",\n features: [\n { label: \"10 seats\", included: true },\n { label: \"Priority support\", included: true },\n { label: \"SSO\", included: false },\n ],\n action: { label: \"Get started\" },\n },"
},
{
"name": "Featured",
"description": "",
"args": "{\n name: \"Business\",\n description: \"Most popular\",\n price: 99,\n period: \"month\",\n featured: true,\n badge: \"Most popular\",\n features: [\n { label: \"Unlimited\", included: true },\n { label: \"SSO\", included: true },\n ],\n action: { label: \"Start free trial\" },\n },"
},
{
"name": "WithOriginalPrice",
"description": "",
"args": "{\n name: \"Lifetime\",\n description: \"Pay once\",\n price: 119,\n originalPrice: 199,\n period: \"lifetime\",\n features: [{ label: \"All access\", included: true }],\n action: { label: \"Buy now\" },\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ name: \"Pro\", price: 49, loading: true },"
}
]
},
{
"name": "ds-pricing-comparison",
"title": "Pricing Comparison",
"description": "Tabela comparativa feature × plano — blockus #06.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/pricing-comparison",
"dependencies": [],
"registryDependencies": [
"table"
],
"files": [
"components/ds/pricing-comparison.tsx"
],
"props": [
{
"name": "plans",
"required": true,
"type": "PricingComparisonPlan[]"
},
{
"name": "features",
"required": true,
"type": "PricingComparisonFeature[]"
}
],
"storyTitle": "Pricing/PricingComparison",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n plans: [\n { name: \"Free\" },\n { name: \"Pro\", featured: true, price: \"$49\" },\n { name: \"Enterprise\", price: \"$99\" },\n ],\n features: [\n {\n category: \"Features\",\n items: [\n { label: \"Projects\", values: [\"1\", \"10\", \"Unlimited\"] },\n { label: \"Support\", values: [false, true, true] },\n ],\n },\n {\n category: \"Security\",\n items: [{ label: \"SSO\", values: [false, true, true] }],\n },\n ],\n },"
}
]
},
{
"name": "ds-pricing-grid",
"title": "Pricing Grid",
"description": "Grid 3 cards + toggle mensal/anual — blockus #02 #04 #12.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/pricing-grid",
"dependencies": [],
"registryDependencies": [
"ds-pricing-card",
"toggle-group",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/pricing-grid.tsx"
],
"props": [
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "plans",
"required": true,
"type": "PricingPlan[]"
},
{
"name": "billing",
"required": false,
"type": "\"monthly\" | \"yearly\""
},
{
"name": "onBillingChange",
"required": false,
"type": "(billing: \"monthly\" | \"yearly\") => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Pricing/PricingGrid",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ plans, title: \"Pricing\", description: \"Simple transparent pricing.\" },"
},
{
"name": "Yearly",
"description": "",
"args": "{ plans, billing: \"yearly\" }"
},
{
"name": "Loading",
"description": "",
"args": "{ plans, loading: true }"
}
]
},
{
"name": "ds-product-card",
"title": "Product Card",
"description": "Card de produto eCommerce — ReUI Product Card.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/product-card",
"dependencies": [],
"registryDependencies": [
"card",
"badge",
"button",
"skeleton"
],
"files": [
"components/ds/product-card.tsx"
],
"props": [
{
"name": "title",
"required": true,
"type": "string"
},
{
"name": "price",
"required": true,
"type": "string"
},
{
"name": "originalPrice",
"required": false,
"type": "string"
},
{
"name": "imageSrc",
"required": false,
"type": "string"
},
{
"name": "badge",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Commerce/ProductCard",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Shoes\",\n price: \"$99\",\n imageSrc: \"https://picsum.photos/300/200\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ title: \"x\", price: \"x\", loading: true },"
}
]
},
{
"name": "ds-profile",
"title": "Profile",
"description": "Card de perfil — ReUI Profile 9.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/profile",
"dependencies": [],
"registryDependencies": [
"card",
"avatar",
"button",
"badge",
"skeleton"
],
"files": [
"components/ds/profile.tsx"
],
"props": [
{
"name": "name",
"required": true,
"type": "string"
},
{
"name": "role",
"required": false,
"type": "string"
},
{
"name": "bio",
"required": false,
"type": "string"
},
{
"name": "avatarUrl",
"required": false,
"type": "string"
},
{
"name": "stats",
"required": false,
"type": "{ label: string; value: string }[]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Dashboard/Profile",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n name: \"Ana Silva\",\n role: \"Designer\",\n bio: \"Building DS\",\n avatarUrl: \"https://picsum.photos/100/100\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ name: \"x\", loading: true }"
}
]
},
{
"name": "ds-progress-bar",
"title": "Progress Bar",
"description": "Horizontal progress indicator with animated fill, configurable label positions, size presets, custom fill/track color overrides via CSS tokens, getValueLabel for custom label formatting, max prop, and semantic color intents. Built on the Radix UI Progress primitive.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/progress-bar",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"tooltip"
],
"files": [
"components/ds/progress-bar.tsx"
],
"props": [
{
"name": "value",
"required": true,
"type": "number"
},
{
"name": "name",
"required": false,
"type": "string"
},
{
"name": "namePosition",
"required": false,
"type": "\"left\" | \"right\""
},
{
"name": "upper",
"required": false,
"type": "boolean"
},
{
"name": "showLabel",
"required": false,
"type": "boolean"
},
{
"name": "labelPosition",
"required": false,
"type": "\"left\" | \"right\""
},
{
"name": "labelLayout",
"required": false,
"type": "ProgressBarLabelLayout"
},
{
"name": "labelWidth",
"required": false,
"type": "number"
},
{
"name": "intent",
"required": false,
"type": "ProgressBarIntent"
},
{
"name": "size",
"required": false,
"type": "ProgressBarSize"
},
{
"name": "total",
"required": false,
"type": "number"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "precision",
"required": false,
"type": "number"
},
{
"name": "max",
"required": false,
"type": "number"
},
{
"name": "getValueLabel",
"required": false,
"type": "(value: number, max: number) => string"
},
{
"name": "tooltip",
"required": false,
"type": "ReactNode"
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale used for formatting the percentage label"
},
{
"name": "fillColor",
"required": false,
"type": "string",
"description": "Override fill color via CSS token `--progress-fill`.\nAccepts any CSS color value or `var(--my-token)`.\n@example fillColor=\"var(--color-brand)\""
},
{
"name": "trackColor",
"required": false,
"type": "string",
"description": "Override track (background) color via CSS token `--progress-track`.\nAccepts any CSS color value or `var(--my-token)`."
},
{
"name": "position",
"required": false,
"type": "\"left\" | \"right\"",
"options": [
"left",
"right"
],
"default": "left"
}
],
"storyTitle": "Feedback/ProgressBar",
"stories": [
{
"name": "Default",
"description": "Default progress bar at 65% with primary intent and inline label.",
"args": "{\n value: 65,\n name: \"Progress\",\n namePosition: \"left\",\n upper: false,\n showLabel: true,\n labelPosition: \"left\",\n labelLayout: \"above\",\n intent: \"primary\",\n size: \"sm\",\n loading: false,\n precision: 0,\n locale: \"en-US\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default progress bar at 65% with primary intent and inline label.\",\n },\n },\n },"
},
{
"name": "AllIntents",
"description": "Comparison of all four intent colors — primary, secondary, success, and destructive.",
"args": "{ value: 75 },\n render: () => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Comparison of all four intent colors — primary, secondary, success, and destructive.\",\n },\n },\n },",
"code": ""
},
{
"name": "AllSizes",
"description": "Comparison of all three size presets — sm, md, and lg.",
"args": "{ value: 70 },\n render: () => (\n \n ),\n parameters: {\n docs: {\n description: {\n story: \"Comparison of all three size presets — sm, md, and lg.\",\n },\n },\n },",
"code": ""
},
{
"name": "WithPrecision",
"description": "Progress bar with varying decimal precision — 2, 1, and 0 decimal places.",
"args": "{\n value: 75.642,\n precision: 2,\n name: \"Detailed Progress\",\n },\n render: (args) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bar with varying decimal precision — 2, 1, and 0 decimal places.\",\n },\n },\n },"
},
{
"name": "DifferentLocales",
"description": "By default, `ProgressBar` uses `en-US` to format percentages (e.g., `75.64%`). Passing other locales like `pt-BR` or `fr-FR` changes the decimal separator and symbol spacing.",
"args": "{ value: 75.642 },\n parameters: {\n docs: {\n description: {\n story:\n \"By default, `ProgressBar` uses `en-US` to format percentages (e.g., `75.64%`). Passing other locales like `pt-BR` or `fr-FR` changes the decimal separator and symbol spacing.\",\n },\n },\n },\n render: (args) => (\n \n ),"
},
{
"name": "Loading",
"description": "Loading state with skeleton placeholder replacing the bar fill.",
"args": "{\n value: 50,\n name: \"Loading\",\n loading: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Loading state with skeleton placeholder replacing the bar fill.\",\n },\n },\n },"
},
{
"name": "LoadingStates",
"description": "Skeleton placeholders rendered by `loading={true}` across all three `labelLayout` values and all three sizes. Each skeleton matches the dimensions of the real content it replaces.",
"args": "{ value: 50 },\n parameters: {\n docs: {\n description: {\n story:\n \"Skeleton placeholders rendered by `loading={true}` across all three `labelLayout` values and all three sizes. Each skeleton matches the dimensions of the real content it replaces.\",\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "WithTooltip",
"description": "Progress bar with a tooltip showing additional context on hover.",
"args": "{\n value: 85,\n name: \"Storage\",\n tooltip: \"85 GB of 100 GB used\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bar with a tooltip showing additional context on hover.\",\n },\n },\n },"
},
{
"name": "NoLabel",
"description": "Progress bar with the percentage label hidden via showLabel={false}.",
"args": "{\n value: 50,\n name: \"Hidden Label\",\n showLabel: false,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bar with the percentage label hidden via showLabel={false}.\",\n },\n },\n },"
},
{
"name": "LabelRight",
"description": "Progress bar with the percentage label positioned on the right side of the bar.",
"args": "{\n value: 60,\n name: \"Progress\",\n labelPosition: \"right\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bar with the percentage label positioned on the right side of the bar.\",\n },\n },\n },"
},
{
"name": "NameRight",
"description": "Progress bar with the name label positioned on the right side of the bar.",
"args": "{\n value: 70,\n name: \"Progress\",\n namePosition: \"right\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bar with the name label positioned on the right side of the bar.\",\n },\n },\n },"
},
{
"name": "Uppercase",
"description": "Progress bar with uppercase name label via the upper prop.",
"args": "{\n value: 55,\n name: \"Progress Status\",\n upper: true,\n },\n parameters: {\n docs: {\n description: {\n story: \"Progress bar with uppercase name label via the upper prop.\",\n },\n },\n },"
},
{
"name": "LabelLayoutInline",
"description": "`labelLayout=\"inline\"` (default) — name and percentage share the same row as the bar.",
"args": "{ value: 72 },\n parameters: {\n docs: {\n description: {\n story:\n '`labelLayout=\"inline\"` (default) — name and percentage share the same row as the bar.',\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "LabelLayoutAbove",
"description": "`labelLayout=\"above\"` — name (left) and percentage (right) appear in a row above the full-width bar.",
"args": "{ value: 72 },\n parameters: {\n docs: {\n description: {\n story:\n '`labelLayout=\"above\"` — name (left) and percentage (right) appear in a row above the full-width bar.',\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "LabelLayoutBelow",
"description": "`labelLayout=\"below\"` — bar renders first, then name (left) and percentage (right) appear below it.",
"args": "{ value: 72 },\n parameters: {\n docs: {\n description: {\n story:\n '`labelLayout=\"below\"` — bar renders first, then name (left) and percentage (right) appear below it.',\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "LabelLayoutComparison",
"description": "Side-by-side comparison of all three `labelLayout` values with the same data.",
"args": "{ value: 60 },\n parameters: {\n docs: {\n description: {\n story:\n \"Side-by-side comparison of all three `labelLayout` values with the same data.\",\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "RatioLabel",
"description": "When `total` is provided the bar fill is calculated as `value / total` and the label switches from percentage to `value / total` format. Compatible with all `labelLayout` values.",
"args": "{\n value: 20,\n total: 95,\n size: \"sm\",\n name: \"Auditoria Normal\",\n labelLayout: \"above\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"When `total` is provided the bar fill is calculated as `value / total` and the label switches from percentage to `value / total` format. Compatible with all `labelLayout` values.\",\n },\n },\n },\n render: () => (\n \n ),",
"code": ""
},
{
"name": "FixedLabelWidth",
"description": "Progress bars with fixed label width for consistent alignment across multiple items.",
"args": "{ value: 75 },\n render: () => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Progress bars with fixed label width for consistent alignment across multiple items.\",\n },\n },\n },",
"code": ""
},
{
"name": "ColorTokens",
"description": "The `fillColor` and `trackColor` props accept any CSS color or `var(--my-token)`. They set `--progress-fill` and `--progress-track` as CSS custom properties and apply via `bg-(--progress-fill)` / `bg-(--progress-track)` — bypassing the `intent` enum for per-instance customization.",
"args": "{ value: 72 },\n render: () => (\n \n
\n
\n Direct CSS color values\n
\n
\n
\n
\n
\n
\n Design system token references\n
\n
\n
\n
\n
\n
\n
\n External token with fallback\n
\n
\n
\n
\n
\n
\n Direct CSS color values\n
\n
\n
\n
\n
\n
\n Design system token references\n
\n
\n
\n
\n
\n
\n
\n External token with fallback\n
\n
\n
\n
\n
\n
\n Direct value\n
\n
\n
\n
\n
\n Success token\n
\n
\n
\n
\n
\n Warning token\n
\n
\n
\n
\n
\n External token\n
\n
\n
\n
\n
\n Custom track\n
\n
\n
\n
\n
\n
\n Direct value\n
\n
\n
\n
\n
\n Success token\n
\n
\n
\n
\n
\n Warning token\n
\n
\n
\n
\n
\n External token\n
\n
\n
\n
\n
\n Custom track\n
\n
\n
\n
for emphasis)."
},
{
"name": "name",
"required": false,
"type": "string"
},
{
"name": "role",
"required": false,
"type": "string"
},
{
"name": "avatarSrc",
"required": false,
"type": "string"
},
{
"name": "avatarFallback",
"required": false,
"type": "string"
},
{
"name": "size",
"required": false,
"type": "PullQuoteSize"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "align",
"required": false,
"type": "\"start\" | \"center\"",
"options": [
"start",
"center"
],
"default": "start"
},
{
"name": "tone",
"required": false,
"type": "\"plain\" | \"violet\" | \"sky\"",
"options": [
"plain",
"violet",
"sky"
],
"default": "plain"
}
],
"storyTitle": "Data Display/PullQuote",
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "Centered",
"description": "",
"args": "{\n align: \"center\",\n tone: \"violet\",\n },\n parameters: {\n layout: \"fullscreen\",\n },\n render: (args) => (\n \n ),"
},
{
"name": "WithoutAvatar",
"description": "",
"args": "{\n name: \"Product Team\",\n role: undefined,\n avatarFallback: undefined,\n },"
}
]
},
{
"name": "ds-qr-code",
"title": "Qr Code",
"description": "QR code placeholder — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/qr-code",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/qr-code.tsx"
],
"props": [
{
"name": "value",
"required": true,
"type": "string"
},
{
"name": "size",
"required": false,
"type": "number"
}
],
"storyTitle": "Data Display/QrCode",
"stories": [
{
"name": "Default",
"description": "",
"args": "{ value: \"https://lema.ufpb.br\", size: 128 },"
}
]
},
{
"name": "ds-radar-chart",
"title": "Radar Chart",
"description": "A responsive radar (spider) chart for comparing multiple entities across the same set of dimensions.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/radar-chart",
"dependencies": [
"recharts",
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/radar-chart.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "Record[]"
},
{
"name": "dataKeys",
"required": true,
"type": "RadarChartKey[] | string[]",
"description": "Keys to plot — accepts plain strings or { key, label, color, filled } objects"
},
{
"name": "categoryKey",
"required": true,
"type": "string",
"description": "Object key whose values become the axis spoke labels"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "filled",
"required": false,
"type": "boolean",
"description": "Fill each radar area with a semi-transparent color (default: true)"
},
{
"name": "fillOpacity",
"required": false,
"type": "number",
"description": "Fill opacity applied to every filled series (default: 0.18)"
},
{
"name": "dots",
"required": false,
"type": "boolean",
"description": "Show a dot at each data vertex"
},
{
"name": "gridShape",
"required": false,
"type": "RadarGridShape",
"description": "Background grid shape (default: \"polygon\")"
},
{
"name": "showRadiusAxis",
"required": false,
"type": "boolean",
"description": "Show the radial value axis ticks"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "showLegend",
"required": false,
"type": "boolean"
},
{
"name": "legendPosition",
"required": false,
"type": "LegendPosition",
"description": "@default \"bottom\""
},
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string",
"description": "Format radial axis ticks and tooltip values"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Show animated skeleton in place of the chart while data loads"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Data Display/RadarChart",
"stories": [
{
"name": "Default",
"description": "Default filled radar chart showing a single student's performance profile across six academic subjects.",
"args": "{\n title: \"Student Performance Profile\",\n subtitle: \"Alice — semester 2025.1 scores\",\n data: studentPerformance,\n dataKeys: [{ key: \"alice\", label: \"Alice\" }],\n categoryKey: \"subject\",\n filled: true,\n fillOpacity: 0.18,\n dots: false,\n gridShape: \"polygon\",\n showRadiusAxis: false,\n height: 300,\n showLegend: false,\n legendPosition: \"bottom\",\n showTooltip: true,\n loading: false,\n locale: \"en-US\",\n format: undefined,\n decimals: 0,\n abbreviate: false,\n currency: undefined,\n valueFormatter: (v) => formatValue(v, \"integer\"),\n },"
},
{
"name": "Unfilled",
"description": "Outline-only radar chart with dots at each vertex for a clean, minimal single-series comparison.",
"args": "{\n title: \"Student Performance Profile\",\n subtitle: \"Outline-only — no fill\",\n data: studentPerformance,\n dataKeys: [{ key: \"alice\", label: \"Alice\" }],\n categoryKey: \"subject\",\n filled: false,\n dots: true,\n showTooltip: true,\n },"
},
{
"name": "MultiSeries",
"description": "Three-series radar chart comparing Alice, Bob, and Carol across six academic subjects with a legend.",
"args": "{\n title: \"Student Comparison\",\n subtitle: \"Three students across six subjects\",\n data: studentPerformance,\n dataKeys: [\n { key: \"alice\", label: \"Alice\" },\n { key: \"bob\", label: \"Bob\" },\n { key: \"carol\", label: \"Carol\" },\n ],\n categoryKey: \"subject\",\n filled: true,\n showLegend: true,\n showTooltip: true,\n height: 340,\n },"
},
{
"name": "CurrentVsTarget",
"description": "Radar chart combining a filled current-level series with an outlined target series for competency gap analysis.",
"args": "{\n title: \"Competency Assessment\",\n subtitle: \"Current level vs. target — filled baseline, outline target\",\n data: currentVsTarget,\n dataKeys: [\n {\n key: \"current\",\n label: \"Current\",\n color: \"var(--chart-1)\",\n filled: true,\n },\n {\n key: \"target\",\n label: \"Target\",\n color: \"var(--chart-2)\",\n filled: false,\n },\n ],\n categoryKey: \"skill\",\n showLegend: true,\n showTooltip: true,\n dots: true,\n height: 340,\n },"
},
{
"name": "CircleGrid",
"description": "Radar chart with circular grid lines comparing three departments across five capability dimensions.",
"args": "{\n title: \"Department Capability\",\n subtitle: 'gridShape=\"circle\" — smooth circular grid',\n data: departmentCapability,\n dataKeys: [\n { key: \"engineering\", label: \"Engineering\" },\n { key: \"medicine\", label: \"Medicine\" },\n { key: \"law\", label: \"Law\" },\n ],\n categoryKey: \"dimension\",\n gridShape: \"circle\",\n filled: true,\n showLegend: true,\n showTooltip: true,\n height: 340,\n },"
},
{
"name": "WithRadiusAxis",
"description": "Radar chart with radial axis tick values enabled, comparing semester 1 and semester 2 scores across subjects.",
"args": "{\n title: \"Semester Comparison\",\n subtitle: \"showRadiusAxis — tick values on the radial axis\",\n data: semesterComparison,\n dataKeys: [\n { key: \"sem1\", label: \"Semester 1\" },\n { key: \"sem2\", label: \"Semester 2\" },\n ],\n categoryKey: \"subject\",\n filled: true,\n showRadiusAxis: true,\n showLegend: true,\n showTooltip: true,\n height: 320,\n },"
},
{
"name": "WithDots",
"description": "Two-series radar chart with visible vertex dots for precise value comparison across department capabilities.",
"args": "{\n title: \"Department Capability\",\n subtitle: \"Dots visible at each vertex\",\n data: departmentCapability,\n dataKeys: [\n { key: \"engineering\", label: \"Engineering\" },\n { key: \"medicine\", label: \"Medicine\" },\n ],\n categoryKey: \"dimension\",\n filled: true,\n dots: true,\n showLegend: true,\n showTooltip: true,\n height: 320,\n },"
},
{
"name": "WithFooter",
"description": "Single-series radar chart with a footer showing the top score and average performance across all subjects.",
"args": "{\n title: \"Student Performance Profile\",\n subtitle: \"Alice · Semester 2025.1\",\n data: studentPerformance,\n dataKeys: [{ key: \"alice\", label: \"Alice\", color: \"var(--chart-2)\" }],\n categoryKey: \"subject\",\n filled: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"integer\"),\n footer: (\n \n
\n Top score: English (91) \n \n
\n \n
\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
\n ),",
"code": "\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
"
}
]
},
{
"name": "ds-radial-chart",
"title": "Radial Chart",
"description": "A responsive radial bar chart with concentric rings, single-metric gauge mode, and legend support.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/radial-chart",
"dependencies": [
"recharts",
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"skeleton",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/radial-chart.tsx"
],
"storyTitle": "Data Display/RadialChart",
"props": [
{
"name": "showTrack",
"control": "boolean",
"default": "true"
},
{
"name": "showLegend",
"control": "boolean",
"default": "false"
},
{
"name": "legendPosition",
"control": "inline-radio",
"options": [
"top",
"bottom",
"left",
"right"
],
"default": "bottom"
},
{
"name": "showTooltip",
"control": "boolean",
"default": "true"
},
{
"name": "innerLabel",
"control": "text",
"default": ""
},
{
"name": "title",
"control": "text",
"default": ""
},
{
"name": "subtitle",
"control": "text",
"default": ""
},
{
"name": "locale",
"control": "inline-radio",
"options": [
"en-US",
"pt-BR",
"es-ES",
"fr-FR"
],
"default": "en-US"
},
{
"name": "loading",
"control": "boolean",
"default": "false"
},
{
"name": "format",
"control": "inline-radio",
"options": [
"number",
"currency",
"percent",
"compact"
],
"default": ""
},
{
"name": "currency",
"control": "text",
"default": ""
},
{
"name": "abbreviate",
"control": "boolean",
"default": "false"
}
],
"stories": [
{
"name": "Default",
"description": "Four concentric radial bars showing approval rate, attendance, completion, and satisfaction on a 0–100 scale with track and tooltip.",
"args": "{\n title: \"Semester Performance\",\n subtitle: \"Key indicators — 0–100 scale\",\n data: semesterMetrics,\n height: 320,\n showTrack: true,\n showLegend: false,\n legendPosition: \"bottom\",\n showTooltip: true,\n startAngle: 90,\n endAngle: -270,\n maxValue: 100,\n loading: false,\n locale: \"en-US\",\n format: undefined,\n decimals: 0,\n abbreviate: false,\n currency: undefined,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "WithLegend",
"description": "Radial chart with an interactive legend allowing show/hide toggle for each semester performance metric.",
"args": "{\n title: \"Semester Performance\",\n subtitle: \"Click a legend item to hide / show its bar\",\n data: semesterMetrics,\n maxValue: 100,\n showTrack: true,\n showLegend: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "GaugeSingle",
"description": "Single-metric semicircular gauge showing attendance rate with a center label, track background, and compact height.",
"args": "{\n title: \"Attendance Rate\",\n subtitle: \"Semester 2025.1\",\n data: singleAttendance,\n maxValue: 100,\n startAngle: 180,\n endAngle: 0,\n innerLabel: \"Attendance\",\n showTrack: true,\n showTooltip: true,\n height: 220,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "FullCircleWithLabel",
"description": "Full-circle radial gauge displaying a single attendance metric with center label, track, and a custom color.",
"args": "{\n title: \"Overall Attendance\",\n subtitle: \"Full-circle gauge — single metric\",\n data: [{ name: \"Attendance\", value: 87, color: \"var(--chart-1)\" }],\n maxValue: 100,\n innerLabel: \"Attendance\",\n showTrack: true,\n showTooltip: true,\n height: 280,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "MultiDepartment",
"description": "Five-bar radial chart comparing average grades across schools with a legend for identification and tooltips.",
"args": "{\n title: \"Average Grade by School\",\n subtitle: \"All departments · Semester 2025.1\",\n data: departmentPerformance,\n maxValue: 100,\n showTrack: true,\n showLegend: true,\n showTooltip: true,\n height: 360,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "CustomColors",
"description": "Radial chart using semantic color tokens for completed, in-progress, and dropped course status with a legend.",
"args": "{\n title: \"Course Completion\",\n subtitle:\n \"Semantic tokens: var(--chart-2), var(--chart-3), var(--destructive)\",\n data: customColorMetrics,\n maxValue: 100,\n showTrack: true,\n showLegend: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "NoTrack",
"description": "Radial chart with background tracks hidden, displaying only the active colored bars for a cleaner look.",
"args": "{\n title: \"Semester Metrics\",\n subtitle: \"showTrack={false} — bars only\",\n data: semesterMetrics,\n maxValue: 100,\n showTrack: false,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },"
},
{
"name": "WithFooter",
"description": "Five-bar radial chart with a footer showing the top-performing department and overall average score.",
"args": "{\n title: \"Department Performance\",\n subtitle: \"Semester 2025.1 average scores\",\n data: departmentPerformance,\n maxValue: 100,\n showTrack: true,\n showLegend: true,\n showTooltip: true,\n height: 360,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n footer: (\n \n
\n \n
\n \n
\n {[\n { name: \"Approval\", value: 88, color: \"var(--chart-1)\" },\n { name: \"Attendance\", value: 76, color: \"var(--chart-2)\" },\n { name: \"Completion\", value: 92, color: \"var(--chart-3)\" },\n { name: \"Satisfaction\", value: 81, color: \"var(--chart-4)\" },\n ].map((item) => (\n `${v}%`}\n />\n ))}\n
"
},
{
"name": "LegendPositions",
"description": "Grid of four radial charts demonstrating all four legend positions (top, right, bottom, left) for semester metrics.",
"args": "{ data: semesterMetrics },",
"code": "\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n `${v}%`}\n height={260}\n />\n ))}\n
"
},
{
"name": "LocalePTBR",
"description": "Radial chart with Portuguese locale displaying semester performance indicators in localized number format.",
"args": "{\n title: \"Desempenho Semestral\",\n subtitle: \"Indicadores principais — escala 0–100\",\n data: semesterMetrics,\n maxValue: 100,\n showTrack: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the radial chart with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Semester Performance\",\n subtitle: \"Key indicators — 0–100 scale\",\n data: semesterMetrics,\n maxValue: 100,\n showTrack: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },\n render: (args) => \n
\n Student KPI Dashboard\n
\n
\n 4 semicircle gauges — each is an independent RadialChart instance\n
\n
\n `${v}%`}\n />\n `${v}%`}\n />\n `${v}%`}\n />\n `${v}%`}\n />\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
"
},
{
"name": "PostFooter",
"description": "",
"code": "\n
\n
\n
\n Design Team \n 2 hours ago \n
\n
\n
\n We just shipped the new ReactionBar component! What do you all think?\n 🚀\n
\n\n
\n
\n
\n \n \n
\n
\n
\n
"
}
]
},
{
"name": "ds-reading-progress",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/reading-progress",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/reading-progress.tsx"
],
"props": [
{
"name": "targetRef",
"required": false,
"type": "React.RefObject",
"description": "Ref para o container que terá scroll monitorado.\nSe não fornecido, monitora o scroll da janela (window)."
},
{
"name": "progressColor",
"required": false,
"type": "string",
"description": "Cor da barra, por padrão usa a cor primária"
},
{
"name": "height",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"description": "Altura da barra"
}
],
"storyTitle": "Navigation/ReadingProgress",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n
\n
Faça scroll nesta página \n {Array.from({ length: 30 }).map((_, i) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n vestibulum, neque sit amet dignissim varius, nisl magna consequat\n arcu, vel finibus est turpis pretium eros. Phasellus quis ipsum vel\n est fermentum mattis. Integer sodales interdum posuere. Morbi a arcu\n varius, dapibus purus non, malesuada elit. Proin elementum id metus\n eu dignissim. Aenean consectetur arcu a arcu sagittis, tincidunt\n pulvinar sapien lacinia. Nulla at risus ut dolor condimentum\n consequat sit amet nec magna. Praesent in arcu ac lorem feugiat\n ultrices a elementum sem. Nam elementum turpis ut sapien consectetur\n sagittis sit amet eget massa.\n
\n ))}\n
\n
\n
\n
\n
\n Scrolla o Container Interno\n \n {Array.from({ length: 15 }).map((_, i) => (\n
\n Este é um exemplo de ReadingProgress atrelado a um container\n específico, em vez de toda a página. Observe que ele usa{\" \"}\n absolute dentro do container ao invés de{\" \"}\n fixed. Lorem ipsum, dolor sit amet consectetur\n adipisicing elit. Nostrum magnam tempora ea sint eaque\n inventore.\n
\n ))}\n
\n
\n
\n \n LEMA-DS STORE \n \n Av. dos Ipês, S/N - Castelo Branco\n
\n \n 23/10/2026 14:32:05\n
\n \n\n \n \n \n 1x Radial Menu \n R$ 29,90 \n \n \n 2x Morphing Dialog \n R$ 50,00 \n \n \n 1x Dynamic Island \n R$ 15,00 \n \n \n 1x Feedback Widget \n R$ 0,00 \n \n
\n\n \n TOTAL \n R$ 94,90 \n \n \n\n \n Obrigado por usar o LEMA-DS!
\n Volte sempre.
\n \n "
},
{
"name": "TopEdgeOnly",
"description": "",
"code": "\n \n TICKET #42 \n \n \n \n Entrada VIP \n R$ 150,00 \n \n \n "
},
{
"name": "BottomEdgeOnly",
"description": "",
"code": "\n \n \n \n "
}
]
},
{
"name": "ds-register",
"title": "Register",
"description": "Formulário de cadastro com social — átomo base register.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/register",
"dependencies": [],
"registryDependencies": [
"input",
"button",
"checkbox",
"label",
"ds-input-password",
"ds-social-auth-group",
"ds-auth-separator",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/register.tsx"
],
"props": [
{
"name": "onSubmit",
"required": false,
"type": "(data: { name: string; email: string; password: string }) => void"
},
{
"name": "showSocial",
"required": false,
"type": "boolean"
},
{
"name": "socials",
"required": false,
"type": "(\"google\" | \"github\" | \"apple\" | \"microsoft\")[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Auth/Register",
"stories": [
{
"name": "Default",
"description": "",
"args": "{}"
},
{
"name": "WithoutSocial",
"description": "",
"args": "{ showSocial: false }"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true }"
}
]
},
{
"name": "ds-register-simple",
"title": "Register Simple",
"description": "Card cadastro centrado — blockus register #01-08.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/register-simple",
"dependencies": [],
"registryDependencies": [
"ds-register",
"badge"
],
"files": [
"components/ds/register-simple.tsx"
],
"storyTitle": "Auth/RegisterSimple",
"props": [],
"stories": [
{
"name": "Default",
"description": "",
"args": "{}"
},
{
"name": "WithBadge",
"description": "",
"args": "{ badge: \"New\" }"
}
]
},
{
"name": "ds-register-split",
"title": "Register Split",
"description": "Split screen imagem + formulário — blockus #09-22.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/register-split",
"dependencies": [],
"registryDependencies": [
"ds-register",
"avatar"
],
"files": [
"components/ds/register-split.tsx"
],
"props": [
{
"name": "imageSrc",
"required": false,
"type": "string"
},
{
"name": "testimonial",
"required": false,
"type": "{ quote: string author: string role?: string avatarUrl?: string }"
}
],
"storyTitle": "Auth/RegisterSplit",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n testimonial: {\n quote: \"LEMA DS accelerated our onboarding.\",\n author: \"Ana Silva\",\n role: \"Design Lead\",\n avatarUrl: \"https://picsum.photos/100/100\",\n },\n },"
},
{
"name": "WithoutTestimonial",
"description": "",
"args": "{}"
}
]
},
{
"name": "ds-rich-text-editor",
"title": "Rich Text Editor",
"description": "A presentation component that provides the structure for a rich text editor.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/rich-text-editor",
"dependencies": [],
"registryDependencies": [
"toggle"
],
"files": [
"components/ds/rich-text-editor.tsx"
],
"props": [
{
"name": "invalid",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Form/RichTextEditor",
"stories": [
{
"name": "Default",
"description": "",
"code": "\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n This is a presentation component .\n
\n \n It provides the visual shell for a rich text editor. The consumer\n should wire it up with a library like TipTap, Slate, or Lexical.\n
\n \n Customizable toolbar \n Focus and error states \n Ready for integration \n \n \n \n
\n
\n \n \n \n \n \n Please enter a description.
\n \n \n
Description is required.
\n
\n {(\n [\n { shape: \"circle\", color: \"var(--chart-1)\" },\n { shape: \"diamond\", color: \"var(--chart-2)\" },\n { shape: \"triangle\", color: \"var(--chart-3)\" },\n { shape: \"square\", color: \"var(--chart-4)\" },\n ] as const\n ).map(({ shape, color }) => (\n
"
},
{
"name": "LegendPositions",
"description": "Grid of four scatter plots placing the legend at top, right, bottom, and left for series identification.",
"args": "{ series: [{ name: \"Male\", data: studyVsGradeMale }] },",
"code": "\n {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((pos) => (\n
"
},
{
"name": "WithFooter",
"description": "Two-series scatter plot with trend lines and a footer showing the correlation coefficient and sample size.",
"args": "{\n title: \"Study Hours vs. Final Grade\",\n subtitle: \"Semester 2025.1 — 20 students sampled\",\n series: [\n { name: \"Male\", data: studyVsGradeMale },\n { name: \"Female\", data: studyVsGradeFemale },\n ],\n xLabel: \"Hours / week\",\n yLabel: \"Final grade\",\n showGrid: true,\n showLegend: true,\n showTooltip: true,\n showTrendLine: true,\n height: 340,\n footer: (\n \n \n \n \n \n
\n ),\n },"
},
{
"name": "WithBrush",
"description": "Scatter plot with a brush slider for interactive zoom on an 80-student absence versus grade dataset with trend line.",
"args": "{\n title: \"Absences vs. Final Grade\",\n subtitle:\n \"80 students — drag the handles below to zoom in on an absence range\",\n series: [\n { name: \"Students\", data: absenceVsGrade, color: \"var(--chart-1)\" },\n ],\n xLabel: \"Absences\",\n yLabel: \"Final grade\",\n showGrid: true,\n showTooltip: true,\n showTrendLine: true,\n showBrush: true,\n height: 320,\n },"
},
{
"name": "WithBrushMultiSeries",
"description": "Two-series scatter plot with brush showing low-absence versus high-absence student clusters with separate trend lines.",
"args": "{\n title: \"Absences vs. Grade — Low vs. High Absenteeism\",\n subtitle:\n \"Drag handles to compare ranges · drag the bar between them to pan\",\n series: [\n { name: \"≤ 75 absences\", data: lowAbsence, color: \"var(--chart-2)\" },\n { name: \"> 75 absences\", data: highAbsence, color: \"var(--destructive)\" },\n ],\n xLabel: \"Absences\",\n yLabel: \"Final grade\",\n showGrid: true,\n showLegend: true,\n showTooltip: true,\n showTrendLine: true,\n showBrush: true,\n height: 340,\n },"
},
{
"name": "LocalePTBR",
"description": "Scatter plot with Portuguese locale displaying study hours versus final grade in localized number format.",
"args": "{\n title: \"Study Hours vs. Final Grade\",\n subtitle: \"Each dot represents one student — semester 2025.1\",\n series: [{ name: \"Students\", data: studyVsGrade }],\n xLabel: \"Hours / week\",\n yLabel: \"Final grade\",\n showGrid: true,\n showTooltip: true,\n height: 320,\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the scatter chart with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Study Hours vs. Final Grade\",\n subtitle: \"Each dot represents one student — semester 2025.1\",\n series: [{ name: \"Students\", data: studyVsGrade }],\n xLabel: \"Hours / week\",\n yLabel: \"Final grade\",\n showGrid: true,\n showTooltip: true,\n height: 320,\n },\n render: (args) => \n \n ),\n },"
}
]
},
{
"name": "ds-schedule",
"title": "Schedule",
"description": "Grade semanal com slots — ReUI Schedule 10.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/schedule",
"dependencies": [],
"registryDependencies": [
"card",
"skeleton"
],
"files": [
"components/ds/schedule.tsx"
],
"props": [
{
"name": "days",
"required": false,
"type": "string[]"
},
{
"name": "slots",
"required": true,
"type": "ScheduleSlot[][]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Dashboard/Schedule",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n slots: [\n [{ time: \"09:00\", title: \"Standup\" }, {}, { time: \"09:00\" }],\n [{ time: \"10:00\" }, { time: \"10:00\", title: \"Review\" }],\n ],\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ slots: [], loading: true }"
}
]
},
{
"name": "ds-score-row",
"title": "Score Row",
"description": "A scored list item pairing icon + label with a fractional score and optional progress bar. Includes ScoreRowList container for grouped items.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/score-row",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"progress",
"skeleton",
"tooltip",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/score-row.tsx"
],
"props": [
{
"name": "title",
"required": true,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "icon",
"required": false,
"type": "React.ElementType",
"description": "Lucide icon component. Defaults to FileTextIcon."
},
{
"name": "score",
"required": true,
"type": "number",
"description": "Current score value."
},
{
"name": "total",
"required": true,
"type": "number",
"description": "Maximum / total possible score."
},
{
"name": "size",
"required": false,
"type": "ScoreRowSize"
},
{
"name": "status",
"required": false,
"type": "ScoreRowStatus | \"auto\"",
"description": "Color status for the icon container and score.\nUse `\"auto\"` to derive from the score ratio:\n≥70% → success, ≥40% → warning, <40% → destructive."
},
{
"name": "scoreDisplay",
"required": false,
"type": "ScoreRowScoreDisplay",
"description": "How the score is rendered on the right. Defaults to \"fraction\"."
},
{
"name": "showProgress",
"required": false,
"type": "boolean",
"description": "When true, renders a colored progress bar at the bottom of the row.\nHovering the bar shows a tooltip with locale-aware percentage."
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "percentDecimals",
"required": false,
"type": "number",
"description": "Number of decimal places in the percentage display (progress tooltip and aria-label). Defaults to 0."
},
{
"name": "accent",
"required": false,
"type": "string",
"description": "Override all intent-based colors via CSS token `--score-accent`.\nDrives icon container bg/text, score value text, and progress fill.\nAccepts any CSS color or `var(--my-token)`."
},
{
"name": "tooltip",
"required": false,
"type": "React.ReactNode",
"description": "Optional tooltip content for the entire row. When provided, the row\nitself becomes the tooltip trigger (keyboard-focusable) and the\nbuilt-in progress-bar tooltip is suppressed, avoiding nested tooltips."
}
],
"storyTitle": "Data Display/ScoreRow",
"stories": [
{
"name": "Default",
"description": "Exact replica of the design reference: document icon, title, subtitle, and a `76 / 95` score.",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n icon: FileTextIcon,\n score: 76,\n total: 95,\n size: \"md\",\n status: \"default\",\n scoreDisplay: \"fraction\",\n showProgress: true,\n loading: false,\n locale: \"en-US\",\n percentDecimals: 0,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Exact replica of the design reference: document icon, title, subtitle, and a `76 / 95` score.\",\n },\n },\n },"
},
{
"name": "Sizes",
"description": "Three size presets — `sm`, `md`, and `lg` — stacked to compare density and typographic scale.",
"args": "{ title: \"Standard Audit\", score: 48, total: 95 },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Three size presets — `sm`, `md`, and `lg` — stacked to compare density and typographic scale.\",\n },\n },\n },",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
"
},
{
"name": "StatusVariants",
"description": "All four status variants. The icon container background and score color reflect the status token.",
"args": "{ title: \"Standard Audit\", score: 72, total: 95 },\n render: () => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"All four status variants. The icon container background and score color reflect the status token.\",\n },\n },\n },",
"code": "\n "
},
{
"name": "AutoStatus",
"description": "With `status=\"auto\"`, the component derives the color from the ratio: <40% → destructive, 40–69% → warning, ≥70% → success.",
"args": "{ title: \"Standard Audit\", score: 48, total: 95, status: \"auto\" },\n render: () => (\n \n {[\n { score: 0, label: \"0 / 95 — no responses yet\" },\n { score: 18, label: \"18 / 95 — below 40%\" },\n { score: 42, label: \"42 / 95 — between 40–69%\" },\n { score: 72, label: \"72 / 95 — ≥70%, approved\" },\n { score: 95, label: \"95 / 95 — maximum score\" },\n ].map(({ score, label }) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n 'With `status=\"auto\"`, the component derives the color from the ratio: <40% → destructive, 40–69% → warning, ≥70% → success.',\n },\n },\n },",
"code": "\n {[\n { score: 0, label: \"0 / 95 — no responses yet\" },\n { score: 18, label: \"18 / 95 — below 40%\" },\n { score: 42, label: \"42 / 95 — between 40–69%\" },\n { score: 72, label: \"72 / 95 — ≥70%, approved\" },\n { score: 95, label: \"95 / 95 — maximum score\" },\n ].map(({ score, label }) => (\n "
},
{
"name": "ScoreDisplayModes",
"description": "The same score (68/95) rendered as a fraction, a percentage, and a raw number.",
"args": "{ title: \"Teaching Evaluation\", score: 68, total: 95 },\n render: () => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"The same score (68/95) rendered as a fraction, a percentage, and a raw number.\",\n },\n },\n },",
"code": "\n "
},
{
"name": "WithProgressBar",
"description": "When `showProgress` is true, a 2px colored progress bar appears at the bottom of each row, filled proportionally to `score / total`.",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n icon: FileTextIcon,\n score: 48,\n total: 95,\n showProgress: true,\n status: \"auto\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"When `showProgress` is true, a 2px colored progress bar appears at the bottom of each row, filled proportionally to `score / total`.\",\n },\n },\n },"
},
{
"name": "WithoutProgressBar",
"description": "When `showProgress` is `false`, the progress bar at the bottom of the row is not rendered. This keeps the row more compact — useful for dense lists where the progress bar adds visual noise.",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline — hidden progress bar\",\n icon: FileTextIcon,\n score: 48,\n total: 95,\n showProgress: false,\n status: \"auto\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"When `showProgress` is `false`, the progress bar at the bottom of the row is not rendered. This keeps the row more compact — useful for dense lists where the progress bar adds visual noise.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "Skeleton loading state for all three sizes. Uses `` from shadcn/ui — no custom `animate-pulse` divs.",
"args": "{ title: \"\", score: 0, total: 0, loading: true },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Skeleton loading state for all three sizes. Uses `` from shadcn/ui — no custom `animate-pulse` divs.\",\n },\n },\n },",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n "
},
{
"name": "Interactive",
"description": "Pass an `onClick` handler to make the row interactive. The row renders as a `` with hover and focus-visible states.",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n score: 48,\n total: 95,\n status: \"auto\",\n showProgress: true,\n },\n render: () => {\n const [selected, setSelected] = React.useState(null)\n\n const items = [\n {\n id: \"audit-1\",\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n icon: FileTextIcon,\n score: 68,\n total: 95,\n },\n {\n id: \"audit-2\",\n title: \"Teaching Evaluation\",\n description: \"2025.1 cycle\",\n icon: GraduationCapIcon,\n score: 42,\n total: 80,\n },\n {\n id: \"audit-3\",\n title: \"Infrastructure\",\n description: \"Academic semester\",\n icon: ShieldCheckIcon,\n score: 12,\n total: 60,\n },\n {\n id: \"audit-4\",\n title: \"Library\",\n description: \"Digital collection\",\n icon: BookOpenIcon,\n score: 90,\n total: 100,\n },\n ]\n\n return (\n \n
\n {items.map((item) => (\n setSelected(item.id)}\n className={item.id === selected ? \"bg-accent\" : \"\"}\n />\n ))}\n \n {selected && (\n
\n Selected:{\" \"}\n {items.find((i) => i.id === selected)?.title} \n
\n )}\n
` with hover and focus-visible states.\",\n },\n },\n },",
"code": "\n
\n {items.map((item) => (\n setSelected(item.id)}\n className={item.id === selected ? \"bg-accent\" : \"\"}\n />\n ))}\n \n {selected && (\n
\n Selected:{\" \"}\n {items.find((i) => i.id === selected)?.title} \n
\n )}\n
\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"A realistic audit checklist using `ScoreRowList` as a container. Each row derives its status automatically and shows a progress bar. Items at the bottom have no trailing border.\",\n },\n },\n },",
"code": "\n "
},
{
"name": "CustomIcons",
"description": "Any Lucide icon can be passed via the `icon` prop. The container adapts its background tint to the resolved status.",
"args": "{ title: \"Standard Audit\", score: 60, total: 95 },\n render: () => (\n \n {[\n {\n icon: ClipboardListIcon,\n title: \"Compliance Checklist\",\n score: 60,\n total: 95,\n },\n {\n icon: GraduationCapIcon,\n title: \"Teacher Training\",\n score: 30,\n total: 60,\n },\n {\n icon: ShieldCheckIcon,\n title: \"Security & Privacy\",\n score: 18,\n total: 20,\n },\n {\n icon: ActivityIcon,\n title: \"Performance Indicators\",\n score: 5,\n total: 40,\n },\n {\n icon: UsersIcon,\n title: \"Student Engagement\",\n score: 75,\n total: 100,\n },\n ].map(({ icon, title, score, total }) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"Any Lucide icon can be passed via the `icon` prop. The container adapts its background tint to the resolved status.\",\n },\n },\n },",
"code": "\n {[\n {\n icon: ClipboardListIcon,\n title: \"Compliance Checklist\",\n score: 60,\n total: 95,\n },\n {\n icon: GraduationCapIcon,\n title: \"Teacher Training\",\n score: 30,\n total: 60,\n },\n {\n icon: ShieldCheckIcon,\n title: \"Security & Privacy\",\n score: 18,\n total: 20,\n },\n {\n icon: ActivityIcon,\n title: \"Performance Indicators\",\n score: 5,\n total: 40,\n },\n {\n icon: UsersIcon,\n title: \"Student Engagement\",\n score: 75,\n total: 100,\n },\n ].map(({ icon, title, score, total }) => (\n "
},
{
"name": "LocalePtBR",
"description": "With `locale=\"pt-BR\"`, the decimal separator in tooltips and `scoreDisplay=\"percent\"` uses a comma (`71,6%`) via `Intl.NumberFormat`. The `scoreLabel` in `aria-label` is translated to *Score*. Hover the progress bar to see the localized tooltip.",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n score: 68,\n total: 95,\n locale: \"pt-BR\",\n percentDecimals: 1,\n },\n render: () => (\n \n
\n
\n Percentage with pt-BR decimal separator (comma)\n
\n
\n \n
\n\n
\n
\n scoreDisplay="percent" — formatting via Intl.NumberFormat (1\n decimal)\n
\n
\n {(\n [\n { score: 68, total: 95, title: \"Standard Audit\" },\n { score: 42, total: 80, title: \"Teaching Evaluation\" },\n { score: 12, total: 60, title: \"Infrastructure\" },\n ] as const\n ).map(({ score, total, title }) => (\n \n
\n
\n
\n
\n Percentage with pt-BR decimal separator (comma)\n
\n
\n \n
\n\n
\n
\n scoreDisplay="percent" — formatting via Intl.NumberFormat (1\n decimal)\n
\n
\n {(\n [\n { score: 68, total: 95, title: \"Standard Audit\" },\n { score: 42, total: 80, title: \"Teaching Evaluation\" },\n { score: 12, total: 60, title: \"Infrastructure\" },\n ] as const\n ).map(({ score, total, title }) => (\n \n
\n
\n
\n
\n Direct CSS color values\n
\n
\n \n
\n
\n
\n Design system token references\n
\n
\n \n
\n
\n
\n External token with fallback\n
\n
\n \n
\n
\n
\n
\n Direct CSS color values\n
\n
\n \n
\n
\n
\n Design system token references\n
\n
\n \n
\n
\n
\n External token with fallback\n
\n
\n \n
\n
\n {([0, 1, 2] as const).map((decimals) => (\n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"The `percentDecimals` prop controls decimal places in the progress bar tooltip and aria-label. Three presets (0, 1, 2) demonstrate the effect. Hover the progress bar to see the tooltip.\",\n },\n },\n },",
"code": "\n {([0, 1, 2] as const).map((decimals) => (\n "
},
{
"name": "RowTooltip",
"description": "The `tooltip` prop wraps the entire row in a single, keyboard-focusable tooltip trigger and suppresses the progress bar's own tooltip — avoiding the nested-tooltip problem that occurs when hovering the progress bar inside a row that already has an outer tooltip. Tab to a row to reveal the tooltip via focus, or hover anywhere on the row (including the progress bar).",
"args": "{\n title: \"Standard Audit\",\n description: \"June 2025 baseline\",\n icon: FileTextIcon,\n score: 68,\n total: 95,\n status: \"auto\",\n showProgress: true,\n tooltip: \"68 of 95 items reviewed against the recommended capacity.\",\n },\n render: (args) => (\n \n \n ),\n parameters: {\n docs: {\n description: {\n story:\n \"The `tooltip` prop wraps the entire row in a single, keyboard-focusable tooltip trigger and suppresses the progress bar's own tooltip — avoiding the nested-tooltip problem that occurs when hovering the progress bar inside a row that already has an outer tooltip. Tab to a row to reveal the tooltip via focus, or hover anywhere on the row (including the progress bar).\",\n },\n },\n },"
}
]
},
{
"name": "ds-scratch-to-reveal",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/scratch-to-reveal",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/scratch-to-reveal.tsx"
],
"props": [
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "Conteúdo escondido a ser revelado"
},
{
"name": "width",
"required": false,
"type": "number",
"description": "Largura do container (px)"
},
{
"name": "height",
"required": false,
"type": "number",
"description": "Altura do container (px)"
},
{
"name": "brushSize",
"required": false,
"type": "number",
"description": "Tamanho do pincel para raspar"
},
{
"name": "revealThreshold",
"required": false,
"type": "number",
"description": "Porcentagem raspada (0-100) para auto-revelar e disparar o callback"
},
{
"name": "onReveal",
"required": false,
"type": "() => void",
"description": "Função chamada quando o limite for alcançado"
},
{
"name": "coverColor",
"required": false,
"type": "string",
"description": "Cor hexadecimal ou rgba que cobre o canvas"
}
],
"storyTitle": "Delight/ScratchToReveal",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n width: 320,\n height: 120,\n coverColor: \"#475569\", // slate-600\n brushSize: 40,\n className: \"rounded-xl shadow-lg border border-border bg-muted/50\",\n children: (\n \n
\n Seu Cupom\n
\n
BEMVINDO20
\n
\n
🎁
\n
\n Você ganhou 1 Mês Grátis!\n
\n
\n
\n ),"
},
{
"name": "Loading",
"description": "",
"args": "{ src: \"\", alt: \"\", loadingState: true, width: 800, height: 600 },"
}
]
},
{
"name": "ds-scroll-reveal",
"title": "ScrollReveal",
"description": "Wrapper que revela filhos com fade/slide ao entrar no viewport, via IntersectionObserver — visível de imediato em prefers-reduced-motion.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/scroll-reveal",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/scroll-reveal.tsx"
],
"props": [
{
"name": "delay",
"required": false,
"type": "number",
"description": "Delay before the transition starts, in ms."
},
{
"name": "once",
"required": false,
"type": "boolean",
"description": "Re-trigger every time the element re-enters the viewport."
},
{
"name": "direction",
"required": false,
"type": "\"up\" | \"down\" | \"left\" | \"right\" | \"none\"",
"options": [
"up",
"down",
"left",
"right",
"none"
],
"default": "up"
}
],
"storyTitle": "Data Display/ScrollReveal",
"stories": [
{
"name": "AllDirections",
"description": "",
"code": "\n
\n
\n {([\"up\", \"down\", \"left\", \"right\"] as const).map((direction) => (\n
\n {direction}
\n \n ))}\n \n
\n \n ),\n ],"
},
{
"name": "WithoutRing",
"description": "Clean mode without the progress ring — just the arrow button.",
"args": "{ showProgress: false },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "HighThreshold",
"description": "Only appears after scrolling past 1200px — useful for very long documents.",
"args": "{ threshold: 1200 },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "LowThreshold",
"description": "Appears almost immediately — after just 50px of scroll.",
"args": "{ threshold: 50 },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "TopLeft",
"description": "Floats at the top‑left corner instead of the default bottom‑right.",
"args": "{ position: \"top-left\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "BottomLeft",
"description": "Bottom‑left corner placement.",
"args": "{ position: \"bottom-left\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "TopRight",
"description": "Top‑right corner placement.",
"args": "{ position: \"top-right\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "Loading",
"description": "Skeleton placeholder before the component hydrates or while data is loading.",
"args": "{ loading: true },"
},
{
"name": "LocalePTBR",
"description": "Tooltip and aria‑label in Brazilian Portuguese.",
"args": "{ locale: \"pt-BR\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "LocaleES",
"description": "Tooltip and aria‑label in Spanish.",
"args": "{ locale: \"es-ES\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
},
{
"name": "LocaleFR",
"description": "Tooltip and aria‑label in French.",
"args": "{ locale: \"fr-FR\" },\n decorators: [\n (StoryFn) => (\n \n \n ),\n ],"
}
]
},
{
"name": "ds-search-bar",
"title": "Search Bar",
"description": "A full-width composable search bar with visual variants, keyboard shortcut hint, voice input, debounce, custom icon, and skeleton loading.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/search-bar",
"dependencies": [
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"input",
"kbd",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/search-bar.tsx"
],
"props": [
{
"name": "size",
"required": false,
"type": "SearchBarSize"
},
{
"name": "rounded",
"required": false,
"type": "SearchBarRounded"
},
{
"name": "className",
"required": false,
"type": "string"
}
],
"storyTitle": "Form/SearchBar",
"stories": [
{
"name": "Default",
"description": "Uncontrolled search bar with default `outline` variant, `md` size, and `lg` radius. Type to reveal the clear button; press `Escape` to clear.",
"args": "{\n placeholder: \"Search anything…\",\n defaultValue: \"\",\n size: \"md\",\n variant: \"outline\",\n rounded: \"lg\",\n loading: false,\n debounceMs: 0,\n voice: false,\n disabled: false,\n autoFocus: false,\n locale: \"en-US\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Uncontrolled search bar with default `outline` variant, `md` size, and `lg` radius. Type to reveal the clear button; press `Escape` to clear.\",\n },\n },\n },"
},
{
"name": "Variants",
"description": "Three visual surfaces. `outline` suits most pages; `filled` works well inside cards or sidebars; `ghost` is ideal for toolbars where a border-free look is preferred."
},
{
"name": "Sizes",
"description": "Three density presets. `sm` (h-8 / text-xs) for compact toolbars; `md` (h-10 / text-sm) as the default; `lg` (h-12 / text-base) for prominent hero-style search."
},
{
"name": "RoundedVariants",
"description": "Six border-radius presets using the design system radius scale (`--radius-sm` → `--radius-4xl`). `lg` is the default. Use `full` for pill-shaped search bars in hero sections."
},
{
"name": "WithShortcut",
"description": "The `shortcut` prop renders a `Kbd` badge on the trailing edge when the input is empty. It disappears as soon as the user starts typing and reappears after clearing."
},
{
"name": "WithTrailingSlot",
"description": "The `trailingSlot` prop renders any ReactNode after the clear button. Use it for filter toggles, action buttons, or custom badges. A `Separator` between input and slot keeps visual hierarchy clear."
},
{
"name": "VoiceInput",
"description": "Enable voice input with `voice={true}`. A microphone button appears on the trailing edge when the browser supports the Web Speech API.\n\n- **Idle**: mic icon in muted color, `aria-pressed={false}`\n- **Listening**: mic pulses red, `aria-label` switches to *Stop recording*, `aria-pressed={true}`\n- **Result**: transcript is written into the input and `onChange` fires — same path as keyboard input\n\nThe button is silently hidden when the browser does not support the Web Speech API, so `voice` is safe to pass unconditionally.\n\nUse `onVoiceStart`, `onVoiceEnd`, and `onVoiceError` to react to the recognition lifecycle."
},
{
"name": "Loading",
"description": "When `loading` is true, the leading icon is replaced by an animated spinner and the clear button is hidden. `aria-busy` is set on the container so assistive technologies can announce the state.",
"args": "{ loading: true },\n render: (args) => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n size="{size}"\n
\n
\n
\n ))}\n
\n {([\"outline\", \"filled\", \"ghost\"] as const).map((variant) => (\n
\n
\n variant="{variant}"\n
\n
\n
\n ))}\n
\n
{\n setDebouncedValue(v)\n setFireCount((n) => n + 1)\n }}\n onSearch={setLastEnter}\n />\n \n
\n \n onChange fired:{\" \"}\n {fireCount}× \n \n \n Debounced value:{\" \"}\n \n "{debouncedValue}"\n \n \n {lastEnter && (\n \n Last Enter:{\" \"}\n \n "{lastEnter}"\n \n \n )}\n
\n
\n
\n
\n Sizes — rounded="lg" (default)\n
\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n
\n
\n
\n Rounded variants — size="md"\n
\n
\n {([\"none\", \"md\", \"xl\", \"full\"] as const).map((rounded) => (\n
\n
\n
\n
\n
\n Course Catalog\n \n
setQuery(\"\")}\n loading={loading}\n />\n {results.length > 0 && (\n \n {results.map((r) => (\n \n \n )}\n {query && results.length === 0 && !loading && (\n \n No courses found for "{query}"\n
\n )}\n \n
\n
"
},
{
"name": "WithGroups",
"description": "Results are grouped by the `group` field with visual headers separating each group."
},
{
"name": "WithIcons",
"description": "Each result item can display an icon for better visual recognition."
},
{
"name": "BorderMode",
"description": "The `border` mode renders the input with an inverted primary background, ideal for dark headers or navbars."
},
{
"name": "Disabled",
"description": "",
"code": "\n
"
},
{
"name": "Loading",
"description": "",
"code": "\n
"
},
{
"name": "WithVoice",
"description": "Enables the microphone button for speech-to-text. Note: This only appears in browsers that support the Web Speech API (like Chrome)."
},
{
"name": "EmptyState",
"description": "Shows the `emptyMessage` when the user has typed a query but no results match. Type anything to see the empty state."
},
{
"name": "WithOnSearch",
"description": "",
"code": "\n
setSearched(v)}\n autoFocus={false}\n />\n {searched && (\n \n Searched: {searched} \n
\n )}\n \n
setSelected(item.label)}\n autoFocus={false}\n />\n {selected && (\n \n Selected: {selected} \n
\n )}\n \n
\n 500 items — only visible rows are in the DOM\n
\n
\n {results.length > 0 && (\n
\n {results.length} result{results.length !== 1 ? \"s\" : \"\"}\n
\n )}\n
\n
"
}
]
},
{
"name": "ds-section-cards",
"title": "Section Cards",
"description": "Grid de cards estatísticos com gradiente, badge trend e footer — extraído de shadcn dashboard-01 SectionCards.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/section-cards",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"card",
"badge",
"skeleton"
],
"files": [
"components/ds/section-cards.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "SectionCardItem[]"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "columns",
"required": false,
"type": "\"2\" | \"4\"",
"options": [
"2",
"4"
]
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"gradient\"",
"options": [
"default",
"gradient"
],
"default": "gradient"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{ items },"
},
{
"name": "TwoColumns",
"description": "",
"args": "{ items: items.slice(0, 2), columns: 2 },"
},
{
"name": "Loading",
"description": "",
"args": "{ items, loading: true },"
},
{
"name": "WithoutBadge",
"description": "",
"args": "{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n items: items.map(({ badge, ...rest }) => rest as unknown as never),\n },"
},
{
"name": "AllVariants",
"description": "",
"code": "\n
"
},
{
"name": "A11y",
"description": "",
"args": "{ items },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n await expect(canvas.getByText(\"Total Revenue\")).toBeInTheDocument()\n },"
}
]
},
{
"name": "ds-select",
"title": "Select UI",
"description": "Extended select with search filter, async option loading, grouped options, creatable new option, configurable popover positioning (side/align/offset), i18n placeholder/no-results, and skeleton loading.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/select",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"popover",
"command",
"button",
"skeleton",
"label",
"ui-i18n"
],
"files": [
"components/ds/select.tsx"
],
"props": [
{
"name": "options",
"required": true,
"type": "SelectOption[]"
},
{
"name": "value",
"required": false,
"type": "string"
},
{
"name": "onChange",
"required": false,
"type": "(value: string) => void"
},
{
"name": "searchable",
"required": false,
"type": "boolean"
},
{
"name": "async",
"required": false,
"type": "boolean"
},
{
"name": "loadOptions",
"required": false,
"type": "(search: string) => Promise"
},
{
"name": "creatable",
"required": false,
"type": "boolean"
},
{
"name": "onCreate",
"required": false,
"type": "(label: string) => Promise"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "error",
"required": false,
"type": "string"
},
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "className",
"required": false,
"type": "string"
},
{
"name": "side",
"required": false,
"type": "\"top\" | \"right\" | \"bottom\" | \"left\""
},
{
"name": "align",
"required": false,
"type": "\"start\" | \"center\" | \"end\""
},
{
"name": "sideOffset",
"required": false,
"type": "number"
},
{
"name": "alignOffset",
"required": false,
"type": "number"
}
],
"storyTitle": "Form/Select",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n options: COUNTRIES,\n placeholder: \"Select a country\",\n searchable: false,\n async: false,\n creatable: false,\n size: \"md\",\n loading: false,\n locale: \"pt-BR\",\n disabled: false,\n },"
},
{
"name": "Searchable",
"description": "",
"args": "{\n options: COUNTRIES,\n searchable: true,\n placeholder: \"Search countries…\",\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{ options: [] },\n render: () => (\n \n
\n ),",
"code": "\n
"
},
{
"name": "Async",
"description": "",
"args": "{\n options: [],\n async: true,\n searchable: true,\n placeholder: \"Search users…\",\n loadOptions: async (search: string) => {\n await new Promise((r) => setTimeout(r, 800))\n return COUNTRIES.filter(\n (c) =>\n c.label.toLowerCase().includes(search.toLowerCase()) ||\n c.value.includes(search)\n )\n },\n },"
},
{
"name": "Creatable",
"description": "",
"args": "{\n options: COUNTRIES.slice(0, 3),\n searchable: true,\n creatable: true,\n placeholder: \"Select or create…\",\n onCreate: async (label: string) => {\n await new Promise((r) => setTimeout(r, 500))\n return label.toLowerCase().replace(/\\s+/g, \"-\")\n },\n },"
},
{
"name": "Grouped",
"description": "",
"args": "{\n options: COUNTRIES,\n placeholder: \"Select a country\",\n },"
},
{
"name": "WithError",
"description": "",
"args": "{\n options: COUNTRIES,\n placeholder: \"Select a country\",\n error: \"Please select a country.\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n options: COUNTRIES,\n placeholder: \"Loading…\",\n loading: true,\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n options: COUNTRIES,\n placeholder: \"Disabled select\",\n disabled: true,\n },"
},
{
"name": "WithLabel",
"description": "",
"args": "{\n options: COUNTRIES,\n label: \"Country\",\n placeholder: \"Select your country\",\n },"
}
]
},
{
"name": "ds-select-list",
"title": "Select List",
"description": "A searchable list of items with selection state, support for groups, icons and virtual scrolling behavior.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/select-list",
"dependencies": [
"lucide-react",
"@tanstack/react-virtual",
"class-variance-authority"
],
"registryDependencies": [
"button",
"input",
"badge",
"skeleton",
"ds-empty",
"ui-i18n"
],
"files": [
"components/ds/select-list.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "SelectListItem[]"
},
{
"name": "selectedId",
"required": false,
"type": "string | number"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
},
{
"name": "debounce",
"required": false,
"type": "number"
},
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "intent",
"required": false,
"type": "\"default\" | \"primary\" | \"secondary\" | \"destructive\""
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "onSelect",
"required": true,
"type": "(item: SelectListItem) => void"
},
{
"name": "onSearch",
"required": false,
"type": "(value: string) => void"
},
{
"name": "search",
"required": false,
"type": "string"
},
{
"name": "emptyMessage",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Form/SelectList",
"stories": [
{
"name": "Default",
"description": "Default select list with five user entries and a search bar.",
"args": "{\n data: mockData,\n placeholder: \"Search by name...\",\n height: 350,\n onSelect: (item) => console.log(\"Selected:\", item),\n debounce: 300,\n intent: \"primary\",\n size: \"md\",\n disabled: false,\n loading: false,\n locale: \"en-US\",\n emptyMessage: \"No results found\",\n },\n parameters: {\n docs: {\n description: {\n story: \"Default select list with five user entries and a search bar.\",\n },\n },\n },"
},
{
"name": "LocalePTBR",
"description": "Portuguese (pt-BR) localization with translated user data and placeholder.",
"args": "{\n data: [\n {\n id: 1,\n name: \"João Silva\",\n group: \"Engineering\",\n value: \"Senior\",\n icon: (1)\n return (\n \n setSelectedId(item.id)}\n height={300}\n />\n
\n )\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Controlled select list — selectedId managed externally with onChange handler.\",\n },\n },\n },",
"code": "\n setSelectedId(item.id)}\n height={300}\n />\n
"
},
{
"name": "Intents",
"description": "Comparison of all four intent colors — default, primary, secondary, and destructive.",
"args": "{ data: mockData, onSelect: () => {} },\n render: () => (\n \n {([\"primary\", \"secondary\", \"destructive\", \"default\"] as const).map(\n (intent) => (\n
\n \n {intent}\n \n {}}\n />\n
\n )\n )}\n
\n {([\"primary\", \"secondary\", \"destructive\", \"default\"] as const).map(\n (intent) => (\n
\n \n {intent}\n \n {}}\n />\n
\n )\n )}\n
\n
\n {largeData.length} items — only visible rows are in the DOM\n
\n
setSelectedId(item.id)}\n height={400}\n placeholder=\"Search 500 items...\"\n />\n \n
\n {largeData.length} items — only visible rows are in the DOM\n
\n
setSelectedId(item.id)}\n height={400}\n placeholder=\"Search 500 items...\"\n />\n (1)\n const selectedItem = mockData.find((item) => item.id === selectedId)\n\n return (\n \n \n \n \n \n \n \n Select User \n \n \n setSelectedId(item.id)}\n height={300}\n intent=\"primary\"\n />\n
\n \n \n )\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Select list rendered inside a Dialog modal for user selection workflows.\",\n },\n },\n },",
"code": "\n \n \n \n \n \n \n Select User \n \n \n setSelectedId(item.id)}\n height={300}\n intent=\"primary\"\n />\n
\n \n "
}
]
},
{
"name": "ds-settings",
"title": "Settings",
"description": "Tabs de configurações — ReUI Settings 16.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/settings",
"dependencies": [],
"registryDependencies": [
"tabs",
"card",
"skeleton"
],
"files": [
"components/ds/settings.tsx"
],
"props": [
{
"name": "tabs",
"required": true,
"type": "SettingsTab[]"
},
{
"name": "defaultTab",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Dashboard/Settings",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n tabs: [\n { id: \"general\", label: \"General\", content: \"General settings\" },\n { id: \"security\", label: \"Security\", content: \"Security settings\" },\n ],\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ tabs: [], loading: true }"
}
]
},
{
"name": "ds-settings-view",
"title": "Settings View",
"description": "A complex view for settings area separated by internal navigation.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/settings-view",
"dependencies": [
"class-variance-authority",
"cn"
],
"registryDependencies": [
"tabs",
"button",
"separator"
],
"files": [
"components/ds/settings-view.tsx"
],
"props": [
{
"name": "title",
"required": true,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "sections",
"required": true,
"type": "SettingsSection[]"
},
{
"name": "defaultSection",
"required": false,
"type": "string"
}
],
"storyTitle": "Dashboard/SettingsView",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Settings\",\n description: \"Manage your account settings and set e-mail preferences.\",\n sections: [\n {\n id: \"profile\",\n title: \"Profile\",\n content: \n Account settings content goes here.\n
\n ),\n },\n {\n id: \"appearance\",\n title: \"Appearance\",\n content: (\n \n Appearance settings content goes here.\n
\n ),\n },\n {\n id: \"notifications\",\n title: \"Notifications\",\n content: \n Display settings content goes here.\n
\n ),\n },\n ],\n },"
}
]
},
{
"name": "ds-shortcut-sheet",
"title": "Shortcut Sheet",
"description": "Painel modal de atalhos de teclado com busca, categorias e escuta global da tecla '?'.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/shortcut-sheet",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"dialog",
"kbd",
"input",
"scroll-area",
"ui-i18n"
],
"files": [
"components/ds/shortcut-sheet.tsx"
],
"props": [
{
"name": "open",
"required": false,
"type": "boolean",
"description": "Controlled open state."
},
{
"name": "onOpenChange",
"required": false,
"type": "(open: boolean) => void",
"description": "Callback fired on open state change."
},
{
"name": "groups",
"required": true,
"type": "ShortcutGroup[]",
"description": "Categorized shortcut groups."
},
{
"name": "enableGlobalListener",
"required": false,
"type": "boolean",
"description": "Whether pressing '?' globally toggles this sheet open."
},
{
"name": "trigger",
"required": false,
"type": "React.ReactNode",
"description": "Optional custom trigger button."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale for titles and search placeholder."
},
{
"name": "className",
"required": false,
"type": "string",
"description": "Modal content className."
}
],
"storyTitle": "Navigation/ShortcutSheet",
"stories": [
{
"name": "Locales",
"description": "",
"code": "\n pt-BR}\n />\n en-US}\n />\n
"
}
]
},
{
"name": "ds-sidebar-search",
"title": "Sidebar Search",
"description": "Campo de busca para sidebar com label sr-only e ícone — inspirado em shadcn sidebar SearchForm.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/sidebar-search",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"sidebar",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/sidebar-search.tsx"
],
"props": [
{
"name": "placeholder",
"required": false,
"type": "string"
},
{
"name": "defaultValue",
"required": false,
"type": "string"
},
{
"name": "onSearch",
"required": false,
"type": "(value: string) => void"
},
{
"name": "onSubmit",
"required": false,
"type": "(e: React.FormEvent) => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{},"
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
},
{
"name": "AllLocales",
"description": "",
"code": "\n {([\"pt-BR\", \"en-US\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
\n \n \n {locale}\n \n
\n \n ))}\n
\n
\n
\n {sig\n ? `✓ Signature captured (${Math.round(sig.length / 1024)} KB)`\n : \"No signature yet\"}\n
\n
| void"
},
{
"name": "onSocialSignUp",
"required": false,
"type": "(provider: SocialProvider) => Promise | void"
},
{
"name": "onLogin",
"required": false,
"type": "() => void"
},
{
"name": "socialProviders",
"required": false,
"type": "SocialProvider[]"
},
{
"name": "termsUrl",
"required": false,
"type": "string"
},
{
"name": "privacyUrl",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "errorMessage",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"flat\"",
"options": [
"default",
"flat"
],
"default": "default"
}
],
"storyTitle": "Auth/SignUpForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n variant: \"default\",\n socialProviders: [\"google\", \"github\", \"govbr\"],\n },"
},
{
"name": "FlatVariant",
"description": "",
"args": "{\n variant: \"flat\",\n socialProviders: [\"google\", \"govbr\"],\n },"
},
{
"name": "WithError",
"description": "",
"args": "{\n errorMessage:\n \"Este e-mail já está cadastrado no sistema. Tente fazer login ou recuperar sua senha.\",\n },"
}
]
},
{
"name": "ds-skeleton-layout",
"title": "Skeleton Layout",
"description": "Esqueletos pré-compostos para dashboard, tabela, perfil, formulário e lista.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/skeleton-layout",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"skeleton",
"card",
"ui-i18n"
],
"files": [
"components/ds/skeleton-layout.tsx"
],
"props": [
{
"name": "pattern",
"required": false,
"type": "\"dashboard\" | \"table\" | \"profile\" | \"form\" | \"list\"",
"description": "Layout pattern to render."
},
{
"name": "rows",
"required": false,
"type": "number",
"description": "Number of rows for table and list patterns."
},
{
"name": "columns",
"required": false,
"type": "number",
"description": "Number of columns for table pattern."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Locale for accessibility label."
}
],
"storyTitle": "Feedback/SkeletonLayout",
"stories": [
{
"name": "Dashboard",
"description": "",
"args": "{\n pattern: \"dashboard\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n const el = canvas.getByRole(\"status\")\n await expect(el).toHaveAttribute(\"aria-busy\", \"true\")\n },"
},
{
"name": "Table",
"description": "",
"args": "{\n pattern: \"table\",\n rows: 5,\n columns: 4,\n },"
},
{
"name": "Profile",
"description": "",
"args": "{\n pattern: \"profile\",\n },"
},
{
"name": "Form",
"description": "",
"args": "{\n pattern: \"form\",\n },"
},
{
"name": "List",
"description": "",
"args": "{\n pattern: \"list\",\n rows: 4,\n },"
}
]
},
{
"name": "ds-slider",
"title": "Slider UI",
"description": "Extended slider with value tooltip on hover, step marks/labels, range (dual handle) support, format-utils integration, i18n aria-labels, and skeleton loading.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/slider",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"slider",
"tooltip",
"skeleton",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/slider.tsx"
],
"props": [
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "showMarks",
"required": false,
"type": "boolean"
},
{
"name": "marks",
"required": false,
"type": "SliderMark[]"
},
{
"name": "formatValue",
"required": false,
"type": "(value: number) => string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "orientation",
"required": false,
"type": "\"horizontal\" | \"vertical\""
}
],
"storyTitle": "Form/Slider",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n defaultValue: [50],\n min: 0,\n max: 100,\n showTooltip: false,\n showMarks: false,\n loading: false,\n orientation: \"horizontal\",\n label: \"Slider\",\n },"
},
{
"name": "Range",
"description": "",
"args": "{\n defaultValue: [30, 70],\n min: 0,\n max: 100,\n label: \"Range slider\",\n },"
},
{
"name": "WithMarks",
"description": "",
"args": "{\n defaultValue: [50],\n min: 0,\n max: 100,\n showMarks: true,\n label: \"Slider with marks\",\n },"
},
{
"name": "CustomMarks",
"description": "",
"args": "{\n defaultValue: [25],\n min: 0,\n max: 100,\n marks: [\n { value: 0, label: \"0%\" },\n { value: 25, label: \"25%\" },\n { value: 50, label: \"50%\" },\n { value: 75, label: \"75%\" },\n { value: 100, label: \"100%\" },\n ],\n label: \"Custom marks slider\",\n },"
},
{
"name": "WithTooltip",
"description": "",
"args": "{\n defaultValue: [60],\n min: 0,\n max: 100,\n showTooltip: true,\n label: \"Slider with tooltip\",\n },"
},
{
"name": "Vertical",
"description": "",
"args": "{\n defaultValue: [50],\n min: 0,\n max: 100,\n orientation: \"vertical\",\n showMarks: true,\n label: \"Vertical slider\",\n },"
},
{
"name": "VerticalRange",
"description": "",
"args": "{\n defaultValue: [20, 80],\n min: 0,\n max: 100,\n orientation: \"vertical\",\n label: \"Vertical range\",\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n loading: true,\n label: \"Volume\",\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n defaultValue: [45],\n min: 0,\n max: 100,\n disabled: true,\n label: \"Disabled slider\",\n },"
},
{
"name": "WithLabel",
"description": "",
"args": "{\n defaultValue: [75],\n min: 0,\n max: 100,\n label: \"Volume\",\n showTooltip: true,\n },"
},
{
"name": "PriceRange",
"description": "",
"args": "{\n defaultValue: [50, 200],\n min: 0,\n max: 500,\n step: 10,\n label: \"Price range\",\n showTooltip: true,\n formatValue: (v) => `$${v}`,\n },"
}
]
},
{
"name": "ds-snippet",
"title": "Snippet",
"description": "Tabbed code com copy — adaptado Kibo.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/snippet",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"tabs",
"ui-i18n"
],
"files": [
"components/ds/snippet.tsx"
],
"props": [
{
"name": "tabs",
"required": true,
"type": "SnippetTab[]"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Data Display/Snippet",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n tabs: [\n { label: \"npm\", code: \"npx shadcn@latest add button\" },\n { label: \"pnpm\", code: \"pnpm dlx shadcn@latest add button\" },\n ],\n },"
}
]
},
{
"name": "ds-social-auth-group",
"title": "SocialAuthGroup",
"description": "Grupo de botões para login social e institucional (Google, GitHub, Microsoft, Apple, Gov.br, CAFe).",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/social-auth-group",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"ui-i18n"
],
"files": [
"components/ds/social-auth-group.tsx"
],
"props": [
{
"name": "providers",
"required": false,
"type": "SocialProvider[]"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
},
{
"name": "loadingProvider",
"required": false,
"type": "SocialProvider | null"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "onSelect",
"required": false,
"type": "(provider: SocialProvider) => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "layout",
"required": false,
"type": "\"stacked\" | \"inline\" | \"grid\"",
"options": [
"stacked",
"inline",
"grid"
],
"default": "stacked"
}
],
"storyTitle": "Actions/SocialAuthGroup",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n layout: \"stacked\",\n providers: [\"google\", \"github\"],\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "GridWithGovBr",
"description": "",
"args": "{\n layout: \"grid\",\n providers: [\"google\", \"govbr\", \"github\", \"cafe\"],\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "InlineRow",
"description": "",
"args": "{\n layout: \"inline\",\n providers: [\"google\", \"github\", \"microsoft\", \"apple\", \"govbr\"],\n },"
},
{
"name": "LoadingState",
"description": "",
"args": "{\n layout: \"stacked\",\n providers: [\"google\", \"govbr\"],\n loadingProvider: \"govbr\",\n },\n render: (args) => (\n \n
\n ),"
}
]
},
{
"name": "ds-social-links",
"title": "Social Links",
"description": "Linha acessível de canais sociais e comunitários com variantes visuais e detecção de ícones.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/social-links",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ds/social-links.tsx"
],
"props": [
{
"name": "links",
"required": true,
"type": "SocialLinkItem[]"
},
{
"name": "shape",
"required": false,
"type": "\"circle\" | \"rounded\" | \"square\""
},
{
"name": "gap",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\""
},
{
"name": "navLabel",
"required": false,
"type": "string"
},
{
"name": "variant",
"required": false,
"type": "\"ghost\" | \"outline\" | \"muted\"",
"options": [
"ghost",
"outline",
"muted"
],
"default": "ghost"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "AllVariants",
"description": "",
"code": "\n
\n \n Ghost:\n \n
\n
\n \n Outline:\n \n
\n
\n \n Muted:\n \n
\n
\n
\n \n SM:\n \n
\n
\n \n MD:\n \n
\n
\n \n LG:\n \n
\n
\n
\n \n Circle:\n \n
\n
\n \n Rounded:\n \n
\n
\n \n Square:\n \n
\n
\n
\n \n Primary:\n \n
\n
\n \n Success (+18%):\n \n
\n
\n \n Destructive (-8%):\n \n
\n
\n \n Warning:\n \n
\n
\n
\n \n \n \n Indicador\n \n \n Último\n \n \n Tendência (30d)\n \n \n \n \n \n Taxa Selic \n \n 10.75%\n \n \n \n \n \n \n PIB Trimestral\n \n \n +2.8%\n \n \n \n \n \n
\n
\n
"
},
{
"name": "Tones",
"description": "Semantic color tones — `muted`, `primary`, `success`, `warning`, and `destructive`.",
"code": "\n
"
},
{
"name": "Thickness",
"description": "Ring stroke thickness — `thin` (1.5), `regular` (2), `bold` (2.5), `bolder` (3).",
"code": "\n
"
},
{
"name": "LargeWithLabel",
"description": "A large, centered spinner suitable for full-section or page-level loading states.",
"code": "\n \n Processing 2030 Agenda data…\n \n
"
},
{
"name": "InButton",
"description": "Spinner used inline inside disabled buttons. With `tone: current` it inherits each button's text color automatically.",
"code": "\n \n \n \n \n \n \n
"
}
]
},
{
"name": "ds-spotlight-card",
"title": "Spotlight Card",
"description": "Card com spotlight radial seguindo o mouse — inspirado em Aceternity Card Spotlight.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/spotlight-card",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [
"card",
"skeleton"
],
"files": [
"components/ds/spotlight-card.tsx"
],
"props": [
{
"name": "spotlightColor",
"required": false,
"type": "string"
},
{
"name": "spotlightRadius",
"required": false,
"type": "number"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "description",
"required": false,
"type": "string"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "radius",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"options": [
"sm",
"md",
"lg",
"xl"
],
"default": "xl"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"muted\" | \"outline\"",
"options": [
"default",
"muted",
"outline"
],
"default": "default"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Passos de autenticação\",\n description: \"Siga os passos para proteger sua conta\",\n children: (\n \n • Digite seu e-mail \n • Crie uma senha forte \n • Ative a verificação em duas etapas \n • Verifique sua identidade \n \n ),\n },\n render: (args) => \n Conta verificada com sucesso \n
\n ),\n },\n render: (args) => \n {([\"default\", \"muted\", \"outline\"] as const).map((v) => (\n
\n \n Mova o mouse sobre o card\n
\n \n ))}\n \n
\n
\n
\n Current Step: {steps.find((s) => s.id === currentStepId)?.title}\n
\n
\n {\n const idx = steps.findIndex((s) => s.id === currentStepId)\n if (idx > 0) setCurrentStepId(steps[idx - 1].id)\n }}\n disabled={currentStepId === \"1\"}\n >\n Previous\n \n {\n const idx = steps.findIndex((s) => s.id === currentStepId)\n if (idx < steps.length - 1) setCurrentStepId(steps[idx + 1].id)\n }}\n disabled={currentStepId === \"4\"}\n >\n Next\n \n
\n
\n
\n
\n
\n
\n Current Step: {steps.find((s) => s.id === currentStepId)?.title}\n
\n
\n {\n const idx = steps.findIndex((s) => s.id === currentStepId)\n if (idx > 0) setCurrentStepId(steps[idx - 1].id)\n }}\n disabled={currentStepId === \"1\"}\n >\n Previous\n \n {\n const idx = steps.findIndex((s) => s.id === currentStepId)\n if (idx < steps.length - 1) setCurrentStepId(steps[idx + 1].id)\n }}\n disabled={currentStepId === \"4\"}\n >\n Next\n \n
\n
\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n \n {size === \"sm\"\n ? \"Small (sm)\"\n : size === \"md\"\n ? \"Medium (md)\"\n : \"Large (lg)\"}\n \n
\n ))}\n
\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
\n \n {size === \"sm\"\n ? \"Small (sm)\"\n : size === \"md\"\n ? \"Medium (md)\"\n : \"Large (lg)\"}\n \n
\n ))}\n
\n \n {features.map((feature) => (\n \n \n {features.map((feature) => (\n \n \n ))}\n \n "
},
{
"name": "AllSizes",
"description": "",
"code": "\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n \n \n {features.slice(0, 2).map((feature) => (\n \n \n {features.slice(0, 2).map((feature) => (\n \n \n ))}\n \n \n ))}\n
"
},
{
"name": "Controlled",
"description": "",
"code": "\n \n {features.map((feature) => (\n \n \n {features.map((feature) => (\n \n \n ))}\n \n "
},
{
"name": "Loading",
"description": "",
"code": "\n \n {features.slice(0, 3).map((feature) => (\n \n \n {features.slice(0, 3).map((feature) => (\n \n \n ))}\n \n "
},
{
"name": "Locales",
"description": "",
"code": "\n {([\"en-US\", \"pt-BR\", \"es-ES\", \"fr-FR\"] as UILocale[]).map((locale) => (\n \n \n {features.slice(0, 2).map((feature) => (\n \n \n {features.slice(0, 2).map((feature) => (\n \n \n ))}\n \n \n ))}\n
"
}
]
},
{
"name": "ds-switch",
"title": "Switch UI",
"description": "Extended switch with label positioning, semantic color variants (success/destructive/warning), skeleton loading, and error state.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/switch",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"switch",
"label",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/switch.tsx"
],
"props": [
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "labelPosition",
"required": false,
"type": "\"left\" | \"right\""
},
{
"name": "color",
"required": false,
"type": "SwitchColor"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "error",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Form/Switch",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n color: \"default\",\n size: \"md\",\n labelPosition: \"right\",\n loading: false,\n locale: \"pt-BR\",\n },"
},
{
"name": "WithLabel",
"description": "",
"args": "{\n label: \"Enable notifications\",\n },"
},
{
"name": "LabelLeft",
"description": "",
"args": "{\n label: \"Notifications\",\n labelPosition: \"left\",\n },"
},
{
"name": "AllSizes",
"description": "",
"code": "\n
"
},
{
"name": "AllColors",
"description": "",
"code": "\n
"
},
{
"name": "Loading",
"description": "",
"code": "\n
"
},
{
"name": "WithError",
"description": "",
"args": "{\n label: \"Accept terms\",\n error: \"You must accept the terms to continue.\",\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n label: \"Disabled switch\",\n disabled: true,\n },"
},
{
"name": "DisabledChecked",
"description": "",
"args": "{\n label: \"Always active\",\n disabled: true,\n defaultChecked: true,\n },"
}
]
},
{
"name": "ds-system-status-badge",
"title": "System Status Badge",
"description": "Indicador de disponibilidade operacional e saúde dos serviços em tempo real com dot animado.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/system-status-badge",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"ui-i18n"
],
"files": [
"components/ds/system-status-badge.tsx"
],
"props": [
{
"name": "status",
"required": false,
"type": "SystemHealthStatus"
},
{
"name": "label",
"required": false,
"type": "string"
},
{
"name": "uptime",
"required": false,
"type": "string"
},
{
"name": "href",
"required": false,
"type": "string"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\"",
"options": [
"sm",
"md"
],
"default": "md"
}
],
"stories": [
{
"name": "AllStatuses",
"description": "",
"code": "\n
"
},
{
"name": "WithUptime",
"description": "",
"args": "{\n status: \"operational\",\n uptime: \"99.98%\",\n },"
},
{
"name": "AsLink",
"description": "",
"args": "{\n status: \"operational\",\n uptime: \"99.99%\",\n href: \"https://status.ufpb.br\",\n },"
},
{
"name": "AllSizes",
"description": "",
"code": "\n
"
}
]
},
{
"name": "ds-table-of-contents",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/table-of-contents",
"dependencies": [],
"registryDependencies": [],
"files": [
"components/ds/table-of-contents.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "TocItem[]"
},
{
"name": "activeId",
"required": false,
"type": "string",
"description": "Se providenciado, sobrescreve o rastreamento automático do scroll e controla o id ativo."
},
{
"name": "offset",
"required": false,
"type": "number",
"description": "Offset superior para acionar a troca do active element via scroll (em px)"
},
{
"name": "onItemClick",
"required": false,
"type": "(id: string, e: React.MouseEvent) => void",
"description": "Se passado, intercepta o clique do link"
}
],
"storyTitle": "Navigation/TableOfContents",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n items: [],\n },\n render: () => {\n return (\n \n
\n {/* Falso conteúdo para mockar âncoras */}\n
\n 1. Introdução \n \n Conteúdo introdução...\n
\n \n\n
\n 2. Funcionalidades \n \n Conteúdo funcionalidades...\n
\n \n\n
\n 2.1 Primeira Funcionalidade \n Conteúdo 2.1...
\n \n\n
\n 2.2 Segunda Funcionalidade \n Conteúdo 2.2...
\n \n\n
\n 3. Conclusão \n \n Conteúdo final...\n
\n \n
\n\n
\n
\n
\n {/* Falso conteúdo para mockar âncoras */}\n
\n 1. Introdução \n \n Conteúdo introdução...\n
\n \n\n
\n 2. Funcionalidades \n \n Conteúdo funcionalidades...\n
\n \n\n
\n 2.1 Primeira Funcionalidade \n Conteúdo 2.1...
\n \n\n
\n 2.2 Segunda Funcionalidade \n Conteúdo 2.2...
\n \n\n
\n 3. Conclusão \n \n Conteúdo final...\n
\n \n
\n\n
\n
\n
\n
\n
\n line\n
\n
({ ...it, icon: undefined }))}\n defaultValue=\"account\"\n variant=\"line\"\n />\n \n
\n
\n
\n segmented\n
\n
({ ...it, icon: undefined }))}\n defaultValue=\"account\"\n variant=\"segmented\"\n />\n \n
\n
\n
\n
\n line\n
\n
({ ...it, icon: undefined }))}\n defaultValue=\"account\"\n variant=\"line\"\n />\n \n
\n
\n
\n segmented\n
\n
({ ...it, icon: undefined }))}\n defaultValue=\"account\"\n variant=\"segmented\"\n />\n \n
\n Profile settings with avatar, name, and contact info.\n \n ),\n },\n {\n value: \"security\",\n label: \"Security\",\n icon: Lock,\n content: (\n Password, 2FA, and session management. \n ),\n },\n {\n value: \"billing\",\n label: \"Billing\",\n icon: CreditCard,\n content: (\n \n Invoices, payments, and subscription plan.\n \n ),\n },\n ],\n defaultValue: \"profile\",\n },"
},
{
"name": "WithBadges",
"description": "The `count` field adds a numeric badge next to the tab label.\n\nUseful for notification counts, pending items, or cart quantities.",
"args": "{\n items: [\n {\n value: \"inbox\",\n label: \"Inbox\",\n icon: Mail,\n count: 12,\n content: 12 unread messages in your inbox. ,\n },\n {\n value: \"activity\",\n label: \"Activity\",\n icon: Activity,\n count: 3,\n content: (\n 3 recent activities from your team. \n ),\n },\n {\n value: \"messages\",\n label: \"Messages\",\n icon: MessageSquare,\n count: 7,\n content: (\n 7 unread messages across all channels. \n ),\n },\n {\n value: \"cart\",\n label: \"Cart\",\n icon: ShoppingCart,\n count: 2,\n content: 2 items in your shopping cart. ,\n },\n ],\n defaultValue: \"inbox\",\n variant: \"default\",\n },"
},
{
"name": "Vertical",
"description": "Vertical orientation places the tab list on the left and content on the right.",
"args": "{ items: iconItems, defaultValue: \"profile\" },\n parameters: {\n docs: {\n description: {\n story:\n \"Vertical orientation places the tab list on the left and content on the right.\",\n },\n },\n },\n render: () => (\n \n Account settings panel rendered inside an accordion section.\n \n ),\n },\n {\n value: \"security\",\n label: \"Security\",\n icon: Shield,\n count: 2,\n content: (\n \n Security settings with pending 2FA setup and active sessions.\n \n ),\n },\n {\n value: \"notifications\",\n label: \"Notifications\",\n icon: Bell,\n count: 12,\n content: (\n \n Notification preferences with email, push, and SMS options.\n \n ),\n },\n ],\n defaultValue: \"account\",\n forceAccordion: true,\n variant: \"default\",\n },"
},
{
"name": "Controlled",
"description": "External control via `value` and `onValueChange`.\nClick the buttons below to programmatically switch tabs.",
"args": "{ items: defaultItems, defaultValue: \"account\" },\n parameters: {\n docs: {\n description: {\n story: [\n \"External control via `value` and `onValueChange`.\",\n \"Click the buttons below to programmatically switch tabs.\",\n ].join(\"\\n\"),\n },\n },\n },\n render: (args) => {\n const [tab, setTab] = React.useState(\n args.defaultValue ?? args.items[0]?.value ?? \"\"\n )\n\n const controlItems: TabItem[] = args.items.map((item) => ({\n value: item.value,\n label: item.label,\n content: item.content,\n disabled: item.disabled,\n icon: item.icon,\n count: item.count,\n }))\n\n const noIconItems = controlItems.map((item) => ({\n ...item,\n icon: undefined,\n }))\n\n return (\n \n
\n {controlItems.map((item) => {\n const Icon = item.icon\n return (\n
\n
\n
\n Active tab:{\" \"}\n \n {tab}\n \n
\n
\n {[\"Users\", \"Revenue\", \"Growth\"].map((label) => (\n
\n {label}
\n \n {Math.floor(Math.random() * 1000)}\n
\n \n {Array.from({ length: 4 }).map((_, i) => (\n
\n
\n \n Activity event #{i + 1}\n \n \n {i + 1}h ago\n \n \n {[\n { name: \"Alice\", role: \"Designer\" },\n { name: \"Bob\", role: \"Developer\" },\n { name: \"Carol\", role: \"PM\" },\n ].map((member) => (\n
\n \n {member.name[0]}\n
\n \n
{member.name}
\n
{member.role}
\n
\n 12 active alerts requiring attention across your projects.\n \n ),\n },\n ]\n\n return (\n \n {members.map((member) => (\n "
},
{
"name": "TwoColumns",
"description": "",
"code": "\n {members.map((member) => (\n "
},
{
"name": "Loading",
"description": "",
"code": "\n {Array.from({ length: 4 }).map((_, index) => (\n "
}
]
},
{
"name": "ds-team-switcher",
"title": "Team Switcher",
"description": "Seletor de equipe para sidebar com DropdownMenu, logo, plano e atalho — inspirado em shadcn sidebar-07 TeamSwitcher.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/team-switcher",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"sidebar",
"dropdown-menu",
"skeleton",
"ui-i18n"
],
"files": [
"components/ds/team-switcher.tsx"
],
"props": [
{
"name": "teams",
"required": true,
"type": "TeamSwitcherTeam[]"
},
{
"name": "defaultTeam",
"required": false,
"type": "string"
},
{
"name": "onTeamChange",
"required": false,
"type": "(team: TeamSwitcherTeam) => void"
},
{
"name": "onAddTeam",
"required": false,
"type": "() => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"stories": [
{
"name": "Default",
"description": "",
"args": "{ teams },"
},
{
"name": "Loading",
"description": "",
"args": "{ teams, loading: true },"
},
{
"name": "AllLocales",
"description": "",
"code": "\n {([\"pt-BR\", \"en-US\", \"es-ES\", \"fr-FR\"] as const).map((locale) => (\n
\n \n \n {locale}\n \n
\n \n ))}\n
\n
\n Crie produtos digitais{\" \"}\n \n
\n Passe o mouse sobre a palavra em destaque para pausar a rotação\n automática.\n
\n
\n
\n Crie produtos digitais{\" \"}\n \n
\n Passe o mouse sobre a palavra em destaque para pausar a rotação\n automática.\n
\n
\n Sem camisa, sem sapatos \n \n Se alguém gritar “pare!”, a luta termina.\n
\n "
},
{
"name": "Loading",
"description": "",
"args": "{ loading: true },"
},
{
"name": "AllVariants",
"description": "",
"code": "\n {([\"default\", \"muted\", \"ghost\"] as const).map((v) => (\n
\n {v} \n \n Hover para tilt 3D + glare\n
\n \n ))}\n
\n \n \n \n \n Pedido recebido \n \n O pedido foi recebido no sistema.\n
\n 10:00 AM \n \n \n \n \n \n \n Em processamento \n \n O pedido está sendo separado no estoque.\n
\n 11:30 AM \n \n \n \n \n \n \n Enviado \n \n O pedido está a caminho.\n
\n 02:15 PM \n \n \n "
},
{
"name": "AllVariants",
"description": "",
"code": "\n
\n
\n Outline (solid=false)\n \n \n {STATUSES.map((status, i) => (\n \n \n \n \n {status} \n \n \n ))}\n \n \n
\n
\n Solid (solid=true)\n \n \n {STATUSES.map((status, i) => (\n \n \n \n \n {status} \n \n \n ))}\n \n \n
\n \n \n \n \n \n Sucesso \n \n Aprovado pelo sistema.\n
\n \n \n \n \n \n \n \n Aviso \n \n Requer atenção manual.\n
\n \n \n \n \n \n \n \n \n Informação \n Apenas para registro.
\n \n \n "
}
]
},
{
"name": "ds-toggle-theme",
"title": "Toggle Theme",
"description": "A dropdown button to switch between light, dark, and system themes. Re-exports ThemeProvider for app-level setup.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/toggle-theme",
"dependencies": [
"lucide-react",
"next-themes"
],
"registryDependencies": [
"button",
"dropdown-menu",
"ui-i18n"
],
"files": [
"components/ds/toggle-theme.tsx"
],
"storyTitle": "Actions/ToggleTheme",
"props": [
{
"name": "locale",
"control": "inline-radio",
"options": [
"en-US",
"pt-BR",
"es-ES",
"fr-FR"
],
"description": "Locale for menu item and trigger labels",
"default": "en-US"
},
{
"name": "loading",
"control": "boolean",
"default": "false"
}
],
"stories": [
{
"name": "Default",
"description": "Default theme toggle with system/light/dark options and English labels.",
"args": "{\n locale: \"en-US\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default theme toggle with system/light/dark options and English labels.\",\n },\n },\n },"
},
{
"name": "Portuguese",
"description": "Portuguese (pt-BR) labels for theme options — Claro, Escuro, and Sistema.",
"args": "{\n locale: \"pt-BR\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Portuguese (pt-BR) labels for theme options — Claro, Escuro, and Sistema.\",\n },\n },\n },"
},
{
"name": "InHeader",
"description": "Theme toggle rendered inside a mock header layout with navigation links."
}
]
},
{
"name": "ds-tracing-beam",
"title": "Tracing Beam",
"description": "Feixe vertical que acompanha o scroll com thumb e gradiente — inspirado em Aceternity Tracing Beam.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/tracing-beam",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/tracing-beam.tsx"
],
"props": [
{
"name": "beamColor",
"required": false,
"type": "string"
},
{
"name": "inset",
"required": false,
"type": "\"true\" | \"false\"",
"options": [
"true",
"false"
]
}
],
"stories": [
{
"name": "Default",
"description": "",
"code": "\n
\n \n React \n \n Minim proident non nisi velit non consectetur. Esse adipisicing\n laboris consectetur enim ipsum.\n
\n {/* eslint-disable-next-line @next/next/no-img-element */}\n \n \n Changelog \n \n Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat\n deserunt cupidatat.\n
\n \n \n Launch Week \n \n In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse\n veniam fugiat.\n
\n \n \n
\n \n Item 1 \n \n Conteúdo com inset false — sem padding lateral.\n
\n \n \n Item 2 \n \n Segundo bloco para testar progresso.\n
\n \n \n ),"
}
]
},
{
"name": "ds-transfer-list",
"title": "Transfer List",
"description": "Seleção entre dois conjuntos com busca, ações em lote e contadores.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/transfer-list",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"checkbox",
"button",
"input",
"scroll-area",
"ui-i18n"
],
"files": [
"components/ds/transfer-list.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "TransferListItem[]",
"description": "Complete array of items."
},
{
"name": "value",
"required": true,
"type": "string[]",
"description": "IDs of items selected in the right panel."
},
{
"name": "onChange",
"required": true,
"type": "(newValues: string[]) => void",
"description": "Callback fired when item transfers occur."
},
{
"name": "titles",
"required": false,
"type": "[string, string]",
"description": "Panel titles [leftTitle, rightTitle]."
},
{
"name": "searchable",
"required": false,
"type": "boolean",
"description": "Enables search input inside each panel."
},
{
"name": "disabled",
"required": false,
"type": "boolean",
"description": "Disables all interactions."
},
{
"name": "locale",
"required": false,
"type": "UILocale",
"description": "Localization locale."
}
],
"storyTitle": "Form/TransferList",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n locale: \"pt-BR\",\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement)\n const item = canvas.getByText(\"Taxa de Inflação\")\n await expect(item).toBeInTheDocument()\n await expect(canvas.getByText(\"PIB Per Capita\")).toBeInTheDocument()\n await userEvent.click(item)\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n disabled: true,\n },"
},
{
"name": "Locales",
"description": "",
"code": "\n
\n \n pt-BR:\n \n
\n
\n \n en-US:\n \n
\n
\n
\n \n 9,740 enrolled \n \n \n 5 schools \n \n
\n
\n \n
\n `${v}%`}\n height={260}\n />\n `${v}%`}\n height={260}\n />\n `${v}%`}\n height={260}\n />\n `${v}%`}\n height={260}\n />\n
"
},
{
"name": "LocalePTBR",
"description": "Treemap with Portuguese locale displaying budget allocation with localized percentage formatting.",
"args": "{\n title: \"Budget Allocation\",\n subtitle: \"Fiscal year 2025 — percentage of total\",\n data: budgetAllocation,\n showLabels: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n locale: \"pt-BR\",\n },"
},
{
"name": "Loading",
"description": "Pass `loading={true}` to replace the treemap with an animated skeleton that mirrors the title, subtitle, and footer structure.",
"args": "{\n title: \"Budget Allocation\",\n subtitle: \"Fiscal year 2025 — percentage of total\",\n data: budgetAllocation,\n showLabels: true,\n showTooltip: true,\n valueFormatter: (v) => formatValue(v, \"float\", { decimals: 0 }) + \"%\",\n },\n render: (args) => \n
\n Click any colored rectangle to drill into its sub-categories. Use the\n breadcrumb at the top to navigate back.\n
\n
v.toLocaleString(\"en-US\")}\n footer={\n \n \n }\n />\n | void"
},
{
"name": "onResend",
"required": false,
"type": "() => Promise | void"
},
{
"name": "resendCooldown",
"required": false,
"type": "number"
},
{
"name": "destination",
"required": false,
"type": "string"
},
{
"name": "method",
"required": false,
"type": "\"authenticator\" | \"email\" | \"sms\""
},
{
"name": "allowAlternative",
"required": false,
"type": "boolean"
},
{
"name": "onAlternativeMethod",
"required": false,
"type": "() => void"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"clean\"",
"options": [
"default",
"clean"
],
"default": "default"
}
],
"storyTitle": "Form/TwoFactorAuth",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n destination: \"estudante@ufpb.br\",\n method: \"email\",\n resendCooldown: 45,\n },"
},
{
"name": "AuthenticatorApp",
"description": "",
"args": "{\n method: \"authenticator\",\n destination: \"Google Authenticator\",\n resendCooldown: 30,\n },"
},
{
"name": "CleanVariant",
"description": "",
"args": "{\n variant: \"clean\",\n destination: \"(83) 9****-9988\",\n method: \"sms\",\n },"
}
]
},
{
"name": "ds-typewriter",
"title": "Typewriter",
"description": "Texto com efeito typewriter/flip/generate, cursor piscante e suporte a reduced-motion — inspirado em Aceternity Text Generate + Typewriter + Flip Words.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/typewriter",
"dependencies": [
"class-variance-authority"
],
"registryDependencies": [],
"files": [
"components/ds/typewriter.tsx"
],
"props": [
{
"name": "words",
"required": true,
"type": "string[]"
},
{
"name": "speed",
"required": false,
"type": "number"
},
{
"name": "deleteSpeed",
"required": false,
"type": "number"
},
{
"name": "delayBetween",
"required": false,
"type": "number"
},
{
"name": "loop",
"required": false,
"type": "boolean"
},
{
"name": "cursor",
"required": false,
"type": "boolean"
},
{
"name": "cursorChar",
"required": false,
"type": "string"
},
{
"name": "variant",
"required": false,
"type": "\"typewriter\" | \"flip\" | \"generate\"",
"options": [
"typewriter",
"flip",
"generate"
],
"default": "typewriter"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"display\"",
"options": [
"sm",
"md",
"lg",
"xl",
"display"
],
"default": "md"
}
],
"stories": [
{
"name": "TypewriterEffect",
"description": "",
"args": "{\n words: [\"Design System\", \"LEMA-DS\", \"UFPB\", \"Aceternity inspirado\"],\n variant: \"typewriter\",\n size: \"lg\",\n loop: true,\n },"
},
{
"name": "FlipWords",
"description": "",
"args": "{\n words: [\"rápido\", \"moderno\", \"acessível\", \"lindo\"],\n variant: \"flip\",\n size: \"display\",\n loop: true,\n },\n render: (args) => (\n \n Construa produtos
\n ),"
},
{
"name": "GenerateEffect",
"description": "",
"args": "{\n words: [\"O que este componente resolve? Quando usar vs alternativas?\"],\n variant: \"generate\",\n size: \"md\",\n speed: 30,\n },"
},
{
"name": "WithoutCursor",
"description": "",
"args": "{\n words: [\"Sem cursor\", \"Apenas texto\"],\n variant: \"typewriter\",\n cursor: false,\n },"
},
{
"name": "AllVariants",
"description": "",
"code": "\n {([\"typewriter\", \"flip\", \"generate\"] as const).map((v) => (\n
\n {v} \n
\n ))}\n
\n
"
},
{
"name": "WithIndex",
"description": "",
"args": "{\n title: \"Inclusão e Acessibilidade\",\n description:\n \"Projetamos interfaces e sistemas abertos e acessíveis para toda a sociedade.\",\n icon: Heart,\n index: 5,\n variant: \"accent\",\n },"
},
{
"name": "WithoutIcon",
"description": "",
"args": "{\n title: \"Autonomia Acadêmica\",\n description:\n \"Pesquisa livre e dedicada à geração de conhecimento transformador.\",\n icon: undefined,\n index: \"03\",\n variant: \"default\",\n },"
}
]
},
{
"name": "ds-video-dialog",
"title": "VideoDialog",
"description": "Thumbnail de vídeo com overlay interativo, botão play pulsante e abertura de modal responsivo em Dialog.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/video-dialog",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"dialog",
"ui-i18n"
],
"files": [
"components/ds/video-dialog.tsx"
],
"props": [
{
"name": "videoSrc",
"required": true,
"type": "string"
},
{
"name": "thumbnailSrc",
"required": true,
"type": "string"
},
{
"name": "thumbnailAlt",
"required": false,
"type": "string"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "aspectRatio",
"required": false,
"type": "\"16/9\" | \"4/3\" | \"1/1\" | \"21/9\""
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"minimal\" | \"glow\"",
"options": [
"default",
"minimal",
"glow"
],
"default": "default"
}
],
"storyTitle": "Media/VideoDialog",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n title: \"Apresentação do LEMA Design System\",\n thumbnailSrc:\n \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80\",\n thumbnailAlt: \"Thumbnail com formas abstratas elegantes\",\n videoSrc: \"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ\",\n variant: \"default\",\n aspectRatio: \"16/9\",\n locale: \"pt-BR\",\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "GlowVariant",
"description": "",
"args": "{\n title: \"Visão Geral da Arquitetura de Componentes\",\n thumbnailSrc:\n \"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&auto=format&fit=crop&q=80\",\n videoSrc: \"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ\",\n variant: \"glow\",\n aspectRatio: \"16/9\",\n },\n render: (args) => (\n \n
\n ),"
},
{
"name": "MinimalVariant",
"description": "",
"args": "{\n title: \"Demo rápida de 30 segundos\",\n thumbnailSrc:\n \"https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200&auto=format&fit=crop&q=80\",\n videoSrc: \"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ\",\n variant: \"minimal\",\n aspectRatio: \"16/9\",\n },\n render: (args) => (\n \n
\n ),"
}
]
},
{
"name": "ds-virtual-list",
"description": "Virtualized list for rendering large datasets without performance degradation.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/virtual-list",
"dependencies": [
"@tanstack/react-virtual"
],
"registryDependencies": [
"skeleton",
"scroll-area"
],
"files": [
"components/ds/virtual-list.tsx"
],
"props": [
{
"name": "items",
"required": true,
"type": "T[]"
},
{
"name": "renderItem",
"required": true,
"type": "(item: T, index: number) => React.ReactNode",
"description": "Render function for each item"
},
{
"name": "estimateSize",
"required": false,
"type": "number",
"description": "Estimated item height in px — used for initial layout, refined after measurement"
},
{
"name": "overscan",
"required": false,
"type": "number",
"description": "Number of extra items to render above and below the visible window"
},
{
"name": "height",
"required": false,
"type": "number",
"description": "Container height in px"
},
{
"name": "size",
"required": false,
"type": "VirtualListSize"
},
{
"name": "loading",
"required": false,
"type": "boolean",
"description": "Show skeleton rows while loading"
},
{
"name": "loadingCount",
"required": false,
"type": "number",
"description": "Number of skeleton rows to show when loading"
},
{
"name": "emptyContent",
"required": false,
"type": "React.ReactNode",
"description": "Empty state content — shown when items is empty and not loading"
}
],
"storyTitle": "Data Display/VirtualList",
"stories": [
{
"name": "Default",
"description": "10,000 items rendered virtually. Scroll smoothly.",
"args": "{\n items: ITEMS,\n height: 400,\n renderItem: (rawItem) => {\n const item = rawItem as Item\n return (\n \n \n #{item.id}\n \n {item.name} \n {item.category} \n \n {item.value.toLocaleString()}\n \n \n {item.status}\n \n
\n )\n },\n },\n parameters: {\n docs: {\n description: {\n story: \"10,000 items rendered virtually. Scroll smoothly.\",\n },\n },\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n items: [],\n loading: true,\n height: 400,\n loadingCount: 8,\n renderItem: () => null,\n },"
},
{
"name": "EmptyState",
"description": "",
"args": "{\n items: [],\n height: 300,\n renderItem: () => null,\n emptyContent: (\n \n \n No results found\n \n \n Try adjusting your filters\n \n
\n ),\n },"
},
{
"name": "AllSizes",
"description": "",
"args": "{\n items: [],\n renderItem: () => null,\n },\n render: () => (\n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
{\n const item = rawItem as Item\n return (\n \n {item.name} \n \n {item.value}\n \n \n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n
{\n const item = rawItem as Item\n return (\n \n {item.name} \n \n {item.value}\n \n \n {item.name} \n {item.status} \n
\n )\n },\n },"
}
]
},
{
"name": "ds-waitlist-form",
"title": "WaitlistForm",
"description": "Formulário inline de pré-lançamento ou lista de espera para heróis de landing pages com feedback visual.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/waitlist-form",
"dependencies": [
"class-variance-authority",
"lucide-react"
],
"registryDependencies": [
"button",
"input",
"ui-i18n"
],
"files": [
"components/ds/waitlist-form.tsx"
],
"props": [
{
"name": "onSubmit",
"required": false,
"type": "(email: string) => Promise | void"
},
{
"name": "socialProof",
"required": false,
"type": "React.ReactNode"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
},
{
"name": "disabled",
"required": false,
"type": "boolean"
},
{
"name": "autoFocus",
"required": false,
"type": "boolean"
},
{
"name": "variant",
"required": false,
"type": "\"default\" | \"pill\" | \"floating\" | \"minimal\"",
"options": [
"default",
"pill",
"floating",
"minimal"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"sm\" | \"md\" | \"lg\"",
"options": [
"sm",
"md",
"lg"
],
"default": "md"
}
],
"storyTitle": "Auth/WaitlistForm",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n variant: \"default\",\n size: \"md\",\n locale: \"pt-BR\",\n },"
},
{
"name": "PillVariant",
"description": "",
"args": "{\n variant: \"pill\",\n size: \"md\",\n socialProof:\n \"🎉 Junte-se a mais de 1.200 desenvolvedores na lista de espera.\",\n },"
},
{
"name": "FloatingCard",
"description": "",
"args": "{\n variant: \"floating\",\n size: \"lg\",\n socialProof:\n \"🔒 Garantimos que seus dados não serão compartilhados com terceiros.\",\n },"
},
{
"name": "EnglishLocale",
"description": "",
"args": "{\n locale: \"en-US\",\n variant: \"pill\",\n },"
},
{
"name": "Disabled",
"description": "",
"args": "{\n disabled: true,\n variant: \"pill\",\n socialProof: \"Inscrições temporariamente encerradas para a turma atual.\",\n },"
}
]
},
{
"name": "ds-waterfall-chart",
"description": "Waterfall chart for cumulative positive/negative value bridges.",
"type": "registry:ui",
"category": "ds",
"importPath": "@/components/ds/waterfall-chart",
"dependencies": [],
"registryDependencies": [
"chart",
"skeleton",
"card",
"ui-i18n",
"format-utils"
],
"files": [
"components/ds/waterfall-chart.tsx"
],
"props": [
{
"name": "data",
"required": true,
"type": "WaterfallEntry[]"
},
{
"name": "title",
"required": false,
"type": "string"
},
{
"name": "subtitle",
"required": false,
"type": "string"
},
{
"name": "footer",
"required": false,
"type": "React.ReactNode"
},
{
"name": "height",
"required": false,
"type": "number"
},
{
"name": "showGrid",
"required": false,
"type": "boolean"
},
{
"name": "showTooltip",
"required": false,
"type": "boolean"
},
{
"name": "valueFormatter",
"required": false,
"type": "(value: number) => string"
},
{
"name": "format",
"required": false,
"type": "FormatPreset"
},
{
"name": "decimals",
"required": false,
"type": "number"
},
{
"name": "currency",
"required": false,
"type": "string"
},
{
"name": "abbreviate",
"required": false,
"type": "boolean"
},
{
"name": "loading",
"required": false,
"type": "boolean"
},
{
"name": "locale",
"required": false,
"type": "UILocale"
}
],
"storyTitle": "Charts/WaterfallChart",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n data: PNL_DATA,\n title: \"P&L Waterfall\",\n subtitle: \"Q3 2026 — income statement bridge\",\n format: \"currency\",\n currency: \"USD\",\n abbreviate: true,\n height: 360,\n },"
},
{
"name": "BudgetVariance",
"description": "",
"args": "{\n data: [\n { name: \"Budget\", value: 1200000, type: \"start\" as const },\n { name: \"Extra Sales\", value: 85000, type: \"positive\" as const },\n { name: \"Returns\", value: -23000, type: \"negative\" as const },\n { name: \"New Costs\", value: -67000, type: \"negative\" as const },\n { name: \"Savings\", value: 31000, type: \"positive\" as const },\n { name: \"Actual\", value: 1226000, type: \"end\" as const },\n ],\n title: \"Budget Variance\",\n subtitle: \"Planned vs Actual\",\n format: \"currency\",\n currency: \"BRL\",\n abbreviate: true,\n locale: \"pt-BR\",\n height: 320,\n },"
},
{
"name": "Loading",
"description": "",
"args": "{\n data: [],\n title: \"P&L Waterfall\",\n subtitle: \"Loading financial data…\",\n loading: true,\n height: 360,\n },"
},
{
"name": "EmptyData",
"description": "",
"args": "{\n data: [],\n title: \"Waterfall Chart\",\n height: 320,\n },"
},
{
"name": "NoGrid",
"description": "",
"args": "{\n data: PNL_DATA,\n title: \"Clean P&L\",\n showGrid: false,\n format: \"currency\",\n abbreviate: true,\n height: 360,\n },"
}
]
},
{
"name": "ds-wizard",
"title": "Wizard",
"description": "Wizard multi-step — ReUI Wizard 7.",
"type": "registry:block",
"category": "ds",
"importPath": "@/components/ds/wizard",
"dependencies": [],
"registryDependencies": [
"card",
"button",
"progress",
"skeleton"
],
"files": [
"components/ds/wizard.tsx"
],
"props": [
{
"name": "steps",
"required": true,
"type": "WizardStep[]"
},
{
"name": "currentId",
"required": false,
"type": "string"
},
{
"name": "onStepChange",
"required": false,
"type": "(id: string) => void"
},
{
"name": "loading",
"required": false,
"type": "boolean"
}
],
"storyTitle": "Onboarding/Wizard",
"stories": [
{
"name": "Default",
"description": "",
"args": "{\n steps: [\n { id: \"1\", title: \"Account\", content: \"Form 1\" },\n { id: \"2\", title: \"Details\", content: \"Form 2\" },\n ],\n },"
},
{
"name": "Loading",
"description": "",
"args": "{ steps: [], loading: true }"
}
]
},
{
"name": "empty",
"title": "Empty",
"description": "A placeholder component for empty states with icon, title, description, and content slots.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/empty",
"dependencies": [
"class-variance-authority",
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/empty.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"default\" | \"icon\"",
"options": [
"default",
"icon"
],
"default": "default"
}
],
"storyTitle": "Shadcn UI/Empty",
"stories": [
{
"name": "Default",
"description": "Empty state with an inbox icon, title, and description prompting the user to create their first item.",
"code": "\n \n \n \n No data yet \n \n Get started by creating your first item. It will appear here once\n available.\n \n \n "
},
{
"name": "WithContent",
"description": "Empty state with an additional action link below the description for clearing filters or retrying.",
"code": "\n \n \n \n No results found \n \n Try adjusting your search or filters to find what you are looking for.\n \n \n \n \n Clear Filters\n \n \n "
}
]
},
{
"name": "field",
"title": "Field",
"description": "A form field wrapper with label, description, error messages, and horizontal/vertical orientation variants.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/field",
"dependencies": [
"class-variance-authority",
"cn"
],
"registryDependencies": [
"label",
"separator"
],
"files": [
"components/ui/field.tsx"
],
"props": [
{
"name": "orientation",
"required": false,
"type": "\"vertical\" | \"horizontal\" | \"responsive\"",
"options": [
"vertical",
"horizontal",
"responsive"
],
"default": "vertical"
}
],
"storyTitle": "Shadcn UI/Field",
"stories": [
{
"name": "Default",
"description": "Vertical field layout with a label, text input, and helper description text beneath the input.",
"code": "\n Name \n \n Your full name as it appears on ID. \n \n "
},
{
"name": "Horizontal",
"description": "Horizontal field orientation with the label positioned beside the input for inline form layouts.",
"code": "\n Email \n \n \n "
},
{
"name": "WithError",
"description": "Field displaying multiple validation errors with data-invalid state and aria-invalid on the input.",
"code": "\n Password \n \n \n "
},
{
"name": "FieldSetExample",
"description": "Grouped fieldset with a legend title, separator between fields, and horizontal field layout.",
"code": "\n Contact Information \n \n \n First Name \n \n \n \n \n Last Name \n \n \n \n \n "
}
]
},
{
"name": "format-utils",
"title": "Format Utils",
"description": "Shared formatting utilities including locale-aware number formatting via Intl.NumberFormat, value abbreviation (tri/bi/mi/mil, T/B/M/K), and format wrapper functions used by card-stats and chart components.",
"type": "registry:lib",
"category": "lib",
"importPath": "@/lib/format-utils",
"dependencies": [],
"registryDependencies": [
"ui-i18n"
],
"files": [
"lib/format-utils.ts"
]
},
{
"name": "hover-card",
"title": "Hover Card",
"description": "A popover card that appears when hovering over a trigger element.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/hover-card",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/hover-card.tsx"
],
"stories": [
{
"name": "Default",
"description": "Displays a profile card with avatar, name, role, and bio when hovering over the underlined trigger text.",
"code": "\n \n \n Hover over me\n \n \n \n \n
\n JD \n \n
\n
John Doe
\n
Software Engineer
\n
\n Building tools for the modern web.\n
\n
\n
\n "
}
]
},
{
"name": "input",
"title": "Input",
"description": "A fundamental form text input element styling standard inputs such as text, passwords, emails, numbers, search bars, and files.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/input",
"dependencies": [
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/input.tsx"
],
"storyTitle": "Shadcn UI/Input",
"props": [
{
"name": "type",
"control": "select",
"options": [
"text",
"password",
"email",
"number",
"search",
"tel",
"url"
],
"default": "text"
},
{
"name": "disabled",
"control": "boolean",
"default": "false"
},
{
"name": "placeholder",
"control": "text",
"default": ""
}
],
"stories": [
{
"name": "Default",
"description": "Basic text input with a placeholder prompting the user to enter text.",
"args": "{\n placeholder: \"Enter text...\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Basic text input with a placeholder prompting the user to enter text.\",\n },\n },\n },"
},
{
"name": "Types",
"description": "",
"code": "\n
"
},
{
"name": "Disabled",
"description": "Input in a disabled state with a pre-filled value that cannot be modified.",
"args": "{\n disabled: true,\n placeholder: \"Disabled input\",\n value: \"Disabled value\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Input in a disabled state with a pre-filled value that cannot be modified.\",\n },\n },\n },"
},
{
"name": "WithValue",
"description": "",
"args": "{\n \"aria-label\": \"Filled input\",\n value: \"Filled input value\",\n },"
},
{
"name": "Invalid",
"description": "",
"args": "{\n \"aria-invalid\": true,\n placeholder: \"Invalid input\",\n },"
},
{
"name": "File",
"description": "",
"args": "{\n type: \"file\",\n \"aria-label\": \"File input\",\n },"
}
]
},
{
"name": "input-group",
"title": "Input Group",
"description": "An integrated form row that groups related inputs, text labels, prefix/suffix icons, keyboard shortcuts, and button actions.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/input-group",
"dependencies": [
"class-variance-authority",
"cn"
],
"registryDependencies": [
"button",
"input",
"textarea"
],
"files": [
"components/ui/input-group.tsx"
],
"props": [
{
"name": "align",
"required": false,
"type": "\"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"",
"options": [
"inline-start",
"inline-end",
"block-start",
"block-end"
],
"default": "inline-start"
},
{
"name": "size",
"required": false,
"type": "\"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\"",
"options": [
"xs",
"sm",
"icon-xs",
"icon-sm"
],
"default": "xs"
}
],
"storyTitle": "Shadcn UI/InputGroup",
"stories": [
{
"name": "Default",
"description": "Basic input group wrapping a single input field without any addons or buttons attached.",
"code": "\n "
},
{
"name": "WithAddon",
"description": "",
"code": "\n \n \n \n \n\n \n \n \n \n\n \n \n \n @example.com \n \n
"
},
{
"name": "WithButton",
"description": "",
"code": "\n \n \n \n \n\n \n \n \n \n\n \n \n \n
"
},
{
"name": "WithText",
"description": "",
"code": "\n \n \n \n Go \n \n\n \n $ \n .00 \n \n
"
},
{
"name": "BlockAddon",
"description": "",
"code": "\n First Name \n Last Name \n "
},
{
"name": "Disabled",
"description": "",
"code": "\n \n \n \n \n
"
}
]
},
{
"name": "input-otp",
"title": "Input Otp",
"description": "A one-time password input with individual slot groups and separators.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/input-otp",
"dependencies": [
"cn",
"input-otp",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ui/input-otp.tsx"
],
"storyTitle": "Shadcn UI/Input OTP",
"props": [],
"stories": [
{
"name": "Default",
"description": "Six-character OTP input split into two groups of three slots separated by a visual divider.",
"args": "{ maxLength: 6 } as any,\n render: () => (\n \n \n \n \n \n \n ),",
"code": "\n \n \n \n \n "
},
{
"name": "FourDigits",
"description": "",
"args": "{ maxLength: 4 } as any,\n render: () => (\n \n \n \n \n ),",
"code": "\n \n \n "
}
]
},
{
"name": "item",
"title": "Item",
"description": "A list item component with media, content, title, description, actions, and size variants.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/item",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui"
],
"registryDependencies": [
"separator"
],
"files": [
"components/ui/item.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"default\" | \"outline\" | \"muted\"",
"options": [
"default",
"outline",
"muted"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"default\" | \"sm\" | \"xs\"",
"options": [
"default",
"sm",
"xs"
],
"default": "default"
}
],
"storyTitle": "Shadcn UI/Item",
"stories": [
{
"name": "Default",
"description": "List of two items with icon media, title, description, and a ghost action button.",
"code": "\n - \n
\n \n \n Getting Started \n \n Learn the basics and set up your first project.\n \n \n \n \n Open\n \n \n \n - \n
\n \n \n Advanced Guide \n \n Deep dive into advanced features and configuration.\n \n \n \n \n Open\n \n \n \n "
},
{
"name": "Outline",
"description": "",
"args": "{\n variant: \"outline\",\n },\n render: () => (\n \n - \n
\n Project Alpha \n Last updated 2 days ago \n \n \n \n \n \n \n - \n
\n Project Beta \n Last updated 5 days ago \n \n \n \n \n \n \n \n ),",
"code": "\n - \n
\n Project Alpha \n Last updated 2 days ago \n \n \n \n \n \n \n - \n
\n Project Beta \n Last updated 5 days ago \n \n \n \n \n \n \n "
},
{
"name": "WithHeader",
"description": "",
"code": "\n \n Projects \n \n - \n
\n \n \n Design System \n Component library and style guide. \n \n \n \n 3 items \n \n "
}
]
},
{
"name": "kbd",
"title": "Kbd",
"description": "A keyboard key indicator for displaying keyboard shortcuts.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/kbd",
"dependencies": [
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/kbd.tsx"
],
"storyTitle": "Shadcn UI/Kbd",
"props": [],
"stories": [
{
"name": "Default",
"description": "Single keyboard shortcut ⌘K rendered as an inline kbd element with muted background styling.",
"args": "{\n children: \"⌘K\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Single keyboard shortcut ⌘K rendered as an inline kbd element with muted background styling.\",\n },\n },\n },"
},
{
"name": "Group",
"description": "",
"code": "\n ⌘ \n + \n Shift \n + \n P \n "
},
{
"name": "SingleKeys",
"description": "",
"code": "\n ⌘K \n ⌘S \n ⌘⇧P \n ⌘⌫ \n Esc \n ⌥F4 \n
"
}
]
},
{
"name": "label",
"title": "Label",
"description": "A form label element built on Radix UI Label primitive.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/label",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/label.tsx"
],
"storyTitle": "Shadcn UI/Label",
"props": [],
"stories": [
{
"name": "Default",
"description": "Form label associated with an email input field using htmlFor to demonstrate proper accessibility linking.",
"code": "\n Email \n
"
},
{
"name": "Disabled",
"description": "",
"code": "\n Disabled Label \n
"
}
]
},
{
"name": "marker",
"title": "Marker",
"description": "A status and pin marker indicator for chat and list items with support for variant, pin, and side-by-side layout.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/marker",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/marker.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"default\" | \"separator\" | \"border\"",
"options": [
"default",
"separator",
"border"
]
}
],
"storyTitle": "Shadcn UI/Marker",
"stories": [
{
"name": "Default",
"description": "Default marker with an information icon and a label indicating a status message.",
"code": "\n \n \n This is an informational marker \n "
},
{
"name": "Variants",
"description": "All three marker variants (default, separator, border) displayed side by side.",
"code": "\n
\n \n \n Default marker with icon \n \n
\n Separator variant \n \n
\n \n \n Border marker with warning \n \n
\n
\n \n \n Information message \n \n
\n \n \n Warning message \n \n
\n \n \n Success message \n \n
\n \n \n \n Clickable marker link \n \n "
},
{
"name": "SeparatorLabel",
"description": "Marker with separator variant used as a section divider with centered text label.",
"code": "\n
Previous section content
\n
\n Today \n \n
\n Today's section content\n
\n
\n \n File \n \n \n New File\n ⌘N \n \n \n Open\n ⌘O \n \n \n Close\n ⌘W \n \n \n \n \n Edit \n \n \n Undo\n ⌘Z \n \n \n Redo\n ⇧⌘Z \n \n \n \n \n View \n \n Show Sidebar \n Show Toolbar \n \n Zoom \n \n \n 75% \n 100% \n 150% \n \n \n \n \n \n "
}
]
},
{
"name": "message",
"title": "Message",
"description": "A chat message component with support for align (start/end), avatar, content, header, and footer slots. Composed of MessageGroup, MessageAvatar, MessageContent, MessageHeader, and MessageFooter sub-components.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/message",
"dependencies": [
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/message.tsx"
],
"storyTitle": "Shadcn UI/Message",
"props": [
{
"name": "align",
"control": "inline-radio",
"options": [
"start",
"end"
],
"default": "start"
}
],
"stories": [
{
"name": "Default",
"description": "Default start-aligned message with an avatar, sender name, and a chat bubble.",
"code": "\n \n JD \n \n \n John Doe \n \n Hey, have you seen the latest updates? \n \n 10:42 AM \n \n "
},
{
"name": "Alignment",
"description": "Conversation layout showing start-aligned (incoming) and end-aligned (outgoing) messages.",
"code": "\n \n \n AS \n \n \n Alice Silva \n \n Hi! Are you free for a quick call? \n \n 11:30 AM \n \n \n \n \n \n Sure, give me 5 minutes! \n \n 11:31 AM \n \n \n \n \n AS \n \n \n Alice Silva \n \n \n Great, I'll send you the meeting link.\n \n \n 11:31 AM \n \n \n
"
},
{
"name": "Group",
"description": "Consecutive messages from the same sender grouped together using MessageGroup.",
"code": "\n \n \n MC \n \n \n Maria Costa \n \n I've reviewed the proposal. \n \n \n \n Everything looks good, but we need to adjust the timeline.\n \n \n \n Can we discuss this tomorrow? \n \n 2:15 PM \n \n \n "
},
{
"name": "WithBubbleVariants",
"description": "Message combining different bubble variants within the same message content area.",
"code": "\n \n SK \n \n \n Support Team \n \n \n Here is the confirmation for your request:\n \n \n \n Ticket #1234 — Account Recovery \n \n \n \n Please verify your identity within 24 hours.\n \n \n 3:00 PM · Urgent \n \n "
}
]
},
{
"name": "message-scroller",
"title": "Message Scroller",
"description": "An auto-scrolling container for chat message lists with scroll-to-end/start buttons, visibility detection, and virtualized content support. Composed of MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, and MessageScrollerButton sub-components.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/message-scroller",
"dependencies": [
"@shadcn/react",
"cn",
"lucide-react"
],
"registryDependencies": [
"button"
],
"files": [
"components/ui/message-scroller.tsx"
],
"storyTitle": "Shadcn UI/MessageScroller",
"props": [],
"stories": [
{
"name": "Default",
"description": "Message scroller with sample chat messages inside a fixed-height container. Scroll down to see the scroll-to-bottom button appear.",
"code": "\n \n \n \n \n {sampleMessages.map((msg, i) => (\n \n \n {i % 2 === 0 && (\n \n \n {msg.initials}\n \n \n )}\n \n {i % 2 === 0 && {msg.name} }\n \n {msg.text} \n \n {msg.time} \n \n \n \n ))}\n \n \n \n
\n "
}
]
},
{
"name": "native-select",
"title": "Native Select",
"description": "A styled native HTML select element with optgroup and option sub-components.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/native-select",
"dependencies": [
"cn",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ui/native-select.tsx"
],
"storyTitle": "Shadcn UI/Native Select",
"props": [
{
"name": "size",
"control": "inline-radio",
"options": [
"sm",
"default"
],
"description": "Select height preset",
"default": "default"
},
{
"name": "disabled",
"control": "boolean",
"default": "false"
}
],
"stories": [
{
"name": "Default",
"description": "Native select element with three simple options using the default size preset and a chevron icon.",
"code": "\n Option 1 \n Option 2 \n Option 3 \n "
},
{
"name": "Small",
"description": "Compact native select using the small size preset for space-constrained layouts.",
"code": "\n Option 1 \n Option 2 \n "
},
{
"name": "WithGroup",
"description": "Native select with options organized into Fruits and Vegetables optgroups via NativeSelectOptGroup.",
"code": "\n \n Apple \n Banana \n \n \n Carrot \n Broccoli \n \n "
},
{
"name": "Disabled",
"description": "Native select in a disabled state with a pre-selected value, preventing user interaction.",
"code": "\n Option 1 \n Option 2 \n "
}
]
},
{
"name": "navigation-menu",
"title": "Navigation Menu",
"description": "A responsive navigation menu with trigger, content, viewport, and indicator sub-components.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/navigation-menu",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ui/navigation-menu.tsx"
],
"storyTitle": "Shadcn UI/Navigation Menu",
"props": [
{
"name": "viewport",
"control": "boolean",
"description": "Whether to render the animated viewport indicator for the active dropdown",
"default": "true"
}
],
"stories": [
{
"name": "Default",
"description": "Navigation menu with two dropdown panels (Getting Started and Components) and a direct Documentation link, with the viewport indicator enabled.",
"args": "{\n viewport: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Navigation menu with two dropdown panels (Getting Started and Components) and a direct Documentation link, with the viewport indicator enabled.\",\n },\n },\n },\n render: (args) => (\n \n \n \n Getting Started \n \n \n \n How to install and set up the project\n \n \n Get up and running in minutes\n \n \n Customize your setup\n \n \n Complete API documentation\n \n \n \n \n \n Components \n \n \n \n Interactive button control\n \n \n Visual indicators for status\n \n \n Content containers\n \n \n Modal overlay dialogs\n \n \n \n \n \n \n \n Documentation\n \n \n \n \n \n ),"
},
{
"name": "NoViewport",
"description": "",
"args": "{\n viewport: false,\n },\n render: (args) => (\n \n \n \n Getting Started \n \n \n \n How to install and set up the project\n \n \n Get up and running in minutes\n \n \n \n \n \n \n \n Changelog\n \n \n \n \n \n ),"
}
]
},
{
"name": "pagination",
"title": "Pagination",
"description": "A semantic pagination component built with native and elements, prev/next links, and ellipsis.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/pagination",
"dependencies": [
"cn",
"lucide-react"
],
"registryDependencies": [
"button"
],
"files": [
"components/ui/pagination.tsx"
],
"storyTitle": "Shadcn UI/Pagination",
"props": [],
"stories": [
{
"name": "Default",
"description": "Pagination with five page links, page 2 marked as active, previous/next arrows, and an ellipsis indicator for truncated pages.",
"code": "\n \n \n \n \n 1 \n \n \n \n 2\n \n \n \n 3 \n \n \n \n \n 8 \n \n \n \n \n "
},
{
"name": "Sizes",
"description": "Two pagination examples demonstrating small and default page link sizes with custom previous/next labels.",
"code": "\n
\n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n \n
\n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n \n
\n \n Open Popover \n \n \n \n Popover Title \n \n This is a popover description with some additional context.\n \n \n \n
Popover content goes here.
\n
\n "
},
{
"name": "AlignStart",
"description": "",
"code": "\n \n Align Start \n \n \n Aligned Start \n \n This popover is aligned to the start.\n
\n \n "
},
{
"name": "AlignEnd",
"description": "",
"code": "\n \n Align End \n \n \n Aligned End \n \n This popover is aligned to the end.\n
\n \n "
},
{
"name": "NoHeader",
"description": "",
"code": "\n \n Simple Content \n \n \n \n Dashboard \n Settings \n Logout \n
\n \n "
}
]
},
{
"name": "progress",
"title": "Progress",
"description": "A simple progress bar indicator designed to show status completion values.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/progress",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/progress.tsx"
],
"storyTitle": "Shadcn UI/Progress",
"props": [
{
"name": "value",
"description": "Progress value",
"default": "0"
}
],
"stories": [
{
"name": "Default",
"description": "Determinate progress bar at 50% value with a filled track and rounded styling.",
"args": "{\n value: 50,\n \"aria-label\": \"Progress: 50%\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Determinate progress bar at 50% value with a filled track and rounded styling.\",\n },\n },\n },"
},
{
"name": "States",
"description": "",
"code": ""
},
{
"name": "Indeterminate",
"description": "Progress bar with no set value, displaying an indeterminate animated pulse to indicate ongoing activity.",
"code": ""
}
]
},
{
"name": "questionnaire",
"title": "Questionnaire",
"description": "A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions. Owns the ordered items, active item, answer state, validation, progress, and navigation. Composed of QuestionnaireItem, QuestionnaireProgress, QuestionnaireTitle, QuestionnaireDescription, QuestionnaireChoices, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireInput, QuestionnaireError, QuestionnaireActions, QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit sub-components.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/questionnaire",
"dependencies": [
"@shadcn/react",
"cn",
"lucide-react"
],
"registryDependencies": [
"button"
],
"files": [
"components/ui/questionnaire.tsx"
],
"storyTitle": "Shadcn UI/Questionnaire",
"props": [],
"stories": [
{
"name": "Default",
"description": "A three-step questionnaire with single-choice questions, a progress counter, and full navigation actions.",
"code": "\n \n \n \n What should every progress update include?\n \n \n Select every source that may affect the implementation.\n \n \n \n Progress \n \n Show how much of the work is done.\n \n \n \n Decisions \n \n Summarize the choices made along the way.\n \n \n \n Risks \n \n Surface anything that might block delivery.\n \n \n \n \n \n \n What should we prototype next? \n \n Choose a direction or write your own.\n \n \n \n Sub-agent delegation \n \n Show when work is delegated and what comes back.\n \n \n \n Question prompts \n \n Show choices while the agent waits for input.\n \n \n \n \n \n \n What kind of change is this? \n \n Choose the category that best describes the work.\n \n \n New feature \n Bug fix \n Refactor \n \n \n \n \n Are there any implementation constraints?\n \n \n Answer if needed, or intentionally skip this question.\n \n \n \n Do not add dependencies\n \n \n Do not change the database\n \n \n Preserve the public API\n \n \n \n \n \n How should the work be reviewed?\n \n \n Choose the checks the agent should complete before handoff.\n \n \n \n Run the test suite\n \n \n Review the final diff\n \n \n Tests and diff review\n \n \n \n \n \n \n What should we prototype next? \n \n Choose a direction or write another answer.\n \n \n \n Sub-agent delegation \n \n Show when work is delegated and what comes back.\n \n \n \n Question prompts \n \n Show choices while the agent waits for input.\n \n \n \n Both together \n \n Explore one unified interaction pattern.\n \n \n \n \n Please choose a project direction.\n \n \n \n \n What should we prototype next? \n \n Some options are not available right now.\n \n \n \n Sub-agent delegation \n \n Show when work is delegated and what comes back.\n \n \n \n Question prompts \n \n Disabled while the prompt engine is offline.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sub-agent delegation \n \n Show when work is delegated and what comes back.\n \n \n \n Question prompts \n \n Show choices while the agent waits for input.\n \n \n \n Both together \n \n Explore one unified interaction pattern.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Progress\n \n \n Decisions\n \n Risks \n \n \n \n \n \n \n \n \n \n \n \n \n \n This week\n \n \n Next cycle\n \n \n Revisit later\n \n \n \n \n \n \n \n Option 1 \n
\n \n Option 2 \n
\n \n Option 3 \n
\n "
},
{
"name": "Disabled",
"description": "Radio group comparing an enabled option against a disabled option with muted label styling.",
"code": "\n \n Enabled \n
\n \n \n Disabled\n \n
\n "
}
]
},
{
"name": "resizable",
"title": "Resizable",
"description": "Resizable panel layouts with drag handles for adjustable split views.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/resizable",
"dependencies": [
"cn",
"react-resizable-panels"
],
"registryDependencies": [],
"files": [
"components/ui/resizable.tsx"
],
"storyTitle": "Shadcn UI/Resizable",
"props": [],
"stories": [
{
"name": "Horizontal",
"description": "Horizontal split-panel layout with two resizable panels and a visible drag handle.",
"code": "\n \n \n Panel 1 \n
\n \n \n \n Panel 2 \n
\n \n "
},
{
"name": "Vertical",
"description": "",
"code": "\n \n \n Top \n
\n \n \n \n Bottom \n
\n \n "
},
{
"name": "ThreePanels",
"description": "",
"code": "\n \n \n Sidebar \n
\n \n \n \n Content \n
\n \n \n \n Details \n
\n \n "
}
]
},
{
"name": "scroll-area",
"title": "Scroll Area",
"description": "A custom scroll wrapper that replaces browser scrollbars with cross-browser consistent, styling-flexible scroll rails.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/scroll-area",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/scroll-area.tsx"
],
"storyTitle": "Shadcn UI/ScrollArea",
"props": [],
"stories": [
{
"name": "Default",
"description": "Custom scroll area with long lorem ipsum text, demonstrating custom scrollbar styling and keyboard focus support.",
"code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n
\n \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab\n illo inventore veritatis et quasi architecto beatae vitae dicta sunt\n explicabo.\n
\n "
},
{
"name": "Horizontal",
"description": "",
"code": "\n \n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n
\n Item {i}\n "
},
{
"name": "Small",
"description": "",
"code": "\n \n Short content that might not overflow but shows the scroll area styling.\n
\n "
},
{
"name": "LongContent",
"description": "",
"code": "\n {Array.from({ length: 20 }, (_, i) => (\n \n Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
\n ))}\n "
}
]
},
{
"name": "select",
"title": "Select",
"description": "A dropdown select component with groups, labels, scroll buttons, and item selection.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/select",
"dependencies": [
"cn",
"radix-ui",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ui/select.tsx"
],
"storyTitle": "Shadcn UI/Select",
"props": [],
"stories": [
{
"name": "Default",
"description": "Select dropdown with four fruit options and a placeholder, using the default trigger and content positioning.",
"code": "\n \n \n \n Apple \n Banana \n Orange \n Grape \n \n "
},
{
"name": "Sizes",
"description": "",
"code": "\n \n \n \n \n Small (sm) \n Default \n \n \n \n \n \n Default \n Small (sm) \n \n \n
"
},
{
"name": "WithGroups",
"description": "Select dropdown with options grouped into Fruits and Vegetables categories, separated by a divider.",
"code": "\n \n \n \n \n Fruits \n Apple \n Banana \n Orange \n \n \n Vegetables \n Carrot \n Broccoli \n \n \n "
},
{
"name": "PopperPosition",
"description": "",
"code": "\n \n \n \n Option 1 \n Option 2 \n Option 3 \n \n "
}
]
},
{
"name": "separator",
"title": "Separator",
"description": "A visual divider for separating content sections horizontally or vertically.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/separator",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/separator.tsx"
],
"storyTitle": "Shadcn UI/Separator",
"props": [
{
"name": "orientation",
"control": "radio",
"options": [
"horizontal",
"vertical"
],
"description": "The axis along which the separator is rendered",
"default": "horizontal"
},
{
"name": "decorative",
"control": "boolean",
"description": "Whether the separator is purely decorative (not announced by screen readers)",
"default": "true"
}
],
"stories": [
{
"name": "Horizontal",
"description": "Horizontal divider separating two blocks of text to demonstrate visual content separation.",
"args": "{\n orientation: \"horizontal\",\n decorative: true,\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Horizontal divider separating two blocks of text to demonstrate visual content separation.\",\n },\n },\n },\n render: (args) => (\n \n
\n Content above the separator\n
\n
\n
\n Content below the separator\n
\n
\n Left \n Center \n Right \n
"
}
]
},
{
"name": "sheet",
"title": "Sheet",
"description": "A slide-in panel (drawer) from any side of the screen with header, footer, and close button.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/sheet",
"dependencies": [
"cn",
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"button"
],
"files": [
"components/ui/sheet.tsx"
],
"storyTitle": "Shadcn UI/Sheet",
"props": [],
"stories": [
{
"name": "Right",
"description": "Slide-in panel from the right side with a profile editing form, header, footer, and close button.",
"code": "\n \n Open Right Sheet \n \n \n \n Edit Profile \n \n Make changes to your profile here. Click save when you are done.\n \n \n \n
\n Sheet content goes here. You can place any elements inside.\n
\n
\n \n Cancel \n \n Save Changes \n \n \n "
},
{
"name": "Left",
"description": "",
"code": "\n \n Open Left Sheet \n \n \n \n Navigation \n Browse through the sections. \n \n \n \n \n Dashboard\n \n \n Settings\n \n \n Profile\n \n \n
\n \n "
},
{
"name": "Top",
"description": "",
"code": "\n \n Open Top Sheet \n \n \n \n Notification \n \n This is a top slide-in notification panel.\n \n \n \n "
},
{
"name": "Bottom",
"description": "",
"code": "\n \n Open Bottom Sheet \n \n \n \n Quick Actions \n \n Access frequently used actions from the bottom.\n \n \n \n
\n Action 1 \n \n Action 2\n \n
\n
\n "
},
{
"name": "WithoutCloseButton",
"description": "",
"code": "\n \n No Close Button \n \n \n \n Custom Close \n \n The default close button is hidden. Use a custom close mechanism.\n \n \n \n \n \n Close Manually\n \n \n
\n \n "
}
]
},
{
"name": "sidebar",
"title": "Sidebar",
"description": "A responsive collapsible sidebar with menu, groups, tooltips, and mobile sheet support.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/sidebar",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"button",
"input",
"separator",
"sheet",
"skeleton",
"tooltip"
],
"files": [
"components/ui/sidebar.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"default\" | \"outline\"",
"options": [
"default",
"outline"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"default\" | \"sm\" | \"lg\"",
"options": [
"default",
"sm",
"lg"
],
"default": "default"
}
],
"storyTitle": "Shadcn UI/Sidebar",
"stories": [
{
"name": "Default",
"description": "Full-featured sidebar with search input, grouped navigation menus, footer links, and a collapsible rail."
}
]
},
{
"name": "skeleton",
"title": "Skeleton",
"description": "A placeholder loading state component shaped as elements to outline UI containers during data fetching lifecycle phases.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/skeleton",
"dependencies": [
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/skeleton.tsx"
],
"storyTitle": "Shadcn UI/Skeleton",
"props": [],
"stories": [
{
"name": "Default",
"description": "Small rectangular skeleton placeholder with animate-pulse to indicate loading content.",
"args": "{\n className: \"h-4 w-20\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Small rectangular skeleton placeholder with animate-pulse to indicate loading content.\",\n },\n },\n },"
},
{
"name": "Variants",
"description": "",
"code": "\n
"
},
{
"name": "Card",
"description": "",
"code": "\n
"
},
{
"name": "Avatar",
"description": "",
"code": ""
},
{
"name": "Image",
"description": "",
"code": "\n toast(\"Hello, world!\")}>\n Default Toast\n \n \n toast(\"Your changes have been saved.\", {\n description: \"The operation completed successfully.\",\n })\n }\n >\n With Description\n \n
\n "
},
{
"name": "Variants",
"description": "",
"code": "<>\n \n toast.success(\"Data saved successfully\")}>\n Success\n \n toast.info(\"You have 3 new messages\")}\n >\n Info\n \n toast.warning(\"Disk space is running low\")}\n >\n Warning\n \n toast.error(\"Something went wrong\")}\n >\n Error\n \n
\n "
},
{
"name": "Loading",
"description": "",
"code": "<>\n {\n const id = toast.loading(\"Uploading file...\")\n setTimeout(() => toast.success(\"Upload complete!\", { id }), 2000)\n }}\n >\n Simulate Loading\n \n "
},
{
"name": "Dismissable",
"description": "",
"code": "<>\n \n \n toast(\"This will auto-dismiss\", {\n duration: 3000,\n })\n }\n >\n 3s Auto-dismiss\n \n \n toast(\"Sticky notification\", {\n duration: Infinity,\n })\n }\n >\n Sticky (no dismiss)\n \n
\n "
}
]
},
{
"name": "spinner",
"title": "Spinner",
"description": "An animated loader icon used to represent background processing, async submission delays, or loading data sequences.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/spinner",
"dependencies": [
"cn",
"lucide-react"
],
"registryDependencies": [],
"files": [
"components/ui/spinner.tsx"
],
"storyTitle": "Shadcn UI/Spinner",
"props": [
{
"name": "className",
"control": "text"
}
],
"stories": [
{
"name": "Default",
"description": "Default-sized spinning loader icon inheriting color from the parent text."
},
{
"name": "CustomSize",
"description": "Spinner icons displayed at four different sizes (3, 4, 6, 8) to demonstrate size flexibility.",
"code": "\n
"
},
{
"name": "InContext",
"description": "Spinner paired with contextual loading text labels to show typical inline usage.",
"code": "\n
\n
\n
\n
\n
\n
"
},
{
"name": "States",
"description": "",
"code": "\n
\n Unchecked \n
\n
\n Checked \n
\n
\n \n Disabled unchecked\n \n
\n
\n Disabled checked \n
\n
\n
\n A list of your recent invoices. \n \n \n Invoice \n Status \n Method \n Amount \n \n \n \n {invoices.map((invoice) => (\n \n {invoice.invoice} \n {invoice.paymentStatus} \n {invoice.paymentMethod} \n \n {invoice.totalAmount}\n \n \n ))}\n \n
\n
\n
\n \n \n Invoice \n Status \n Method \n Amount \n \n \n \n {invoices.map((invoice) => (\n \n {invoice.invoice} \n {invoice.paymentStatus} \n {invoice.paymentMethod} \n \n {invoice.totalAmount}\n \n \n ))}\n \n \n \n Total \n $1,750.00 \n \n \n
\n
\n \n Account \n Password \n Notifications \n \n Account settings content. \n Password settings content. \n Notification preferences. \n "
},
{
"name": "Variants",
"description": "",
"code": "\n
\n
Default variant
\n
\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Content 1 \n Content 2 \n Content 3 \n \n
\n
\n
Line variant
\n
\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Content 1 \n Content 2 \n Content 3 \n \n
\n
\n \n Profile \n Security \n Billing \n \n Profile information. \n Security settings. \n Billing details. \n "
},
{
"name": "Disabled",
"description": "",
"code": "\n \n Active \n \n Disabled\n \n Available \n \n Active content \n Disabled content \n Available content \n "
}
]
},
{
"name": "textarea",
"title": "Textarea",
"description": "A multi-line text input field supporting dynamic sizing, transition glows, and custom invalid validation borders.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/textarea",
"dependencies": [
"cn"
],
"registryDependencies": [],
"files": [
"components/ui/textarea.tsx"
],
"storyTitle": "Shadcn UI/Textarea",
"props": [
{
"name": "disabled",
"control": "boolean",
"default": "false"
},
{
"name": "placeholder",
"control": "text",
"default": ""
}
],
"stories": [
{
"name": "Default",
"description": "Multi-line text input with a placeholder prompting the user to enter a message.",
"args": "{\n placeholder: \"Enter your message...\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Multi-line text input with a placeholder prompting the user to enter a message.\",\n },\n },\n },"
},
{
"name": "WithValue",
"description": "",
"args": "{\n \"aria-label\": \"Message content\",\n value: \"This is a pre-filled textarea with some content.\",\n },"
},
{
"name": "Disabled",
"description": "Textarea in a disabled state with a placeholder indicating it cannot be edited.",
"args": "{\n disabled: true,\n placeholder: \"Disabled textarea\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Textarea in a disabled state with a placeholder indicating it cannot be edited.\",\n },\n },\n },"
},
{
"name": "Invalid",
"description": "Textarea in an invalid state with destructive border styling indicated by aria-invalid.",
"args": "{\n \"aria-invalid\": true,\n placeholder: \"Invalid textarea\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Textarea in an invalid state with destructive border styling indicated by aria-invalid.\",\n },\n },\n },"
},
{
"name": "Rows",
"description": "",
"code": "\n \n \n \n \n
"
}
]
},
{
"name": "toggle",
"title": "Toggle",
"description": "A two-state button for on/off toggling with variants and sizes.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/toggle",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/toggle.tsx"
],
"props": [
{
"name": "variant",
"required": false,
"type": "\"default\" | \"outline\"",
"options": [
"default",
"outline"
],
"default": "default"
},
{
"name": "size",
"required": false,
"type": "\"default\" | \"sm\" | \"lg\"",
"options": [
"default",
"sm",
"lg"
],
"default": "default"
}
],
"storyTitle": "Shadcn UI/Toggle",
"stories": [
{
"name": "Default",
"description": "Default variant toggle button in standard size with a text label.",
"args": "{\n children: \"Toggle\",\n variant: \"default\",\n size: \"default\",\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Default variant toggle button in standard size with a text label.\",\n },\n },\n },"
},
{
"name": "Variants",
"description": "Default and outline toggle variants displayed side by side for visual comparison.",
"code": "\n \n Default\n \n \n Outline\n \n
"
},
{
"name": "Sizes",
"description": "Toggle buttons in small, default, and large sizes to demonstrate the three size presets.",
"code": "\n \n Small\n \n \n Default\n \n \n Large\n \n
"
},
{
"name": "WithIcons",
"description": "",
"code": "\n \n \n \n \n \n \n
"
},
{
"name": "Pressed",
"description": "",
"code": "\n \n \n \n \n
"
},
{
"name": "Disabled",
"description": "Toggle buttons in disabled state across default and outline variants, including a disabled pressed state.",
"code": "\n \n Disabled\n \n \n Disabled\n \n \n Disabled Pressed\n \n
"
}
]
},
{
"name": "toggle-group",
"title": "Toggle Group",
"description": "A group of toggle buttons for multi-selection with connected or separated styling.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/toggle-group",
"dependencies": [
"class-variance-authority",
"cn",
"radix-ui"
],
"registryDependencies": [
"toggle"
],
"files": [
"components/ui/toggle-group.tsx"
],
"storyTitle": "Shadcn UI/Toggle Group",
"props": [
{
"name": "type",
"control": "inline-radio",
"options": [
"single",
"multiple"
],
"description": "Selection behavior",
"default": "single"
},
{
"name": "orientation",
"control": "inline-radio",
"options": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
{
"name": "spacing",
"control": "number",
"description": "Gap between items (0 = connected/segmented)",
"default": "2"
},
{
"name": "variant",
"control": "inline-radio",
"options": [
"default",
"outline"
],
"default": "default"
},
{
"name": "size",
"control": "inline-radio",
"options": [
"default",
"sm",
"lg"
],
"default": "default"
}
],
"stories": [
{
"name": "Default",
"description": "Horizontal toggle group with multiple selection enabled and three formatting icon buttons.",
"args": "{ type: \"multiple\" } as any,\n render: () => (\n \n \n \n \n \n \n \n \n ),",
"code": "\n \n \n \n \n \n \n "
},
{
"name": "Variants",
"description": "",
"args": "{ type: \"multiple\" } as any,\n render: () => (\n \n
\n
Default variant
\n
\n \n \n \n \n \n \n \n
\n
\n
Outline variant
\n
\n \n \n \n \n \n \n \n
\n
\n
\n
Default variant
\n
\n \n \n \n \n \n \n \n
\n
\n
Outline variant
\n
\n \n \n \n \n \n \n \n
\n
\n
\n
Small
\n
\n \n \n \n \n \n \n \n
\n
\n
Large
\n
\n \n \n \n \n \n \n \n
\n
\n
\n
Small
\n
\n \n \n \n \n \n \n \n
\n
\n
Large
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n ),",
"code": "\n \n \n \n \n \n \n "
},
{
"name": "Vertical",
"description": "Toggle group arranged vertically with multiple selection for formatting options.",
"args": "{ type: \"multiple\" } as any,\n render: () => (\n \n \n \n \n \n \n \n \n ),",
"code": "\n \n \n \n \n \n \n "
},
{
"name": "Single",
"description": "",
"args": "{ type: \"single\" } as any,\n render: () => (\n \n \n \n \n \n \n \n \n ),",
"code": "\n \n \n \n \n \n \n "
}
]
},
{
"name": "tooltip",
"title": "Tooltip",
"description": "A lightweight popup hint displaying auxiliary text descriptions when a cursor hovers over or focus lands on trigger targets.",
"type": "registry:ui",
"category": "ui",
"importPath": "@/components/ui/tooltip",
"dependencies": [
"cn",
"radix-ui"
],
"registryDependencies": [],
"files": [
"components/ui/tooltip.tsx"
],
"storyTitle": "Shadcn UI/Tooltip",
"props": [],
"stories": [
{
"name": "Default",
"description": "Basic tooltip displaying 'Add to library' when hovering over the trigger button.",
"code": "\n \n \n Hover me \n \n \n Add to library
\n \n \n "
},
{
"name": "Sides",
"description": "",
"code": "\n \n
\n \n Top \n \n \n Tooltip on top
\n \n \n
\n \n Right \n \n \n Tooltip on right
\n \n \n
\n \n Bottom \n \n \n Tooltip on bottom
\n \n \n
\n \n Left \n \n \n Tooltip on left
\n \n \n
"
},
{
"name": "Delay",
"description": "",
"code": "\n \n \n 700ms delay \n \n \n Delayed tooltip
\n \n \n "
}
]
},
{
"name": "ui-i18n",
"title": "UI i18n",
"description": "Shared locale-based i18n dictionary with en-US, pt-PR, es-ES, and fr-FR support for UI components.",
"type": "registry:lib",
"category": "lib",
"importPath": "@/lib/ui-i18n",
"dependencies": [],
"registryDependencies": [],
"files": [
"lib/ui-i18n.ts"
]
}
]
}