npm - @cognite/aura - Versions diffs - 1.47321.0 → 1.47358.0 - Mend

@cognite/aura 1.47321.0 → 1.47358.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/DESIGN.md CHANGED Viewed

@@ -1201,6 +1201,7 @@ Persistent or dismissible message scoped at page or section level — stronger t
 **Storybook-slug:** breadcrumb
 **Docs-slug:** breadcrumbs
+**Full guidance:** [breadcrumb.md](./src/components/ui/core/breadcrumb/breadcrumb.md)
 **Definition**
 Hierarchical navigation aid that shows users their current location within the product's structure. Location-based, not path-based.
@@ -1260,6 +1261,7 @@ Primary control for discrete actions.
 #### Button Group
 **Storybook-slug:** button-group
+**Full guidance:** [button-group.md](./src/components/ui/core/button-group/button-group.md)
 **Definition**
 Visually joins related buttons into a connected row, clarifying that the actions belong to the same context.
@@ -1349,6 +1351,7 @@ Enables users to independently select one or multiple options. Can appear standa
 **Storybook-slug:** collapsible
 **Docs-slug:** collapsible
+**Full guidance:** [collapsible.md](./src/components/ui/core/collapsible/collapsible.md)
 **Definition**
 A single inline expandable block that toggles content visibility. Designed for one independent optional section, not multiple stacked areas.

package/dist/components/ui/core/breadcrumb/breadcrumb.gallery.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { ReactElement } from "react";
2	+ export declare function BreadcrumbGallery(): ReactElement;

package/dist/components/ui/core/breadcrumb/breadcrumb.gallery.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+export function BreadcrumbGallery() {
+    return /*#__PURE__*/ _jsx(Breadcrumb, {
+        children: /*#__PURE__*/ _jsxs(BreadcrumbList, {
+            children: [
+                /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                    children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                        href: "/",
+                        children: "Home"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                    children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                        href: "/projects",
+                        children: "Projects"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                    children: /*#__PURE__*/ _jsx(BreadcrumbPage, {
+                        children: "Project Alpha"
+                    })
+                })
+            ]
+        })
+    });
+}
+//# sourceMappingURL=breadcrumb.gallery.js.map

package/dist/components/ui/core/breadcrumb/breadcrumb.gallery.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/ui/core/breadcrumb/breadcrumb.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from './breadcrumb';\n\nexport function BreadcrumbGallery(): ReactElement {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/projects\">Projects</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Project Alpha</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n );\n}\n"],"names":["Breadcrumb","BreadcrumbItem","BreadcrumbLink","BreadcrumbList","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbGallery","href"],"mappings":";AAEA,SACEA,UAAU,EACVC,cAAc,EACdC,cAAc,EACdC,cAAc,EACdC,cAAc,EACdC,mBAAmB,QACd,kBAAe;AAEtB,OAAO,SAASC;IACd,qBACE,KAACN;kBACC,cAAA,MAACG;;8BACC,KAACF;8BACC,cAAA,KAACC;wBAAeK,MAAK;kCAAI;;;8BAE3B,KAACF;8BACD,KAACJ;8BACC,cAAA,KAACC;wBAAeK,MAAK;kCAAY;;;8BAEnC,KAACF;8BACD,KAACJ;8BACC,cAAA,KAACG;kCAAe;;;;;;AAK1B"}

package/dist/components/ui/core/button-group/button-group.gallery.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { ReactElement } from "react";
2	+ export declare function ButtonGroupGallery(): ReactElement;

package/dist/components/ui/core/button-group/button-group.gallery.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { ButtonGroup } from "./button-group.js";
+export function ButtonGroupGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-8",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "mb-3 font-semibold text-sm",
+                        children: "Horizontal"
+                    }),
+                    /*#__PURE__*/ _jsxs(ButtonGroup, {
+                        orientation: "horizontal",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "First"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "Second"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "Third"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "mb-3 font-semibold text-sm",
+                        children: "Vertical"
+                    }),
+                    /*#__PURE__*/ _jsxs(ButtonGroup, {
+                        orientation: "vertical",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "First"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "Second"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                children: "Third"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+//# sourceMappingURL=button-group.gallery.js.map

package/dist/components/ui/core/button-group/button-group.gallery.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/ui/core/button-group/button-group.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { Button } from '../button/button';\n\nimport { ButtonGroup } from './button-group';\n\nexport function ButtonGroupGallery(): ReactElement {\n return (\n <div className=\"flex flex-col gap-8\">\n <div>\n <h3 className=\"mb-3 font-semibold text-sm\">Horizontal</h3>\n <ButtonGroup orientation=\"horizontal\">\n <Button variant=\"outline\">First</Button>\n <Button variant=\"outline\">Second</Button>\n <Button variant=\"outline\">Third</Button>\n </ButtonGroup>\n </div>\n <div>\n <h3 className=\"mb-3 font-semibold text-sm\">Vertical</h3>\n <ButtonGroup orientation=\"vertical\">\n <Button variant=\"outline\">First</Button>\n <Button variant=\"outline\">Second</Button>\n <Button variant=\"outline\">Third</Button>\n </ButtonGroup>\n </div>\n </div>\n );\n}\n"],"names":["Button","ButtonGroup","ButtonGroupGallery","div","className","h3","orientation","variant"],"mappings":";AAEA,SAASA,MAAM,QAAQ,sBAAmB;AAE1C,SAASC,WAAW,QAAQ,oBAAiB;AAE7C,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACD;;kCACC,KAACE;wBAAGD,WAAU;kCAA6B;;kCAC3C,MAACH;wBAAYK,aAAY;;0CACvB,KAACN;gCAAOO,SAAQ;0CAAU;;0CAC1B,KAACP;gCAAOO,SAAQ;0CAAU;;0CAC1B,KAACP;gCAAOO,SAAQ;0CAAU;;;;;;0BAG9B,MAACJ;;kCACC,KAACE;wBAAGD,WAAU;kCAA6B;;kCAC3C,MAACH;wBAAYK,aAAY;;0CACvB,KAACN;gCAAOO,SAAQ;0CAAU;;0CAC1B,KAACP;gCAAOO,SAAQ;0CAAU;;0CAC1B,KAACP;gCAAOO,SAAQ;0CAAU;;;;;;;;AAKpC"}

package/dist/components/ui/core/collapsible/collapsible.gallery.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { ReactElement } from "react";
2	+ export declare function CollapsibleGallery(): ReactElement;

package/dist/components/ui/core/collapsible/collapsible.gallery.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSelector } from "@tabler/icons-react";
+import { Badge } from "../badge/badge.js";
+import { Button } from "../button/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+export function CollapsibleGallery() {
+    return /*#__PURE__*/ _jsxs(Collapsible, {
+        className: "w-120 max-w-full space-y-2",
+        children: [
+            /*#__PURE__*/ _jsx(CollapsibleTrigger, {
+                render: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "ghost",
+                    className: "h-9 w-full justify-between rounded-sm px-3 py-2 gap-2",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "flex-1 text-left",
+                            children: "What is a collapsible?"
+                        }),
+                        /*#__PURE__*/ _jsx(Badge, {
+                            className: "h-5 bg-decorative-background-mountain px-1 text-decorative-foreground-mountain",
+                            children: "Badge"
+                        }),
+                        /*#__PURE__*/ _jsx(IconSelector, {
+                            className: "h-4 w-4 transition-transform duration-200 group-data-panel-open/collapsible-trigger:rotate-180"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(CollapsibleContent, {
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "px-3 py-0",
+                    children: "A collapsible is an interactive component that expands and collapses to show or hide content. Multiple collapsibles can be open at the same time, unlike accordions which are mutually exclusive."
+                })
+            })
+        ]
+    });
+}
+//# sourceMappingURL=collapsible.gallery.js.map

package/dist/components/ui/core/collapsible/collapsible.gallery.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/ui/core/collapsible/collapsible.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { IconSelector } from '@tabler/icons-react';\n\nimport { Badge } from '../badge/badge';\nimport { Button } from '../button/button';\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from './collapsible';\n\nexport function CollapsibleGallery(): ReactElement {\n return (\n <Collapsible className=\"w-120 max-w-full space-y-2\">\n <CollapsibleTrigger\n render={\n <Button\n variant=\"ghost\"\n className=\"h-9 w-full justify-between rounded-sm px-3 py-2 gap-2\"\n >\n <span className=\"flex-1 text-left\">What is a collapsible?</span>\n <Badge className=\"h-5 bg-decorative-background-mountain px-1 text-decorative-foreground-mountain\">\n Badge\n </Badge>\n <IconSelector className=\"h-4 w-4 transition-transform duration-200 group-data-panel-open/collapsible-trigger:rotate-180\" />\n </Button>\n }\n />\n <CollapsibleContent>\n <div className=\"px-3 py-0\">\n A collapsible is an interactive component that expands and collapses\n to show or hide content. Multiple collapsibles can be open at the same\n time, unlike accordions which are mutually exclusive.\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n}\n"],"names":["IconSelector","Badge","Button","Collapsible","CollapsibleContent","CollapsibleTrigger","CollapsibleGallery","className","render","variant","span","div"],"mappings":";AAEA,SAASA,YAAY,QAAQ,sBAAsB;AAEnD,SAASC,KAAK,QAAQ,oBAAiB;AACvC,SAASC,MAAM,QAAQ,sBAAmB;AAE1C,SACEC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,QACb,mBAAgB;AAEvB,OAAO,SAASC;IACd,qBACE,MAACH;QAAYI,WAAU;;0BACrB,KAACF;gBACCG,sBACE,MAACN;oBACCO,SAAQ;oBACRF,WAAU;;sCAEV,KAACG;4BAAKH,WAAU;sCAAmB;;sCACnC,KAACN;4BAAMM,WAAU;sCAAiF;;sCAGlG,KAACP;4BAAaO,WAAU;;;;;0BAI9B,KAACH;0BACC,cAAA,KAACO;oBAAIJ,WAAU;8BAAY;;;;;AAQnC"}