@ostack.tech/ui-exhibit 0.10.4 → 0.10.5

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, 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, Table, TableHead, TableColumn, TableBody, TableRow, TableCell, TableFoot, Tabs, TabList, Tab, TabContent, Tag, 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,
         {
@@ -805,6 +806,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,
@@ -1439,6 +1464,7 @@ function ExhibitApp({
       /* @__PURE__ */ jsx(DateRangeInputSection, {}),
       /* @__PURE__ */ jsx(DialogSection, {}),
       /* @__PURE__ */ jsx(DropdownMenuSection, {}),
+      /* @__PURE__ */ jsx(FieldGroupSection, {}),
       /* @__PURE__ */ jsx(IconButtonSection, {}),
       /* @__PURE__ */ jsx(InputSection, {}),
       /* @__PURE__ */ jsx(LinkSection, {}),