@parrot-co/parrot-ui 0.0.80 → 0.0.81
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/main.js +304 -120
- package/dist/main.js.map +1 -1
- package/dist/module.js +306 -123
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3167 -713
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/module.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {createStitches as $kF5Av$createStitches} from "@stitches/react";
|
|
2
2
|
import {gray as $kF5Av$gray, mauve as $kF5Av$mauve, slate as $kF5Av$slate, sage as $kF5Av$sage, olive as $kF5Av$olive, sand as $kF5Av$sand, tomato as $kF5Av$tomato, red as $kF5Av$red, crimson as $kF5Av$crimson, pink as $kF5Av$pink, plum as $kF5Av$plum, purple as $kF5Av$purple, violet as $kF5Av$violet, indigo as $kF5Av$indigo, blue as $kF5Av$blue, sky as $kF5Av$sky, mint as $kF5Av$mint, cyan as $kF5Av$cyan, teal as $kF5Av$teal, green as $kF5Av$green, grass as $kF5Av$grass, lime as $kF5Av$lime, yellow as $kF5Av$yellow, amber as $kF5Av$amber, orange as $kF5Av$orange, brown as $kF5Av$brown, bronze as $kF5Av$bronze, gold as $kF5Av$gold, grayA as $kF5Av$grayA, mauveA as $kF5Av$mauveA, slateA as $kF5Av$slateA, sageA as $kF5Av$sageA, oliveA as $kF5Av$oliveA, sandA as $kF5Av$sandA, tomatoA as $kF5Av$tomatoA, redA as $kF5Av$redA, crimsonA as $kF5Av$crimsonA, pinkA as $kF5Av$pinkA, plumA as $kF5Av$plumA, purpleA as $kF5Av$purpleA, violetA as $kF5Av$violetA, indigoA as $kF5Av$indigoA, blueA as $kF5Av$blueA, skyA as $kF5Av$skyA, mintA as $kF5Av$mintA, cyanA as $kF5Av$cyanA, tealA as $kF5Av$tealA, greenA as $kF5Av$greenA, grassA as $kF5Av$grassA, limeA as $kF5Av$limeA, yellowA as $kF5Av$yellowA, amberA as $kF5Av$amberA, orangeA as $kF5Av$orangeA, brownA as $kF5Av$brownA, bronzeA as $kF5Av$bronzeA, goldA as $kF5Av$goldA, whiteA as $kF5Av$whiteA, blackA as $kF5Av$blackA} from "@radix-ui/colors";
|
|
3
3
|
import {jsxs as $kF5Av$jsxs, jsx as $kF5Av$jsx, Fragment as $kF5Av$Fragment} from "react/jsx-runtime";
|
|
4
|
-
import $kF5Av$react, {createContext as $kF5Av$createContext, Children as $kF5Av$Children, useMemo as $kF5Av$useMemo, isValidElement as $kF5Av$isValidElement,
|
|
5
|
-
import {useTextField as $kF5Av$useTextField, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useToggleButton as $kF5Av$useToggleButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem,
|
|
6
|
-
import {HiChevronUp as $kF5Av$HiChevronUp, HiChevronDown as $kF5Av$HiChevronDown, HiSelector as $kF5Av$HiSelector, HiOutlineCalendar as $kF5Av$HiOutlineCalendar, HiChevronLeft as $kF5Av$HiChevronLeft, HiChevronRight as $kF5Av$HiChevronRight, HiOutlineDocumentAdd as $kF5Av$HiOutlineDocumentAdd, HiOutlineCheckCircle as $kF5Av$HiOutlineCheckCircle, HiOutlineTrash as $kF5Av$HiOutlineTrash, HiOutlineExclamationCircle as $kF5Av$HiOutlineExclamationCircle, HiOutlineRefresh as $kF5Av$HiOutlineRefresh, HiOutlinePaperClip as $kF5Av$HiOutlinePaperClip, HiCheck as $kF5Av$HiCheck, HiOutlineGlobe as $kF5Av$HiOutlineGlobe, HiOutlineCurrencyDollar as $kF5Av$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $kF5Av$HiOutlineGlobeAlt, HiOutlineArchive as $kF5Av$HiOutlineArchive, HiOutlineAnnotation as $kF5Av$HiOutlineAnnotation, HiOutlineFire as $kF5Av$HiOutlineFire, HiOutlineBadgeCheck as $kF5Av$HiOutlineBadgeCheck, HiOutlineSparkles as $kF5Av$HiOutlineSparkles, HiOutlineSpeakerphone as $kF5Av$HiOutlineSpeakerphone, HiOutlineCreditCard as $kF5Av$HiOutlineCreditCard, HiOutlineHeart as $kF5Av$HiOutlineHeart, HiOutlineLocationMarker as $kF5Av$HiOutlineLocationMarker, HiOutlineCursorClick as $kF5Av$HiOutlineCursorClick, HiOutlineLightningBolt as $kF5Av$HiOutlineLightningBolt, HiOutlineDocumentDownload as $kF5Av$HiOutlineDocumentDownload, HiOutlineTag as $kF5Av$HiOutlineTag, HiOutlineAtSymbol as $kF5Av$HiOutlineAtSymbol, HiOutlineUserCircle as $kF5Av$HiOutlineUserCircle, HiOutlineTerminal as $kF5Av$HiOutlineTerminal, HiOutlineMoon as $kF5Av$HiOutlineMoon, HiSortAscending as $kF5Av$HiSortAscending, HiSortDescending as $kF5Av$HiSortDescending} from "react-icons/hi";
|
|
4
|
+
import $kF5Av$react, {createContext as $kF5Av$createContext, Children as $kF5Av$Children, useMemo as $kF5Av$useMemo, isValidElement as $kF5Av$isValidElement, forwardRef as $kF5Av$forwardRef, useContext as $kF5Av$useContext, useRef as $kF5Av$useRef, useState as $kF5Av$useState, useEffect as $kF5Av$useEffect, cloneElement as $kF5Av$cloneElement, useCallback as $kF5Av$useCallback} from "react";
|
|
5
|
+
import {useTextField as $kF5Av$useTextField, useFocusRing as $kF5Av$useFocusRing, mergeProps as $kF5Av$mergeProps, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useToggleButton as $kF5Av$useToggleButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem, VisuallyHidden as $kF5Av$VisuallyHidden, useCheckboxGroup as $kF5Av$useCheckboxGroup, useRadio as $kF5Av$useRadio, useRadioGroup as $kF5Av$useRadioGroup, useSelect as $kF5Av$useSelect, useButton as $kF5Av$useButton, HiddenSelect as $kF5Av$HiddenSelect, useListBox as $kF5Av$useListBox, useOption as $kF5Av$useOption, useListBoxSection as $kF5Av$useListBoxSection, useSeparator as $kF5Av$useSeparator, usePopover as $kF5Av$usePopover, Overlay as $kF5Av$Overlay, useDatePicker as $kF5Av$useDatePicker, useDateField as $kF5Av$useDateField, useDateSegment as $kF5Av$useDateSegment, useCalendar as $kF5Av$useCalendar, useCalendarGrid as $kF5Av$useCalendarGrid, useCalendarCell as $kF5Av$useCalendarCell, useDrop as $kF5Av$useDrop, useProgressBar as $kF5Av$useProgressBar, useTabList as $kF5Av$useTabList, useTab as $kF5Av$useTab, useTabPanel as $kF5Av$useTabPanel, useHover as $kF5Av$useHover, usePress as $kF5Av$usePress, useSwitch as $kF5Av$useSwitch, useMenuTrigger as $kF5Av$useMenuTrigger, useMenu as $kF5Av$useMenu, useMenuSection as $kF5Av$useMenuSection, useMenuItem as $kF5Av$useMenuItem, useTable as $kF5Av$useTable, useTableRowGroup as $kF5Av$useTableRowGroup, useTableHeaderRow as $kF5Av$useTableHeaderRow, useTableColumnHeader as $kF5Av$useTableColumnHeader, useTableRow as $kF5Av$useTableRow, useTableCell as $kF5Av$useTableCell, useTableSelectionCheckbox as $kF5Av$useTableSelectionCheckbox, useTableSelectAllCheckbox as $kF5Av$useTableSelectAllCheckbox, useModalOverlay as $kF5Av$useModalOverlay, useDialog as $kF5Av$useDialog} from "react-aria";
|
|
6
|
+
import {HiChevronUp as $kF5Av$HiChevronUp, HiChevronDown as $kF5Av$HiChevronDown, HiSelector as $kF5Av$HiSelector, HiOutlineCalendar as $kF5Av$HiOutlineCalendar, HiChevronLeft as $kF5Av$HiChevronLeft, HiChevronRight as $kF5Av$HiChevronRight, HiOutlineDocumentAdd as $kF5Av$HiOutlineDocumentAdd, HiOutlineCheckCircle as $kF5Av$HiOutlineCheckCircle, HiOutlineTrash as $kF5Av$HiOutlineTrash, HiOutlineExclamationCircle as $kF5Av$HiOutlineExclamationCircle, HiOutlineRefresh as $kF5Av$HiOutlineRefresh, HiOutlinePaperClip as $kF5Av$HiOutlinePaperClip, HiCheck as $kF5Av$HiCheck, HiOutlineGlobe as $kF5Av$HiOutlineGlobe, HiOutlineCurrencyDollar as $kF5Av$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $kF5Av$HiOutlineGlobeAlt, HiOutlineArchive as $kF5Av$HiOutlineArchive, HiOutlineAnnotation as $kF5Av$HiOutlineAnnotation, HiOutlineFire as $kF5Av$HiOutlineFire, HiOutlineBadgeCheck as $kF5Av$HiOutlineBadgeCheck, HiOutlineSparkles as $kF5Av$HiOutlineSparkles, HiOutlineSpeakerphone as $kF5Av$HiOutlineSpeakerphone, HiOutlineCreditCard as $kF5Av$HiOutlineCreditCard, HiOutlineHeart as $kF5Av$HiOutlineHeart, HiOutlineLocationMarker as $kF5Av$HiOutlineLocationMarker, HiOutlineCursorClick as $kF5Av$HiOutlineCursorClick, HiOutlineLightningBolt as $kF5Av$HiOutlineLightningBolt, HiOutlineDocumentDownload as $kF5Av$HiOutlineDocumentDownload, HiOutlineTag as $kF5Av$HiOutlineTag, HiOutlineAtSymbol as $kF5Av$HiOutlineAtSymbol, HiOutlineUserCircle as $kF5Av$HiOutlineUserCircle, HiOutlineTerminal as $kF5Av$HiOutlineTerminal, HiOutlineMoon as $kF5Av$HiOutlineMoon, HiSortAscending as $kF5Av$HiSortAscending, HiSortDescending as $kF5Av$HiSortDescending, HiX as $kF5Av$HiX} from "react-icons/hi";
|
|
7
7
|
import {useNumberFieldState as $kF5Av$useNumberFieldState, useToggleState as $kF5Av$useToggleState, useCheckboxGroupState as $kF5Av$useCheckboxGroupState, useRadioGroupState as $kF5Av$useRadioGroupState, useSelectState as $kF5Av$useSelectState, Item as $kF5Av$Item, useListState as $kF5Av$useListState, useDatePickerState as $kF5Av$useDatePickerState, useDateFieldState as $kF5Av$useDateFieldState, useCalendarState as $kF5Av$useCalendarState, useTabListState as $kF5Av$useTabListState, useMenuTriggerState as $kF5Av$useMenuTriggerState, useTreeState as $kF5Av$useTreeState, useTableState as $kF5Av$useTableState, TableHeader as $kF5Av$TableHeader, TableBody as $kF5Av$TableBody, Column as $kF5Av$Column, Row as $kF5Av$Row, Cell as $kF5Av$Cell, useOverlayTriggerState as $kF5Av$useOverlayTriggerState} from "react-stately";
|
|
8
8
|
import {createCalendar as $kF5Av$createCalendar, endOfMonth as $kF5Av$endOfMonth, getWeeksInMonth as $kF5Av$getWeeksInMonth, isSameMonth as $kF5Av$isSameMonth, CalendarDate as $kF5Av$CalendarDate} from "@internationalized/date";
|
|
9
9
|
|
|
@@ -822,22 +822,28 @@ var $f09084fde7cc0470$export$2e2bcd8739ae039 = $f09084fde7cc0470$var$Column;
|
|
|
822
822
|
|
|
823
823
|
|
|
824
824
|
const $dc7f74b9d5fb40ad$export$719e80a44b5e9ad0 = (0, $9ade691eb9e41cfb$export$dbf350e5966cf602)({
|
|
825
|
+
"$$input-height": "24px",
|
|
825
826
|
boxSizing: "border-box",
|
|
826
827
|
fontFamily: "$sans",
|
|
827
828
|
lineHeight: "$base",
|
|
828
|
-
"
|
|
829
|
-
|
|
830
|
-
border: "1px solid $violet6",
|
|
831
|
-
background: "white"
|
|
832
|
-
},
|
|
833
|
-
"&:where(button):focus": {
|
|
829
|
+
minHeight: "$$input-height",
|
|
830
|
+
"&[data-focused=true]": {
|
|
834
831
|
boxShadow: "$focusRing",
|
|
835
832
|
border: "1px solid $violet6"
|
|
836
833
|
},
|
|
834
|
+
// "&:not(button):focus-within": {
|
|
835
|
+
// boxShadow: "$focusRing",
|
|
836
|
+
// border: "1px solid $violet6",
|
|
837
|
+
// background: "white",
|
|
838
|
+
// },
|
|
839
|
+
// "&:where(button):focus": {
|
|
840
|
+
// boxShadow: "$focusRing",
|
|
841
|
+
// border: "1px solid $violet6",
|
|
842
|
+
// },
|
|
837
843
|
defaultVariants: {
|
|
838
|
-
appearance: "filled",
|
|
839
844
|
size: "sm",
|
|
840
|
-
shape: "round"
|
|
845
|
+
shape: "round",
|
|
846
|
+
appearance: "outline"
|
|
841
847
|
},
|
|
842
848
|
variants: {
|
|
843
849
|
isDisabled: {
|
|
@@ -871,69 +877,33 @@ const $dc7f74b9d5fb40ad$export$719e80a44b5e9ad0 = (0, $9ade691eb9e41cfb$export$d
|
|
|
871
877
|
}
|
|
872
878
|
},
|
|
873
879
|
shape: {
|
|
874
|
-
round: {
|
|
880
|
+
round: {
|
|
881
|
+
borderRadius: "calc($$input-height / 4)"
|
|
882
|
+
},
|
|
875
883
|
sharp: {}
|
|
876
884
|
},
|
|
877
885
|
size: {
|
|
878
886
|
xs: {
|
|
879
|
-
height: 24,
|
|
880
887
|
fontSize: "$2"
|
|
881
888
|
},
|
|
882
889
|
sm: {
|
|
883
|
-
height:
|
|
890
|
+
"$$input-height": "32px",
|
|
884
891
|
fontSize: "$3"
|
|
885
892
|
},
|
|
886
893
|
md: {
|
|
887
|
-
height:
|
|
894
|
+
"$$input-height": "40px",
|
|
888
895
|
fontSize: "$3"
|
|
889
896
|
},
|
|
890
897
|
lg: {
|
|
891
|
-
height:
|
|
898
|
+
"$$input-height": "44px",
|
|
892
899
|
fontSize: "$4"
|
|
893
900
|
},
|
|
894
901
|
xl: {
|
|
895
|
-
height:
|
|
902
|
+
"$$input-height": "52px",
|
|
896
903
|
fontSize: "$5"
|
|
897
904
|
}
|
|
898
905
|
}
|
|
899
|
-
}
|
|
900
|
-
compoundVariants: [
|
|
901
|
-
{
|
|
902
|
-
size: "xs",
|
|
903
|
-
shape: "round",
|
|
904
|
-
css: {
|
|
905
|
-
borderRadius: 8
|
|
906
|
-
}
|
|
907
|
-
},
|
|
908
|
-
{
|
|
909
|
-
size: "sm",
|
|
910
|
-
shape: "round",
|
|
911
|
-
css: {
|
|
912
|
-
borderRadius: 7
|
|
913
|
-
}
|
|
914
|
-
},
|
|
915
|
-
{
|
|
916
|
-
size: "md",
|
|
917
|
-
shape: "round",
|
|
918
|
-
css: {
|
|
919
|
-
borderRadius: 8
|
|
920
|
-
}
|
|
921
|
-
},
|
|
922
|
-
{
|
|
923
|
-
size: "lg",
|
|
924
|
-
shape: "round",
|
|
925
|
-
css: {
|
|
926
|
-
borderRadius: 8
|
|
927
|
-
}
|
|
928
|
-
},
|
|
929
|
-
{
|
|
930
|
-
size: "xl",
|
|
931
|
-
shape: "round",
|
|
932
|
-
css: {
|
|
933
|
-
borderRadius: 8
|
|
934
|
-
}
|
|
935
|
-
}
|
|
936
|
-
]
|
|
906
|
+
}
|
|
937
907
|
});
|
|
938
908
|
|
|
939
909
|
|
|
@@ -1079,8 +1049,10 @@ function $22d93d8ad1e2d08d$export$ccdcc3b9d72a654(color, variant) {
|
|
|
1079
1049
|
background: `$${color}4`,
|
|
1080
1050
|
color: `$${color}11`,
|
|
1081
1051
|
fill: `$${color}11`,
|
|
1052
|
+
border: "none",
|
|
1082
1053
|
"&:focus": {
|
|
1083
|
-
boxShadow: $22d93d8ad1e2d08d$export$71074ab0ed740397(color)
|
|
1054
|
+
boxShadow: $22d93d8ad1e2d08d$export$71074ab0ed740397(color),
|
|
1055
|
+
border: `1.5px solid $${color}5`
|
|
1084
1056
|
}
|
|
1085
1057
|
}
|
|
1086
1058
|
};
|
|
@@ -1550,7 +1522,7 @@ const $aca95339810194aa$var$SpaceContext = /*#__PURE__*/ $kF5Av$createContext({
|
|
|
1550
1522
|
classNames: {},
|
|
1551
1523
|
compactItemWrapperAdjust: ""
|
|
1552
1524
|
});
|
|
1553
|
-
function $aca95339810194aa$
|
|
1525
|
+
function $aca95339810194aa$var$SpaceComponent({ children: children , compact: compact , gap: gap , ...props }, ref) {
|
|
1554
1526
|
const childrenCount = $kF5Av$Children.count(children);
|
|
1555
1527
|
const nodes = $kF5Av$useMemo(()=>{
|
|
1556
1528
|
return $kF5Av$Children.map(children, (child, index)=>{
|
|
@@ -1574,30 +1546,30 @@ function $aca95339810194aa$export$eef1e68107c58ef2({ children: children , compac
|
|
|
1574
1546
|
]);
|
|
1575
1547
|
const realGap = compact ? undefined : gap;
|
|
1576
1548
|
return /*#__PURE__*/ (0, $kF5Av$jsx)($aca95339810194aa$export$30d85e96e785900a, {
|
|
1549
|
+
ref: ref,
|
|
1577
1550
|
gap: realGap,
|
|
1578
1551
|
...props,
|
|
1579
1552
|
compact: compact,
|
|
1580
1553
|
children: nodes
|
|
1581
1554
|
});
|
|
1582
1555
|
}
|
|
1556
|
+
const $aca95339810194aa$export$eef1e68107c58ef2 = /*#__PURE__*/ $kF5Av$forwardRef($aca95339810194aa$var$SpaceComponent);
|
|
1583
1557
|
function $aca95339810194aa$export$450c36e0b0e62ccd() {
|
|
1584
1558
|
return $kF5Av$useContext($aca95339810194aa$var$SpaceContext);
|
|
1585
1559
|
}
|
|
1586
1560
|
|
|
1587
1561
|
|
|
1588
1562
|
|
|
1589
|
-
const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , className: className , ...props }, ref)=>{
|
|
1563
|
+
const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , className: className , inputRef: inputRef , ...props }, ref)=>{
|
|
1590
1564
|
const space = (0, $aca95339810194aa$export$450c36e0b0e62ccd)();
|
|
1591
|
-
const
|
|
1565
|
+
const internalInputRef = (0, $kF5Av$react).useRef(null);
|
|
1592
1566
|
const { labelProps: labelProps , inputProps: inputProps , errorMessageProps: errorMessageProps , descriptionProps: descriptionProps } = (0, $kF5Av$useTextField)({
|
|
1593
1567
|
...props,
|
|
1594
1568
|
inputElementType: "input",
|
|
1595
1569
|
label: label,
|
|
1596
1570
|
description: description,
|
|
1597
1571
|
isDisabled: isDisabled
|
|
1598
|
-
},
|
|
1599
|
-
//This is messy
|
|
1600
|
-
//TODO Fix how props are extracted for variants and html props
|
|
1572
|
+
}, internalInputRef);
|
|
1601
1573
|
const variantProps = {
|
|
1602
1574
|
appearance: appearance,
|
|
1603
1575
|
size: size,
|
|
@@ -1607,7 +1579,7 @@ const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
1607
1579
|
};
|
|
1608
1580
|
const hasAddOns = !!prepend || !!append;
|
|
1609
1581
|
function captureFocus() {
|
|
1610
|
-
|
|
1582
|
+
internalInputRef.current?.focus();
|
|
1611
1583
|
}
|
|
1612
1584
|
const commonProps = {
|
|
1613
1585
|
className: (0, $625847aeb8796968$export$a274e22fb40f762e)({
|
|
@@ -1616,6 +1588,7 @@ const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
1616
1588
|
...space.classNames
|
|
1617
1589
|
})
|
|
1618
1590
|
};
|
|
1591
|
+
const { isFocused: isFocused , focusProps: focusProps } = (0, $kF5Av$useFocusRing)();
|
|
1619
1592
|
return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
|
|
1620
1593
|
className: space.compactItemWrapperAdjust,
|
|
1621
1594
|
css: css,
|
|
@@ -1629,21 +1602,21 @@ const $61dde3060428563f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
1629
1602
|
children: label
|
|
1630
1603
|
}),
|
|
1631
1604
|
!hasAddOns && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $9158bbabd058e6d9$export$a195049fd73b3fe2), {
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
...inputProps
|
|
1605
|
+
"data-focused": isFocused,
|
|
1606
|
+
ref: (0, $625847aeb8796968$export$c9058316764c140e)(internalInputRef, inputRef),
|
|
1607
|
+
...(0, $kF5Av$mergeProps)(focusProps, commonProps, variantProps, inputProps)
|
|
1635
1608
|
}),
|
|
1636
1609
|
hasAddOns && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $9158bbabd058e6d9$export$479bffa770f4fc8b), {
|
|
1637
|
-
|
|
1610
|
+
"data-focused": isFocused,
|
|
1638
1611
|
onClick: captureFocus,
|
|
1639
1612
|
hasPrependComponent: !!prepend,
|
|
1640
|
-
...variantProps,
|
|
1613
|
+
...(0, $kF5Av$mergeProps)(focusProps, commonProps, variantProps),
|
|
1641
1614
|
children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $f8db34c11dd03189$export$2e2bcd8739ae039), {
|
|
1642
1615
|
append: append,
|
|
1643
1616
|
prepend: prepend,
|
|
1644
1617
|
children: /*#__PURE__*/ (0, $kF5Av$jsx)("input", {
|
|
1645
|
-
...inputProps,
|
|
1646
|
-
ref: inputRef
|
|
1618
|
+
...(0, $kF5Av$mergeProps)(focusProps, inputProps),
|
|
1619
|
+
ref: (0, $625847aeb8796968$export$c9058316764c140e)(inputRef, internalInputRef)
|
|
1647
1620
|
})
|
|
1648
1621
|
})
|
|
1649
1622
|
}),
|
|
@@ -1679,7 +1652,7 @@ $61dde3060428563f$export$f5b8910cec6cf069.displayName = "Input";
|
|
|
1679
1652
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1680
1653
|
|
|
1681
1654
|
const $6be0cf1a8e0dd120$export$303ef672e091d99 = (0, $9ade691eb9e41cfb$export$dbf350e5966cf602)((0, $22d93d8ad1e2d08d$export$5a7eb6284e7684f5), {
|
|
1682
|
-
"$$button-base-height": "
|
|
1655
|
+
"$$button-base-height": "18px",
|
|
1683
1656
|
display: "inline-flex",
|
|
1684
1657
|
flexWrap: "nowrap",
|
|
1685
1658
|
alignItems: "center",
|
|
@@ -1727,7 +1700,12 @@ const $6be0cf1a8e0dd120$export$303ef672e091d99 = (0, $9ade691eb9e41cfb$export$db
|
|
|
1727
1700
|
}
|
|
1728
1701
|
},
|
|
1729
1702
|
size: {
|
|
1703
|
+
"2xs": {
|
|
1704
|
+
px: 12,
|
|
1705
|
+
fontSize: "$2"
|
|
1706
|
+
},
|
|
1730
1707
|
xs: {
|
|
1708
|
+
"$$button-base-height": "28px",
|
|
1731
1709
|
px: 12,
|
|
1732
1710
|
fontSize: "$2"
|
|
1733
1711
|
},
|
|
@@ -2721,7 +2699,6 @@ $f7762930a14621d8$export$f8afaea2e9656b91.displayName = "RadioCard";
|
|
|
2721
2699
|
|
|
2722
2700
|
|
|
2723
2701
|
|
|
2724
|
-
|
|
2725
2702
|
const $49848f925ef854b6$export$5ff5fb60b45fffad = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("div", {
|
|
2726
2703
|
fontFamily: "$sans",
|
|
2727
2704
|
fontSize: "$3",
|
|
@@ -2763,7 +2740,8 @@ const $49848f925ef854b6$export$844bee7de236d7ec = (0, $9ade691eb9e41cfb$export$3
|
|
|
2763
2740
|
});
|
|
2764
2741
|
|
|
2765
2742
|
|
|
2766
|
-
|
|
2743
|
+
|
|
2744
|
+
function $e5cd8bc466d59863$var$AriaListBox(props) {
|
|
2767
2745
|
const internalState = (0, $kF5Av$useListState)(props);
|
|
2768
2746
|
const listRef = (0, $kF5Av$useRef)(null);
|
|
2769
2747
|
const state = props.state || internalState;
|
|
@@ -2781,7 +2759,7 @@ const $e5cd8bc466d59863$var$_ListBox = /*#__PURE__*/ (0, $kF5Av$react).forwardRe
|
|
|
2781
2759
|
overflow: "auto",
|
|
2782
2760
|
outline: "none"
|
|
2783
2761
|
},
|
|
2784
|
-
ref: (0, $625847aeb8796968$export$c9058316764c140e)(listRef
|
|
2762
|
+
ref: (0, $625847aeb8796968$export$c9058316764c140e)(listRef),
|
|
2785
2763
|
...listBoxProps,
|
|
2786
2764
|
children: [
|
|
2787
2765
|
...state.collection
|
|
@@ -2797,8 +2775,25 @@ const $e5cd8bc466d59863$var$_ListBox = /*#__PURE__*/ (0, $kF5Av$react).forwardRe
|
|
|
2797
2775
|
})
|
|
2798
2776
|
]
|
|
2799
2777
|
});
|
|
2800
|
-
}
|
|
2801
|
-
const $e5cd8bc466d59863$
|
|
2778
|
+
}
|
|
2779
|
+
const $e5cd8bc466d59863$export$41f133550aa26f48 = ({ labelKey: labelKey , valueKey: valueKey , renderOption: renderOption , ...props })=>{
|
|
2780
|
+
if (props.items) return /*#__PURE__*/ (0, $kF5Av$jsx)($e5cd8bc466d59863$var$AriaListBox, {
|
|
2781
|
+
...props,
|
|
2782
|
+
children: (item)=>{
|
|
2783
|
+
const label = item?.[labelKey || "label"];
|
|
2784
|
+
const value = item?.[valueKey || "value"];
|
|
2785
|
+
return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$Item), {
|
|
2786
|
+
textValue: value ?? label,
|
|
2787
|
+
children: renderOption ? renderOption(item) : label
|
|
2788
|
+
}, value);
|
|
2789
|
+
}
|
|
2790
|
+
});
|
|
2791
|
+
return /*#__PURE__*/ (0, $kF5Av$jsx)($e5cd8bc466d59863$var$AriaListBox, {
|
|
2792
|
+
...props
|
|
2793
|
+
});
|
|
2794
|
+
};
|
|
2795
|
+
$e5cd8bc466d59863$export$41f133550aa26f48.displayName = "ListBox";
|
|
2796
|
+
const $e5cd8bc466d59863$var$Option = (props)=>{
|
|
2802
2797
|
const { item: item , state: state } = props;
|
|
2803
2798
|
const optionRef = (0, $kF5Av$useRef)(null);
|
|
2804
2799
|
const { optionProps: optionProps , isSelected: isSelected , isDisabled: isDisabled , isFocused: isFocused , isPressed: isPressed } = (0, $kF5Av$useOption)({
|
|
@@ -2810,12 +2805,12 @@ const $e5cd8bc466d59863$var$_Option = (props, ref)=>{
|
|
|
2810
2805
|
"data-selected": isSelected,
|
|
2811
2806
|
"data-disabled": isDisabled,
|
|
2812
2807
|
"data-pressed": isPressed,
|
|
2813
|
-
ref:
|
|
2808
|
+
ref: optionRef,
|
|
2814
2809
|
...(0, $kF5Av$mergeProps)(focusProps, optionProps),
|
|
2815
2810
|
children: item.rendered
|
|
2816
2811
|
});
|
|
2817
2812
|
};
|
|
2818
|
-
const $e5cd8bc466d59863$var$
|
|
2813
|
+
const $e5cd8bc466d59863$var$ListSection = (props)=>{
|
|
2819
2814
|
const { section: section , state: state } = props;
|
|
2820
2815
|
const { itemProps: itemProps , headingProps: headingProps , groupProps: groupProps } = (0, $kF5Av$useListBoxSection)({
|
|
2821
2816
|
heading: section.rendered,
|
|
@@ -2827,7 +2822,6 @@ const $e5cd8bc466d59863$var$_ListSection = (props, ref)=>{
|
|
|
2827
2822
|
return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $kF5Av$Fragment), {
|
|
2828
2823
|
children: [
|
|
2829
2824
|
section.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $kF5Av$jsx)("li", {
|
|
2830
|
-
ref: ref,
|
|
2831
2825
|
...separatorProps
|
|
2832
2826
|
}),
|
|
2833
2827
|
/*#__PURE__*/ (0, $kF5Av$jsxs)((0, $49848f925ef854b6$export$844bee7de236d7ec), {
|
|
@@ -2853,24 +2847,6 @@ const $e5cd8bc466d59863$var$_ListSection = (props, ref)=>{
|
|
|
2853
2847
|
]
|
|
2854
2848
|
});
|
|
2855
2849
|
};
|
|
2856
|
-
const $e5cd8bc466d59863$export$41f133550aa26f48 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef((props, ref)=>{
|
|
2857
|
-
const { labelKey: labelKey = "label" , renderOption: renderOption } = props;
|
|
2858
|
-
if (!props.items) return /*#__PURE__*/ (0, $kF5Av$jsx)($e5cd8bc466d59863$var$_ListBox, {
|
|
2859
|
-
ref: ref,
|
|
2860
|
-
...props
|
|
2861
|
-
});
|
|
2862
|
-
return /*#__PURE__*/ (0, $kF5Av$jsx)($e5cd8bc466d59863$var$_ListBox, {
|
|
2863
|
-
ref: ref,
|
|
2864
|
-
...props,
|
|
2865
|
-
children: (item)=>/*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$Item), {
|
|
2866
|
-
children: renderOption ? renderOption?.(item) : item?.[labelKey]
|
|
2867
|
-
})
|
|
2868
|
-
});
|
|
2869
|
-
});
|
|
2870
|
-
$e5cd8bc466d59863$var$_ListBox.displayName = "ListBox";
|
|
2871
|
-
$e5cd8bc466d59863$export$41f133550aa26f48.displayName = "WrappedListBox";
|
|
2872
|
-
const $e5cd8bc466d59863$var$ListSection = /*#__PURE__*/ (0, $kF5Av$react).forwardRef($e5cd8bc466d59863$var$_ListSection);
|
|
2873
|
-
const $e5cd8bc466d59863$var$Option = /*#__PURE__*/ (0, $kF5Av$react).forwardRef($e5cd8bc466d59863$var$_Option);
|
|
2874
2850
|
|
|
2875
2851
|
|
|
2876
2852
|
|
|
@@ -2878,7 +2854,6 @@ const $e5cd8bc466d59863$var$Option = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(
|
|
|
2878
2854
|
|
|
2879
2855
|
|
|
2880
2856
|
const $8f062ce7b62fd0a2$export$3ac1e88a1c0b9f1 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("button", (0, $dc7f74b9d5fb40ad$export$719e80a44b5e9ad0), {
|
|
2881
|
-
all: "unset",
|
|
2882
2857
|
boxSizing: "border-box",
|
|
2883
2858
|
display: "inline-flex",
|
|
2884
2859
|
alignItems: "center",
|
|
@@ -2947,7 +2922,7 @@ $c4793c1ed42b26da$export$5b6b19405a83ff9d.displayName = "Popover";
|
|
|
2947
2922
|
|
|
2948
2923
|
|
|
2949
2924
|
|
|
2950
|
-
|
|
2925
|
+
function $604e914a624d5a0f$var$AriaSelect(props) {
|
|
2951
2926
|
const space = (0, $aca95339810194aa$export$450c36e0b0e62ccd)();
|
|
2952
2927
|
const { renderValue: renderValue , renderOption: renderOption , placeholder: placeholder = "Select an option" , appearance: appearance , size: size , css: css , labelKey: labelKey , label: label } = props;
|
|
2953
2928
|
const state = (0, $kF5Av$useSelectState)(props);
|
|
@@ -2956,13 +2931,16 @@ const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
2956
2931
|
const { buttonProps: buttonProps } = (0, $kF5Av$useButton)(triggerProps, selectRef);
|
|
2957
2932
|
const { focusProps: focusProps , isFocused: isFocused } = (0, $kF5Av$useFocusRing)();
|
|
2958
2933
|
const hasSelection = state.selectedItem != null;
|
|
2934
|
+
function renderSelectedValue() {
|
|
2935
|
+
if (renderValue) return renderValue(state.selectedItem.value);
|
|
2936
|
+
return (state.selectedItem?.value)?.[labelKey || "label"] ?? state?.selectedItem?.rendered;
|
|
2937
|
+
}
|
|
2959
2938
|
return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
|
|
2960
2939
|
className: space.compactItemWrapperAdjust,
|
|
2961
2940
|
stretchX: true,
|
|
2962
2941
|
css: css,
|
|
2963
2942
|
position: "relative",
|
|
2964
2943
|
gap: 2,
|
|
2965
|
-
ref: ref,
|
|
2966
2944
|
align: "start",
|
|
2967
2945
|
stack: true,
|
|
2968
2946
|
children: [
|
|
@@ -2992,7 +2970,7 @@ const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
2992
2970
|
...valueProps,
|
|
2993
2971
|
children: [
|
|
2994
2972
|
!hasSelection && placeholder,
|
|
2995
|
-
hasSelection &&
|
|
2973
|
+
hasSelection && renderSelectedValue()
|
|
2996
2974
|
]
|
|
2997
2975
|
}),
|
|
2998
2976
|
/*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiSelector), {})
|
|
@@ -3018,25 +2996,21 @@ const $604e914a624d5a0f$export$cd0225d99c675387 = /*#__PURE__*/ (0, $kF5Av$react
|
|
|
3018
2996
|
})
|
|
3019
2997
|
]
|
|
3020
2998
|
});
|
|
3021
|
-
}
|
|
3022
|
-
|
|
3023
|
-
if (!props.items) return /*#__PURE__*/ (0, $kF5Av$jsx)($604e914a624d5a0f$
|
|
3024
|
-
...props
|
|
3025
|
-
ref: ref
|
|
2999
|
+
}
|
|
3000
|
+
function $604e914a624d5a0f$export$ef9b1a59e592288f(props) {
|
|
3001
|
+
if (!props.items) return /*#__PURE__*/ (0, $kF5Av$jsx)($604e914a624d5a0f$var$AriaSelect, {
|
|
3002
|
+
...props
|
|
3026
3003
|
});
|
|
3027
|
-
const key = props.valueKey || "
|
|
3004
|
+
const key = props.valueKey || "value";
|
|
3028
3005
|
const labelKey = props.labelKey || "label";
|
|
3029
|
-
return /*#__PURE__*/ (0, $kF5Av$jsx)($604e914a624d5a0f$
|
|
3030
|
-
ref: ref,
|
|
3006
|
+
return /*#__PURE__*/ (0, $kF5Av$jsx)($604e914a624d5a0f$var$AriaSelect, {
|
|
3031
3007
|
...props,
|
|
3032
3008
|
children: (item)=>/*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$Item), {
|
|
3033
3009
|
textValue: item[key] || "key",
|
|
3034
3010
|
children: props.renderOption ? props.renderOption?.(item) : item?.[labelKey]
|
|
3035
3011
|
}, item[key] ?? "key")
|
|
3036
3012
|
});
|
|
3037
|
-
}
|
|
3038
|
-
$604e914a624d5a0f$export$a26e8b900a29a570.displayName = "Select";
|
|
3039
|
-
$604e914a624d5a0f$export$cd0225d99c675387.displayName = "_Select";
|
|
3013
|
+
}
|
|
3040
3014
|
|
|
3041
3015
|
|
|
3042
3016
|
|
|
@@ -3489,39 +3463,48 @@ const $bc830feefb2f8a48$export$f7513421c53ce141 = (0, $9ade691eb9e41cfb$export$3
|
|
|
3489
3463
|
size: {
|
|
3490
3464
|
"3xs": {
|
|
3491
3465
|
size: 12,
|
|
3492
|
-
borderRadius: 4
|
|
3466
|
+
borderRadius: 4,
|
|
3467
|
+
fontSize: "$1"
|
|
3493
3468
|
},
|
|
3494
3469
|
"2xs": {
|
|
3495
3470
|
size: 18,
|
|
3496
|
-
borderRadius: 6
|
|
3471
|
+
borderRadius: 6,
|
|
3472
|
+
fontSize: "$2"
|
|
3497
3473
|
},
|
|
3498
3474
|
xs: {
|
|
3499
3475
|
size: 24,
|
|
3500
|
-
borderRadius: 6
|
|
3476
|
+
borderRadius: 6,
|
|
3477
|
+
fontSize: "$2"
|
|
3501
3478
|
},
|
|
3502
3479
|
sm: {
|
|
3503
3480
|
size: 32,
|
|
3504
|
-
borderRadius: 6
|
|
3481
|
+
borderRadius: 6,
|
|
3482
|
+
fontSize: "$3"
|
|
3505
3483
|
},
|
|
3506
3484
|
md: {
|
|
3507
3485
|
size: 40,
|
|
3508
|
-
borderRadius: 6
|
|
3486
|
+
borderRadius: 6,
|
|
3487
|
+
fontSize: "$4"
|
|
3509
3488
|
},
|
|
3510
3489
|
lg: {
|
|
3511
3490
|
size: 48,
|
|
3512
|
-
borderRadius: 8
|
|
3491
|
+
borderRadius: 8,
|
|
3492
|
+
fontSize: "$4"
|
|
3513
3493
|
},
|
|
3514
3494
|
xl: {
|
|
3515
3495
|
size: 56,
|
|
3516
|
-
borderRadius: 8
|
|
3496
|
+
borderRadius: 8,
|
|
3497
|
+
fontSize: "$5"
|
|
3517
3498
|
},
|
|
3518
3499
|
"2xl": {
|
|
3519
3500
|
size: 64,
|
|
3520
|
-
borderRadius: 8
|
|
3501
|
+
borderRadius: 8,
|
|
3502
|
+
fontSize: "$5"
|
|
3521
3503
|
},
|
|
3522
3504
|
"3xl": {
|
|
3523
3505
|
size: 72,
|
|
3524
|
-
borderRadius: 8
|
|
3506
|
+
borderRadius: 8,
|
|
3507
|
+
fontSize: "$5"
|
|
3525
3508
|
}
|
|
3526
3509
|
}
|
|
3527
3510
|
}
|
|
@@ -4074,7 +4057,7 @@ const $b3ab9230425b9da4$export$7a4af5518e2bbe67 = (0, $9ade691eb9e41cfb$export$3
|
|
|
4074
4057
|
},
|
|
4075
4058
|
sm: {
|
|
4076
4059
|
"$$tag-base-height": "24px",
|
|
4077
|
-
px:
|
|
4060
|
+
px: 10,
|
|
4078
4061
|
fontSize: 13
|
|
4079
4062
|
},
|
|
4080
4063
|
md: {
|
|
@@ -4086,6 +4069,11 @@ const $b3ab9230425b9da4$export$7a4af5518e2bbe67 = (0, $9ade691eb9e41cfb$export$3
|
|
|
4086
4069
|
"$$tag-base-height": "32px",
|
|
4087
4070
|
px: 6,
|
|
4088
4071
|
fontSize: 14
|
|
4072
|
+
},
|
|
4073
|
+
xl: {
|
|
4074
|
+
"$$tag-base-height": "36px",
|
|
4075
|
+
px: 6,
|
|
4076
|
+
fontSize: 14
|
|
4089
4077
|
}
|
|
4090
4078
|
},
|
|
4091
4079
|
shape: {
|
|
@@ -5246,5 +5234,200 @@ $9da3b07c262d31a5$export$2b77a92f1a5ad772.useModal = $9da3b07c262d31a5$export$33
|
|
|
5246
5234
|
|
|
5247
5235
|
|
|
5248
5236
|
|
|
5249
|
-
|
|
5237
|
+
|
|
5238
|
+
|
|
5239
|
+
const $ca4f8631ba3dcb8d$export$7b7637218245c8a = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
5240
|
+
|
|
5241
|
+
|
|
5242
|
+
|
|
5243
|
+
|
|
5244
|
+
|
|
5245
|
+
const $ecda4e9d21366060$export$a455218a85c89869 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), (0, $dc7f74b9d5fb40ad$export$719e80a44b5e9ad0), {
|
|
5246
|
+
display: "flex",
|
|
5247
|
+
alignItems: "center",
|
|
5248
|
+
flexWrap: "wrap",
|
|
5249
|
+
px: 4,
|
|
5250
|
+
py: 4,
|
|
5251
|
+
gap: "$1",
|
|
5252
|
+
boxSizing: "border-box",
|
|
5253
|
+
// ".input-container": {
|
|
5254
|
+
// width: 4,
|
|
5255
|
+
// },
|
|
5256
|
+
input: {
|
|
5257
|
+
border: "none",
|
|
5258
|
+
background: "transparent",
|
|
5259
|
+
outline: "none",
|
|
5260
|
+
minWidth: 4,
|
|
5261
|
+
width: "100%",
|
|
5262
|
+
marginInlineStart: 4,
|
|
5263
|
+
writingMode: "horizontal-tb"
|
|
5264
|
+
}
|
|
5265
|
+
});
|
|
5266
|
+
|
|
5267
|
+
|
|
5268
|
+
|
|
5269
|
+
|
|
5270
|
+
|
|
5271
|
+
function $fe4e891d5f5fb623$export$40bfa8c7b0832715(value, defaultValue, onChange) {
|
|
5272
|
+
const [state, setState] = $kF5Av$useState(value || defaultValue);
|
|
5273
|
+
const isControlled = !(0, $12bf997be8e9d203$export$ae45edb09e2fe7c2)(value);
|
|
5274
|
+
const controlledValue = isControlled ? value : state;
|
|
5275
|
+
const setValue = $kF5Av$useCallback((value)=>{
|
|
5276
|
+
if (!isControlled) setState(value);
|
|
5277
|
+
if (!Object.is(controlledValue, value)) onChange?.(value);
|
|
5278
|
+
}, [
|
|
5279
|
+
isControlled,
|
|
5280
|
+
controlledValue
|
|
5281
|
+
]);
|
|
5282
|
+
return [
|
|
5283
|
+
controlledValue,
|
|
5284
|
+
setValue
|
|
5285
|
+
];
|
|
5286
|
+
}
|
|
5287
|
+
|
|
5288
|
+
|
|
5289
|
+
|
|
5290
|
+
|
|
5291
|
+
|
|
5292
|
+
function $53b8753217e575e6$export$39299b56cfd4e361({ css: css , appearance: appearance , size: size , label: label , error: error , placeholder: placeholder , tags: tags , defaultTags: defaultTags , tagColor: tagColor = "gray" , tagVariant: tagVariant = "light" , tagShape: tagShape = "round" , tagSize: tagSize = "md" , onChange: onChange , renderTag: renderTag }) {
|
|
5293
|
+
const [inputValue, setInputValue] = $kF5Av$useState("");
|
|
5294
|
+
const [values, setValues] = (0, $fe4e891d5f5fb623$export$40bfa8c7b0832715)(dedupe(tags), dedupe(defaultTags), onChange);
|
|
5295
|
+
const [isFocused, setIsFocused] = $kF5Av$useState(false);
|
|
5296
|
+
function dedupe(values) {
|
|
5297
|
+
if (!values) return undefined;
|
|
5298
|
+
return Array.from(new Set(values));
|
|
5299
|
+
}
|
|
5300
|
+
const inputRef = $kF5Av$useRef(null);
|
|
5301
|
+
function onInputChange(e) {
|
|
5302
|
+
const { value: value } = e.target;
|
|
5303
|
+
setInputValue(value);
|
|
5304
|
+
}
|
|
5305
|
+
// function hasTrailingSpace(value: string) {
|
|
5306
|
+
// return /\s$/.test(value);
|
|
5307
|
+
// }
|
|
5308
|
+
function hasTrailingComma(value) {
|
|
5309
|
+
return /,$/.test(value);
|
|
5310
|
+
}
|
|
5311
|
+
function onInputFocus() {
|
|
5312
|
+
setIsFocused(true);
|
|
5313
|
+
}
|
|
5314
|
+
function onInputBlur() {
|
|
5315
|
+
setIsFocused(false);
|
|
5316
|
+
}
|
|
5317
|
+
function onKeyDown(e) {
|
|
5318
|
+
switch(e.key){
|
|
5319
|
+
case "Enter":
|
|
5320
|
+
case " ":
|
|
5321
|
+
if (isValid(inputValue.trim())) commit([
|
|
5322
|
+
inputValue
|
|
5323
|
+
]);
|
|
5324
|
+
break;
|
|
5325
|
+
case "Backspace":
|
|
5326
|
+
if (!inputValue) onRemove(values[values.length - 1]);
|
|
5327
|
+
break;
|
|
5328
|
+
default:
|
|
5329
|
+
break;
|
|
5330
|
+
}
|
|
5331
|
+
}
|
|
5332
|
+
function captureFocus() {
|
|
5333
|
+
inputRef.current?.focus();
|
|
5334
|
+
}
|
|
5335
|
+
function onRemove(value) {
|
|
5336
|
+
setValues(values.filter((v)=>v !== value));
|
|
5337
|
+
}
|
|
5338
|
+
function isValid(value) {
|
|
5339
|
+
return (0, $ca4f8631ba3dcb8d$export$7b7637218245c8a).test(value);
|
|
5340
|
+
}
|
|
5341
|
+
function commit(newValues) {
|
|
5342
|
+
const validValues = newValues.map((v)=>v.trim()).filter((v)=>isValid(v));
|
|
5343
|
+
if (validValues.length > 0) setInputValue("");
|
|
5344
|
+
const finalValues = Array.from(new Set([
|
|
5345
|
+
...values,
|
|
5346
|
+
...validValues
|
|
5347
|
+
]));
|
|
5348
|
+
setValues(finalValues);
|
|
5349
|
+
}
|
|
5350
|
+
const showPlaceholder = !inputValue && values.length === 0;
|
|
5351
|
+
function getInputContainerWidth() {
|
|
5352
|
+
if (showPlaceholder) return (placeholder?.length ?? 0) * 10;
|
|
5353
|
+
if (!showPlaceholder && isFocused) return inputValue.length * 10 || 10;
|
|
5354
|
+
return 0;
|
|
5355
|
+
}
|
|
5356
|
+
$kF5Av$useEffect(()=>{
|
|
5357
|
+
if (hasTrailingComma(inputValue.trim())) {
|
|
5358
|
+
const split = inputValue.split(",");
|
|
5359
|
+
commit(split);
|
|
5360
|
+
}
|
|
5361
|
+
}, [
|
|
5362
|
+
inputValue
|
|
5363
|
+
]);
|
|
5364
|
+
return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
|
|
5365
|
+
css: css,
|
|
5366
|
+
stack: true,
|
|
5367
|
+
gap: 2,
|
|
5368
|
+
children: [
|
|
5369
|
+
label && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $d9b0db66cd7e721a$export$2e2bcd8739ae039), {
|
|
5370
|
+
children: label
|
|
5371
|
+
}),
|
|
5372
|
+
/*#__PURE__*/ (0, $kF5Av$jsxs)((0, $ecda4e9d21366060$export$a455218a85c89869), {
|
|
5373
|
+
"data-focused": isFocused,
|
|
5374
|
+
onClick: captureFocus,
|
|
5375
|
+
size: size,
|
|
5376
|
+
appearance: appearance,
|
|
5377
|
+
children: [
|
|
5378
|
+
values.map((value)=>{
|
|
5379
|
+
return renderTag ? renderTag?.(value, onRemove) : /*#__PURE__*/ (0, $kF5Av$jsx)((0, $827cce002ec16c4b$export$3288d34c523a1192), {
|
|
5380
|
+
variant: tagVariant,
|
|
5381
|
+
color: tagColor,
|
|
5382
|
+
shape: tagShape,
|
|
5383
|
+
size: tagSize,
|
|
5384
|
+
append: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $39ebe5a116c39d6c$export$c25acd513dcc8062), {
|
|
5385
|
+
variant: "plain",
|
|
5386
|
+
color: "gray",
|
|
5387
|
+
shape: "round",
|
|
5388
|
+
css: {
|
|
5389
|
+
marginLeft: 8
|
|
5390
|
+
},
|
|
5391
|
+
onPress: ()=>{
|
|
5392
|
+
onRemove(value);
|
|
5393
|
+
},
|
|
5394
|
+
size: "2xs",
|
|
5395
|
+
children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiX), {
|
|
5396
|
+
size: 16
|
|
5397
|
+
})
|
|
5398
|
+
}),
|
|
5399
|
+
children: value
|
|
5400
|
+
}, value);
|
|
5401
|
+
}),
|
|
5402
|
+
/*#__PURE__*/ (0, $kF5Av$jsx)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
|
|
5403
|
+
css: {
|
|
5404
|
+
width: getInputContainerWidth()
|
|
5405
|
+
},
|
|
5406
|
+
className: "input-container",
|
|
5407
|
+
children: /*#__PURE__*/ (0, $kF5Av$jsx)("input", {
|
|
5408
|
+
ref: inputRef,
|
|
5409
|
+
placeholder: showPlaceholder ? placeholder : "",
|
|
5410
|
+
onKeyDown: onKeyDown,
|
|
5411
|
+
value: inputValue,
|
|
5412
|
+
onChange: onInputChange,
|
|
5413
|
+
onFocus: onInputFocus,
|
|
5414
|
+
onBlur: onInputBlur
|
|
5415
|
+
})
|
|
5416
|
+
})
|
|
5417
|
+
]
|
|
5418
|
+
}),
|
|
5419
|
+
error && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $19752cc72b827664$export$2e2bcd8739ae039), {
|
|
5420
|
+
children: error
|
|
5421
|
+
})
|
|
5422
|
+
]
|
|
5423
|
+
});
|
|
5424
|
+
}
|
|
5425
|
+
|
|
5426
|
+
|
|
5427
|
+
|
|
5428
|
+
|
|
5429
|
+
|
|
5430
|
+
|
|
5431
|
+
|
|
5432
|
+
export {$d22d8a7881f7b33f$export$2e2bcd8739ae039 as Box, $07781ffe9a5ae30b$export$ef2184bd89960b14 as Grid, $07781ffe9a5ae30b$export$9eb849b9b922d396 as GridItem, $f09084fde7cc0470$export$2e2bcd8739ae039 as Column, $391d62e0590dec97$export$2e2bcd8739ae039 as Flex, $61dde3060428563f$export$f5b8910cec6cf069 as Input, $4fdef5d0844b7575$export$2e2bcd8739ae039 as Text, $7f7599719bb2a749$export$379139ebc1c2b235 as Textarea, $59636f06ede7befa$export$353f5b6fc5456de1 as Button, $39ebe5a116c39d6c$export$c25acd513dcc8062 as IconButton, $b5830f3daeb33bb2$export$48513f6b9f8ce62d as Checkbox, $5711a5825d7012d3$export$4aa08d5625cb8ead as CheckboxGroup, $b5c60232b181c4bd$export$d7b12c4107be0d61 as Radio, $b5c60232b181c4bd$export$a98f0dcb43a68a25 as RadioGroup, $f7762930a14621d8$export$f8afaea2e9656b91 as RadioCard, $604e914a624d5a0f$export$ef9b1a59e592288f as Select, $8370e4d32f002899$export$5109c6dd95d8fb00 as DatePicker, $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 as Avatar, $c0386802302e82e5$export$1a5cb5295a7d2749 as FileUploader, $4724a2c0da358be5$export$1ff3c3f08ae963c0 as Separator, $12105c91de6d0b91$export$b25a304ec7d746bb as Progress, $8eafe9f534066907$export$3b0d6d7590275603 as Loader, $d20773ec72923119$export$be92b6f5f03c0fe9 as Root, $d20773ec72923119$export$6d08773d2e66f8f2 as Item, $827cce002ec16c4b$export$3288d34c523a1192 as Tag, $4fd64b5726f94f78$export$b5d5cf8927ab7262 as Switch, $fd0a1cc8c4288e44$export$dbada5ace43900dd as ColorTray, $d2eff3f3a30a8f9a$export$50e381fea3a45244 as IconTray, $ea604f064e7efbe1$export$ea98c603db73aee7 as Sticker, $b13859906e03ed0f$export$e44a253a59704894 as DropdownMenu, $40e1dcf58e198ee9$export$1aaa3deaa90ea306 as Tabs, $2c3cbfa2e31957ff$export$54ec01a60f47d33d as Table, $cdf79c1aee6c465f$export$e6a97ba2cae5bb94 as Timeline, $9da3b07c262d31a5$export$2b77a92f1a5ad772 as Modal, $aca95339810194aa$export$eef1e68107c58ef2 as Space, $53b8753217e575e6$export$39299b56cfd4e361 as TagInput, $9ade691eb9e41cfb$export$3817b7a54a07cec7 as parrot, $9ade691eb9e41cfb$export$bca14c5b3b88a9c9 as ParrotTheme, $9ade691eb9e41cfb$export$e506a1d27d1eaa20 as ParrotThemeConfig};
|
|
5250
5433
|
//# sourceMappingURL=module.js.map
|