@povio/ui 2.1.21 → 2.2.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.
- package/dist/Accordion.js +32 -0
- package/dist/AccordionItem.js +62 -0
- package/dist/Alert.js +1 -1
- package/dist/ArrowDropDown.js +1 -1
- package/dist/ArrowDropUp.js +1 -1
- package/dist/ArrowLeft.js +1 -1
- package/dist/ArrowRight.js +1 -1
- package/dist/BottomSheet.js +1 -1
- package/dist/Breadcrumbs.js +111 -0
- package/dist/Button.js +1 -1
- package/dist/ButtonContent.js +1 -1
- package/dist/Calendar.js +1 -1
- package/dist/Check.js +1 -1
- package/dist/CheckCircle.js +1 -1
- package/dist/CheckContent.js +1 -1
- package/dist/ChevronDown.js +1 -1
- package/dist/ChevronUp.js +1 -1
- package/dist/Clock.js +1 -1
- package/dist/ColorPickerDropdown.js +1 -1
- package/dist/DatePickerInput.js +1 -1
- package/dist/DateRangePicker.js +2 -2
- package/dist/DateTime.js +2 -4
- package/dist/{Drag.js → DragIndicator.js} +2 -2
- package/dist/File.js +1 -1
- package/dist/FileUpload.js +1 -1
- package/dist/Home.js +13 -0
- package/dist/Info.js +2 -2
- package/dist/InputContent.js +1 -1
- package/dist/InputUploadContent.js +1 -1
- package/dist/Menu.js +1 -1
- package/dist/MenuDesktop.js +1 -1
- package/dist/MenuItem.js +1 -1
- package/dist/MenuMobile.js +2 -2
- package/dist/MenuPopover.js +2 -2
- package/dist/NumberInput.js +1 -1
- package/dist/PasswordInput.js +3 -3
- package/dist/Segment.js +1 -1
- package/dist/SelectDesktop.js +1 -1
- package/dist/SelectInput.js +1 -1
- package/dist/SelectListBoxItem.js +2 -2
- package/dist/SelectListBoxItemSelectAll.js +1 -1
- package/dist/SelectListBoxLoadingItem.js +1 -1
- package/dist/SelectMobile.js +1 -1
- package/dist/Stepper.js +32 -0
- package/dist/StepperItem.js +52 -0
- package/dist/StepperSeparator.js +10 -0
- package/dist/Table.js +2 -2
- package/dist/TextArea.js +1 -1
- package/dist/TextInput.js +1 -1
- package/dist/TimePickerInput.js +1 -1
- package/dist/Toast.js +1 -1
- package/dist/Tooltip.js +2 -2
- package/dist/Typography.js +1 -1
- package/dist/Visibility.js +13 -0
- package/dist/VisibilityOff.js +13 -0
- package/dist/YearPicker.js +1 -1
- package/dist/accordion.cva.js +97 -0
- package/dist/assets/icons/{ViewOff.d.ts → Account.d.ts} +1 -1
- package/dist/assets/icons/Board.d.ts +2 -0
- package/dist/assets/icons/DragIndicator.d.ts +2 -0
- package/dist/assets/icons/{Drag.d.ts → Edit.d.ts} +1 -1
- package/dist/assets/icons/Emoji.d.ts +2 -0
- package/dist/assets/icons/{View.d.ts → Grid.d.ts} +1 -1
- package/dist/assets/icons/Home.d.ts +2 -0
- package/dist/assets/icons/Image.d.ts +2 -0
- package/dist/assets/icons/ImageError.d.ts +2 -0
- package/dist/assets/icons/Loader.d.ts +2 -0
- package/dist/assets/icons/MapPin.d.ts +2 -0
- package/dist/assets/icons/Minus.d.ts +2 -0
- package/dist/assets/icons/MoreHoriz.d.ts +2 -0
- package/dist/assets/icons/Pause.d.ts +2 -0
- package/dist/assets/icons/Plus.d.ts +2 -0
- package/dist/assets/icons/Retry.d.ts +2 -0
- package/dist/assets/icons/Search.d.ts +2 -0
- package/dist/assets/icons/Share.d.ts +2 -0
- package/dist/assets/icons/Slash.d.ts +2 -0
- package/dist/assets/icons/Trash.d.ts +2 -0
- package/dist/assets/icons/User.d.ts +2 -0
- package/dist/assets/icons/Visibility.d.ts +2 -0
- package/dist/assets/icons/VisibilityOff.d.ts +2 -0
- package/dist/assets/icons/WarningOutlined.d.ts +2 -0
- package/dist/breadcrumbs.cva.js +22 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +15 -0
- package/dist/components/Breadcrumbs/breadcrumbs.cva.d.ts +19 -0
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/inputs/File/fileUpload.types.d.ts +1 -1
- package/dist/components/inputs/Inputs/InputItem.d.ts +1 -1
- package/dist/components/inputs/shared/input.cva.d.ts +2 -2
- package/dist/components/inputs/shared/label.cva.d.ts +2 -2
- package/dist/components/navigation/Accordion/Accordion.d.ts +3 -0
- package/dist/components/navigation/Accordion/AccordionItem.d.ts +2 -0
- package/dist/components/navigation/Accordion/accordion.cva.d.ts +45 -0
- package/dist/components/navigation/Accordion/accordion.types.d.ts +52 -0
- package/dist/components/navigation/Stepper/Stepper.d.ts +2 -0
- package/dist/components/navigation/Stepper/StepperItem.d.ts +2 -0
- package/dist/components/navigation/Stepper/StepperSeparator.d.ts +5 -0
- package/dist/components/navigation/Stepper/stepper.cva.d.ts +37 -0
- package/dist/components/navigation/Stepper/stepper.types.d.ts +41 -0
- package/dist/config/i18n.d.ts +0 -15
- package/dist/config/uiStyle.context.d.ts +31 -0
- package/dist/index.d.ts +13 -7
- package/dist/index.js +11 -9
- package/dist/input.cva.js +30 -30
- package/dist/label.cva.js +1 -1
- package/dist/menu.cva.js +2 -3
- package/dist/pillButton.cva.js +1 -1
- package/dist/radio.cva.js +0 -10
- package/dist/stepper.cva.js +93 -0
- package/dist/tag.cva.js +1 -1
- package/dist/tooltip.cva.js +1 -1
- package/dist/translation.js +0 -8
- package/dist/translation2.js +0 -7
- package/dist/types/error-handling.d.ts +6 -0
- package/dist/types/react-query.d.ts +1 -1
- package/dist/useSelectItems.js +1 -1
- package/package.json +2 -3
- package/dist/AclGuard.js +0 -12
- package/dist/AuthGuard.js +0 -22
- package/dist/Can.js +0 -13
- package/dist/View.js +0 -13
- package/dist/ViewOff.js +0 -13
- package/dist/ability.context.js +0 -35
- package/dist/auth.context.js +0 -37
- package/dist/auth.d.ts +0 -6
- package/dist/auth.js +0 -6
- package/dist/error-handling.js +0 -99
- package/dist/rest-interceptor.js +0 -22
- package/dist/utils/vendor/acl/AclGuard.d.ts +0 -8
- package/dist/utils/vendor/acl/Can.d.ts +0 -9
- package/dist/utils/vendor/acl/ability.context.d.ts +0 -15
- package/dist/utils/vendor/acl/appAbility.types.d.ts +0 -3
- package/dist/utils/vendor/auth/AuthGuard.d.ts +0 -6
- package/dist/utils/vendor/auth/auth.context.d.ts +0 -22
- package/dist/utils/vendor/error-handling.d.ts +0 -21
- package/dist/utils/vendor/rest-client.types.d.ts +0 -23
- package/dist/utils/vendor/rest-interceptor.d.ts +0 -8
package/dist/Segment.js
CHANGED
|
@@ -4,8 +4,8 @@ import { segmentCva } from "./segment.cva.js";
|
|
|
4
4
|
import { SegmentItem } from "./SegmentItem.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { clsx } from "clsx";
|
|
7
|
-
import { ToggleButtonGroup } from "react-aria-components";
|
|
8
7
|
import { Fragment as Fragment$1, useMemo, useRef } from "react";
|
|
8
|
+
import { ToggleButtonGroup } from "react-aria-components";
|
|
9
9
|
import { useToggleButtonGroup } from "react-aria";
|
|
10
10
|
import { mergeRefs } from "@react-aria/utils";
|
|
11
11
|
import { Controller } from "react-hook-form";
|
package/dist/SelectDesktop.js
CHANGED
|
@@ -6,8 +6,8 @@ import { SelectInput } from "./SelectInput.js";
|
|
|
6
6
|
import { SelectListBox } from "./SelectListBox.js";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { clsx } from "clsx";
|
|
9
|
-
import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
|
|
10
9
|
import { Fragment as Fragment$1, useMemo, useRef } from "react";
|
|
10
|
+
import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
|
|
11
11
|
import { useLabel } from "react-aria";
|
|
12
12
|
import { mergeRefs } from "@react-aria/utils";
|
|
13
13
|
import useMeasure from "react-use-measure";
|
package/dist/SelectInput.js
CHANGED
|
@@ -9,8 +9,8 @@ import { SelectInputTags } from "./SelectInputTags.js";
|
|
|
9
9
|
import { SelectContext } from "./select.context.js";
|
|
10
10
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { clsx } from "clsx";
|
|
12
|
-
import { Button, ComboBoxStateContext, Input } from "react-aria-components";
|
|
13
12
|
import { use, useMemo, useState } from "react";
|
|
13
|
+
import { Button, ComboBoxStateContext, Input } from "react-aria-components";
|
|
14
14
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
15
15
|
import useMeasure from "react-use-measure";
|
|
16
16
|
import { useTranslation } from "react-i18next";
|
|
@@ -3,8 +3,8 @@ import { ns } from "./i18n.js";
|
|
|
3
3
|
import { SelectContext } from "./select.context.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { clsx } from "clsx";
|
|
6
|
-
import { ListBoxItem } from "react-aria-components";
|
|
7
6
|
import { useMemo, useRef } from "react";
|
|
7
|
+
import { ListBoxItem } from "react-aria-components";
|
|
8
8
|
import { useTranslation } from "react-i18next";
|
|
9
9
|
const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
|
|
10
10
|
const ref = useRef(null);
|
|
@@ -44,5 +44,5 @@ const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label,
|
|
|
44
44
|
]
|
|
45
45
|
});
|
|
46
46
|
};
|
|
47
|
-
const selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
|
|
47
|
+
const selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
|
|
48
48
|
export { SelectListBoxItem, selectListBoxItemClass };
|
|
@@ -3,8 +3,8 @@ import { ns } from "./i18n.js";
|
|
|
3
3
|
import { SelectContext } from "./select.context.js";
|
|
4
4
|
import { selectListBoxItemClass } from "./SelectListBoxItem.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { ListBoxItem } from "react-aria-components";
|
|
7
6
|
import { useRef } from "react";
|
|
7
|
+
import { ListBoxItem } from "react-aria-components";
|
|
8
8
|
import { useTranslation } from "react-i18next";
|
|
9
9
|
const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
|
|
10
10
|
const ref = useRef(null);
|
|
@@ -4,8 +4,8 @@ import { SelectContext } from "./select.context.js";
|
|
|
4
4
|
import { selectListBoxItemClass } from "./SelectListBoxItem.js";
|
|
5
5
|
import { useIntersectionObserver } from "./useIntersectionObserver.js";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { ListBoxItem } from "react-aria-components";
|
|
8
7
|
import { useCallback } from "react";
|
|
8
|
+
import { ListBoxItem } from "react-aria-components";
|
|
9
9
|
import { useTranslation } from "react-i18next";
|
|
10
10
|
const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
|
|
11
11
|
const { t } = useTranslation("ui");
|
package/dist/SelectMobile.js
CHANGED
|
@@ -9,8 +9,8 @@ import { TextInput } from "./TextInput.js";
|
|
|
9
9
|
import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { clsx } from "clsx";
|
|
12
|
-
import { DialogTrigger } from "react-aria-components";
|
|
13
12
|
import { useRef } from "react";
|
|
13
|
+
import { DialogTrigger } from "react-aria-components";
|
|
14
14
|
import { useLabel } from "react-aria";
|
|
15
15
|
const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur,...props }) => {
|
|
16
16
|
const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
|
package/dist/Stepper.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { UIStyle } from "./uiStyle.context.js";
|
|
2
|
+
import { stepperCva } from "./stepper.cva.js";
|
|
3
|
+
import { StepperItem } from "./StepperItem.js";
|
|
4
|
+
import { StepperSeparator } from "./StepperSeparator.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Fragment as Fragment$1 } from "react";
|
|
7
|
+
const Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
|
|
8
|
+
return /* @__PURE__ */ jsx("div", {
|
|
9
|
+
className: (UIStyle.useConfig()?.stepper?.cva ?? stepperCva)({
|
|
10
|
+
orientation,
|
|
11
|
+
className
|
|
12
|
+
}),
|
|
13
|
+
role: "group",
|
|
14
|
+
"aria-label": "Progress",
|
|
15
|
+
children: steps.map((step, index) => {
|
|
16
|
+
const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
|
|
17
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
|
|
18
|
+
step,
|
|
19
|
+
stepNumber: index + 1,
|
|
20
|
+
status,
|
|
21
|
+
contentOrientation,
|
|
22
|
+
iconsOnly,
|
|
23
|
+
titlesOnly,
|
|
24
|
+
onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
|
|
25
|
+
}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
|
|
26
|
+
orientation,
|
|
27
|
+
contentOrientation
|
|
28
|
+
})] }, step.id);
|
|
29
|
+
})
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
export { Stepper };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { CheckIcon } from "./Check.js";
|
|
2
|
+
import { UIStyle } from "./uiStyle.context.js";
|
|
3
|
+
import { Typography } from "./Typography.js";
|
|
4
|
+
import { stepperIconCva, stepperItemCva, stepperNumberCva, stepperSubtextCva, stepperTitleCva } from "./stepper.cva.js";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { clsx } from "clsx";
|
|
7
|
+
import { Button } from "react-aria-components";
|
|
8
|
+
const StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress }) => {
|
|
9
|
+
const uiStyle = UIStyle.useConfig();
|
|
10
|
+
const stepperItemCva$1 = uiStyle?.stepper?.itemCva ?? stepperItemCva;
|
|
11
|
+
const stepperIconCva$1 = uiStyle?.stepper?.iconCva ?? stepperIconCva;
|
|
12
|
+
const stepperNumberCva$1 = uiStyle?.stepper?.numberCva ?? stepperNumberCva;
|
|
13
|
+
const stepperTitleCva$1 = uiStyle?.stepper?.titleCva ?? stepperTitleCva;
|
|
14
|
+
const stepperSubtextCva$1 = uiStyle?.stepper?.subtextCva ?? stepperSubtextCva;
|
|
15
|
+
const showTitle = !iconsOnly;
|
|
16
|
+
const showSubtext = !iconsOnly && !titlesOnly && !!step.subtext;
|
|
17
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
|
|
18
|
+
className: stepperIconCva$1({ status }),
|
|
19
|
+
children: status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
|
|
20
|
+
className: stepperNumberCva$1({ status }),
|
|
21
|
+
variant: "prominent-1",
|
|
22
|
+
size: "label-3",
|
|
23
|
+
children: stepNumber
|
|
24
|
+
})
|
|
25
|
+
}), showTitle && /* @__PURE__ */ jsxs("div", {
|
|
26
|
+
className: "flex flex-col gap-stepper-gap-text-to-subtext",
|
|
27
|
+
children: [/* @__PURE__ */ jsx(Typography, {
|
|
28
|
+
className: stepperTitleCva$1({ status }),
|
|
29
|
+
size: "label-2",
|
|
30
|
+
variant: "default",
|
|
31
|
+
children: step.title
|
|
32
|
+
}), showSubtext && /* @__PURE__ */ jsx(Typography, {
|
|
33
|
+
className: stepperSubtextCva$1({ status }),
|
|
34
|
+
size: "label-3",
|
|
35
|
+
variant: "default",
|
|
36
|
+
children: step.subtext
|
|
37
|
+
})]
|
|
38
|
+
})] });
|
|
39
|
+
const className = stepperItemCva$1({ contentOrientation });
|
|
40
|
+
if (onPress) return /* @__PURE__ */ jsx(Button, {
|
|
41
|
+
onPress,
|
|
42
|
+
className: clsx("group cursor-pointer", className),
|
|
43
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
44
|
+
children: content
|
|
45
|
+
});
|
|
46
|
+
return /* @__PURE__ */ jsx("div", {
|
|
47
|
+
className,
|
|
48
|
+
"aria-current": status === "active" ? "step" : void 0,
|
|
49
|
+
children: content
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
export { StepperItem };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { UIStyle } from "./uiStyle.context.js";
|
|
2
|
+
import { stepperSeparatorCva } from "./stepper.cva.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
const StepperSeparator = ({ orientation, contentOrientation }) => {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { className: (UIStyle.useConfig()?.stepper?.separatorCva ?? stepperSeparatorCva)({
|
|
6
|
+
orientation,
|
|
7
|
+
contentOrientation
|
|
8
|
+
}) });
|
|
9
|
+
};
|
|
10
|
+
export { StepperSeparator };
|
package/dist/Table.js
CHANGED
|
@@ -4,7 +4,7 @@ import { UIStyle } from "./uiStyle.context.js";
|
|
|
4
4
|
import { InlineIconButton } from "./InlineIconButton.js";
|
|
5
5
|
import { useIntersectionObserver } from "./useIntersectionObserver.js";
|
|
6
6
|
import { CellText } from "./CellText.js";
|
|
7
|
-
import {
|
|
7
|
+
import { DragIndicatorIcon } from "./DragIndicator.js";
|
|
8
8
|
import { HeaderText } from "./HeaderText.js";
|
|
9
9
|
import { useTableNav } from "./useTableNav.js";
|
|
10
10
|
import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
|
|
@@ -36,7 +36,7 @@ const RowDragHandleCell = ({ rowId }) => {
|
|
|
36
36
|
...listeners,
|
|
37
37
|
className: "cursor-move p-1",
|
|
38
38
|
label: "Drag handle",
|
|
39
|
-
icon:
|
|
39
|
+
icon: DragIndicatorIcon
|
|
40
40
|
});
|
|
41
41
|
};
|
|
42
42
|
var AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
|
package/dist/TextArea.js
CHANGED
|
@@ -7,8 +7,8 @@ import { FormField } from "./FormField.js";
|
|
|
7
7
|
import { TooltipWrapper } from "./TooltipWrapper.js";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { clsx } from "clsx";
|
|
10
|
-
import { TextArea } from "react-aria-components";
|
|
11
10
|
import { useRef } from "react";
|
|
11
|
+
import { TextArea } from "react-aria-components";
|
|
12
12
|
import { useTextField } from "react-aria";
|
|
13
13
|
import { mergeRefs } from "@react-aria/utils";
|
|
14
14
|
import { Controller } from "react-hook-form";
|
package/dist/TextInput.js
CHANGED
|
@@ -5,8 +5,8 @@ import { TooltipWrapper } from "./TooltipWrapper.js";
|
|
|
5
5
|
import { InputContent } from "./InputContent.js";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
|
-
import { Input } from "react-aria-components";
|
|
9
8
|
import { useRef } from "react";
|
|
9
|
+
import { Input } from "react-aria-components";
|
|
10
10
|
import { useFocusVisible, useTextField } from "react-aria";
|
|
11
11
|
import { mergeRefs } from "@react-aria/utils";
|
|
12
12
|
import { Controller } from "react-hook-form";
|
package/dist/TimePickerInput.js
CHANGED
|
@@ -8,8 +8,8 @@ import { InputClear } from "./InputClear.js";
|
|
|
8
8
|
import { TimeField } from "./TimeField.js";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
import { clsx } from "clsx";
|
|
11
|
-
import { Button } from "react-aria-components";
|
|
12
11
|
import { useMemo, useState } from "react";
|
|
12
|
+
import { Button } from "react-aria-components";
|
|
13
13
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
14
14
|
import useMeasure from "react-use-measure";
|
|
15
15
|
const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress,...props }) => {
|
package/dist/Toast.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Loader } from "./Loader.js";
|
|
2
1
|
import { UIStyle } from "./uiStyle.context.js";
|
|
3
2
|
import { Typography } from "./Typography.js";
|
|
3
|
+
import { Loader } from "./Loader.js";
|
|
4
4
|
import { Button } from "./Button.js";
|
|
5
5
|
import { statusIcon, statusSeparator } from "./status.cva.js";
|
|
6
6
|
import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { PointerHorizontalIcon } from "./PointerHorizontal.js";
|
|
2
2
|
import { PointerVerticalIcon } from "./PointerVertical.js";
|
|
3
3
|
import { UIStyle } from "./uiStyle.context.js";
|
|
4
|
-
import { Typography } from "./Typography.js";
|
|
5
4
|
import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
|
|
5
|
+
import { Typography } from "./Typography.js";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
|
|
8
7
|
import { Fragment as Fragment$1, useRef } from "react";
|
|
8
|
+
import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
|
|
9
9
|
import { useFocusable } from "react-aria";
|
|
10
10
|
var CustomTrigger = ({ children, className, tabIndex }) => {
|
|
11
11
|
const ref = useRef(null);
|
package/dist/Typography.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { typography } from "./typography.cva.js";
|
|
2
1
|
import { UIStyle } from "./uiStyle.context.js";
|
|
2
|
+
import { typography } from "./typography.cva.js";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
const Typography = ({ as = "p", className,...props }) => {
|
|
5
5
|
return /* @__PURE__ */ jsx(as, {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
const VisibilityIcon = (props) => /* @__PURE__ */ jsx("svg", {
|
|
3
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4
|
+
fill: "none",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
className: "fill-current",
|
|
7
|
+
...props,
|
|
8
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
9
|
+
fill: "currentColor",
|
|
10
|
+
d: "M12 5.02q3.102 0 5.66 1.667a12 12 0 0 1 4.04 4.399q.115.207.172.425a1.75 1.75 0 0 1 0 .894 1.8 1.8 0 0 1-.172.425 12 12 0 0 1-4.04 4.4q-2.558 1.666-5.66 1.666T6.34 17.23a12 12 0 0 1-4.04-4.4 1.751 1.751 0 0 1-.173-1.32q.057-.216.172-.424a12 12 0 0 1 4.041-4.4Q8.898 5.022 12 5.02m0 1.816q-2.626 0-4.823 1.383a9.1 9.1 0 0 0-3.36 3.73l-.003.009.004.009a9.1 9.1 0 0 0 3.359 3.73A8.88 8.88 0 0 0 12 17.081q2.627 0 4.823-1.384a9.1 9.1 0 0 0 3.359-3.73l.005-.009-.005-.009a9.1 9.1 0 0 0-3.358-3.73A8.88 8.88 0 0 0 12 6.836m0 .967q1.731 0 2.943 1.212t1.211 2.943-1.211 2.943T12 16.113t-2.943-1.212q-1.212-1.212-1.212-2.943t1.212-2.943T12 7.803m0 1.63q-1.051 0-1.789.737a2.44 2.44 0 0 0-.736 1.788q0 1.05.736 1.788.737.736 1.79.737 1.051 0 1.787-.737.737-.736.737-1.788t-.737-1.788A2.44 2.44 0 0 0 12 9.434"
|
|
11
|
+
})
|
|
12
|
+
});
|
|
13
|
+
export { VisibilityIcon };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
const VisibilityOffIcon = (props) => /* @__PURE__ */ jsx("svg", {
|
|
3
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4
|
+
fill: "none",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
className: "fill-current",
|
|
7
|
+
...props,
|
|
8
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
9
|
+
fill: "currentColor",
|
|
10
|
+
d: "M3.482 3.52q.383 0 .632.249l15.699 15.699a.88.88 0 0 1 .26.62.84.84 0 0 1-.26.643.86.86 0 0 1-.632.25.86.86 0 0 1-.633-.25l-3.232-3.185-.008-.009-.012.004a11 11 0 0 1-3.318.507q-3.088 0-5.646-1.671a12 12 0 0 1-4.034-4.39l-.054-.094a1.5 1.5 0 0 1-.117-.306 1.7 1.7 0 0 1-.057-.445q0-.23.045-.435.046-.204.16-.41l.24-.456q.375-.677.833-1.308A9.4 9.4 0 0 1 4.74 7.001l.016-.014-.015-.015-1.916-1.939a.88.88 0 0 1-.237-.643.88.88 0 0 1 .26-.621.86.86 0 0 1 .633-.25m2.526 4.744a10 10 0 0 0-1.227 1.319q-.556.717-.949 1.55l-.004.009.005.008a9.05 9.05 0 0 0 3.343 3.714 8.84 8.84 0 0 0 4.802 1.377q.462 0 .902-.058t.901-.127l.039-.005-.027-.028-.832-.877-.008-.01-.011.004q-.253.069-.483.103a3 3 0 0 1-.481.034q-1.724 0-2.93-1.206t-1.206-2.93q0-.252.034-.48.035-.231.104-.483l.003-.012-.01-.008-1.938-1.893-.013-.013zm5.97-4.029q3.157 0 5.772 1.66t3.998 4.47a1.7 1.7 0 0 1 .183.777q0 .205-.034.4a1.4 1.4 0 0 1-.125.376 9 9 0 0 1-1.026 1.729q-.457.604-.987 1.131l-.361.343a.75.75 0 0 1-.63.203.82.82 0 0 1-.587-.361 1 1 0 0 1-.193-.691.93.93 0 0 1 .306-.622q.556-.531 1.018-1.157.463-.624.81-1.343l.004-.008-.004-.01A9.05 9.05 0 0 0 16.78 7.42a8.83 8.83 0 0 0-4.801-1.376q-.44 0-.857.034a6 6 0 0 0-.833.127.98.98 0 0 1-.69-.112.93.93 0 0 1-.418-.543.85.85 0 0 1 .079-.7.78.78 0 0 1 .552-.406q.53-.114 1.071-.16.542-.048 1.096-.048m-.322 2.794a3.8 3.8 0 0 1 1.723.218 4.1 4.1 0 0 1 1.517.977q.667.666.976 1.516.271.744.235 1.523l-.017.223v.002a.76.76 0 0 1-.248.575.82.82 0 0 1-.586.236.78.78 0 0 1-.575-.236.78.78 0 0 1-.236-.57 2.3 2.3 0 0 0-.07-1.166 2.4 2.4 0 0 0-.583-.954 2.6 2.6 0 0 0-.953-.604 2.2 2.2 0 0 0-1.188-.095.76.76 0 0 1-.57-.247.82.82 0 0 1-.238-.586q0-.34.236-.575a.78.78 0 0 1 .575-.237z"
|
|
11
|
+
})
|
|
12
|
+
});
|
|
13
|
+
export { VisibilityOffIcon };
|
package/dist/YearPicker.js
CHANGED
|
@@ -2,8 +2,8 @@ import { Typography } from "./Typography.js";
|
|
|
2
2
|
import { useScrollableListBox } from "./useScrollableListBox.js";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { clsx } from "clsx";
|
|
5
|
-
import { ListBox, ListBoxItem } from "react-aria-components";
|
|
6
5
|
import { useMemo } from "react";
|
|
6
|
+
import { ListBox, ListBoxItem } from "react-aria-components";
|
|
7
7
|
import { today } from "@internationalized/date";
|
|
8
8
|
import { useDateFormatter } from "@react-aria/i18n";
|
|
9
9
|
const YearPicker = ({ state, onSelectionChange }) => {
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const accordionCva = cva("flex w-full flex-col", {
|
|
3
|
+
variants: {
|
|
4
|
+
variant: {
|
|
5
|
+
filled: "gap-1",
|
|
6
|
+
outlined: ""
|
|
7
|
+
},
|
|
8
|
+
singleItem: {
|
|
9
|
+
true: "",
|
|
10
|
+
false: ""
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
variant: "filled",
|
|
15
|
+
singleItem: false
|
|
16
|
+
},
|
|
17
|
+
compoundVariants: [{
|
|
18
|
+
variant: "outlined",
|
|
19
|
+
singleItem: false,
|
|
20
|
+
className: "rounded-global-rounding-s border border-elevation-outline-default-1"
|
|
21
|
+
}]
|
|
22
|
+
});
|
|
23
|
+
const accordionItemCva = cva("flex w-full flex-col", {
|
|
24
|
+
variants: {
|
|
25
|
+
variant: {
|
|
26
|
+
filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
|
|
27
|
+
outlined: ""
|
|
28
|
+
},
|
|
29
|
+
singleItem: {
|
|
30
|
+
true: "",
|
|
31
|
+
false: ""
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
variant: "filled",
|
|
36
|
+
singleItem: false
|
|
37
|
+
},
|
|
38
|
+
compoundVariants: [{
|
|
39
|
+
singleItem: true,
|
|
40
|
+
variant: "outlined",
|
|
41
|
+
className: "border-elevation-outline-default-1 border-b"
|
|
42
|
+
}, {
|
|
43
|
+
singleItem: false,
|
|
44
|
+
variant: "outlined",
|
|
45
|
+
className: "not-last:border-elevation-outline-default-1 not-last:border-b"
|
|
46
|
+
}]
|
|
47
|
+
});
|
|
48
|
+
const accordionTriggerCva = cva([
|
|
49
|
+
"group flex w-full items-center gap-accordion-gap-content-to-arrow",
|
|
50
|
+
"px-accordion-side-accordion py-accordion-height-accordion",
|
|
51
|
+
"outline-none focus-visible:ring-2 focus-visible:ring-interactive-contained-primary-focus"
|
|
52
|
+
], {
|
|
53
|
+
variants: {
|
|
54
|
+
variant: {
|
|
55
|
+
outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2",
|
|
56
|
+
filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3"
|
|
57
|
+
},
|
|
58
|
+
actionPosition: {
|
|
59
|
+
left: "flex-row-reverse",
|
|
60
|
+
right: "flex-row"
|
|
61
|
+
},
|
|
62
|
+
disabled: { true: "opacity-50" }
|
|
63
|
+
},
|
|
64
|
+
defaultVariants: {
|
|
65
|
+
variant: "filled",
|
|
66
|
+
actionPosition: "right"
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
const accordionHeadingCva = cva("flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow", {
|
|
70
|
+
variants: {},
|
|
71
|
+
defaultVariants: {}
|
|
72
|
+
});
|
|
73
|
+
const accordionHeadingTitleCva = cva("flex-1 text-left text-text-default-1", {
|
|
74
|
+
variants: {},
|
|
75
|
+
defaultVariants: {}
|
|
76
|
+
});
|
|
77
|
+
const accordionHeadingSubtitleCva = cva("flex-1 text-left text-text-default-2", {
|
|
78
|
+
variants: {},
|
|
79
|
+
defaultVariants: {}
|
|
80
|
+
});
|
|
81
|
+
const accordionChevronCva = cva("size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200", {
|
|
82
|
+
variants: { isExpanded: {
|
|
83
|
+
true: "rotate-180",
|
|
84
|
+
false: "rotate-0"
|
|
85
|
+
} },
|
|
86
|
+
defaultVariants: { isExpanded: false }
|
|
87
|
+
});
|
|
88
|
+
const accordionIconCva = cva("size-6 shrink-0 text-text-default-3", {
|
|
89
|
+
variants: {},
|
|
90
|
+
defaultVariants: {}
|
|
91
|
+
});
|
|
92
|
+
const accordionPanelCva = cva("", { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } });
|
|
93
|
+
const accordionPanelContentCva = cva("py-accordion-height-content", {
|
|
94
|
+
variants: {},
|
|
95
|
+
defaultVariants: {}
|
|
96
|
+
});
|
|
97
|
+
export { accordionChevronCva, accordionCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { SVGProps } from 'react';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const AccountIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { SVGProps } from 'react';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const EditIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { SVGProps } from 'react';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const GridIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const breadcrumbsCva = cva(["flex items-center gap-breadcrumbs-gap-segment-to-segment"]);
|
|
3
|
+
const breadcrumbSegment = cva(["flex items-center gap-breadcrumbs-gap-segment-to-segment"]);
|
|
4
|
+
const breadcrumbChevron = cva(["size-6 shrink-0 text-interactive-text-secondary-idle"]);
|
|
5
|
+
const breadcrumbIcon = cva(["size-4 shrink-0"]);
|
|
6
|
+
const breadcrumbItem = cva(["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-label-3 no-underline"], {
|
|
7
|
+
variants: {
|
|
8
|
+
isCurrent: {
|
|
9
|
+
true: "text-interactive-text-primary-idle",
|
|
10
|
+
false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
|
|
11
|
+
},
|
|
12
|
+
isEllipsis: {
|
|
13
|
+
true: "hover:text-interactive-text-primary-hover!",
|
|
14
|
+
false: ""
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
isCurrent: false,
|
|
19
|
+
isEllipsis: false
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
export { breadcrumbChevron, breadcrumbIcon, breadcrumbItem, breadcrumbSegment, breadcrumbsCva };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC, SVGProps } from 'react';
|
|
2
|
+
import { Key } from 'react-aria-components';
|
|
3
|
+
export interface BreadcrumbItem {
|
|
4
|
+
id: Key;
|
|
5
|
+
label: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
icon?: FC<SVGProps<SVGSVGElement>>;
|
|
8
|
+
}
|
|
9
|
+
export interface BreadcrumbsProps {
|
|
10
|
+
items: BreadcrumbItem[];
|
|
11
|
+
className?: string;
|
|
12
|
+
onAction?: (id: Key) => void;
|
|
13
|
+
iconOnly?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const Breadcrumbs: ({ items, className, onAction, iconOnly }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const breadcrumbsCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
3
|
+
export interface BreadcrumbsVariantProps extends VariantProps<typeof breadcrumbsCva> {
|
|
4
|
+
}
|
|
5
|
+
export declare const breadcrumbSegment: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
6
|
+
export interface BreadcrumbSegmentVariantProps extends VariantProps<typeof breadcrumbSegment> {
|
|
7
|
+
}
|
|
8
|
+
export declare const breadcrumbChevron: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
9
|
+
export interface BreadcrumbChevronVariantProps extends VariantProps<typeof breadcrumbChevron> {
|
|
10
|
+
}
|
|
11
|
+
export declare const breadcrumbIcon: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
12
|
+
export interface BreadcrumbIconVariantProps extends VariantProps<typeof breadcrumbIcon> {
|
|
13
|
+
}
|
|
14
|
+
export declare const breadcrumbItem: (props?: ({
|
|
15
|
+
isCurrent?: boolean | null | undefined;
|
|
16
|
+
isEllipsis?: boolean | null | undefined;
|
|
17
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
18
|
+
export interface BreadcrumbItemVariantProps extends VariantProps<typeof breadcrumbItem> {
|
|
19
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { MenuItemProps } from 'react-aria-components';
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { Key, MenuItemProps } from 'react-aria-components';
|
|
3
3
|
import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
|
|
4
4
|
export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
|
|
5
5
|
label: string;
|
|
@@ -3,7 +3,7 @@ import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
|
|
|
3
3
|
import { FieldValues } from 'react-hook-form';
|
|
4
4
|
import { FormFieldProps } from '../FormField/FormField';
|
|
5
5
|
import { ControlProps } from '../shared/form.types';
|
|
6
|
-
import { ApplicationException, GeneralErrorCodes } from '../../../
|
|
6
|
+
import { ApplicationException, GeneralErrorCodes } from '../../../types/error-handling';
|
|
7
7
|
export interface FileUploadVariant {
|
|
8
8
|
variant?: "vertical" | "horizontal";
|
|
9
9
|
}
|
|
@@ -14,7 +14,7 @@ declare const componentRegistry: {
|
|
|
14
14
|
readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('../../../types/common').OmitDiscriminatedUnion<import('../Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
|
|
16
16
|
id: infer InferredKey extends import('react-aria').Key;
|
|
17
|
-
} ? InferredKey : never>, "onChange" | "value" | "
|
|
17
|
+
} ? InferredKey : never>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
|
|
18
18
|
id: infer InferredKey extends import('react-aria').Key;
|
|
19
19
|
} ? InferredKey : never> & {
|
|
20
20
|
query: Parameters<TQueryFn>[0] extends {
|