@ostack.tech/ui-exhibit 0.10.4 → 0.11.0

package/dist/ostack-ui-exhibit.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { useCssVars, Stack, Heading, Link, VisuallyHidden, AlertDialog, AlertDialogTrigger, Button, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Alert, AlertTitle, ButtonGroup, IconButton, Calendar, Field, Label, CheckboxGroup, Checkbox, Feedback, HelperText, Code, useSpacing, Collapsible, CollapsibleTrigger, CollapsibleContent, useKeyboardShortcut, Keybinds, CommandMenuDialog, CommandMenu, CommandMenuGroup, CommandMenuItem, DataTable, DataTableFilter, DataTableContent, DataTableRowsPerPage, DataTablePagination, DateInput, DateRangeInput, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogDescription, Input, DialogFooter, DialogClose, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, Keyboard, Mark, MenuList, MenuListGroup, MenuListItem, NumericInput, ControlAddon, Output, Popover, PopoverTrigger, PopoverContent, TextArea, RadioGroup, Radio, Select, Option, Spinner, Table, TableHead, TableColumn, TableBody, TableRow, TableCell, TableFoot, Tabs, TabList, Tab, TabContent, Tag, useToastManager, Tooltip, Root, enGB, Container } from "@ostack.tech/ui";
+import { useCssVars, Stack, Heading, Link, VisuallyHidden, AlertDialog, AlertDialogTrigger, Button, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Alert, AlertTitle, ButtonGroup, IconButton, Calendar, Field, Label, CheckboxGroup, Checkbox, Feedback, HelperText, Code, useSpacing, Collapsible, CollapsibleTrigger, CollapsibleContent, useKeyboardShortcut, Keybinds, CommandMenuDialog, CommandMenu, CommandMenuGroup, CommandMenuItem, DataTable, DataTableFilter, DataTableContent, DataTableRowsPerPage, DataTablePagination, DateInput, DateRangeInput, DescriptionList, DescriptionListItem, Tag, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogDescription, Input, DialogFooter, DialogClose, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, FieldGroup, FieldGroupHeader, FieldGroupTitle, FieldGroupBody, Keyboard, Mark, MenuList, MenuListGroup, MenuListItem, NumericInput, ControlAddon, Output, Popover, PopoverTrigger, PopoverContent, TextArea, RadioGroup, Radio, Select, Option, Spinner, Stepper, StepList, Step, StepContent, StepperPreviousTrigger, StepperNextTrigger, StepperFinishTrigger, Table, TableHead, TableColumn, TableBody, TableRow, TableCell, TableFoot, Tabs, TabList, Tab, TabContent, useToastManager, Tooltip, Root, enGB, Container } from "@ostack.tech/ui";
 import { createContext, useContext, Fragment, useState } from "react";
 import { faFolderOpen, faSave, faTrashCan, faBolt, faCaretUp, faCaretDown, faGear, faWifi, faNetworkWired, faDisplay, faVolumeHigh, faKeyboard, faPrint, faClock, faUser, faCircleXmark, faSeedling, faEye, faPencil, faComment, faStar, faBookmark } from "@fortawesome/free-solid-svg-icons";
 const ExhibitContext = createContext(null);
@@ -38,8 +38,9 @@ function ExhibitSection({
   children
 }) {
   const { cssVar } = useCssVars();
-  const docsUrl = useDocsUrl();
   const headingId = title.toLowerCase().replace(/[^a-z0-9]/g, "-");
+  const docsUrl = new URL(useDocsUrl());
+  docsUrl.searchParams.set("path", `/docs/${docsPage}--docs`);
   return /* @__PURE__ */ jsx(Stack, { asChild: true, children: /* @__PURE__ */ jsxs("section", { className: "exhibit-section", "aria-labelledby": headingId, children: [
     /* @__PURE__ */ jsx(Stack, { asChild: true, direction: "row", gap: 4, alignItems: "baseline", children: /* @__PURE__ */ jsxs("header", { children: [
       /* @__PURE__ */ jsx(Heading, { id: headingId, children: /* @__PURE__ */ jsx(
@@ -55,7 +56,7 @@ function ExhibitSection({
         Link,
         {
           className: "exhibit-section-docs-link",
-          href: `${docsUrl}?path=/docs/${docsPage}--docs`,
+          href: docsUrl.toString(),
           external: true,
           children: [
             "View docs",
@@ -560,7 +561,7 @@ function DataTableSection() {
     ExhibitSection,
     {
       title: "Data table",
-      docsPage: "ostack-ui-data-data-display-data-table",
+      docsPage: "ostack-ui-data-display-data-table",
       children: /* @__PURE__ */ jsx(
         ExhibitGrid,
         {
@@ -573,10 +574,6 @@ function DataTableSection() {
           renderItem: ({ col }) => /* @__PURE__ */ jsx(Field, { style: { width: 450 }, children: /* @__PURE__ */ jsxs(
             DataTable,
             {
-              displayMode: col === "scrolled" ? col : void 0,
-              showSelectionColumn: col === "showSelectionColumn",
-              rowKey: "id",
-              defaultLimit: 5,
               columns: {
                 student: {
                   label: "Student",
@@ -593,6 +590,10 @@ function DataTableSection() {
                 }
               },
               rows: ROWS$1,
+              rowKey: "id",
+              displayMode: col === "scrolled" ? col : void 0,
+              showSelectionColumn: col === "showSelectionColumn",
+              defaultLimit: 5,
               children: [
                 /* @__PURE__ */ jsx(Label, { children: "Exam grades" }),
                 /* @__PURE__ */ jsx(DataTableFilter, {}),
@@ -706,6 +707,33 @@ function DateRangeInputSection() {
     }
   );
 }
+function DescriptionListSection() {
+  return /* @__PURE__ */ jsx(
+    ExhibitSection,
+    {
+      title: "Description list",
+      docsPage: "ostack-ui-data-display-description-list",
+      children: /* @__PURE__ */ jsxs(DescriptionList, { children: [
+        /* @__PURE__ */ jsx(DescriptionListItem, { term: "Instance ID", xs: 6, md: 4, lg: 3, xl: 2, children: /* @__PURE__ */ jsx(Code, { children: "i-04f29a87bca612" }) }),
+        /* @__PURE__ */ jsx(DescriptionListItem, { term: "Status", xs: 6, md: 4, lg: 3, xl: 2, children: /* @__PURE__ */ jsx(Tag, { color: "success", children: "Running" }) }),
+        /* @__PURE__ */ jsx(DescriptionListItem, { term: "Public IPv4", xs: 6, md: 4, lg: 3, xl: 2, children: /* @__PURE__ */ jsx(Link, { href: "http://203.0.113.88", external: true, children: "203.0.113.88" }) }),
+        /* @__PURE__ */ jsx(DescriptionListItem, { term: "Storage", xs: 6, md: 4, lg: 3, xl: 2, children: "20 GB (SSD)" }),
+        /* @__PURE__ */ jsx(
+          DescriptionListItem,
+          {
+            term: "Availability Zone",
+            xs: 6,
+            md: 4,
+            lg: 3,
+            xl: 2,
+            children: /* @__PURE__ */ jsx(Code, { children: "us-east-1a" })
+          }
+        ),
+        /* @__PURE__ */ jsx(DescriptionListItem, { term: "Launch Time", xs: 6, md: 4, lg: 3, xl: 2, children: "2026-02-12 14:30 UTC" })
+      ] })
+    }
+  );
+}
 function DialogSection() {
   return /* @__PURE__ */ jsx(ExhibitSection, { title: "Dialog", docsPage: "ostack-ui-overlay-dialog", children: /* @__PURE__ */ jsx(
     ExhibitGrid,
@@ -805,6 +833,30 @@ function DropdownMenuSection() {
     }
   );
 }
+function FieldGroupSection() {
+  return /* @__PURE__ */ jsx(ExhibitSection, { title: "Field group", docsPage: "ostack-ui-forms-field-group", children: /* @__PURE__ */ jsx(
+    ExhibitGrid,
+    {
+      cols: {
+        Basic: "basic",
+        Code: "code"
+      },
+      renderItem: ({ col }) => /* @__PURE__ */ jsxs(FieldGroup, { children: [
+        /* @__PURE__ */ jsx(FieldGroupHeader, { code: col === "code" ? "1" : void 0, children: /* @__PURE__ */ jsx(FieldGroupTitle, { children: "Identification" }) }),
+        /* @__PURE__ */ jsx(FieldGroupBody, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(Label, { children: "Full name" }),
+            /* @__PURE__ */ jsx(Input, { code: col === "code" ? "1.1" : void 0 })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(Label, { children: "Passport number" }),
+            /* @__PURE__ */ jsx(Input, { code: col === "code" ? "1.2" : void 0 })
+          ] })
+        ] }) })
+      ] })
+    }
+  ) });
+}
 function IconButtonSection() {
   return /* @__PURE__ */ jsx(ExhibitSection, { title: "Icon button", docsPage: "ostack-ui-forms-icon-button", children: /* @__PURE__ */ jsx(
     ExhibitGrid,
@@ -1236,6 +1288,31 @@ function SpinnerSection() {
     }
   ) });
 }
+function StepperSection() {
+  const spacing = useSpacing();
+  return /* @__PURE__ */ jsx(
+    ExhibitSection,
+    {
+      title: "Stepper",
+      docsPage: "ostack-ui-data-disclosure-stepper",
+      children: /* @__PURE__ */ jsxs(Stepper, { style: { maxWidth: 600 }, children: [
+        /* @__PURE__ */ jsxs(StepList, { children: [
+          /* @__PURE__ */ jsx(Step, { children: "Account Details" }),
+          /* @__PURE__ */ jsx(Step, { children: "Shipping Address" }),
+          /* @__PURE__ */ jsx(Step, { children: "Payment Method" }),
+          /* @__PURE__ */ jsx(Step, { children: "Review & Confirm" })
+        ] }),
+        /* @__PURE__ */ jsx(StepContent, { style: { marginBlock: spacing(2) }, children: "Enter your contact information…" }),
+        /* @__PURE__ */ jsx(StepContent, { style: { marginBlock: spacing(2) }, children: "Select your shipping address…" }),
+        /* @__PURE__ */ jsx(StepContent, { style: { marginBlock: spacing(2) }, children: "Select your payment method…" }),
+        /* @__PURE__ */ jsx(StepContent, { style: { marginBlock: spacing(2) }, children: "Double-check your order…" }),
+        /* @__PURE__ */ jsx(StepperPreviousTrigger, {}),
+        /* @__PURE__ */ jsx(StepperNextTrigger, {}),
+        /* @__PURE__ */ jsx(StepperFinishTrigger, {})
+      ] })
+    }
+  );
+}
 const ROWS = [
   { student: "Avi Everett", grade: 82.5 },
   { student: "Evan Gutierrez", grade: 67.8 },
@@ -1417,7 +1494,7 @@ function ExhibitApp({
   prefix,
   actions
 }) {
-  return /* @__PURE__ */ jsx(ExhibitContext, { value: { docsUrl }, children: /* @__PURE__ */ jsxs(Root, { prefix, locale: enGB, children: [
+  return /* @__PURE__ */ jsx(ExhibitContext.Provider, { value: { docsUrl }, children: /* @__PURE__ */ jsxs(Root, { prefix, locale: enGB, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { focusable: true, asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "#exhibit-main", style: { top: 6, left: 6 }, children: "Skip to main content" }) }),
     /* @__PURE__ */ jsx(Container, { asChild: true, children: /* @__PURE__ */ jsxs("header", { id: "exhibit-header", children: [
       /* @__PURE__ */ jsx(Heading, { level: 1, id: "exhibit-title", children: title }),
@@ -1437,8 +1514,10 @@ function ExhibitApp({
       /* @__PURE__ */ jsx(DataTableSection, {}),
       /* @__PURE__ */ jsx(DateInputSection, {}),
       /* @__PURE__ */ jsx(DateRangeInputSection, {}),
+      /* @__PURE__ */ jsx(DescriptionListSection, {}),
       /* @__PURE__ */ jsx(DialogSection, {}),
       /* @__PURE__ */ jsx(DropdownMenuSection, {}),
+      /* @__PURE__ */ jsx(FieldGroupSection, {}),
       /* @__PURE__ */ jsx(IconButtonSection, {}),
       /* @__PURE__ */ jsx(InputSection, {}),
       /* @__PURE__ */ jsx(LinkSection, {}),
@@ -1450,6 +1529,7 @@ function ExhibitApp({
       /* @__PURE__ */ jsx(RadioGroupSection, {}),
       /* @__PURE__ */ jsx(SelectSection, {}),
       /* @__PURE__ */ jsx(SpinnerSection, {}),
+      /* @__PURE__ */ jsx(StepperSection, {}),
       /* @__PURE__ */ jsx(TableSection, {}),
       /* @__PURE__ */ jsx(TabsSection, {}),
       /* @__PURE__ */ jsx(TagSection, {}),