@indico-data/design-system 2.26.0 → 2.28.0

package/lib/index.css

@@ -61,6 +61,15 @@
   --pf-gray-color-700: #2c2c2c;
   --pf-gray-color-800: #1f1f1f;
   --pf-gray-color-900: #141414;
+  --pf-steel-color-100: #f4f6f8;
+  --pf-steel-color-200: #d9dee5;
+  --pf-steel-color-300: #bcc3cd;
+  --pf-steel-color-400: #a0a9b5;
+  --pf-steel-color-500: #7c8594;
+  --pf-steel-color-600: #5f697a;
+  --pf-steel-color-700: #454e5e;
+  --pf-steel-color-800: #2d3444;
+  --pf-steel-color-900: #1b202c;
   --pf-green-color: #008a00;
   --pf-green-color-100: #d6ecd6;
   --pf-green-color-200: #99d099;
@@ -133,6 +142,16 @@
   --pf-gray-color-700: #828588;
   --pf-gray-color-800: #797979;
   --pf-gray-color-900: #585858;
+  --pf-steel-color: #3e4751;
+  --pf-steel-color-100: #9aa1b1;
+  --pf-steel-color-200: #7c8594;
+  --pf-steel-color-300: #6a717e;
+  --pf-steel-color-400: #545c67;
+  --pf-steel-color-500: #3e4751;
+  --pf-steel-color-600: #2d3444;
+  --pf-steel-color-700: #232a3a;
+  --pf-steel-color-800: #1a202f;
+  --pf-steel-color-900: #11161f;
   --pf-green-color: #199d19;
   --pf-green-color-100: #98ff98;
   --pf-green-color-200: #76ff76;
@@ -1672,25 +1691,24 @@ form {
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
-  --pf-popper-background-color: var(--pf-white-color);
-  --pf-popper-border-color: var(--pf-gray-color-900);
-  --pf-popper-border-radius: var(--pf-rounded);
-  --pf-popper-padding: var(--pf-padding-2);
+  --pf-floatui-background-color: var(--pf-white-color);
+  --pf-floatui-border-color: var(--pf-gray-color-900);
+  --pf-floatui-border-radius: var(--pf-rounded);
 }
 
 :root [data-theme=dark] {
-  --pf-popper-background-color: var(--pf-primary-color-600);
-  --pf-popper-border-color: var(--pf-gray-color);
+  --pf-floatui-background-color: var(--pf-primary-color-600);
+  --pf-floatui-border-color: var(--pf-gray-color);
 }
 
-.popper-container {
+.floatui-container {
   z-index: 99;
 }
 
-.popper-content {
-  border-radius: var(--pf-popper-border-radius);
-  border: 1px solid var(--pf-popper-border-color);
-  background: var(--pf-popper-background-color);
+.floatui-content {
+  border-radius: var(--pf-floatui-border-radius);
+  border: 1px solid var(--pf-floatui-border-color);
+  background: var(--pf-floatui-background-color);
 }
 
 .rdp {
@@ -2764,6 +2782,86 @@ p,
   background-color: var(--pf-gray-color-900);
 }
 
+.color-steel {
+  color: var(--pf-steel-color);
+}
+
+.bg-steel {
+  background-color: var(--pf-steel-color);
+}
+
+.color-steel-100 {
+  color: var(--pf-steel-color-100);
+}
+
+.bg-steel-100 {
+  background-color: var(--pf-steel-color-100);
+}
+
+.color-steel-200 {
+  color: var(--pf-steel-color-200);
+}
+
+.bg-steel-200 {
+  background-color: var(--pf-steel-color-200);
+}
+
+.color-steel-300 {
+  color: var(--pf-steel-color-300);
+}
+
+.bg-steel-300 {
+  background-color: var(--pf-steel-color-300);
+}
+
+.color-steel-400 {
+  color: var(--pf-steel-color-400);
+}
+
+.bg-steel-400 {
+  background-color: var(--pf-steel-color-400);
+}
+
+.color-steel-500 {
+  color: var(--pf-steel-color-500);
+}
+
+.bg-steel-500 {
+  background-color: var(--pf-steel-color-500);
+}
+
+.color-steel-600 {
+  color: var(--pf-steel-color-600);
+}
+
+.bg-steel-600 {
+  background-color: var(--pf-steel-color-600);
+}
+
+.color-steel-700 {
+  color: var(--pf-steel-color-700);
+}
+
+.bg-steel-700 {
+  background-color: var(--pf-steel-color-700);
+}
+
+.color-steel-800 {
+  color: var(--pf-steel-color-800);
+}
+
+.bg-steel-800 {
+  background-color: var(--pf-steel-color-800);
+}
+
+.color-steel-900 {
+  color: var(--pf-steel-color-900);
+}
+
+.bg-steel-900 {
+  background-color: var(--pf-steel-color-900);
+}
+
 .color-green {
   color: var(--pf-green-color);
 }
@@ -3334,6 +3432,46 @@ p,
   border-color: var(--pf-gray-color-900);
 }
 
+.border-steel {
+  border-color: var(--pf-steel-color);
+}
+
+.border-steel-100 {
+  border-color: var(--pf-steel-color-100);
+}
+
+.border-steel-200 {
+  border-color: var(--pf-steel-color-200);
+}
+
+.border-steel-300 {
+  border-color: var(--pf-steel-color-300);
+}
+
+.border-steel-400 {
+  border-color: var(--pf-steel-color-400);
+}
+
+.border-steel-500 {
+  border-color: var(--pf-steel-color-500);
+}
+
+.border-steel-600 {
+  border-color: var(--pf-steel-color-600);
+}
+
+.border-steel-700 {
+  border-color: var(--pf-steel-color-700);
+}
+
+.border-steel-800 {
+  border-color: var(--pf-steel-color-800);
+}
+
+.border-steel-900 {
+  border-color: var(--pf-steel-color-900);
+}
+
 .border-green {
   border-color: var(--pf-green-color);
 }

package/lib/index.d.ts

@@ -1,6 +1,8 @@
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
-import React$1, { ChangeEvent, MouseEventHandler } from 'react';
+import React$1, { ChangeEvent, MouseEventHandler, ReactElement } from 'react';
 import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor } from '@/types';
 import { AriaButtonProps } from '@react-types/button';
 import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
@@ -8,7 +10,6 @@ import { DateRange } from 'react-day-picker';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
 import { Props as Props$r } from 'react-select';
-import { Placement } from '@floating-ui/react-dom';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
 
@@ -1058,16 +1059,15 @@ type Props = {
 };
 declare const Card: React$1.FC<Props>;
 
-type PopperProps = {
-    children: React$1.ReactNode;
-    referenceElement: HTMLElement | null;
-    isOpen: boolean;
-    onClose: () => void;
+type FloatUIProps = {
+    children: [ReactElement, ReactElement];
     ariaLabel: string;
-    placement?: Placement;
-    offsetValue?: number;
+    floatingOptions?: UseFloatingOptions;
+    isOpen?: boolean;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };
-declare function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placement, offsetValue, }: PopperProps): react_jsx_runtime.JSX.Element | null;
+
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;
@@ -1076,4 +1076,4 @@ declare function Menu({ children }: MenuProps): react_jsx_runtime.JSX.Element;
 
 declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Popper, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -61,6 +61,15 @@
   --pf-gray-color-700: #2c2c2c;
   --pf-gray-color-800: #1f1f1f;
   --pf-gray-color-900: #141414;
+  --pf-steel-color-100: #f4f6f8;
+  --pf-steel-color-200: #d9dee5;
+  --pf-steel-color-300: #bcc3cd;
+  --pf-steel-color-400: #a0a9b5;
+  --pf-steel-color-500: #7c8594;
+  --pf-steel-color-600: #5f697a;
+  --pf-steel-color-700: #454e5e;
+  --pf-steel-color-800: #2d3444;
+  --pf-steel-color-900: #1b202c;
   --pf-green-color: #008a00;
   --pf-green-color-100: #d6ecd6;
   --pf-green-color-200: #99d099;
@@ -133,6 +142,16 @@
   --pf-gray-color-700: #828588;
   --pf-gray-color-800: #797979;
   --pf-gray-color-900: #585858;
+  --pf-steel-color: #3e4751;
+  --pf-steel-color-100: #9aa1b1;
+  --pf-steel-color-200: #7c8594;
+  --pf-steel-color-300: #6a717e;
+  --pf-steel-color-400: #545c67;
+  --pf-steel-color-500: #3e4751;
+  --pf-steel-color-600: #2d3444;
+  --pf-steel-color-700: #232a3a;
+  --pf-steel-color-800: #1a202f;
+  --pf-steel-color-900: #11161f;
   --pf-green-color: #199d19;
   --pf-green-color-100: #98ff98;
   --pf-green-color-200: #76ff76;
@@ -1672,25 +1691,24 @@ form {
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
-  --pf-popper-background-color: var(--pf-white-color);
-  --pf-popper-border-color: var(--pf-gray-color-900);
-  --pf-popper-border-radius: var(--pf-rounded);
-  --pf-popper-padding: var(--pf-padding-2);
+  --pf-floatui-background-color: var(--pf-white-color);
+  --pf-floatui-border-color: var(--pf-gray-color-900);
+  --pf-floatui-border-radius: var(--pf-rounded);
 }
 
 :root [data-theme=dark] {
-  --pf-popper-background-color: var(--pf-primary-color-600);
-  --pf-popper-border-color: var(--pf-gray-color);
+  --pf-floatui-background-color: var(--pf-primary-color-600);
+  --pf-floatui-border-color: var(--pf-gray-color);
 }
 
-.popper-container {
+.floatui-container {
   z-index: 99;
 }
 
-.popper-content {
-  border-radius: var(--pf-popper-border-radius);
-  border: 1px solid var(--pf-popper-border-color);
-  background: var(--pf-popper-background-color);
+.floatui-content {
+  border-radius: var(--pf-floatui-border-radius);
+  border: 1px solid var(--pf-floatui-border-color);
+  background: var(--pf-floatui-background-color);
 }
 
 .rdp {
@@ -2764,6 +2782,86 @@ p,
   background-color: var(--pf-gray-color-900);
 }
 
+.color-steel {
+  color: var(--pf-steel-color);
+}
+
+.bg-steel {
+  background-color: var(--pf-steel-color);
+}
+
+.color-steel-100 {
+  color: var(--pf-steel-color-100);
+}
+
+.bg-steel-100 {
+  background-color: var(--pf-steel-color-100);
+}
+
+.color-steel-200 {
+  color: var(--pf-steel-color-200);
+}
+
+.bg-steel-200 {
+  background-color: var(--pf-steel-color-200);
+}
+
+.color-steel-300 {
+  color: var(--pf-steel-color-300);
+}
+
+.bg-steel-300 {
+  background-color: var(--pf-steel-color-300);
+}
+
+.color-steel-400 {
+  color: var(--pf-steel-color-400);
+}
+
+.bg-steel-400 {
+  background-color: var(--pf-steel-color-400);
+}
+
+.color-steel-500 {
+  color: var(--pf-steel-color-500);
+}
+
+.bg-steel-500 {
+  background-color: var(--pf-steel-color-500);
+}
+
+.color-steel-600 {
+  color: var(--pf-steel-color-600);
+}
+
+.bg-steel-600 {
+  background-color: var(--pf-steel-color-600);
+}
+
+.color-steel-700 {
+  color: var(--pf-steel-color-700);
+}
+
+.bg-steel-700 {
+  background-color: var(--pf-steel-color-700);
+}
+
+.color-steel-800 {
+  color: var(--pf-steel-color-800);
+}
+
+.bg-steel-800 {
+  background-color: var(--pf-steel-color-800);
+}
+
+.color-steel-900 {
+  color: var(--pf-steel-color-900);
+}
+
+.bg-steel-900 {
+  background-color: var(--pf-steel-color-900);
+}
+
 .color-green {
   color: var(--pf-green-color);
 }
@@ -3334,6 +3432,46 @@ p,
   border-color: var(--pf-gray-color-900);
 }
 
+.border-steel {
+  border-color: var(--pf-steel-color);
+}
+
+.border-steel-100 {
+  border-color: var(--pf-steel-color-100);
+}
+
+.border-steel-200 {
+  border-color: var(--pf-steel-color-200);
+}
+
+.border-steel-300 {
+  border-color: var(--pf-steel-color-300);
+}
+
+.border-steel-400 {
+  border-color: var(--pf-steel-color-400);
+}
+
+.border-steel-500 {
+  border-color: var(--pf-steel-color-500);
+}
+
+.border-steel-600 {
+  border-color: var(--pf-steel-color-600);
+}
+
+.border-steel-700 {
+  border-color: var(--pf-steel-color-700);
+}
+
+.border-steel-800 {
+  border-color: var(--pf-steel-color-800);
+}
+
+.border-steel-900 {
+  border-color: var(--pf-steel-color-900);
+}
+
 .border-green {
   border-color: var(--pf-green-color);
 }