From 0a366cc841afba1197196e0b5581f9458694439e Mon Sep 17 00:00:00 2001 From: Powerplex Date: Mon, 13 Apr 2026 11:17:37 +0200 Subject: [PATCH 1/3] docs(components): added subcomponents to MCP manifest --- package-lock.json | 82 +++++++++---------- package.json | 8 +- .../src/accordion/Accordion.stories.tsx | 6 ++ .../src/alert-dialog/AlertDialog.stories.tsx | 13 +++ .../components/src/avatar/avatar.stories.tsx | 7 ++ .../src/breadcrumb/Breadcrumb.stories.tsx | 6 ++ packages/components/src/card/Card.stories.tsx | 4 + .../src/carousel/Carousel.stories.tsx | 10 +++ packages/components/src/chip/Chip.stories.tsx | 6 ++ .../circular-meter/CircularMeter.stories.tsx | 6 ++ .../src/collapsible/Collapsible.stories.tsx | 4 + .../src/combobox/Combobox.stories.tsx | 17 ++++ .../components/src/dialog/Dialog.stories.tsx | 13 +++ .../src/divider/Divider.stories.tsx | 3 + .../components/src/drawer/Drawer.stories.tsx | 13 +++ .../src/dropdown/Dropdown.stories.tsx | 14 ++++ .../src/file-upload/FileUpload.stories.tsx | 10 +++ .../src/form-field/FormField.stories.tsx | 11 +++ .../src/input-otp/InputOTP.stories.tsx | 5 ++ .../src/input/InputGroup.stories.tsx | 7 ++ .../components/src/label/Label.stories.tsx | 3 + .../src/link-box/LinkBox.stories.tsx | 4 + .../components/src/meter/Meter.stories.tsx | 5 ++ .../src/pagination/Pagination.stories.tsx | 9 ++ .../src/popover/Popover.stories.tsx | 9 ++ .../ProgressTracker.stories.tsx | 5 ++ .../src/progress/Progress.stories.tsx | 5 ++ .../src/radio-group/RadioGroup.stories.tsx | 3 + .../rating-display/RatingDisplay.stories.tsx | 5 ++ .../scrolling-list/ScrollingList.stories.tsx | 8 ++ .../SegmentedControl.stories.tsx | 4 + .../SegmentedGauge.stories.tsx | 5 ++ .../components/src/select/Select.stories.tsx | 10 +++ .../src/skeleton/Skeleton.stories.tsx | 5 ++ .../components/src/slider/Slider.stories.tsx | 10 +++ .../src/stepper/Stepper.stories.tsx | 5 ++ .../components/src/table/Table.stories.tsx | 7 ++ packages/components/src/tabs/Tabs.stories.tsx | 5 ++ .../src/textarea/TextareaGroup.stories.tsx | 5 ++ 39 files changed, 312 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ce0722788..99b907f4d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,11 +34,11 @@ "@nx/js": "21.5.3", "@playwright/test": "1.55.1", "@spark-ui/cli-utils": "^17.5.3", - "@storybook/addon-a11y": "10.3.5", + "@storybook/addon-a11y": "0.0.0-pr-34428-sha-d7a905aa", "@storybook/addon-designs": "11.1.3", - "@storybook/addon-docs": "10.3.5", + "@storybook/addon-docs": "0.0.0-pr-34428-sha-d7a905aa", "@storybook/addon-mcp": "^0.5.0", - "@storybook/react-vite": "10.3.5", + "@storybook/react-vite": "0.0.0-pr-34428-sha-d7a905aa", "@tailwindcss/postcss": "4.1.18", "@testing-library/dom": "10.4.1", "@testing-library/jest-dom": "6.9.1", @@ -82,7 +82,7 @@ "resize-observer-polyfill": "1.5.1", "rollup": "4.59.0", "scroll-into-view-if-needed": "3.1.0", - "storybook": "10.3.5", + "storybook": "0.0.0-pr-34428-sha-d7a905aa", "tailwindcss": "4.1.18", "ts-node": "10.9.2", "type-fest": "5.1.0", @@ -8976,9 +8976,9 @@ "license": "MIT" }, "node_modules/@storybook/addon-a11y": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.3.5.tgz", - "integrity": "sha512-5k6lpgfIeLxvNhE8v3wEzdiu73ONKjF4gmH1AHvfqYd8kIVzQJai0KCDxgvqNncXHQhIWkaf1fg6+9hKaYJyaw==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-upCkQqnc0+XkEzvYdSdauWFvmU6o/oHxJA3/fIX/y+AtcPv7+ZJJKEttMcmf48e2f9IOf29hEhFSL2Ln7UUVsQ==", "dev": true, "license": "MIT", "dependencies": { @@ -8990,7 +8990,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^10.3.5" + "storybook": "^0.0.0-pr-34428-sha-d7a905aa" } }, "node_modules/@storybook/addon-designs": { @@ -9021,16 +9021,16 @@ } }, "node_modules/@storybook/addon-docs": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.3.5.tgz", - "integrity": "sha512-WuHbxia/o5TX4Rg/IFD0641K5qId/Nk0dxhmAUNoFs5L0+yfZUwh65XOBbzXqrkYmYmcVID4v7cgDRmzstQNkA==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-EVP5XmmJxPIrG0iUlMsviSMmLPbU67611tA/MS9pdYVdPX5GiH27Ps5cBSmY8hD9miT+uykPwLxBXRYH410A7Q==", "dev": true, "license": "MIT", "dependencies": { "@mdx-js/react": "^3.0.0", - "@storybook/csf-plugin": "10.3.5", + "@storybook/csf-plugin": "0.0.0-pr-34428-sha-d7a905aa", "@storybook/icons": "^2.0.1", - "@storybook/react-dom-shim": "10.3.5", + "@storybook/react-dom-shim": "0.0.0-pr-34428-sha-d7a905aa", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "ts-dedent": "^2.0.0" @@ -9040,7 +9040,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^10.3.5" + "storybook": "^0.0.0-pr-34428-sha-d7a905aa" } }, "node_modules/@storybook/addon-mcp": { @@ -9068,13 +9068,13 @@ } }, "node_modules/@storybook/builder-vite": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.3.5.tgz", - "integrity": "sha512-i4KwCOKbhtlbQIbhm53+Kk7bMnxa0cwTn1pxmtA/x5wm1Qu7FrrBQV0V0DNjkUqzcSKo1CjspASJV/HlY0zYlw==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-eV3+PfaT31aYVHUIcFMnFwGfC1zCvKmjsZA8bKcMSw7EICHjNnPK75RQH4VZ6cq2n0wgsRR+TWev19mqv3xKdw==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/csf-plugin": "10.3.5", + "@storybook/csf-plugin": "0.0.0-pr-34428-sha-d7a905aa", "ts-dedent": "^2.0.0" }, "funding": { @@ -9082,14 +9082,14 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^10.3.5", + "storybook": "^0.0.0-pr-34428-sha-d7a905aa", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "node_modules/@storybook/csf-plugin": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.3.5.tgz", - "integrity": "sha512-qlEzNKxOjq86pvrbuMwiGD/bylnsXk1dg7ve0j77YFjEEchqtl7qTlrXvFdNaLA89GhW6D/EV6eOCu/eobPDgw==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-A0EyJbn6SO53LJdH2IlVq1Q50aL6nxlvHLAeMNJuSd5kHqnHZBzPlQbHPCJfIJx1h+UwOd/sttnKB44Dt/6IZA==", "dev": true, "license": "MIT", "dependencies": { @@ -9102,7 +9102,7 @@ "peerDependencies": { "esbuild": "*", "rollup": "*", - "storybook": "^10.3.5", + "storybook": "^0.0.0-pr-34428-sha-d7a905aa", "vite": "*", "webpack": "*" }, @@ -9152,14 +9152,14 @@ } }, "node_modules/@storybook/react": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/react/-/react-10.3.5.tgz", - "integrity": "sha512-tpLTLaVGoA6fLK3ReyGzZUricq7lyPaV2hLPpj5wqdXLV/LpRtAHClUpNoPDYSBjlnSjL81hMZijbkGC3mA+gw==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/react/-/react-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-R/PmHFbxsP0FyboAzq3mfHbOJSzlUitpWVBVv08ubWia6CzP1tjLsaEHw+cKXlKraMxdYSYX8rJpp7IDvG+Xaw==", "dev": true, "license": "MIT", "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/react-dom-shim": "10.3.5", + "@storybook/react-dom-shim": "0.0.0-pr-34428-sha-d7a905aa", "react-docgen": "^8.0.2", "react-docgen-typescript": "^2.2.2" }, @@ -9170,7 +9170,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "storybook": "^10.3.5", + "storybook": "^0.0.0-pr-34428-sha-d7a905aa", "typescript": ">= 4.9.x" }, "peerDependenciesMeta": { @@ -9180,9 +9180,9 @@ } }, "node_modules/@storybook/react-dom-shim": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.3.5.tgz", - "integrity": "sha512-Gw8R7XZm0zSUH0XAuxlQJhmizsLzyD6x00KOlP6l7oW9eQHXGfxg3seNDG3WrSAcW07iP1/P422kuiriQlOv7g==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-GKVgcwyC1X7SP/upqvxGmaO97W1I6NULINyJxCtnKMk6auXNj1YGsqyqGQaY1YrM5cTmQZfQc1jpb68KD/I5zg==", "dev": true, "license": "MIT", "funding": { @@ -9192,20 +9192,20 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "storybook": "^10.3.5" + "storybook": "^0.0.0-pr-34428-sha-d7a905aa" } }, "node_modules/@storybook/react-vite": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-10.3.5.tgz", - "integrity": "sha512-UB5sJHeh26bfd8sNMx2YPGYRYmErIdTRaLOT28m4bykQIa1l9IgVktsYg/geW7KsJU0lXd3oTbnUjLD+enpi3w==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-o8rdm0EVWiCaHgiN471w1kuZlE4fjMzKPi6WJjCxazT09Qf2+1fn27dZq9/Pd3HUJ7+xGqQfstR2sFCwS709ow==", "dev": true, "license": "MIT", "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.7.0", "@rollup/pluginutils": "^5.0.2", - "@storybook/builder-vite": "10.3.5", - "@storybook/react": "10.3.5", + "@storybook/builder-vite": "0.0.0-pr-34428-sha-d7a905aa", + "@storybook/react": "0.0.0-pr-34428-sha-d7a905aa", "empathic": "^2.0.0", "magic-string": "^0.30.0", "react-docgen": "^8.0.0", @@ -9219,7 +9219,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "storybook": "^10.3.5", + "storybook": "^0.0.0-pr-34428-sha-d7a905aa", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, @@ -20670,9 +20670,9 @@ "license": "MIT" }, "node_modules/storybook": { - "version": "10.3.5", - "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.3.5.tgz", - "integrity": "sha512-uBSZu/GZa9aEIW3QMGvdQPMZWhGxSe4dyRWU8B3/Vd47Gy/XLC7tsBxRr13txmmPOEDHZR94uLuq0H50fvuqBw==", + "version": "0.0.0-pr-34428-sha-d7a905aa", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-0.0.0-pr-34428-sha-d7a905aa.tgz", + "integrity": "sha512-5MspChiNoJEEOQYmX/O+H7JDWqQ2qlVhpj50bBgumXyT68xHnYfDYSqusUXiWRQ2ZzpN1v67YscbMJX4tfl20g==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 475ea46bdc..6549d88e5f 100644 --- a/package.json +++ b/package.json @@ -60,11 +60,11 @@ "@nx/js": "21.5.3", "@playwright/test": "1.55.1", "@spark-ui/cli-utils": "^17.5.3", - "@storybook/addon-a11y": "10.3.5", + "@storybook/addon-a11y": "0.0.0-pr-34428-sha-d7a905aa", "@storybook/addon-designs": "11.1.3", - "@storybook/addon-docs": "10.3.5", + "@storybook/addon-docs": "0.0.0-pr-34428-sha-d7a905aa", "@storybook/addon-mcp": "^0.5.0", - "@storybook/react-vite": "10.3.5", + "@storybook/react-vite": "0.0.0-pr-34428-sha-d7a905aa", "@tailwindcss/postcss": "4.1.18", "@testing-library/dom": "10.4.1", "@testing-library/jest-dom": "6.9.1", @@ -108,7 +108,7 @@ "resize-observer-polyfill": "1.5.1", "rollup": "4.59.0", "scroll-into-view-if-needed": "3.1.0", - "storybook": "10.3.5", + "storybook": "0.0.0-pr-34428-sha-d7a905aa", "tailwindcss": "4.1.18", "ts-node": "10.9.2", "type-fest": "5.1.0", diff --git a/packages/components/src/accordion/Accordion.stories.tsx b/packages/components/src/accordion/Accordion.stories.tsx index b3c7c4aa9a..d265d18f43 100644 --- a/packages/components/src/accordion/Accordion.stories.tsx +++ b/packages/components/src/accordion/Accordion.stories.tsx @@ -8,6 +8,12 @@ import { Tag } from '../tag' const meta: Meta = { title: 'Components/Accordion', component: Accordion, + subcomponents: { + 'Accordion.Item': Accordion.Item, + 'Accordion.ItemHeader': Accordion.ItemHeader, + 'Accordion.ItemTrigger': Accordion.ItemTrigger, + 'Accordion.ItemContent': Accordion.ItemContent, + }, tags: ['data-display'], parameters: { design: { diff --git a/packages/components/src/alert-dialog/AlertDialog.stories.tsx b/packages/components/src/alert-dialog/AlertDialog.stories.tsx index a3b6a140bd..9708cf6aab 100644 --- a/packages/components/src/alert-dialog/AlertDialog.stories.tsx +++ b/packages/components/src/alert-dialog/AlertDialog.stories.tsx @@ -8,6 +8,19 @@ import { Input } from '../input' const meta: Meta = { title: 'Components/AlertDialog', component: AlertDialog, + subcomponents: { + 'AlertDialog.Action': AlertDialog.Action, + 'AlertDialog.Body': AlertDialog.Body, + 'AlertDialog.Cancel': AlertDialog.Cancel, + 'AlertDialog.Content': AlertDialog.Content, + 'AlertDialog.Description': AlertDialog.Description, + 'AlertDialog.Footer': AlertDialog.Footer, + 'AlertDialog.Header': AlertDialog.Header, + 'AlertDialog.Overlay': AlertDialog.Overlay, + 'AlertDialog.Portal': AlertDialog.Portal, + 'AlertDialog.Title': AlertDialog.Title, + 'AlertDialog.Trigger': AlertDialog.Trigger, + }, tags: ['overlays'], parameters: { design: { diff --git a/packages/components/src/avatar/avatar.stories.tsx b/packages/components/src/avatar/avatar.stories.tsx index 81278a602c..5edefa0398 100644 --- a/packages/components/src/avatar/avatar.stories.tsx +++ b/packages/components/src/avatar/avatar.stories.tsx @@ -13,6 +13,13 @@ import avatarImg from './avatar.png' const meta: Meta = { title: 'Components/Avatar', component: Avatar, + subcomponents: { + 'Avatar.Image': Avatar.Image, + 'Avatar.Action': Avatar.Action, + 'Avatar.OnlineBadge': Avatar.OnlineBadge, + 'Avatar.User': Avatar.User, + 'Avatar.Placeholder': Avatar.Placeholder, + }, tags: ['data-display'], } diff --git a/packages/components/src/breadcrumb/Breadcrumb.stories.tsx b/packages/components/src/breadcrumb/Breadcrumb.stories.tsx index fc51eb82f6..ef414ecef7 100644 --- a/packages/components/src/breadcrumb/Breadcrumb.stories.tsx +++ b/packages/components/src/breadcrumb/Breadcrumb.stories.tsx @@ -7,6 +7,12 @@ import { Icon } from '../icon' const meta: Meta = { title: 'Components/Breadcrumb', component: Breadcrumb, + subcomponents: { + 'Breadcrumb.Item': Breadcrumb.Item, + 'Breadcrumb.Link': Breadcrumb.Link, + 'Breadcrumb.CurrentPage': Breadcrumb.CurrentPage, + 'Breadcrumb.Separator': Breadcrumb.Separator, + }, tags: ['navigation'], parameters: { design: { diff --git a/packages/components/src/card/Card.stories.tsx b/packages/components/src/card/Card.stories.tsx index a8c8f92ecf..5f24d2e7e0 100644 --- a/packages/components/src/card/Card.stories.tsx +++ b/packages/components/src/card/Card.stories.tsx @@ -15,6 +15,10 @@ import pandaImg from './docAssets/panda.jpg' const meta: Meta = { title: 'Components/Card', component: Card, + subcomponents: { + 'Card.Content': Card.Content, + 'Card.Backdrop': Card.Backdrop, + }, tags: ['action', 'data-display'], parameters: { design: { diff --git a/packages/components/src/carousel/Carousel.stories.tsx b/packages/components/src/carousel/Carousel.stories.tsx index 63657e9256..c53ed5295d 100644 --- a/packages/components/src/carousel/Carousel.stories.tsx +++ b/packages/components/src/carousel/Carousel.stories.tsx @@ -14,6 +14,16 @@ import { Stepper } from '../stepper' const meta: Meta = { title: 'Components/Carousel', component: Carousel, + subcomponents: { + 'Carousel.Controls': Carousel.Controls, + 'Carousel.NextButton': Carousel.NextButton, + 'Carousel.PrevButton': Carousel.PrevButton, + 'Carousel.Slide': Carousel.Slide, + 'Carousel.Slides': Carousel.Slides, + 'Carousel.Viewport': Carousel.Viewport, + 'Carousel.PagePicker': Carousel.PagePicker, + 'Carousel.PageIndicator': Carousel.PageIndicator, + }, tags: ['layout'], parameters: { design: { diff --git a/packages/components/src/chip/Chip.stories.tsx b/packages/components/src/chip/Chip.stories.tsx index c31d4abf62..1d9755fa05 100644 --- a/packages/components/src/chip/Chip.stories.tsx +++ b/packages/components/src/chip/Chip.stories.tsx @@ -17,6 +17,12 @@ import { ChipLeadingIcon } from './ChipLeadingIcon' const meta: Meta = { title: 'Components/Chip', component: Chip, + subcomponents: { + 'Chip.Content': Chip.Content, + 'Chip.LeadingIcon': Chip.LeadingIcon, + 'Chip.TrailingIcon': Chip.TrailingIcon, + 'Chip.ClearButton': Chip.ClearButton, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/circular-meter/CircularMeter.stories.tsx b/packages/components/src/circular-meter/CircularMeter.stories.tsx index 91d3d8d0fa..3a7118c71d 100644 --- a/packages/components/src/circular-meter/CircularMeter.stories.tsx +++ b/packages/components/src/circular-meter/CircularMeter.stories.tsx @@ -7,6 +7,12 @@ import { Label } from '../label' const meta: Meta = { title: 'Components/CircularMeter', component: CircularMeter, + subcomponents: { + 'CircularMeter.Content': CircularMeter.Content, + 'CircularMeter.Label': CircularMeter.Label, + 'CircularMeter.Track': CircularMeter.Track, + 'CircularMeter.Value': CircularMeter.Value, + }, tags: ['indicators'], parameters: { design: { diff --git a/packages/components/src/collapsible/Collapsible.stories.tsx b/packages/components/src/collapsible/Collapsible.stories.tsx index dd30ae5a96..d254541c5f 100644 --- a/packages/components/src/collapsible/Collapsible.stories.tsx +++ b/packages/components/src/collapsible/Collapsible.stories.tsx @@ -10,6 +10,10 @@ import { IconButton } from '../icon-button' const meta: Meta = { title: 'Components/Collapsible', component: Collapsible, + subcomponents: { + 'Collapsible.Trigger': Collapsible.Trigger, + 'Collapsible.Content': Collapsible.Content, + }, tags: ['data-display'], } diff --git a/packages/components/src/combobox/Combobox.stories.tsx b/packages/components/src/combobox/Combobox.stories.tsx index ed78ba6366..334c84e914 100644 --- a/packages/components/src/combobox/Combobox.stories.tsx +++ b/packages/components/src/combobox/Combobox.stories.tsx @@ -21,6 +21,23 @@ import { VisuallyHidden } from '../visually-hidden' const meta: Meta = { title: 'Components/Combobox', component: Combobox, + subcomponents: { + 'Combobox.Group': Combobox.Group, + 'Combobox.Item': Combobox.Item, + 'Combobox.Items': Combobox.Items, + 'Combobox.ItemText': Combobox.ItemText, + 'Combobox.ItemIndicator': Combobox.ItemIndicator, + 'Combobox.Label': Combobox.Label, + 'Combobox.Popover': Combobox.Popover, + 'Combobox.Trigger': Combobox.Trigger, + 'Combobox.LeadingIcon': Combobox.LeadingIcon, + 'Combobox.Empty': Combobox.Empty, + 'Combobox.Input': Combobox.Input, + 'Combobox.Disclosure': Combobox.Disclosure, + 'Combobox.SelectedItems': Combobox.SelectedItems, + 'Combobox.ClearButton': Combobox.ClearButton, + 'Combobox.Portal': Combobox.Portal, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/dialog/Dialog.stories.tsx b/packages/components/src/dialog/Dialog.stories.tsx index aa48f8871e..4ab1e39b2d 100644 --- a/packages/components/src/dialog/Dialog.stories.tsx +++ b/packages/components/src/dialog/Dialog.stories.tsx @@ -16,6 +16,19 @@ import { Dialog, type DialogContentProps } from '.' const meta: Meta = { title: 'Components/Dialog', component: Dialog, + subcomponents: { + 'Dialog.Trigger': Dialog.Trigger, + 'Dialog.Portal': Dialog.Portal, + 'Dialog.Overlay': Dialog.Overlay, + 'Dialog.Content': Dialog.Content, + 'Dialog.Header': Dialog.Header, + 'Dialog.Body': Dialog.Body, + 'Dialog.Footer': Dialog.Footer, + 'Dialog.Close': Dialog.Close, + 'Dialog.CloseButton': Dialog.CloseButton, + 'Dialog.Title': Dialog.Title, + 'Dialog.Description': Dialog.Description, + }, tags: ['overlays'], parameters: { design: { diff --git a/packages/components/src/divider/Divider.stories.tsx b/packages/components/src/divider/Divider.stories.tsx index 9a9e6ee661..2008e8386f 100644 --- a/packages/components/src/divider/Divider.stories.tsx +++ b/packages/components/src/divider/Divider.stories.tsx @@ -9,6 +9,9 @@ type DividerProps = ComponentProps const meta: Meta = { title: 'Components/Divider', component: Divider, + subcomponents: { + 'Divider.Content': Divider.Content, + }, tags: ['data-display'], parameters: { design: { diff --git a/packages/components/src/drawer/Drawer.stories.tsx b/packages/components/src/drawer/Drawer.stories.tsx index 456135d7f1..ccfb84ba6c 100644 --- a/packages/components/src/drawer/Drawer.stories.tsx +++ b/packages/components/src/drawer/Drawer.stories.tsx @@ -11,6 +11,19 @@ import { RadioGroup } from '../radio-group' const meta: Meta = { title: 'Components/Drawer', component: Drawer, + subcomponents: { + 'Drawer.Trigger': Drawer.Trigger, + 'Drawer.Portal': Drawer.Portal, + 'Drawer.Overlay': Drawer.Overlay, + 'Drawer.Content': Drawer.Content, + 'Drawer.Header': Drawer.Header, + 'Drawer.Body': Drawer.Body, + 'Drawer.Footer': Drawer.Footer, + 'Drawer.Close': Drawer.Close, + 'Drawer.CloseButton': Drawer.CloseButton, + 'Drawer.Title': Drawer.Title, + 'Drawer.Description': Drawer.Description, + }, tags: ['overlays'], parameters: { design: { diff --git a/packages/components/src/dropdown/Dropdown.stories.tsx b/packages/components/src/dropdown/Dropdown.stories.tsx index 74c6bfb741..fc4f2194f9 100644 --- a/packages/components/src/dropdown/Dropdown.stories.tsx +++ b/packages/components/src/dropdown/Dropdown.stories.tsx @@ -12,6 +12,20 @@ import { VisuallyHidden } from '../visually-hidden' const meta: Meta = { title: 'Components/Dropdown', component: Dropdown, + subcomponents: { + 'Dropdown.Group': Dropdown.Group, + 'Dropdown.Item': Dropdown.Item, + 'Dropdown.Items': Dropdown.Items, + 'Dropdown.ItemText': Dropdown.ItemText, + 'Dropdown.ItemIndicator': Dropdown.ItemIndicator, + 'Dropdown.Label': Dropdown.Label, + 'Dropdown.Popover': Dropdown.Popover, + 'Dropdown.Divider': Dropdown.Divider, + 'Dropdown.Trigger': Dropdown.Trigger, + 'Dropdown.Value': Dropdown.Value, + 'Dropdown.LeadingIcon': Dropdown.LeadingIcon, + 'Dropdown.Portal': Dropdown.Portal, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/file-upload/FileUpload.stories.tsx b/packages/components/src/file-upload/FileUpload.stories.tsx index 04330f9927..5602667897 100644 --- a/packages/components/src/file-upload/FileUpload.stories.tsx +++ b/packages/components/src/file-upload/FileUpload.stories.tsx @@ -15,6 +15,16 @@ import { FormField } from '../form-field' const meta: Meta = { title: 'Components/FileUpload', component: FileUpload, + subcomponents: { + 'FileUpload.Trigger': FileUpload.Trigger, + 'FileUpload.Dropzone': FileUpload.Dropzone, + 'FileUpload.Context': FileUpload.Context, + 'FileUpload.ItemDeleteTrigger': FileUpload.ItemDeleteTrigger, + 'FileUpload.PreviewImage': FileUpload.PreviewImage, + 'FileUpload.AcceptedFile': FileUpload.AcceptedFile, + 'FileUpload.RejectedFile': FileUpload.RejectedFile, + 'FileUpload.RejectedFileDeleteTrigger': FileUpload.RejectedFileDeleteTrigger, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/form-field/FormField.stories.tsx b/packages/components/src/form-field/FormField.stories.tsx index 7648a1cd15..3899ca17c4 100644 --- a/packages/components/src/form-field/FormField.stories.tsx +++ b/packages/components/src/form-field/FormField.stories.tsx @@ -7,6 +7,17 @@ import { FormField } from '.' const meta: Meta = { title: 'Components/FormField', component: FormField, + subcomponents: { + 'FormField.Label': FormField.Label, + 'FormField.Control': FormField.Control, + 'FormField.StateMessage': FormField.StateMessage, + 'FormField.SuccessMessage': FormField.SuccessMessage, + 'FormField.AlertMessage': FormField.AlertMessage, + 'FormField.ErrorMessage': FormField.ErrorMessage, + 'FormField.HelperMessage': FormField.HelperMessage, + 'FormField.RequiredIndicator': FormField.RequiredIndicator, + 'FormField.CharactersCount': FormField.CharactersCount, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/input-otp/InputOTP.stories.tsx b/packages/components/src/input-otp/InputOTP.stories.tsx index 5b52c0b5e5..2511aabd99 100644 --- a/packages/components/src/input-otp/InputOTP.stories.tsx +++ b/packages/components/src/input-otp/InputOTP.stories.tsx @@ -8,6 +8,11 @@ import { InputOTP } from '.' const meta: Meta = { title: 'Components/InputOTP', component: InputOTP, + subcomponents: { + 'InputOTP.Group': InputOTP.Group, + 'InputOTP.Slot': InputOTP.Slot, + 'InputOTP.Separator': InputOTP.Separator, + }, tags: ['data-entry'], } diff --git a/packages/components/src/input/InputGroup.stories.tsx b/packages/components/src/input/InputGroup.stories.tsx index 1024e8b995..fbb156594c 100644 --- a/packages/components/src/input/InputGroup.stories.tsx +++ b/packages/components/src/input/InputGroup.stories.tsx @@ -16,6 +16,13 @@ import { IconButton } from '../icon-button' const meta: Meta = { title: 'Components/InputGroup', component: InputGroup, + subcomponents: { + 'InputGroup.LeadingAddon': InputGroup.LeadingAddon, + 'InputGroup.TrailingAddon': InputGroup.TrailingAddon, + 'InputGroup.LeadingIcon': InputGroup.LeadingIcon, + 'InputGroup.TrailingIcon': InputGroup.TrailingIcon, + 'InputGroup.ClearButton': InputGroup.ClearButton, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/label/Label.stories.tsx b/packages/components/src/label/Label.stories.tsx index dd75f9594a..9ec92ffb2a 100644 --- a/packages/components/src/label/Label.stories.tsx +++ b/packages/components/src/label/Label.stories.tsx @@ -5,6 +5,9 @@ import { Label } from '.' const meta: Meta = { title: 'Components/Label', component: Label, + subcomponents: { + 'Label.RequiredIndicator': Label.RequiredIndicator, + }, tags: ['indicators'], parameters: { design: { diff --git a/packages/components/src/link-box/LinkBox.stories.tsx b/packages/components/src/link-box/LinkBox.stories.tsx index 193a1aded5..59c59b36c2 100644 --- a/packages/components/src/link-box/LinkBox.stories.tsx +++ b/packages/components/src/link-box/LinkBox.stories.tsx @@ -9,6 +9,10 @@ import { TextLink } from '../text-link' const meta: Meta = { title: 'Components/LinkBox', component: LinkBox, + subcomponents: { + 'LinkBox.Link': LinkBox.Link, + 'LinkBox.Raised': LinkBox.Raised, + }, tags: ['others'], } diff --git a/packages/components/src/meter/Meter.stories.tsx b/packages/components/src/meter/Meter.stories.tsx index 73c456ac5c..4f9a99f6db 100644 --- a/packages/components/src/meter/Meter.stories.tsx +++ b/packages/components/src/meter/Meter.stories.tsx @@ -6,6 +6,11 @@ import { Meter, MeterProps } from '.' const meta: Meta = { title: 'Components/Meter', component: Meter, + subcomponents: { + 'Meter.Label': Meter.Label, + 'Meter.Track': Meter.Track, + 'Meter.Value': Meter.Value, + }, tags: ['indicators'], parameters: { design: { diff --git a/packages/components/src/pagination/Pagination.stories.tsx b/packages/components/src/pagination/Pagination.stories.tsx index 5831c14471..e7d22b5224 100644 --- a/packages/components/src/pagination/Pagination.stories.tsx +++ b/packages/components/src/pagination/Pagination.stories.tsx @@ -8,6 +8,15 @@ import { RadioGroup } from '../radio-group' const meta: Meta = { title: 'Components/Pagination', component: Pagination, + subcomponents: { + 'Pagination.PrevTrigger': Pagination.PrevTrigger, + 'Pagination.NextTrigger': Pagination.NextTrigger, + 'Pagination.Pages': Pagination.Pages, + 'Pagination.Item': Pagination.Item, + 'Pagination.Ellipsis': Pagination.Ellipsis, + 'Pagination.FirstPageTrigger': Pagination.FirstPageTrigger, + 'Pagination.LastPageTrigger': Pagination.LastPageTrigger, + }, tags: ['navigation'], parameters: { design: { diff --git a/packages/components/src/popover/Popover.stories.tsx b/packages/components/src/popover/Popover.stories.tsx index 867fa441af..c131283589 100644 --- a/packages/components/src/popover/Popover.stories.tsx +++ b/packages/components/src/popover/Popover.stories.tsx @@ -10,6 +10,15 @@ import { type ContentProps } from './PopoverContent' const meta: Meta = { title: 'Components/Popover', component: Popover, + subcomponents: { + 'Popover.Anchor': Popover.Anchor, + 'Popover.Arrow': Popover.Arrow, + 'Popover.CloseButton': Popover.CloseButton, + 'Popover.Content': Popover.Content, + 'Popover.Header': Popover.Header, + 'Popover.Portal': Popover.Portal, + 'Popover.Trigger': Popover.Trigger, + }, tags: ['overlays'], parameters: { design: { diff --git a/packages/components/src/progress-tracker/ProgressTracker.stories.tsx b/packages/components/src/progress-tracker/ProgressTracker.stories.tsx index 34a55e1faf..b973942524 100644 --- a/packages/components/src/progress-tracker/ProgressTracker.stories.tsx +++ b/packages/components/src/progress-tracker/ProgressTracker.stories.tsx @@ -9,6 +9,11 @@ import { Icon } from '../icon' const meta: Meta = { title: 'Components/ProgressTracker', component: ProgressTracker, + subcomponents: { + 'ProgressTracker.Step': ProgressTracker.Step, + 'ProgressTracker.StepLabel': ProgressTracker.StepLabel, + 'ProgressTracker.StepIndicator': ProgressTracker.StepIndicator, + }, tags: ['indicators'], parameters: { design: { diff --git a/packages/components/src/progress/Progress.stories.tsx b/packages/components/src/progress/Progress.stories.tsx index 76bf254d80..97a53380ec 100644 --- a/packages/components/src/progress/Progress.stories.tsx +++ b/packages/components/src/progress/Progress.stories.tsx @@ -8,6 +8,11 @@ import { Progress, ProgressProps } from '.' const meta: Meta = { title: 'Components/Progress', component: Progress, + subcomponents: { + 'Progress.Label': Progress.Label, + 'Progress.Track': Progress.Track, + 'Progress.Value': Progress.Value, + }, tags: ['indicators'], parameters: { design: { diff --git a/packages/components/src/radio-group/RadioGroup.stories.tsx b/packages/components/src/radio-group/RadioGroup.stories.tsx index 75646dbe4a..9da6a642ce 100644 --- a/packages/components/src/radio-group/RadioGroup.stories.tsx +++ b/packages/components/src/radio-group/RadioGroup.stories.tsx @@ -11,6 +11,9 @@ import { VisuallyHidden } from '../visually-hidden' const meta: Meta = { title: 'Components/RadioGroup', component: RadioGroup, + subcomponents: { + 'RadioGroup.Radio': RadioGroup.Radio, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/rating-display/RatingDisplay.stories.tsx b/packages/components/src/rating-display/RatingDisplay.stories.tsx index 1e496e2b75..6f5db6884b 100644 --- a/packages/components/src/rating-display/RatingDisplay.stories.tsx +++ b/packages/components/src/rating-display/RatingDisplay.stories.tsx @@ -7,6 +7,11 @@ import type { StarValue } from './types' const meta: Meta = { title: 'Components/RatingDisplay', component: RatingDisplay, + subcomponents: { + 'RatingDisplay.Stars': RatingDisplay.Stars, + 'RatingDisplay.Value': RatingDisplay.Value, + 'RatingDisplay.Count': RatingDisplay.Count, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/scrolling-list/ScrollingList.stories.tsx b/packages/components/src/scrolling-list/ScrollingList.stories.tsx index f37345cde3..f0defd5367 100644 --- a/packages/components/src/scrolling-list/ScrollingList.stories.tsx +++ b/packages/components/src/scrolling-list/ScrollingList.stories.tsx @@ -14,6 +14,14 @@ import { ScrollingList } from '.' const meta: Meta = { title: 'Components/ScrollingList', component: ScrollingList, + subcomponents: { + 'ScrollingList.Controls': ScrollingList.Controls, + 'ScrollingList.NextButton': ScrollingList.NextButton, + 'ScrollingList.PrevButton': ScrollingList.PrevButton, + 'ScrollingList.Item': ScrollingList.Item, + 'ScrollingList.Items': ScrollingList.Items, + 'ScrollingList.SkipButton': ScrollingList.SkipButton, + }, } export default meta diff --git a/packages/components/src/segmented-control/SegmentedControl.stories.tsx b/packages/components/src/segmented-control/SegmentedControl.stories.tsx index 7ed6497b76..276a800fcd 100644 --- a/packages/components/src/segmented-control/SegmentedControl.stories.tsx +++ b/packages/components/src/segmented-control/SegmentedControl.stories.tsx @@ -13,6 +13,10 @@ import { Tag } from '../tag' const meta: Meta = { title: 'Components/SegmentedControl', component: SegmentedControl, + subcomponents: { + 'SegmentedControl.Item': SegmentedControl.Item, + 'SegmentedControl.Indicator': SegmentedControl.Indicator, + }, tags: ['form'], parameters: { design: { diff --git a/packages/components/src/segmented-gauge/SegmentedGauge.stories.tsx b/packages/components/src/segmented-gauge/SegmentedGauge.stories.tsx index 91223f83f6..a46c1593fb 100644 --- a/packages/components/src/segmented-gauge/SegmentedGauge.stories.tsx +++ b/packages/components/src/segmented-gauge/SegmentedGauge.stories.tsx @@ -6,6 +6,11 @@ import { SegmentedGauge } from '.' const meta: Meta = { title: 'Components/SegmentedGauge', component: SegmentedGauge, + subcomponents: { + 'SegmentedGauge.Track': SegmentedGauge.Track, + 'SegmentedGauge.Segment': SegmentedGauge.Segment, + 'SegmentedGauge.Label': SegmentedGauge.Label, + }, tags: ['data-display'], parameters: {}, } diff --git a/packages/components/src/select/Select.stories.tsx b/packages/components/src/select/Select.stories.tsx index e88e23bab2..d5bc363201 100644 --- a/packages/components/src/select/Select.stories.tsx +++ b/packages/components/src/select/Select.stories.tsx @@ -10,6 +10,16 @@ import { VisuallyHidden } from '../visually-hidden' const meta: Meta = { title: 'Components/Select', component: Select, + subcomponents: { + 'Select.Group': Select.Group, + 'Select.Item': Select.Item, + 'Select.Items': Select.Items, + 'Select.Placeholder': Select.Placeholder, + 'Select.Label': Select.Label, + 'Select.Trigger': Select.Trigger, + 'Select.Value': Select.Value, + 'Select.LeadingIcon': Select.LeadingIcon, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/skeleton/Skeleton.stories.tsx b/packages/components/src/skeleton/Skeleton.stories.tsx index 84de97374e..c5512e6af9 100644 --- a/packages/components/src/skeleton/Skeleton.stories.tsx +++ b/packages/components/src/skeleton/Skeleton.stories.tsx @@ -6,6 +6,11 @@ import { Skeleton } from '.' const meta: Meta = { title: 'Components/Skeleton', component: Skeleton, + subcomponents: { + 'Skeleton.Circle': Skeleton.Circle, + 'Skeleton.Line': Skeleton.Line, + 'Skeleton.Rectangle': Skeleton.Rectangle, + }, tags: ['others'], parameters: { design: { diff --git a/packages/components/src/slider/Slider.stories.tsx b/packages/components/src/slider/Slider.stories.tsx index cce76737c3..506076562c 100644 --- a/packages/components/src/slider/Slider.stories.tsx +++ b/packages/components/src/slider/Slider.stories.tsx @@ -8,6 +8,16 @@ import { Slider, type SliderProps } from '.' const meta: Meta = { title: 'Components/Slider', component: Slider, + subcomponents: { + 'Slider.Control': Slider.Control, + 'Slider.Indicator': Slider.Indicator, + 'Slider.Label': Slider.Label, + 'Slider.MaxValue': Slider.MaxValue, + 'Slider.MinValue': Slider.MinValue, + 'Slider.Thumb': Slider.Thumb, + 'Slider.Track': Slider.Track, + 'Slider.Value': Slider.Value, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/stepper/Stepper.stories.tsx b/packages/components/src/stepper/Stepper.stories.tsx index 2031f1c7df..0c2d6cbb1a 100644 --- a/packages/components/src/stepper/Stepper.stories.tsx +++ b/packages/components/src/stepper/Stepper.stories.tsx @@ -11,6 +11,11 @@ import { Icon } from '../icon' const meta: Meta = { title: 'Components/Stepper', component: Stepper, + subcomponents: { + 'Stepper.IncrementButton': Stepper.IncrementButton, + 'Stepper.DecrementButton': Stepper.DecrementButton, + 'Stepper.Input': Stepper.Input, + }, tags: ['data-entry'], parameters: { design: { diff --git a/packages/components/src/table/Table.stories.tsx b/packages/components/src/table/Table.stories.tsx index eb72e11caf..76ed957472 100644 --- a/packages/components/src/table/Table.stories.tsx +++ b/packages/components/src/table/Table.stories.tsx @@ -22,6 +22,13 @@ import pokedexData from './pokedex.json' const meta: Meta = { title: 'Components/Table', component: Table, + subcomponents: { + 'Table.Header': Table.Header, + 'Table.Column': Table.Column, + 'Table.Body': Table.Body, + 'Table.Row': Table.Row, + 'Table.Cell': Table.Cell, + }, tags: ['data-display'], parameters: { design: { diff --git a/packages/components/src/tabs/Tabs.stories.tsx b/packages/components/src/tabs/Tabs.stories.tsx index b05e396e93..a041f3d535 100644 --- a/packages/components/src/tabs/Tabs.stories.tsx +++ b/packages/components/src/tabs/Tabs.stories.tsx @@ -13,6 +13,11 @@ import { Icon } from '../icon' const meta: Meta = { title: 'Components/Tabs', component: Tabs, + subcomponents: { + 'Tabs.List': Tabs.List, + 'Tabs.Trigger': Tabs.Trigger, + 'Tabs.Content': Tabs.Content, + }, tags: ['navigation'], parameters: { design: { diff --git a/packages/components/src/textarea/TextareaGroup.stories.tsx b/packages/components/src/textarea/TextareaGroup.stories.tsx index 2c01b95098..145ed96cb1 100644 --- a/packages/components/src/textarea/TextareaGroup.stories.tsx +++ b/packages/components/src/textarea/TextareaGroup.stories.tsx @@ -7,6 +7,11 @@ import { Textarea, TextareaGroup } from '.' const meta: Meta = { title: 'Components/TextareaGroup', component: TextareaGroup, + subcomponents: { + 'TextareaGroup.LeadingIcon': TextareaGroup.LeadingIcon, + 'TextareaGroup.TrailingIcon': TextareaGroup.TrailingIcon, + 'TextareaGroup.ClearButton': TextareaGroup.ClearButton, + }, tags: ['data-entry'], parameters: { design: { From 10aeab6a0047ee7460eeccc57836a2a61657022b Mon Sep 17 00:00:00 2001 From: Powerplex Date: Mon, 13 Apr 2026 14:46:28 +0200 Subject: [PATCH 2/3] docs(components): added descriptions to subcomponents manifest --- .../src/accordion/Accordion.stories.tsx | 3 +- .../src/accordion/AccordionItem.tsx | 3 + .../src/alert-dialog/AlertDialogAction.tsx | 3 + .../src/alert-dialog/AlertDialogBody.tsx | 3 + .../src/alert-dialog/AlertDialogCancel.tsx | 3 + .../src/alert-dialog/AlertDialogContent.tsx | 3 + .../alert-dialog/AlertDialogDescription.tsx | 3 + .../src/alert-dialog/AlertDialogFooter.tsx | 3 + .../src/alert-dialog/AlertDialogHeader.tsx | 3 + .../src/alert-dialog/AlertDialogOverlay.tsx | 3 + .../src/alert-dialog/AlertDialogPortal.tsx | 3 + .../src/alert-dialog/AlertDialogTitle.tsx | 3 + .../src/alert-dialog/AlertDialogTrigger.tsx | 3 + .../components/src/avatar/AvatarAction.tsx | 3 + .../components/src/avatar/AvatarImage.tsx | 3 + .../src/avatar/AvatarOnlineBadge.tsx | 3 + .../src/avatar/AvatarPlaceholder.tsx | 3 + packages/components/src/avatar/AvatarUser.tsx | 3 + .../src/breadcrumb/BreadcrumbCurrentPage.tsx | 3 + .../src/breadcrumb/BreadcrumbItem.tsx | 3 + .../src/breadcrumb/BreadcrumbLink.tsx | 3 + .../src/breadcrumb/BreadcrumbSeparator.tsx | 3 + packages/components/src/card/Backdrop.tsx | 66 +++++++++++++++++++ packages/components/src/card/Card.stories.tsx | 1 - packages/components/src/card/Content.tsx | 3 + .../src/carousel/CarouselControls.tsx | 3 + .../src/carousel/CarouselNextButton.tsx | 3 + .../src/carousel/CarouselPageIndicator.tsx | 3 + .../src/carousel/CarouselPagePicker.tsx | 3 + .../src/carousel/CarouselPrevButton.tsx | 3 + .../components/src/carousel/CarouselSlide.tsx | 3 + .../src/carousel/CarouselSlides.tsx | 3 + .../src/carousel/CarouselViewport.tsx | 3 + .../components/src/chip/ChipClearButton.tsx | 3 + packages/components/src/chip/ChipContent.tsx | 3 + .../components/src/chip/ChipLeadingIcon.tsx | 3 + .../components/src/chip/ChipTrailingIcon.tsx | 3 + .../circular-meter/CircularMeterContent.tsx | 3 + .../src/circular-meter/CircularMeterLabel.tsx | 3 + .../src/circular-meter/CircularMeterTrack.tsx | 3 + .../src/circular-meter/CircularMeterValue.tsx | 3 + .../components/src/collapsible/Content.tsx | 3 + .../components/src/collapsible/Trigger.tsx | 3 + .../src/combobox/ComboboxClearButton.tsx | 3 + .../src/combobox/ComboboxDisclosure.tsx | 3 + .../components/src/combobox/ComboboxEmpty.tsx | 3 + .../components/src/combobox/ComboboxGroup.tsx | 3 + .../components/src/combobox/ComboboxInput.tsx | 3 + .../components/src/combobox/ComboboxItem.tsx | 3 + .../src/combobox/ComboboxItemIndicator.tsx | 3 + .../src/combobox/ComboboxItemText.tsx | 3 + .../components/src/combobox/ComboboxItems.tsx | 3 + .../components/src/combobox/ComboboxLabel.tsx | 3 + .../src/combobox/ComboboxLeadingIcon.tsx | 3 + .../src/combobox/ComboboxPopover.tsx | 3 + .../src/combobox/ComboboxPortal.tsx | 3 + .../src/combobox/ComboboxSelectedItems.tsx | 3 + .../src/combobox/ComboboxTrigger.tsx | 3 + packages/components/src/dialog/DialogBody.tsx | 3 + .../components/src/dialog/DialogClose.tsx | 3 + .../src/dialog/DialogCloseButton.tsx | 3 + .../components/src/dialog/DialogContent.tsx | 3 + .../src/dialog/DialogDescription.tsx | 3 + .../components/src/dialog/DialogFooter.tsx | 3 + .../components/src/dialog/DialogHeader.tsx | 3 + .../components/src/dialog/DialogOverlay.tsx | 3 + .../components/src/dialog/DialogPortal.tsx | 3 + .../components/src/dialog/DialogTitle.tsx | 3 + .../components/src/dialog/DialogTrigger.tsx | 3 + .../components/src/divider/DividerContent.tsx | 3 + packages/components/src/drawer/DrawerBody.tsx | 3 + .../components/src/drawer/DrawerClose.tsx | 3 + .../src/drawer/DrawerCloseButton.tsx | 3 + .../components/src/drawer/DrawerContent.tsx | 3 + .../src/drawer/DrawerDescription.tsx | 3 + .../components/src/drawer/DrawerFooter.tsx | 3 + .../components/src/drawer/DrawerHeader.tsx | 3 + .../components/src/drawer/DrawerOverlay.tsx | 3 + .../components/src/drawer/DrawerPortal.tsx | 3 + .../components/src/drawer/DrawerTitle.tsx | 3 + .../components/src/drawer/DrawerTrigger.tsx | 3 + .../src/dropdown/DropdownDivider.tsx | 4 ++ .../components/src/dropdown/DropdownGroup.tsx | 4 ++ .../components/src/dropdown/DropdownItem.tsx | 4 ++ .../src/dropdown/DropdownItemIndicator.tsx | 4 ++ .../src/dropdown/DropdownItemText.tsx | 4 ++ .../components/src/dropdown/DropdownItems.tsx | 4 ++ .../components/src/dropdown/DropdownLabel.tsx | 4 ++ .../src/dropdown/DropdownLeadingIcon.tsx | 4 ++ .../src/dropdown/DropdownPopover.tsx | 4 ++ .../src/dropdown/DropdownPortal.tsx | 4 ++ .../src/dropdown/DropdownTrigger.tsx | 4 ++ .../components/src/dropdown/DropdownValue.tsx | 4 ++ .../file-upload/FileUploadAcceptedFile.tsx | 1 + .../src/file-upload/FileUploadContext.tsx | 1 + .../src/file-upload/FileUploadDropzone.tsx | 4 ++ .../FileUploadItemDeleteTrigger.tsx | 4 ++ .../file-upload/FileUploadPreviewImage.tsx | 1 + .../file-upload/FileUploadRejectedFile.tsx | 1 + .../FileUploadRejectedFileDeleteTrigger.tsx | 1 + .../src/file-upload/FileUploadTrigger.tsx | 4 ++ .../src/form-field/FormFieldAlertMessage.tsx | 1 + .../form-field/FormFieldCharactersCount.tsx | 1 + .../src/form-field/FormFieldControl.tsx | 1 + .../src/form-field/FormFieldErrorMessage.tsx | 1 + .../src/form-field/FormFieldHelperMessage.tsx | 1 + .../src/form-field/FormFieldLabel.tsx | 1 + .../form-field/FormFieldRequiredIndicator.tsx | 1 + .../src/form-field/FormFieldStateMessage.tsx | 3 + .../form-field/FormFieldSuccessMessage.tsx | 1 + .../src/input-otp/InputOTPGroup.tsx | 3 + .../src/input-otp/InputOTPSeparator.tsx | 3 + .../components/src/input-otp/InputOTPSlot.tsx | 3 + .../components/src/input/InputClearButton.tsx | 1 + .../src/input/InputLeadingAddon.tsx | 3 + .../components/src/input/InputLeadingIcon.tsx | 1 + .../src/input/InputTrailingAddon.tsx | 1 + .../src/input/InputTrailingIcon.tsx | 1 + .../src/label/LabelRequiredIndicator.tsx | 3 + .../components/src/link-box/LinkBoxLink.tsx | 4 ++ .../components/src/link-box/LinkBoxRaised.tsx | 52 +++++++++++++++ packages/components/src/meter/MeterLabel.tsx | 3 + packages/components/src/meter/MeterTrack.tsx | 3 + packages/components/src/meter/MeterValue.tsx | 3 + .../src/pagination/PaginationEllipsis.tsx | 4 ++ .../pagination/PaginationFirstPageTrigger.tsx | 4 ++ .../pagination/PaginationLastPageTrigger.tsx | 4 ++ .../src/pagination/PaginationNextTrigger.tsx | 4 ++ .../src/pagination/PaginationPages.tsx | 4 ++ .../src/pagination/PaginationPrevTrigger.tsx | 4 ++ .../components/src/popover/PopoverAnchor.tsx | 4 ++ .../components/src/popover/PopoverArrow.tsx | 4 ++ .../src/popover/PopoverCloseButton.tsx | 4 ++ .../components/src/popover/PopoverContent.tsx | 4 ++ .../components/src/popover/PopoverHeader.tsx | 4 ++ .../components/src/popover/PopoverPortal.tsx | 4 ++ .../components/src/popover/PopoverTrigger.tsx | 4 ++ .../progress-tracker/ProgressTrackerStep.tsx | 1 + .../ProgressTrackerStepIndicator.tsx | 1 + .../ProgressTrackerStepLabel.tsx | 1 + .../components/src/progress/ProgressLabel.tsx | 3 + .../components/src/progress/ProgressTrack.tsx | 1 + .../components/src/progress/ProgressValue.tsx | 1 + packages/components/src/radio-group/Radio.tsx | 4 ++ .../src/rating-display/RatingDisplayCount.tsx | 1 + .../src/rating-display/RatingDisplayStars.tsx | 1 + .../src/rating-display/RatingDisplayValue.tsx | 1 + .../scrolling-list/ScrollingListControls.tsx | 1 + .../src/scrolling-list/ScrollingListItem.tsx | 1 + .../src/scrolling-list/ScrollingListItems.tsx | 1 + .../ScrollingListNextButton.tsx | 1 + .../ScrollingListPrevButton.tsx | 1 + .../ScrollingListSkipButton.tsx | 1 + .../SegmentedControlIndicator.tsx | 1 + .../SegmentedControlItem.tsx | 1 + .../segmented-gauge/SegmentedGaugeLabel.tsx | 1 + .../segmented-gauge/SegmentedGaugeSegment.tsx | 4 ++ .../segmented-gauge/SegmentedGaugeTrack.tsx | 1 + .../components/src/select/SelectGroup.tsx | 4 ++ packages/components/src/select/SelectItem.tsx | 4 ++ .../components/src/select/SelectItems.tsx | 4 ++ .../components/src/select/SelectLabel.tsx | 4 ++ .../src/select/SelectLeadingIcon.tsx | 4 ++ .../src/select/SelectPlaceholder.tsx | 4 ++ .../components/src/select/SelectTrigger.tsx | 4 ++ .../components/src/select/SelectValue.tsx | 4 ++ .../components/src/skeleton/SkeletonItem.tsx | 3 + .../components/src/slider/SliderControl.tsx | 1 + .../components/src/slider/SliderIndicator.tsx | 1 + .../components/src/slider/SliderLabel.tsx | 1 + .../components/src/slider/SliderMaxValue.tsx | 1 + .../components/src/slider/SliderMinValue.tsx | 1 + .../components/src/slider/SliderThumb.tsx | 1 + .../components/src/slider/SliderTrack.tsx | 1 + .../components/src/slider/SliderValue.tsx | 4 +- .../components/src/stepper/StepperButton.tsx | 2 + .../components/src/stepper/StepperInput.tsx | 1 + packages/components/src/table/TableBody.tsx | 1 + packages/components/src/table/TableCell.tsx | 1 + packages/components/src/table/TableColumn.tsx | 1 + packages/components/src/table/TableHeader.tsx | 1 + packages/components/src/table/TableRow.tsx | 1 + packages/components/src/tabs/TabsContent.tsx | 1 + packages/components/src/tabs/TabsList.tsx | 1 + packages/components/src/tabs/TabsTrigger.tsx | 1 + .../src/textarea/TextareaClearButton.tsx | 1 + .../src/textarea/TextareaLeadingIcon.tsx | 1 + .../src/textarea/TextareaTrailingIcon.tsx | 1 + 188 files changed, 600 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/card/Backdrop.tsx diff --git a/packages/components/src/accordion/Accordion.stories.tsx b/packages/components/src/accordion/Accordion.stories.tsx index d265d18f43..661e6d1b65 100644 --- a/packages/components/src/accordion/Accordion.stories.tsx +++ b/packages/components/src/accordion/Accordion.stories.tsx @@ -4,12 +4,13 @@ import { useState } from 'react' import { Accordion } from '.' import { Checkbox, CheckboxGroup } from '../checkbox' import { Tag } from '../tag' +import { Item as AccordionItem } from './AccordionItem' const meta: Meta = { title: 'Components/Accordion', component: Accordion, subcomponents: { - 'Accordion.Item': Accordion.Item, + 'Accordion.Item': AccordionItem, 'Accordion.ItemHeader': Accordion.ItemHeader, 'Accordion.ItemTrigger': Accordion.ItemTrigger, 'Accordion.ItemContent': Accordion.ItemContent, diff --git a/packages/components/src/accordion/AccordionItem.tsx b/packages/components/src/accordion/AccordionItem.tsx index 577c4751b4..7538b98d59 100644 --- a/packages/components/src/accordion/AccordionItem.tsx +++ b/packages/components/src/accordion/AccordionItem.tsx @@ -12,6 +12,9 @@ export interface AccordionItemProps extends ExtentedZagInterface { ref?: Ref } +/** + * Groups an accordion header with the corresponding panel. Renders a
element. + */ export const Item = ({ asChild = false, className, diff --git a/packages/components/src/alert-dialog/AlertDialogAction.tsx b/packages/components/src/alert-dialog/AlertDialogAction.tsx index 415c4fe448..ecf961d96f 100644 --- a/packages/components/src/alert-dialog/AlertDialogAction.tsx +++ b/packages/components/src/alert-dialog/AlertDialogAction.tsx @@ -14,6 +14,9 @@ export interface AlertDialogActionProps extends Omit< ref?: Ref } +/** + * A button that closes the dialog and confirms the action. Renders a