@dragunio/fe-libs 0.1.7 → 0.1.8

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 (10) hide show
  1. package/README.md +29 -0
  2. package/dist/{chunk-GT4546FD.mjs → chunk-HM3V3DVO.mjs} +4 -4
  3. package/dist/icons.js +4 -4
  4. package/dist/icons.mjs +1 -1
  5. package/dist/index.d.mts +67 -4
  6. package/dist/index.d.ts +67 -4
  7. package/dist/index.js +568 -345
  8. package/dist/index.mjs +575 -346
  9. package/dist/styles.css +156 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -9,6 +9,7 @@ src/ # Public library entrypoints and styles
9
9
  packages/ # Internal component source folders
10
10
  ├── icons/
11
11
  ├── button/
12
+ ├── tabs/
12
13
  ├── table/
13
14
  ├── toggle/
14
15
  ├── drawer/
@@ -47,6 +48,8 @@ Available review routes:
47
48
  - `http://127.0.0.1:3000/#/` — overview
48
49
  - `http://127.0.0.1:3000/#/icons` — SVG Icons
49
50
  - `http://127.0.0.1:3000/#/button` — Button
51
+ - `http://127.0.0.1:3000/#/button-bar` — Button Bar
52
+ - `http://127.0.0.1:3000/#/tabs` — Tabs & Segments
50
53
  - `http://127.0.0.1:3000/#/table` — Table
51
54
  - `http://127.0.0.1:3000/#/drawer` — Drawer
52
55
  - `http://127.0.0.1:3000/#/selection` — Selection
@@ -78,6 +81,12 @@ To verify a production-like consumer build:
78
81
  pnpm build
79
82
  ```
80
83
 
84
+ ## Security review note
85
+
86
+ The playground may be exposed through a short-lived Vite tunnel for external manual testing. Treat a shared tunnel link as public for as long as the tunnel is running: do not place secrets, credentials, private IP addresses, internal API details, authorization headers, or sensitive response fixtures in the demo source. `VITE_*` values are client-side values and must not contain secrets.
87
+
88
+ Proposed automated safeguard (not installed yet): run a pre-commit scan only on staged files and block the commit when it finds common credentials, `.env` content, private network details, or sensitive API configuration. This should normally take less than a second for a small staged change and has no ongoing runtime cost. A dedicated secret scanner in CI can be added later to catch commits that bypass the local hook; a unit test is not a reliable secret-detection mechanism.
89
+
81
90
  ## Consuming the published library
82
91
 
83
92
  ```bash
@@ -89,6 +98,7 @@ import {
89
98
  Button,
90
99
  PlusIcon,
91
100
  Table,
101
+ Tabs,
92
102
  Toggle,
93
103
  Checkbox,
94
104
  RadioButton,
@@ -99,6 +109,25 @@ import {
99
109
  import '@dragunio/fe-libs/styles.css';
100
110
  ```
101
111
 
112
+ ### Tabs and segments
113
+
114
+ `Tabs` divides related content into accessible tabs and supports `variant="tab"` (the default underline style) or `variant="segment"`. It can be controlled with `value` or used uncontrolled with `defaultValue`. When labels overflow, the tab list scrolls horizontally; `scrollButtons="auto"` reveals arrow controls only when needed, while the chosen tab is automatically scrolled into view.
115
+
116
+ ```tsx
117
+ const [section, setSection] = useState('overview');
118
+
119
+ <Tabs
120
+ aria-label="Project sections"
121
+ value={section}
122
+ onChange={(value) => setSection(value)}
123
+ items={[
124
+ { id: 'overview', label: 'Overview', content: <Overview /> },
125
+ { id: 'activity', label: 'Activity', content: <Activity /> },
126
+ { id: 'members', label: 'Members', content: <Members /> },
127
+ ]}
128
+ />;
129
+ ```
130
+
102
131
  ### Toggle
103
132
 
104
133
  `Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color. Use `labelPosition="top"` to render its label above the switch; `right` is the default.
package/dist/{chunk-GT4546FD.mjs → chunk-HM3V3DVO.mjs} RENAMED
@@ -52,16 +52,16 @@ var iconProps2 = ({ size, ...props }) => ({
52
52
  ...props
53
53
  });
54
54
  var chevron_right = (props) => {
55
- return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
55
+ return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
56
56
  };
57
57
  var chevron_up = (props) => {
58
- return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
58
+ return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
59
59
  };
60
60
  var chevron_left = (props) => {
61
- return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
61
+ return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
62
62
  };
63
63
  var chevron_down = (props) => {
64
- return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
64
+ return /* @__PURE__ */ jsx2("svg", { ...iconProps2(props), children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
65
65
  };
66
66
 
67
67
  // packages/icons/src/svgItems/security.tsx
package/dist/icons.js CHANGED
@@ -101,16 +101,16 @@ var iconProps2 = ({ size, ...props }) => ({
101
101
  ...props
102
102
  });
103
103
  var chevron_right = (props) => {
104
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
104
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
105
105
  };
106
106
  var chevron_up = (props) => {
107
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
107
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
108
108
  };
109
109
  var chevron_left = (props) => {
110
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
110
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
111
111
  };
112
112
  var chevron_down = (props) => {
113
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
113
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
114
114
  };
115
115
 
116
116
  // packages/icons/src/svgItems/security.tsx
package/dist/icons.mjs CHANGED
@@ -23,7 +23,7 @@ import {
23
23
  search,
24
24
  trash,
25
25
  x_close
26
- } from "./chunk-GT4546FD.mjs";
26
+ } from "./chunk-HM3V3DVO.mjs";
27
27
  export {
28
28
  ChevronDownIcon,
29
29
  ChevronUpIcon,
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
2
+ import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, MouseEvent, KeyboardEvent, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
3
3
  export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
4
4
 
5
5
  type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
@@ -48,9 +48,14 @@ declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<
48
48
  type ButtonBarAction = ButtonProps & {
49
49
  id: string;
50
50
  };
51
+ /** A ButtonBar action or a visual divider placed between action groups. */
52
+ type ButtonBarItem = ButtonBarAction | '|';
51
53
  type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
52
- /** Actions render in this order, both in the bar and the More menu. */
53
- actions: ButtonBarAction[];
54
+ /**
55
+ * Actions render in this order, both in the bar and the More menu. Insert
56
+ * `|` between overflow action groups to add a divider in the More menu.
57
+ */
58
+ actions: ButtonBarItem[];
54
59
  /** Number of actions to keep visible before overflowing the remainder. */
55
60
  maxVisible?: number;
56
61
  /** Overrides for the icon-only More trigger. */
@@ -60,6 +65,64 @@ type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
60
65
  };
61
66
  declare function ButtonBar({ actions, maxVisible, moreButtonProps, moreLabel, className, ...props }: ButtonBarProps): react.JSX.Element;
62
67
 
68
+ type TabsVariant = 'tab' | 'segment';
69
+ type TabsScrollButtons = 'auto' | 'always' | 'never';
70
+ type TabChangeEvent = MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>;
71
+ /** One selectable section within a Tabs component. */
72
+ type TabItem = {
73
+ /** Stable identifier used by value, defaultValue, and onChange. */
74
+ id: string;
75
+ /** Visible tab label. */
76
+ label: ReactNode;
77
+ /** Content shown in the associated panel. Omit it to use Tabs as navigation only. */
78
+ content?: ReactNode;
79
+ disabled?: boolean;
80
+ };
81
+ type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> & {
82
+ /** Ordered sections to render. Each id must be unique. */
83
+ items: TabItem[];
84
+ /** Currently selected tab id for controlled use. */
85
+ value?: string;
86
+ /** Initially selected tab id for uncontrolled use. */
87
+ defaultValue?: string;
88
+ /** Called after a user selects a different tab. */
89
+ onChange?: (value: string, item: TabItem, event: TabChangeEvent) => void;
90
+ /** Underlined tabs or a compact segmented control. Defaults to tab. */
91
+ variant?: TabsVariant;
92
+ /** Shows horizontal scroll controls when the tab list overflows by default. */
93
+ scrollButtons?: TabsScrollButtons;
94
+ /** Accessible label for the tab list. Defaults to Tabs. */
95
+ 'aria-label'?: string;
96
+ /** Accessible label element for the tab list. */
97
+ 'aria-labelledby'?: string;
98
+ previousScrollLabel?: string;
99
+ nextScrollLabel?: string;
100
+ };
101
+ /**
102
+ * A horizontal tab list with optional content panels. Overflowing tabs remain
103
+ * reachable by horizontal scrolling and the selected tab is scrolled into view.
104
+ */
105
+ declare const Tabs: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "children" | "onChange"> & {
106
+ /** Ordered sections to render. Each id must be unique. */
107
+ items: TabItem[];
108
+ /** Currently selected tab id for controlled use. */
109
+ value?: string;
110
+ /** Initially selected tab id for uncontrolled use. */
111
+ defaultValue?: string;
112
+ /** Called after a user selects a different tab. */
113
+ onChange?: (value: string, item: TabItem, event: TabChangeEvent) => void;
114
+ /** Underlined tabs or a compact segmented control. Defaults to tab. */
115
+ variant?: TabsVariant;
116
+ /** Shows horizontal scroll controls when the tab list overflows by default. */
117
+ scrollButtons?: TabsScrollButtons;
118
+ /** Accessible label for the tab list. Defaults to Tabs. */
119
+ 'aria-label'?: string;
120
+ /** Accessible label element for the tab list. */
121
+ 'aria-labelledby'?: string;
122
+ previousScrollLabel?: string;
123
+ nextScrollLabel?: string;
124
+ } & react.RefAttributes<HTMLDivElement>>;
125
+
63
126
  type TableData = readonly (readonly ReactNode[])[];
64
127
  type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
65
128
  type TablePaginationPosition = 'top-right' | 'bottom-right' | 'bottom-center' | 'middle-bottom';
@@ -655,4 +718,4 @@ declare function Avatar({ src, content, alt, size, shape, fallbackIndex, classNa
655
718
  */
656
719
  declare function AvatarGroup({ children, maxCount, className, style, role, ...props }: AvatarGroupProps): react.JSX.Element;
657
720
 
658
- export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
721
+ export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
2
+ import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, MouseEvent, KeyboardEvent, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
3
3
  export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.js';
4
4
 
5
5
  type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
@@ -48,9 +48,14 @@ declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<
48
48
  type ButtonBarAction = ButtonProps & {
49
49
  id: string;
50
50
  };
51
+ /** A ButtonBar action or a visual divider placed between action groups. */
52
+ type ButtonBarItem = ButtonBarAction | '|';
51
53
  type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
52
- /** Actions render in this order, both in the bar and the More menu. */
53
- actions: ButtonBarAction[];
54
+ /**
55
+ * Actions render in this order, both in the bar and the More menu. Insert
56
+ * `|` between overflow action groups to add a divider in the More menu.
57
+ */
58
+ actions: ButtonBarItem[];
54
59
  /** Number of actions to keep visible before overflowing the remainder. */
55
60
  maxVisible?: number;
56
61
  /** Overrides for the icon-only More trigger. */
@@ -60,6 +65,64 @@ type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
60
65
  };
61
66
  declare function ButtonBar({ actions, maxVisible, moreButtonProps, moreLabel, className, ...props }: ButtonBarProps): react.JSX.Element;
62
67
 
68
+ type TabsVariant = 'tab' | 'segment';
69
+ type TabsScrollButtons = 'auto' | 'always' | 'never';
70
+ type TabChangeEvent = MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>;
71
+ /** One selectable section within a Tabs component. */
72
+ type TabItem = {
73
+ /** Stable identifier used by value, defaultValue, and onChange. */
74
+ id: string;
75
+ /** Visible tab label. */
76
+ label: ReactNode;
77
+ /** Content shown in the associated panel. Omit it to use Tabs as navigation only. */
78
+ content?: ReactNode;
79
+ disabled?: boolean;
80
+ };
81
+ type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> & {
82
+ /** Ordered sections to render. Each id must be unique. */
83
+ items: TabItem[];
84
+ /** Currently selected tab id for controlled use. */
85
+ value?: string;
86
+ /** Initially selected tab id for uncontrolled use. */
87
+ defaultValue?: string;
88
+ /** Called after a user selects a different tab. */
89
+ onChange?: (value: string, item: TabItem, event: TabChangeEvent) => void;
90
+ /** Underlined tabs or a compact segmented control. Defaults to tab. */
91
+ variant?: TabsVariant;
92
+ /** Shows horizontal scroll controls when the tab list overflows by default. */
93
+ scrollButtons?: TabsScrollButtons;
94
+ /** Accessible label for the tab list. Defaults to Tabs. */
95
+ 'aria-label'?: string;
96
+ /** Accessible label element for the tab list. */
97
+ 'aria-labelledby'?: string;
98
+ previousScrollLabel?: string;
99
+ nextScrollLabel?: string;
100
+ };
101
+ /**
102
+ * A horizontal tab list with optional content panels. Overflowing tabs remain
103
+ * reachable by horizontal scrolling and the selected tab is scrolled into view.
104
+ */
105
+ declare const Tabs: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "children" | "onChange"> & {
106
+ /** Ordered sections to render. Each id must be unique. */
107
+ items: TabItem[];
108
+ /** Currently selected tab id for controlled use. */
109
+ value?: string;
110
+ /** Initially selected tab id for uncontrolled use. */
111
+ defaultValue?: string;
112
+ /** Called after a user selects a different tab. */
113
+ onChange?: (value: string, item: TabItem, event: TabChangeEvent) => void;
114
+ /** Underlined tabs or a compact segmented control. Defaults to tab. */
115
+ variant?: TabsVariant;
116
+ /** Shows horizontal scroll controls when the tab list overflows by default. */
117
+ scrollButtons?: TabsScrollButtons;
118
+ /** Accessible label for the tab list. Defaults to Tabs. */
119
+ 'aria-label'?: string;
120
+ /** Accessible label element for the tab list. */
121
+ 'aria-labelledby'?: string;
122
+ previousScrollLabel?: string;
123
+ nextScrollLabel?: string;
124
+ } & react.RefAttributes<HTMLDivElement>>;
125
+
63
126
  type TableData = readonly (readonly ReactNode[])[];
64
127
  type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
65
128
  type TablePaginationPosition = 'top-right' | 'bottom-right' | 'bottom-center' | 'middle-bottom';
@@ -655,4 +718,4 @@ declare function Avatar({ src, content, alt, size, shape, fallbackIndex, classNa
655
718
  */
656
719
  declare function AvatarGroup({ children, maxCount, className, style, role, ...props }: AvatarGroupProps): react.JSX.Element;
657
720
 
658
- export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
721
+ export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };