@chekinapp/ui 0.0.33 → 0.0.34
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/index.cjs +257 -248
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +329 -320
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1641,20 +1641,19 @@ function ChannelSelector({
|
|
|
1641
1641
|
const newValues = selectedValues.includes(value) ? selectedValues.filter((selectedValue) => selectedValue !== value) : [...selectedValues, value];
|
|
1642
1642
|
onChange(newValues);
|
|
1643
1643
|
};
|
|
1644
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex gap-
|
|
1644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: options.map((option) => {
|
|
1645
1645
|
const isSelected = selectedValues.includes(option.value);
|
|
1646
1646
|
const isReadOnly = readOnlyValues.includes(option.value);
|
|
1647
1647
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
|
|
1648
1648
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1649
1649
|
Button,
|
|
1650
1650
|
{
|
|
1651
|
-
variant: "
|
|
1652
|
-
size: "icon",
|
|
1651
|
+
variant: "outline",
|
|
1653
1652
|
type: "button",
|
|
1654
1653
|
onClick: () => handleToggle(option.value),
|
|
1655
1654
|
disabled: isReadOnly,
|
|
1656
1655
|
className: cn(
|
|
1657
|
-
"relative h-10 w-10 rounded-lg border-2 bg-white p-0 transition-all",
|
|
1656
|
+
"relative flex h-10 w-10 items-center justify-center rounded-lg border-2 bg-white p-0 transition-all",
|
|
1658
1657
|
isSelected ? "border-chekin-blue bg-chekin-blue/10" : "border-chekin-gray-3 hover:border-chekin-blue/30",
|
|
1659
1658
|
isReadOnly ? "cursor-default opacity-100" : "cursor-pointer"
|
|
1660
1659
|
),
|
|
@@ -1679,11 +1678,11 @@ var BaseCheckbox = React6.forwardRef(({ className, loading, onCheckedChange, dis
|
|
|
1679
1678
|
{
|
|
1680
1679
|
ref,
|
|
1681
1680
|
className: cn(
|
|
1682
|
-
"peer h-5 w-5 shrink-0 rounded-sm border border-solid border-
|
|
1681
|
+
"checkbox__control peer h-5 w-5 shrink-0 rounded-sm border border-solid border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
1683
1682
|
"focus-visible:outline-none focus-visible:shadow-chekin-focus",
|
|
1684
1683
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1685
1684
|
"aria-busy:cursor-wait aria-busy:opacity-50 aria-readonly:cursor-default aria-readonly:opacity-100",
|
|
1686
|
-
"data-[state=checked]:bg-
|
|
1685
|
+
"data-[state=checked]:border-[var(--checkbox-checked-border)] data-[state=checked]:bg-[var(--checkbox-checked-bg)] data-[state=checked]:text-[var(--checkbox-check-color)]",
|
|
1687
1686
|
className
|
|
1688
1687
|
),
|
|
1689
1688
|
...props,
|
|
@@ -1695,7 +1694,7 @@ var BaseCheckbox = React6.forwardRef(({ className, loading, onCheckedChange, dis
|
|
|
1695
1694
|
CheckboxPrimitive.Indicator,
|
|
1696
1695
|
{
|
|
1697
1696
|
className: cn("flex items-center justify-center text-current"),
|
|
1698
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Check, { className: "h-5 w-5" })
|
|
1697
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Check, { className: "checkbox__icon h-5 w-5" })
|
|
1699
1698
|
}
|
|
1700
1699
|
)
|
|
1701
1700
|
}
|
|
@@ -1755,7 +1754,7 @@ var Checkbox = React8.forwardRef(
|
|
|
1755
1754
|
{
|
|
1756
1755
|
htmlFor: checkboxId,
|
|
1757
1756
|
className: cn(
|
|
1758
|
-
"cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
1757
|
+
"cursor-pointer text-sm font-medium leading-none text-chekin-navy peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
1759
1758
|
labelClassName
|
|
1760
1759
|
),
|
|
1761
1760
|
children: label
|
|
@@ -1914,7 +1913,7 @@ var CheckboxGroup = React9.forwardRef(
|
|
|
1914
1913
|
Label,
|
|
1915
1914
|
{
|
|
1916
1915
|
htmlFor: selectAllId,
|
|
1917
|
-
className: "cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
1916
|
+
className: "cursor-pointer text-sm font-medium leading-none text-chekin-navy peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
1918
1917
|
children: selectAllLabel
|
|
1919
1918
|
}
|
|
1920
1919
|
)
|
|
@@ -2347,7 +2346,7 @@ function DataTable({ columns, data }) {
|
|
|
2347
2346
|
}
|
|
2348
2347
|
|
|
2349
2348
|
// src/dialog/Dialog.tsx
|
|
2350
|
-
var
|
|
2349
|
+
var React12 = __toESM(require("react"), 1);
|
|
2351
2350
|
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2352
2351
|
var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
|
|
2353
2352
|
var import_lucide_react10 = require("lucide-react");
|
|
@@ -2556,18 +2555,28 @@ function useOutsideClick({
|
|
|
2556
2555
|
}
|
|
2557
2556
|
|
|
2558
2557
|
// src/hooks/use-screen-resize.ts
|
|
2559
|
-
var import_react17 = require("react");
|
|
2558
|
+
var import_react17 = __toESM(require("react"), 1);
|
|
2560
2559
|
var eventName = "resize";
|
|
2561
|
-
function
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2560
|
+
function getMediaQuery(maxWidth, matchString) {
|
|
2561
|
+
if (matchString) {
|
|
2562
|
+
return matchString;
|
|
2563
|
+
}
|
|
2564
|
+
return maxWidth ? `(max-width: ${maxWidth})` : null;
|
|
2565
|
+
}
|
|
2566
|
+
function useScreenResize(maxWidth, matchString) {
|
|
2567
|
+
const [isInitialized, setIsInitialized] = import_react17.default.useState(false);
|
|
2568
|
+
const [isMatch, setIsMatch] = import_react17.default.useState(false);
|
|
2569
|
+
const handleResizeEvent = import_react17.default.useCallback(() => {
|
|
2570
|
+
const mediaQuery = getMediaQuery(maxWidth, matchString);
|
|
2567
2571
|
setIsInitialized(true);
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2572
|
+
if (!mediaQuery) {
|
|
2573
|
+
setIsMatch(false);
|
|
2574
|
+
return;
|
|
2575
|
+
}
|
|
2576
|
+
const media = getWindow().matchMedia(mediaQuery);
|
|
2577
|
+
setIsMatch(media.matches);
|
|
2578
|
+
}, [maxWidth, matchString]);
|
|
2579
|
+
import_react17.default.useEffect(() => {
|
|
2571
2580
|
handleResizeEvent();
|
|
2572
2581
|
getWindow().addEventListener(eventName, handleResizeEvent);
|
|
2573
2582
|
return () => {
|
|
@@ -3119,7 +3128,7 @@ function useIsFormTouched({
|
|
|
3119
3128
|
// src/dialog/Dialog.tsx
|
|
3120
3129
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3121
3130
|
function useIframeTitleFix(titleRef) {
|
|
3122
|
-
|
|
3131
|
+
React12.useEffect(() => {
|
|
3123
3132
|
if (!window.chekinCustomDocument) {
|
|
3124
3133
|
return;
|
|
3125
3134
|
}
|
|
@@ -3148,7 +3157,7 @@ function DialogClose({ ...props }) {
|
|
|
3148
3157
|
}
|
|
3149
3158
|
var dialogOverlayClasses = "fixed inset-0 z-50 bg-[var(--dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
|
|
3150
3159
|
var scrollableOverlayClasses = "fixed inset-0 z-50 flex flex-col items-center overflow-y-auto overscroll-none pb-[19px] pt-[20px]";
|
|
3151
|
-
var DialogOverlay =
|
|
3160
|
+
var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3152
3161
|
DialogPrimitive.Overlay,
|
|
3153
3162
|
{
|
|
3154
3163
|
ref,
|
|
@@ -3160,7 +3169,7 @@ var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
3160
3169
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
3161
3170
|
var dialogContentClasses = "relative z-50 my-auto w-full max-w-[calc(100%-2rem)] rounded-[var(--dialog-content-radius)] border border-[var(--dialog-content-border)] bg-[var(--dialog-content-bg)] p-6 text-[var(--dialog-content-text)] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-2xl";
|
|
3162
3171
|
var dialogCloseButtonClasses = "absolute right-4 top-4 rounded-[var(--dialog-close-radius)] opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-chekin-focus disabled:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
|
|
3163
|
-
var DialogContent =
|
|
3172
|
+
var DialogContent = React12.forwardRef(
|
|
3164
3173
|
({ className, showCloseButton = true, children, container, lockScroll = true, ...props }, ref) => {
|
|
3165
3174
|
const contentElement = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3166
3175
|
DialogPrimitive.Content,
|
|
@@ -3208,8 +3217,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
|
|
|
3208
3217
|
}
|
|
3209
3218
|
);
|
|
3210
3219
|
DialogFooter.displayName = "DialogFooter";
|
|
3211
|
-
var DialogTitle =
|
|
3212
|
-
const titleRef =
|
|
3220
|
+
var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => {
|
|
3221
|
+
const titleRef = React12.useRef(null);
|
|
3213
3222
|
const combinedRef = useCombinedRef(titleRef, ref);
|
|
3214
3223
|
useIframeTitleFix(titleRef);
|
|
3215
3224
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
@@ -3223,7 +3232,7 @@ var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => {
|
|
|
3223
3232
|
);
|
|
3224
3233
|
});
|
|
3225
3234
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
3226
|
-
var DialogDescription =
|
|
3235
|
+
var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3227
3236
|
DialogPrimitive.Description,
|
|
3228
3237
|
{
|
|
3229
3238
|
ref,
|
|
@@ -3285,9 +3294,9 @@ function ConfirmationDialog({
|
|
|
3285
3294
|
}
|
|
3286
3295
|
|
|
3287
3296
|
// src/default-select-trigger/DefaultSelectTrigger.tsx
|
|
3288
|
-
var
|
|
3297
|
+
var React13 = __toESM(require("react"), 1);
|
|
3289
3298
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3290
|
-
var DefaultSelectTrigger =
|
|
3299
|
+
var DefaultSelectTrigger = React13.forwardRef(
|
|
3291
3300
|
({
|
|
3292
3301
|
className,
|
|
3293
3302
|
disabled,
|
|
@@ -3354,14 +3363,14 @@ function DownloadEntryFormsButton({
|
|
|
3354
3363
|
var import_react31 = require("react");
|
|
3355
3364
|
|
|
3356
3365
|
// src/dropdown-menu/DropdownMenu.tsx
|
|
3357
|
-
var
|
|
3366
|
+
var React14 = __toESM(require("react"), 1);
|
|
3358
3367
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
3359
3368
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3360
3369
|
var DropdownMenu = RadixMenu.Root;
|
|
3361
3370
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
3362
3371
|
var DropdownMenuPortal = RadixMenu.Portal;
|
|
3363
3372
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
3364
|
-
var DropdownMenuContent =
|
|
3373
|
+
var DropdownMenuContent = React14.forwardRef(({ className, sideOffset = 6, container, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { container: container || getCustomContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3365
3374
|
RadixMenu.Content,
|
|
3366
3375
|
{
|
|
3367
3376
|
ref,
|
|
@@ -3382,9 +3391,9 @@ var itemClasses = [
|
|
|
3382
3391
|
"data-[highlighted]:bg-chekin-surface-pressed data-[highlighted]:text-chekin-blue",
|
|
3383
3392
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-30"
|
|
3384
3393
|
];
|
|
3385
|
-
var DropdownMenuItem =
|
|
3394
|
+
var DropdownMenuItem = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Item, { ref, className: cn(itemClasses, className), ...props }));
|
|
3386
3395
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
3387
|
-
var DropdownMenuLabel =
|
|
3396
|
+
var DropdownMenuLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3388
3397
|
RadixMenu.Label,
|
|
3389
3398
|
{
|
|
3390
3399
|
ref,
|
|
@@ -3396,7 +3405,7 @@ var DropdownMenuLabel = React13.forwardRef(({ className, ...props }, ref) => /*
|
|
|
3396
3405
|
}
|
|
3397
3406
|
));
|
|
3398
3407
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
3399
|
-
var DropdownMenuSeparator =
|
|
3408
|
+
var DropdownMenuSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3400
3409
|
RadixMenu.Separator,
|
|
3401
3410
|
{
|
|
3402
3411
|
ref,
|
|
@@ -3628,9 +3637,9 @@ function EmptySectionPlaceholder({
|
|
|
3628
3637
|
}
|
|
3629
3638
|
|
|
3630
3639
|
// src/external-link/ExternalLink.tsx
|
|
3631
|
-
var
|
|
3640
|
+
var React15 = __toESM(require("react"), 1);
|
|
3632
3641
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3633
|
-
var ExternalLink =
|
|
3642
|
+
var ExternalLink = React15.forwardRef(
|
|
3634
3643
|
({ className, children, showIcon = true, target = "_blank", rel, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
3635
3644
|
"a",
|
|
3636
3645
|
{
|
|
@@ -3676,7 +3685,7 @@ var import_react_i18next9 = require("react-i18next");
|
|
|
3676
3685
|
var import_lucide_react14 = require("lucide-react");
|
|
3677
3686
|
|
|
3678
3687
|
// src/switch/Switch.tsx
|
|
3679
|
-
var
|
|
3688
|
+
var React16 = __toESM(require("react"), 1);
|
|
3680
3689
|
var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
|
|
3681
3690
|
var import_class_variance_authority7 = require("class-variance-authority");
|
|
3682
3691
|
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
@@ -3718,9 +3727,9 @@ var switchThumbVariants = (0, import_class_variance_authority7.cva)(
|
|
|
3718
3727
|
}
|
|
3719
3728
|
}
|
|
3720
3729
|
);
|
|
3721
|
-
var Switch =
|
|
3730
|
+
var Switch = React16.forwardRef(
|
|
3722
3731
|
({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
|
|
3723
|
-
const generatedId =
|
|
3732
|
+
const generatedId = React16.useId();
|
|
3724
3733
|
const fieldId = id || generatedId;
|
|
3725
3734
|
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3726
3735
|
SwitchPrimitives.Root,
|
|
@@ -4324,7 +4333,7 @@ var FreeTextField = (0, import_react35.forwardRef)(
|
|
|
4324
4333
|
FreeTextField.displayName = "FreeTextField";
|
|
4325
4334
|
|
|
4326
4335
|
// src/framed-icon/FramedIcon.tsx
|
|
4327
|
-
var
|
|
4336
|
+
var React17 = __toESM(require("react"), 1);
|
|
4328
4337
|
var import_class_variance_authority8 = require("class-variance-authority");
|
|
4329
4338
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
4330
4339
|
var framedIconVariants = (0, import_class_variance_authority8.cva)("inline-flex items-center justify-center shrink-0", {
|
|
@@ -4348,7 +4357,7 @@ var framedIconVariants = (0, import_class_variance_authority8.cva)("inline-flex
|
|
|
4348
4357
|
},
|
|
4349
4358
|
defaultVariants: { size: "m", shape: "rounded", tone: "info" }
|
|
4350
4359
|
});
|
|
4351
|
-
var FramedIcon =
|
|
4360
|
+
var FramedIcon = React17.forwardRef(
|
|
4352
4361
|
({ className, size, shape, tone, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4353
4362
|
"span",
|
|
4354
4363
|
{
|
|
@@ -4510,7 +4519,7 @@ var IconRegistry = class {
|
|
|
4510
4519
|
var RegistryIcon = Icon;
|
|
4511
4520
|
|
|
4512
4521
|
// src/icon-button/IconButton.tsx
|
|
4513
|
-
var
|
|
4522
|
+
var React18 = __toESM(require("react"), 1);
|
|
4514
4523
|
var import_class_variance_authority9 = require("class-variance-authority");
|
|
4515
4524
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
4516
4525
|
var iconButtonVariants = (0, import_class_variance_authority9.cva)(
|
|
@@ -4541,7 +4550,7 @@ var iconButtonVariants = (0, import_class_variance_authority9.cva)(
|
|
|
4541
4550
|
defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
|
|
4542
4551
|
}
|
|
4543
4552
|
);
|
|
4544
|
-
var IconButton =
|
|
4553
|
+
var IconButton = React18.forwardRef(
|
|
4545
4554
|
({ className, size, shape, variant, label, children, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
4546
4555
|
"button",
|
|
4547
4556
|
{
|
|
@@ -4596,9 +4605,9 @@ function Image2({
|
|
|
4596
4605
|
}
|
|
4597
4606
|
|
|
4598
4607
|
// src/input/Input.tsx
|
|
4599
|
-
var
|
|
4608
|
+
var React19 = __toESM(require("react"), 1);
|
|
4600
4609
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
4601
|
-
var Input =
|
|
4610
|
+
var Input = React19.forwardRef(
|
|
4602
4611
|
({ className, type, readOnly, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
4603
4612
|
"input",
|
|
4604
4613
|
{
|
|
@@ -4622,7 +4631,7 @@ var Input = React18.forwardRef(
|
|
|
4622
4631
|
Input.displayName = "Input";
|
|
4623
4632
|
|
|
4624
4633
|
// src/input-otp/InputOTP.tsx
|
|
4625
|
-
var
|
|
4634
|
+
var React20 = __toESM(require("react"), 1);
|
|
4626
4635
|
|
|
4627
4636
|
// src/input-otp/InputOTPContext.ts
|
|
4628
4637
|
var import_react39 = require("react");
|
|
@@ -4905,11 +4914,11 @@ function InputOTP({
|
|
|
4905
4914
|
}
|
|
4906
4915
|
) });
|
|
4907
4916
|
}
|
|
4908
|
-
var InputOTPGroup =
|
|
4917
|
+
var InputOTPGroup = React20.forwardRef(
|
|
4909
4918
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref, className: cn("flex items-center", className), ...props })
|
|
4910
4919
|
);
|
|
4911
4920
|
InputOTPGroup.displayName = "InputOTPGroup";
|
|
4912
|
-
var InputOTPSlot =
|
|
4921
|
+
var InputOTPSlot = React20.forwardRef(
|
|
4913
4922
|
({ index, className, ...props }, ref) => {
|
|
4914
4923
|
const {
|
|
4915
4924
|
char,
|
|
@@ -4958,7 +4967,7 @@ var InputOTPSlot = React19.forwardRef(
|
|
|
4958
4967
|
}
|
|
4959
4968
|
);
|
|
4960
4969
|
InputOTPSlot.displayName = "InputOTPSlot";
|
|
4961
|
-
var InputOTPSeparator =
|
|
4970
|
+
var InputOTPSeparator = React20.forwardRef(
|
|
4962
4971
|
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref, role: "separator", ...props })
|
|
4963
4972
|
);
|
|
4964
4973
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
@@ -5949,14 +5958,14 @@ var import_react_i18next16 = require("react-i18next");
|
|
|
5949
5958
|
var import_lucide_react24 = require("lucide-react");
|
|
5950
5959
|
|
|
5951
5960
|
// src/select/Select.tsx
|
|
5952
|
-
var
|
|
5961
|
+
var React21 = __toESM(require("react"), 1);
|
|
5953
5962
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
5954
5963
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
5955
5964
|
var SelectRoot = RadixSelect.Root;
|
|
5956
5965
|
var SelectValue = RadixSelect.Value;
|
|
5957
5966
|
var SelectGroup = RadixSelect.Group;
|
|
5958
5967
|
var SelectPortal = RadixSelect.Portal;
|
|
5959
|
-
var SelectTrigger =
|
|
5968
|
+
var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
5960
5969
|
RadixSelect.Trigger,
|
|
5961
5970
|
{
|
|
5962
5971
|
ref,
|
|
@@ -5997,7 +6006,7 @@ var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref)
|
|
|
5997
6006
|
}
|
|
5998
6007
|
));
|
|
5999
6008
|
SelectTrigger.displayName = "SelectTrigger";
|
|
6000
|
-
var SelectContent =
|
|
6009
|
+
var SelectContent = React21.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6001
6010
|
RadixSelect.Content,
|
|
6002
6011
|
{
|
|
6003
6012
|
ref,
|
|
@@ -6016,7 +6025,7 @@ var SelectContent = React20.forwardRef(({ className, children, position = "poppe
|
|
|
6016
6025
|
}
|
|
6017
6026
|
) }));
|
|
6018
6027
|
SelectContent.displayName = "SelectContent";
|
|
6019
|
-
var SelectItem =
|
|
6028
|
+
var SelectItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
6020
6029
|
RadixSelect.Item,
|
|
6021
6030
|
{
|
|
6022
6031
|
ref,
|
|
@@ -6051,7 +6060,7 @@ var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
6051
6060
|
}
|
|
6052
6061
|
));
|
|
6053
6062
|
SelectItem.displayName = "SelectItem";
|
|
6054
|
-
var SelectSeparator =
|
|
6063
|
+
var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6055
6064
|
RadixSelect.Separator,
|
|
6056
6065
|
{
|
|
6057
6066
|
ref,
|
|
@@ -6060,7 +6069,7 @@ var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
6060
6069
|
}
|
|
6061
6070
|
));
|
|
6062
6071
|
SelectSeparator.displayName = "SelectSeparator";
|
|
6063
|
-
var SelectLabel =
|
|
6072
|
+
var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6064
6073
|
RadixSelect.Label,
|
|
6065
6074
|
{
|
|
6066
6075
|
ref,
|
|
@@ -6072,7 +6081,7 @@ var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
6072
6081
|
}
|
|
6073
6082
|
));
|
|
6074
6083
|
SelectLabel.displayName = "SelectLabel";
|
|
6075
|
-
var Select =
|
|
6084
|
+
var Select = React21.forwardRef(
|
|
6076
6085
|
({
|
|
6077
6086
|
placeholder,
|
|
6078
6087
|
label,
|
|
@@ -6083,9 +6092,9 @@ var Select = React20.forwardRef(
|
|
|
6083
6092
|
children,
|
|
6084
6093
|
...props
|
|
6085
6094
|
}, ref) => {
|
|
6086
|
-
const reactId =
|
|
6095
|
+
const reactId = React21.useId();
|
|
6087
6096
|
const triggerId = props.name ?? reactId;
|
|
6088
|
-
const internalRef =
|
|
6097
|
+
const internalRef = React21.useRef(null);
|
|
6089
6098
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
6090
6099
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
|
|
6091
6100
|
label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
@@ -6242,7 +6251,7 @@ function Pagination({
|
|
|
6242
6251
|
}
|
|
6243
6252
|
|
|
6244
6253
|
// src/popover/Popover.tsx
|
|
6245
|
-
var
|
|
6254
|
+
var React22 = __toESM(require("react"), 1);
|
|
6246
6255
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
6247
6256
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
6248
6257
|
var Popover = RadixPopover.Root;
|
|
@@ -6250,7 +6259,7 @@ var PopoverTrigger = RadixPopover.Trigger;
|
|
|
6250
6259
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
6251
6260
|
var PopoverPortal = RadixPopover.Portal;
|
|
6252
6261
|
var PopoverClose = RadixPopover.Close;
|
|
6253
|
-
var PopoverContent =
|
|
6262
|
+
var PopoverContent = React22.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
6254
6263
|
RadixPopover.Content,
|
|
6255
6264
|
{
|
|
6256
6265
|
ref,
|
|
@@ -6270,11 +6279,11 @@ PopoverContent.displayName = "PopoverContent";
|
|
|
6270
6279
|
var import_react48 = require("react");
|
|
6271
6280
|
|
|
6272
6281
|
// src/radio-group/RadioGroup.tsx
|
|
6273
|
-
var
|
|
6282
|
+
var React23 = __toESM(require("react"), 1);
|
|
6274
6283
|
var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
6275
6284
|
var import_lucide_react25 = require("lucide-react");
|
|
6276
6285
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
6277
|
-
var RadioGroup =
|
|
6286
|
+
var RadioGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
6278
6287
|
RadioGroupPrimitive.Root,
|
|
6279
6288
|
{
|
|
6280
6289
|
ref,
|
|
@@ -6283,7 +6292,7 @@ var RadioGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
6283
6292
|
}
|
|
6284
6293
|
));
|
|
6285
6294
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
6286
|
-
var RadioGroupItem =
|
|
6295
|
+
var RadioGroupItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
6287
6296
|
RadioGroupPrimitive.Item,
|
|
6288
6297
|
{
|
|
6289
6298
|
ref,
|
|
@@ -6512,7 +6521,7 @@ function RatingRadioGroup({
|
|
|
6512
6521
|
}
|
|
6513
6522
|
|
|
6514
6523
|
// src/rating-stars/RatingStars.tsx
|
|
6515
|
-
var
|
|
6524
|
+
var React24 = __toESM(require("react"), 1);
|
|
6516
6525
|
var import_lucide_react27 = require("lucide-react");
|
|
6517
6526
|
var import_react_i18next17 = require("react-i18next");
|
|
6518
6527
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
@@ -6532,7 +6541,7 @@ function RatingStars({
|
|
|
6532
6541
|
const { t } = (0, import_react_i18next17.useTranslation)();
|
|
6533
6542
|
const normalizedRating = Math.max(0, Math.min(maxRating, rating));
|
|
6534
6543
|
const stars = Array.from({ length: maxRating }, (_, index) => index + 1);
|
|
6535
|
-
const componentId =
|
|
6544
|
+
const componentId = React24.useId();
|
|
6536
6545
|
const decimal = normalizedRating - Math.floor(normalizedRating);
|
|
6537
6546
|
const partialStarIndex = decimal > 0 ? Math.ceil(normalizedRating) : -1;
|
|
6538
6547
|
const gradientId = `star-gradient-${componentId.replace(/:/g, "")}`;
|
|
@@ -7103,7 +7112,7 @@ function SheetDescription({
|
|
|
7103
7112
|
}
|
|
7104
7113
|
|
|
7105
7114
|
// src/sidebar/Sidebar.tsx
|
|
7106
|
-
var
|
|
7115
|
+
var React25 = __toESM(require("react"), 1);
|
|
7107
7116
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
7108
7117
|
var import_class_variance_authority11 = require("class-variance-authority");
|
|
7109
7118
|
var import_lucide_react33 = require("lucide-react");
|
|
@@ -7196,7 +7205,7 @@ var SIDEBAR_COOKIE_NAME_DEFAULT = "sidebar_state";
|
|
|
7196
7205
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
7197
7206
|
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
7198
7207
|
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
7199
|
-
var SidebarProvider =
|
|
7208
|
+
var SidebarProvider = React25.forwardRef(
|
|
7200
7209
|
({
|
|
7201
7210
|
defaultOpen = true,
|
|
7202
7211
|
open: openProp,
|
|
@@ -7208,10 +7217,10 @@ var SidebarProvider = React24.forwardRef(
|
|
|
7208
7217
|
...props
|
|
7209
7218
|
}, ref) => {
|
|
7210
7219
|
const isMobile = useIsMobile({ breakpoint: 641 });
|
|
7211
|
-
const [openMobile, setOpenMobile] =
|
|
7212
|
-
const [_open, _setOpen] =
|
|
7220
|
+
const [openMobile, setOpenMobile] = React25.useState(false);
|
|
7221
|
+
const [_open, _setOpen] = React25.useState(defaultOpen);
|
|
7213
7222
|
const open = openProp ?? _open;
|
|
7214
|
-
const setOpen =
|
|
7223
|
+
const setOpen = React25.useCallback(
|
|
7215
7224
|
(value) => {
|
|
7216
7225
|
const openState = typeof value === "function" ? value(open) : value;
|
|
7217
7226
|
if (setOpenProp) {
|
|
@@ -7223,10 +7232,10 @@ var SidebarProvider = React24.forwardRef(
|
|
|
7223
7232
|
},
|
|
7224
7233
|
[setOpenProp, open, stateName]
|
|
7225
7234
|
);
|
|
7226
|
-
const toggleSidebar =
|
|
7235
|
+
const toggleSidebar = React25.useCallback(() => {
|
|
7227
7236
|
return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
|
|
7228
7237
|
}, [isMobile, setOpen]);
|
|
7229
|
-
|
|
7238
|
+
React25.useEffect(() => {
|
|
7230
7239
|
const handleKeyDown = (event) => {
|
|
7231
7240
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
7232
7241
|
event.preventDefault();
|
|
@@ -7237,7 +7246,7 @@ var SidebarProvider = React24.forwardRef(
|
|
|
7237
7246
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
7238
7247
|
}, [toggleSidebar]);
|
|
7239
7248
|
const state = open ? "expanded" : "collapsed";
|
|
7240
|
-
const contextValue =
|
|
7249
|
+
const contextValue = React25.useMemo(
|
|
7241
7250
|
() => ({
|
|
7242
7251
|
state,
|
|
7243
7252
|
open,
|
|
@@ -7262,7 +7271,7 @@ var SidebarProvider = React24.forwardRef(
|
|
|
7262
7271
|
}
|
|
7263
7272
|
);
|
|
7264
7273
|
SidebarProvider.displayName = "SidebarProvider";
|
|
7265
|
-
var Sidebar =
|
|
7274
|
+
var Sidebar = React25.forwardRef(
|
|
7266
7275
|
({
|
|
7267
7276
|
side = "left",
|
|
7268
7277
|
variant = "sidebar",
|
|
@@ -7356,7 +7365,7 @@ var Sidebar = React24.forwardRef(
|
|
|
7356
7365
|
}
|
|
7357
7366
|
);
|
|
7358
7367
|
Sidebar.displayName = "Sidebar";
|
|
7359
|
-
var SidebarTrigger =
|
|
7368
|
+
var SidebarTrigger = React25.forwardRef(({ className, onClick, icon, ...props }, ref) => {
|
|
7360
7369
|
const { toggleSidebar, open, isMobile, openMobile } = useSidebar();
|
|
7361
7370
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
7362
7371
|
Button,
|
|
@@ -7383,7 +7392,7 @@ var SidebarTrigger = React24.forwardRef(({ className, onClick, icon, ...props },
|
|
|
7383
7392
|
);
|
|
7384
7393
|
});
|
|
7385
7394
|
SidebarTrigger.displayName = "SidebarTrigger";
|
|
7386
|
-
var SidebarRail =
|
|
7395
|
+
var SidebarRail = React25.forwardRef(
|
|
7387
7396
|
({ className, ...props }, ref) => {
|
|
7388
7397
|
const { toggleSidebar } = useSidebar();
|
|
7389
7398
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
@@ -7409,7 +7418,7 @@ var SidebarRail = React24.forwardRef(
|
|
|
7409
7418
|
}
|
|
7410
7419
|
);
|
|
7411
7420
|
SidebarRail.displayName = "SidebarRail";
|
|
7412
|
-
var SidebarInset =
|
|
7421
|
+
var SidebarInset = React25.forwardRef(
|
|
7413
7422
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7414
7423
|
"main",
|
|
7415
7424
|
{
|
|
@@ -7424,7 +7433,7 @@ var SidebarInset = React24.forwardRef(
|
|
|
7424
7433
|
)
|
|
7425
7434
|
);
|
|
7426
7435
|
SidebarInset.displayName = "SidebarInset";
|
|
7427
|
-
var SidebarInput =
|
|
7436
|
+
var SidebarInput = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7428
7437
|
Input,
|
|
7429
7438
|
{
|
|
7430
7439
|
ref,
|
|
@@ -7434,7 +7443,7 @@ var SidebarInput = React24.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
7434
7443
|
}
|
|
7435
7444
|
));
|
|
7436
7445
|
SidebarInput.displayName = "SidebarInput";
|
|
7437
|
-
var SidebarHeader =
|
|
7446
|
+
var SidebarHeader = React25.forwardRef(
|
|
7438
7447
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7439
7448
|
"div",
|
|
7440
7449
|
{
|
|
@@ -7446,7 +7455,7 @@ var SidebarHeader = React24.forwardRef(
|
|
|
7446
7455
|
)
|
|
7447
7456
|
);
|
|
7448
7457
|
SidebarHeader.displayName = "SidebarHeader";
|
|
7449
|
-
var SidebarFooter =
|
|
7458
|
+
var SidebarFooter = React25.forwardRef(
|
|
7450
7459
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7451
7460
|
"div",
|
|
7452
7461
|
{
|
|
@@ -7458,7 +7467,7 @@ var SidebarFooter = React24.forwardRef(
|
|
|
7458
7467
|
)
|
|
7459
7468
|
);
|
|
7460
7469
|
SidebarFooter.displayName = "SidebarFooter";
|
|
7461
|
-
var SidebarSeparator =
|
|
7470
|
+
var SidebarSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7462
7471
|
Separator3,
|
|
7463
7472
|
{
|
|
7464
7473
|
ref,
|
|
@@ -7468,7 +7477,7 @@ var SidebarSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
7468
7477
|
}
|
|
7469
7478
|
));
|
|
7470
7479
|
SidebarSeparator.displayName = "SidebarSeparator";
|
|
7471
|
-
var SidebarContent =
|
|
7480
|
+
var SidebarContent = React25.forwardRef(
|
|
7472
7481
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7473
7482
|
"div",
|
|
7474
7483
|
{
|
|
@@ -7483,7 +7492,7 @@ var SidebarContent = React24.forwardRef(
|
|
|
7483
7492
|
)
|
|
7484
7493
|
);
|
|
7485
7494
|
SidebarContent.displayName = "SidebarContent";
|
|
7486
|
-
var SidebarGroup =
|
|
7495
|
+
var SidebarGroup = React25.forwardRef(
|
|
7487
7496
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7488
7497
|
"div",
|
|
7489
7498
|
{
|
|
@@ -7495,7 +7504,7 @@ var SidebarGroup = React24.forwardRef(
|
|
|
7495
7504
|
)
|
|
7496
7505
|
);
|
|
7497
7506
|
SidebarGroup.displayName = "SidebarGroup";
|
|
7498
|
-
var SidebarGroupLabel =
|
|
7507
|
+
var SidebarGroupLabel = React25.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
7499
7508
|
const Comp = asChild ? import_react_slot4.Slot : "div";
|
|
7500
7509
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7501
7510
|
Comp,
|
|
@@ -7512,7 +7521,7 @@ var SidebarGroupLabel = React24.forwardRef(({ className, asChild = false, ...pro
|
|
|
7512
7521
|
);
|
|
7513
7522
|
});
|
|
7514
7523
|
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
7515
|
-
var SidebarGroupAction =
|
|
7524
|
+
var SidebarGroupAction = React25.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
7516
7525
|
const Comp = asChild ? import_react_slot4.Slot : "button";
|
|
7517
7526
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7518
7527
|
Comp,
|
|
@@ -7528,7 +7537,7 @@ var SidebarGroupAction = React24.forwardRef(({ className, asChild = false, ...pr
|
|
|
7528
7537
|
);
|
|
7529
7538
|
});
|
|
7530
7539
|
SidebarGroupAction.displayName = "SidebarGroupAction";
|
|
7531
|
-
var SidebarGroupContent =
|
|
7540
|
+
var SidebarGroupContent = React25.forwardRef(
|
|
7532
7541
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7533
7542
|
"div",
|
|
7534
7543
|
{
|
|
@@ -7540,7 +7549,7 @@ var SidebarGroupContent = React24.forwardRef(
|
|
|
7540
7549
|
)
|
|
7541
7550
|
);
|
|
7542
7551
|
SidebarGroupContent.displayName = "SidebarGroupContent";
|
|
7543
|
-
var SidebarMenu =
|
|
7552
|
+
var SidebarMenu = React25.forwardRef(
|
|
7544
7553
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7545
7554
|
"ul",
|
|
7546
7555
|
{
|
|
@@ -7552,7 +7561,7 @@ var SidebarMenu = React24.forwardRef(
|
|
|
7552
7561
|
)
|
|
7553
7562
|
);
|
|
7554
7563
|
SidebarMenu.displayName = "SidebarMenu";
|
|
7555
|
-
var SidebarMenuItem =
|
|
7564
|
+
var SidebarMenuItem = React25.forwardRef(
|
|
7556
7565
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7557
7566
|
"li",
|
|
7558
7567
|
{
|
|
@@ -7584,7 +7593,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority11.cva)(
|
|
|
7584
7593
|
}
|
|
7585
7594
|
}
|
|
7586
7595
|
);
|
|
7587
|
-
var SidebarMenuButton =
|
|
7596
|
+
var SidebarMenuButton = React25.forwardRef(
|
|
7588
7597
|
({
|
|
7589
7598
|
asChild = false,
|
|
7590
7599
|
isActive = false,
|
|
@@ -7630,7 +7639,7 @@ var SidebarMenuButton = React24.forwardRef(
|
|
|
7630
7639
|
}
|
|
7631
7640
|
);
|
|
7632
7641
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
7633
|
-
var SidebarMenuAction =
|
|
7642
|
+
var SidebarMenuAction = React25.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
7634
7643
|
const Comp = asChild ? import_react_slot4.Slot : "button";
|
|
7635
7644
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7636
7645
|
Comp,
|
|
@@ -7647,7 +7656,7 @@ var SidebarMenuAction = React24.forwardRef(({ className, asChild = false, showOn
|
|
|
7647
7656
|
);
|
|
7648
7657
|
});
|
|
7649
7658
|
SidebarMenuAction.displayName = "SidebarMenuAction";
|
|
7650
|
-
var SidebarMenuBadge =
|
|
7659
|
+
var SidebarMenuBadge = React25.forwardRef(
|
|
7651
7660
|
({ className, ...props }, ref) => {
|
|
7652
7661
|
const { open, isMobile, openMobile } = useSidebar();
|
|
7653
7662
|
const isOpen = isMobile ? openMobile : open;
|
|
@@ -7667,8 +7676,8 @@ var SidebarMenuBadge = React24.forwardRef(
|
|
|
7667
7676
|
}
|
|
7668
7677
|
);
|
|
7669
7678
|
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
|
7670
|
-
var SidebarMenuSkeleton =
|
|
7671
|
-
const width =
|
|
7679
|
+
var SidebarMenuSkeleton = React25.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
7680
|
+
const width = React25.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
7672
7681
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
7673
7682
|
"div",
|
|
7674
7683
|
{
|
|
@@ -7691,7 +7700,7 @@ var SidebarMenuSkeleton = React24.forwardRef(({ className, showIcon = false, ...
|
|
|
7691
7700
|
);
|
|
7692
7701
|
});
|
|
7693
7702
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
|
7694
|
-
var SidebarMenuSub =
|
|
7703
|
+
var SidebarMenuSub = React25.forwardRef(
|
|
7695
7704
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
7696
7705
|
"ul",
|
|
7697
7706
|
{
|
|
@@ -7706,7 +7715,7 @@ var SidebarMenuSub = React24.forwardRef(
|
|
|
7706
7715
|
)
|
|
7707
7716
|
);
|
|
7708
7717
|
SidebarMenuSub.displayName = "SidebarMenuSub";
|
|
7709
|
-
var SidebarMenuSubItem =
|
|
7718
|
+
var SidebarMenuSubItem = React25.forwardRef(
|
|
7710
7719
|
({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("li", { ref, ...props })
|
|
7711
7720
|
);
|
|
7712
7721
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
|
@@ -7730,7 +7739,7 @@ var sidebarMenuSubButtonVariants = (0, import_class_variance_authority11.cva)(
|
|
|
7730
7739
|
}
|
|
7731
7740
|
}
|
|
7732
7741
|
);
|
|
7733
|
-
var SidebarMenuSubButton =
|
|
7742
|
+
var SidebarMenuSubButton = React25.forwardRef(
|
|
7734
7743
|
({
|
|
7735
7744
|
asChild = false,
|
|
7736
7745
|
isActive,
|
|
@@ -8152,9 +8161,9 @@ SwitchBlocksInternal.displayName = "SwitchBlocks";
|
|
|
8152
8161
|
var SwitchBlocks = (0, import_react58.memo)(SwitchBlocksInternal);
|
|
8153
8162
|
|
|
8154
8163
|
// src/switch-group/SwitchGroup.tsx
|
|
8155
|
-
var
|
|
8164
|
+
var React27 = __toESM(require("react"), 1);
|
|
8156
8165
|
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
8157
|
-
var SwitchGroup =
|
|
8166
|
+
var SwitchGroup = React27.forwardRef(
|
|
8158
8167
|
({ options, value = [], onChange, disabled = false, className, error, ...props }, ref) => {
|
|
8159
8168
|
const handleOptionChange = (optionValue, checked) => {
|
|
8160
8169
|
if (!onChange) return;
|
|
@@ -8436,7 +8445,7 @@ function useUpdateToast({ id }) {
|
|
|
8436
8445
|
}
|
|
8437
8446
|
|
|
8438
8447
|
// src/toggle-group/ToggleGroup.tsx
|
|
8439
|
-
var
|
|
8448
|
+
var React28 = __toESM(require("react"), 1);
|
|
8440
8449
|
var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
|
|
8441
8450
|
|
|
8442
8451
|
// src/toggle-group/style.ts
|
|
@@ -8470,12 +8479,12 @@ var toggleVariants = (0, import_class_variance_authority13.cva)(
|
|
|
8470
8479
|
|
|
8471
8480
|
// src/toggle-group/ToggleGroup.tsx
|
|
8472
8481
|
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
8473
|
-
var ToggleGroupContext =
|
|
8482
|
+
var ToggleGroupContext = React28.createContext({
|
|
8474
8483
|
size: "default",
|
|
8475
8484
|
variant: "default",
|
|
8476
8485
|
theme: "default"
|
|
8477
8486
|
});
|
|
8478
|
-
var ToggleGroup =
|
|
8487
|
+
var ToggleGroup = React28.forwardRef(({ className, variant, size, theme, children, ...props }, ref) => {
|
|
8479
8488
|
const isTabVariant = variant === "tab";
|
|
8480
8489
|
return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
|
|
8481
8490
|
ToggleGroupPrimitive.Root,
|
|
@@ -8492,8 +8501,8 @@ var ToggleGroup = React27.forwardRef(({ className, variant, size, theme, childre
|
|
|
8492
8501
|
);
|
|
8493
8502
|
});
|
|
8494
8503
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
8495
|
-
var ToggleGroupItem =
|
|
8496
|
-
const context =
|
|
8504
|
+
var ToggleGroupItem = React28.forwardRef(({ className, children, variant, size, theme, ...props }, ref) => {
|
|
8505
|
+
const context = React28.useContext(ToggleGroupContext);
|
|
8497
8506
|
const resolvedVariant = context.variant || variant;
|
|
8498
8507
|
const isTabVariant = resolvedVariant === "tab";
|
|
8499
8508
|
return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
|
|
@@ -8628,7 +8637,7 @@ function TogglesInternal({
|
|
|
8628
8637
|
var Toggles = (0, import_react61.forwardRef)(TogglesInternal);
|
|
8629
8638
|
|
|
8630
8639
|
// src/text-field/TextField.tsx
|
|
8631
|
-
var
|
|
8640
|
+
var React29 = __toESM(require("react"), 1);
|
|
8632
8641
|
var LabelPrimitive2 = __toESM(require("@radix-ui/react-label"), 1);
|
|
8633
8642
|
var import_class_variance_authority14 = require("class-variance-authority");
|
|
8634
8643
|
var import_react_i18next21 = require("react-i18next");
|
|
@@ -8722,7 +8731,7 @@ var floatingLabelClasses = [
|
|
|
8722
8731
|
"peer-focus:to-[var(--text-field-bg-filled)]",
|
|
8723
8732
|
"peer-focus:to-50%"
|
|
8724
8733
|
];
|
|
8725
|
-
var TextField =
|
|
8734
|
+
var TextField = React29.forwardRef(
|
|
8726
8735
|
({
|
|
8727
8736
|
className,
|
|
8728
8737
|
wrapperClassName,
|
|
@@ -8741,7 +8750,7 @@ var TextField = React28.forwardRef(
|
|
|
8741
8750
|
}, ref) => {
|
|
8742
8751
|
const { t } = (0, import_react_i18next21.useTranslation)();
|
|
8743
8752
|
const hasError = Boolean(error);
|
|
8744
|
-
const autoId =
|
|
8753
|
+
const autoId = React29.useId();
|
|
8745
8754
|
const inputId = props.id || autoId;
|
|
8746
8755
|
const inputClasses = cn(
|
|
8747
8756
|
inputVariants({ variant, error: hasError, readOnly: Boolean(readOnly) }),
|
|
@@ -8974,11 +8983,11 @@ function WideButton({ className, disabled, ...props }) {
|
|
|
8974
8983
|
}
|
|
8975
8984
|
|
|
8976
8985
|
// src/datepicker/DatePicker.tsx
|
|
8977
|
-
var
|
|
8986
|
+
var React33 = __toESM(require("react"), 1);
|
|
8978
8987
|
var import_lucide_react42 = require("lucide-react");
|
|
8979
8988
|
|
|
8980
8989
|
// src/drawer/Drawer.tsx
|
|
8981
|
-
var
|
|
8990
|
+
var React30 = __toESM(require("react"), 1);
|
|
8982
8991
|
var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
8983
8992
|
var import_react_draggable = __toESM(require("react-draggable"), 1);
|
|
8984
8993
|
var import_jsx_runtime119 = require("react/jsx-runtime");
|
|
@@ -8996,7 +9005,7 @@ function DrawerPortal({ ...props }) {
|
|
|
8996
9005
|
function DrawerClose({ ...props }) {
|
|
8997
9006
|
return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
|
|
8998
9007
|
}
|
|
8999
|
-
var DrawerOverlay =
|
|
9008
|
+
var DrawerOverlay = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
9000
9009
|
DialogPrimitive2.Overlay,
|
|
9001
9010
|
{
|
|
9002
9011
|
ref,
|
|
@@ -9010,7 +9019,7 @@ var DrawerOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
9010
9019
|
));
|
|
9011
9020
|
DrawerOverlay.displayName = DialogPrimitive2.Overlay.displayName;
|
|
9012
9021
|
var DrawerOverlayClasses = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0";
|
|
9013
|
-
var DrawerContent =
|
|
9022
|
+
var DrawerContent = React30.forwardRef(
|
|
9014
9023
|
({
|
|
9015
9024
|
className,
|
|
9016
9025
|
children,
|
|
@@ -9022,19 +9031,19 @@ var DrawerContent = React29.forwardRef(
|
|
|
9022
9031
|
...props
|
|
9023
9032
|
}, ref) => {
|
|
9024
9033
|
const finalContainer = container || getCustomContainer() || void 0;
|
|
9025
|
-
const nodeRef =
|
|
9026
|
-
const [dragOffsetY, setDragOffsetY] =
|
|
9034
|
+
const nodeRef = React30.useRef(null);
|
|
9035
|
+
const [dragOffsetY, setDragOffsetY] = React30.useState(0);
|
|
9027
9036
|
const overlayOpacity = Math.max(
|
|
9028
9037
|
DRAWER_MIN_OVERLAY_OPACITY,
|
|
9029
9038
|
1 - dragOffsetY / (DRAWER_CLOSE_THRESHOLD * 2)
|
|
9030
9039
|
);
|
|
9031
|
-
const handleDrag =
|
|
9040
|
+
const handleDrag = React30.useCallback(
|
|
9032
9041
|
(_event, data) => {
|
|
9033
9042
|
setDragOffsetY(Math.max(0, data.y));
|
|
9034
9043
|
},
|
|
9035
9044
|
[]
|
|
9036
9045
|
);
|
|
9037
|
-
const handleStop =
|
|
9046
|
+
const handleStop = React30.useCallback(
|
|
9038
9047
|
(_event, data) => {
|
|
9039
9048
|
if (data.y > DRAWER_CLOSE_THRESHOLD) {
|
|
9040
9049
|
setDragOffsetY(0);
|
|
@@ -9125,7 +9134,7 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
|
|
|
9125
9134
|
DrawerHeader.displayName = "DrawerHeader";
|
|
9126
9135
|
var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
|
|
9127
9136
|
DrawerFooter.displayName = "DrawerFooter";
|
|
9128
|
-
var DrawerTitle =
|
|
9137
|
+
var DrawerTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
9129
9138
|
DialogPrimitive2.Title,
|
|
9130
9139
|
{
|
|
9131
9140
|
ref,
|
|
@@ -9135,7 +9144,7 @@ var DrawerTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
9135
9144
|
}
|
|
9136
9145
|
));
|
|
9137
9146
|
DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
|
|
9138
|
-
var DrawerDescription =
|
|
9147
|
+
var DrawerDescription = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
9139
9148
|
DialogPrimitive2.Description,
|
|
9140
9149
|
{
|
|
9141
9150
|
ref,
|
|
@@ -9147,7 +9156,7 @@ var DrawerDescription = React29.forwardRef(({ className, ...props }, ref) => /*
|
|
|
9147
9156
|
DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
|
|
9148
9157
|
|
|
9149
9158
|
// src/datepicker/useDatePickerWheel.ts
|
|
9150
|
-
var
|
|
9159
|
+
var React31 = __toESM(require("react"), 1);
|
|
9151
9160
|
|
|
9152
9161
|
// src/datepicker/datePicker.utils.ts
|
|
9153
9162
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -9298,21 +9307,21 @@ function useDatePickerWheel({
|
|
|
9298
9307
|
minDate,
|
|
9299
9308
|
maxDate
|
|
9300
9309
|
}) {
|
|
9301
|
-
const years =
|
|
9302
|
-
const [draftDate, setDraftDate] =
|
|
9310
|
+
const years = React31.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
9311
|
+
const [draftDate, setDraftDate] = React31.useState(
|
|
9303
9312
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
9304
9313
|
);
|
|
9305
9314
|
const draftYear = draftDate.getFullYear();
|
|
9306
9315
|
const draftMonth = draftDate.getMonth();
|
|
9307
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
9308
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
9309
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
9310
|
-
const monthListRef =
|
|
9311
|
-
const dayListRef =
|
|
9312
|
-
const yearListRef =
|
|
9313
|
-
const settleTimeoutsRef =
|
|
9314
|
-
const animationFramesRef =
|
|
9315
|
-
const columnRefs =
|
|
9316
|
+
const [monthScrollTop, setMonthScrollTop] = React31.useState(0);
|
|
9317
|
+
const [dayScrollTop, setDayScrollTop] = React31.useState(0);
|
|
9318
|
+
const [yearScrollTop, setYearScrollTop] = React31.useState(0);
|
|
9319
|
+
const monthListRef = React31.useRef(null);
|
|
9320
|
+
const dayListRef = React31.useRef(null);
|
|
9321
|
+
const yearListRef = React31.useRef(null);
|
|
9322
|
+
const settleTimeoutsRef = React31.useRef({});
|
|
9323
|
+
const animationFramesRef = React31.useRef({});
|
|
9324
|
+
const columnRefs = React31.useMemo(
|
|
9316
9325
|
() => ({
|
|
9317
9326
|
month: monthListRef,
|
|
9318
9327
|
day: dayListRef,
|
|
@@ -9320,7 +9329,7 @@ function useDatePickerWheel({
|
|
|
9320
9329
|
}),
|
|
9321
9330
|
[]
|
|
9322
9331
|
);
|
|
9323
|
-
const setColumnScrollTop =
|
|
9332
|
+
const setColumnScrollTop = React31.useCallback(
|
|
9324
9333
|
(column, nextScrollTop) => {
|
|
9325
9334
|
if (column === "month") {
|
|
9326
9335
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -9334,19 +9343,19 @@ function useDatePickerWheel({
|
|
|
9334
9343
|
},
|
|
9335
9344
|
[]
|
|
9336
9345
|
);
|
|
9337
|
-
const clearSettleTimeout =
|
|
9346
|
+
const clearSettleTimeout = React31.useCallback((column) => {
|
|
9338
9347
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
9339
9348
|
if (timeoutId === void 0) return;
|
|
9340
9349
|
window.clearTimeout(timeoutId);
|
|
9341
9350
|
delete settleTimeoutsRef.current[column];
|
|
9342
9351
|
}, []);
|
|
9343
|
-
const clearAnimationFrame =
|
|
9352
|
+
const clearAnimationFrame = React31.useCallback((column) => {
|
|
9344
9353
|
const frameId = animationFramesRef.current[column];
|
|
9345
9354
|
if (frameId === void 0) return;
|
|
9346
9355
|
window.cancelAnimationFrame(frameId);
|
|
9347
9356
|
delete animationFramesRef.current[column];
|
|
9348
9357
|
}, []);
|
|
9349
|
-
|
|
9358
|
+
React31.useEffect(
|
|
9350
9359
|
() => () => {
|
|
9351
9360
|
["month", "day", "year"].forEach((column) => {
|
|
9352
9361
|
clearSettleTimeout(column);
|
|
@@ -9355,22 +9364,22 @@ function useDatePickerWheel({
|
|
|
9355
9364
|
},
|
|
9356
9365
|
[clearAnimationFrame, clearSettleTimeout]
|
|
9357
9366
|
);
|
|
9358
|
-
|
|
9367
|
+
React31.useEffect(() => {
|
|
9359
9368
|
if (isOpen) return;
|
|
9360
9369
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
9361
9370
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
9362
|
-
const months =
|
|
9371
|
+
const months = React31.useMemo(
|
|
9363
9372
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
9364
9373
|
[draftYear, maxDate, minDate]
|
|
9365
9374
|
);
|
|
9366
|
-
const days =
|
|
9375
|
+
const days = React31.useMemo(
|
|
9367
9376
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
9368
9377
|
[draftMonth, draftYear, maxDate, minDate]
|
|
9369
9378
|
);
|
|
9370
9379
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
9371
9380
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
9372
9381
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
9373
|
-
const syncScrollPositions =
|
|
9382
|
+
const syncScrollPositions = React31.useCallback(
|
|
9374
9383
|
(nextDate, behavior = "auto") => {
|
|
9375
9384
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
9376
9385
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -9394,7 +9403,7 @@ function useDatePickerWheel({
|
|
|
9394
9403
|
},
|
|
9395
9404
|
[maxDate, minDate, years]
|
|
9396
9405
|
);
|
|
9397
|
-
|
|
9406
|
+
React31.useLayoutEffect(() => {
|
|
9398
9407
|
if (!isOpen) return;
|
|
9399
9408
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
9400
9409
|
setDraftDate(nextDate);
|
|
@@ -9405,7 +9414,7 @@ function useDatePickerWheel({
|
|
|
9405
9414
|
window.cancelAnimationFrame(frameId);
|
|
9406
9415
|
};
|
|
9407
9416
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
9408
|
-
const updateDraftDate =
|
|
9417
|
+
const updateDraftDate = React31.useCallback(
|
|
9409
9418
|
(column, targetIndex, behavior = "smooth") => {
|
|
9410
9419
|
const currentDate = stripTime(draftDate);
|
|
9411
9420
|
const currentYear = currentDate.getFullYear();
|
|
@@ -9450,7 +9459,7 @@ function useDatePickerWheel({
|
|
|
9450
9459
|
},
|
|
9451
9460
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
9452
9461
|
);
|
|
9453
|
-
const settleColumnScroll =
|
|
9462
|
+
const settleColumnScroll = React31.useCallback(
|
|
9454
9463
|
(column) => {
|
|
9455
9464
|
const list = columnRefs[column].current;
|
|
9456
9465
|
if (!list) return;
|
|
@@ -9463,7 +9472,7 @@ function useDatePickerWheel({
|
|
|
9463
9472
|
},
|
|
9464
9473
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
9465
9474
|
);
|
|
9466
|
-
const scheduleScrollSettle =
|
|
9475
|
+
const scheduleScrollSettle = React31.useCallback(
|
|
9467
9476
|
(column) => {
|
|
9468
9477
|
clearSettleTimeout(column);
|
|
9469
9478
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -9472,7 +9481,7 @@ function useDatePickerWheel({
|
|
|
9472
9481
|
},
|
|
9473
9482
|
[clearSettleTimeout, settleColumnScroll]
|
|
9474
9483
|
);
|
|
9475
|
-
const handleColumnScroll =
|
|
9484
|
+
const handleColumnScroll = React31.useCallback(
|
|
9476
9485
|
(column) => {
|
|
9477
9486
|
const list = columnRefs[column].current;
|
|
9478
9487
|
if (!list) return;
|
|
@@ -9486,13 +9495,13 @@ function useDatePickerWheel({
|
|
|
9486
9495
|
},
|
|
9487
9496
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
9488
9497
|
);
|
|
9489
|
-
const handleOptionSelect =
|
|
9498
|
+
const handleOptionSelect = React31.useCallback(
|
|
9490
9499
|
(column, targetIndex) => {
|
|
9491
9500
|
updateDraftDate(column, targetIndex, "smooth");
|
|
9492
9501
|
},
|
|
9493
9502
|
[updateDraftDate]
|
|
9494
9503
|
);
|
|
9495
|
-
const focusAdjacentColumn =
|
|
9504
|
+
const focusAdjacentColumn = React31.useCallback(
|
|
9496
9505
|
(column, direction) => {
|
|
9497
9506
|
const order = ["month", "day", "year"];
|
|
9498
9507
|
const currentIndex = order.indexOf(column);
|
|
@@ -9502,7 +9511,7 @@ function useDatePickerWheel({
|
|
|
9502
9511
|
},
|
|
9503
9512
|
[columnRefs]
|
|
9504
9513
|
);
|
|
9505
|
-
const handleColumnKeyDown =
|
|
9514
|
+
const handleColumnKeyDown = React31.useCallback(
|
|
9506
9515
|
(column, event) => {
|
|
9507
9516
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
9508
9517
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -9806,7 +9815,7 @@ var DEVICE = {
|
|
|
9806
9815
|
};
|
|
9807
9816
|
|
|
9808
9817
|
// src/field-trigger/FieldTrigger.tsx
|
|
9809
|
-
var
|
|
9818
|
+
var React32 = __toESM(require("react"), 1);
|
|
9810
9819
|
var import_lucide_react41 = require("lucide-react");
|
|
9811
9820
|
var import_react_i18next22 = require("react-i18next");
|
|
9812
9821
|
|
|
@@ -9850,7 +9859,7 @@ function FieldErrorMessage({
|
|
|
9850
9859
|
|
|
9851
9860
|
// src/field-trigger/FieldTrigger.tsx
|
|
9852
9861
|
var import_jsx_runtime123 = require("react/jsx-runtime");
|
|
9853
|
-
var FieldTrigger =
|
|
9862
|
+
var FieldTrigger = React32.forwardRef(
|
|
9854
9863
|
({
|
|
9855
9864
|
as = "button",
|
|
9856
9865
|
variant = "airbnb",
|
|
@@ -10017,7 +10026,7 @@ FieldTrigger.displayName = "FieldTrigger";
|
|
|
10017
10026
|
// src/datepicker/DatePicker.tsx
|
|
10018
10027
|
var import_jsx_runtime124 = require("react/jsx-runtime");
|
|
10019
10028
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
10020
|
-
var DatePicker =
|
|
10029
|
+
var DatePicker = React33.forwardRef(
|
|
10021
10030
|
({
|
|
10022
10031
|
variant = "default",
|
|
10023
10032
|
label,
|
|
@@ -10043,24 +10052,24 @@ var DatePicker = React32.forwardRef(
|
|
|
10043
10052
|
formatValue = formatDateValue
|
|
10044
10053
|
}, ref) => {
|
|
10045
10054
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
10046
|
-
const [isOpen, setIsOpen] =
|
|
10047
|
-
const triggerId =
|
|
10048
|
-
const pickerId =
|
|
10049
|
-
const labelId =
|
|
10050
|
-
const valueId =
|
|
10051
|
-
const helperTextId =
|
|
10052
|
-
const errorId =
|
|
10053
|
-
const internalRef =
|
|
10055
|
+
const [isOpen, setIsOpen] = React33.useState(false);
|
|
10056
|
+
const triggerId = React33.useId();
|
|
10057
|
+
const pickerId = React33.useId();
|
|
10058
|
+
const labelId = React33.useId();
|
|
10059
|
+
const valueId = React33.useId();
|
|
10060
|
+
const helperTextId = React33.useId();
|
|
10061
|
+
const errorId = React33.useId();
|
|
10062
|
+
const internalRef = React33.useRef(null);
|
|
10054
10063
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
10055
|
-
const monthLabels =
|
|
10056
|
-
const resolvedMinDate =
|
|
10057
|
-
const resolvedMaxDate =
|
|
10058
|
-
const normalizedValue =
|
|
10059
|
-
const normalizedDefaultValue =
|
|
10064
|
+
const monthLabels = React33.useMemo(() => getMonthLabels(locale), [locale]);
|
|
10065
|
+
const resolvedMinDate = React33.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
10066
|
+
const resolvedMaxDate = React33.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
10067
|
+
const normalizedValue = React33.useMemo(() => normalizeDateValue(value), [value]);
|
|
10068
|
+
const normalizedDefaultValue = React33.useMemo(
|
|
10060
10069
|
() => normalizeDateValue(defaultValue),
|
|
10061
10070
|
[defaultValue]
|
|
10062
10071
|
);
|
|
10063
|
-
const resolvedValue =
|
|
10072
|
+
const resolvedValue = React33.useMemo(
|
|
10064
10073
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
10065
10074
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
10066
10075
|
);
|
|
@@ -10091,7 +10100,7 @@ var DatePicker = React32.forwardRef(
|
|
|
10091
10100
|
minDate: resolvedMinDate,
|
|
10092
10101
|
maxDate: resolvedMaxDate
|
|
10093
10102
|
});
|
|
10094
|
-
const handleOpenChange =
|
|
10103
|
+
const handleOpenChange = React33.useCallback(
|
|
10095
10104
|
(nextOpen) => {
|
|
10096
10105
|
if (isBlocked && nextOpen) return;
|
|
10097
10106
|
setIsOpen(nextOpen);
|
|
@@ -10101,7 +10110,7 @@ var DatePicker = React32.forwardRef(
|
|
|
10101
10110
|
},
|
|
10102
10111
|
[isBlocked]
|
|
10103
10112
|
);
|
|
10104
|
-
const handleDone =
|
|
10113
|
+
const handleDone = React33.useCallback(() => {
|
|
10105
10114
|
if (isBlocked) return;
|
|
10106
10115
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
10107
10116
|
handleOpenChange(false);
|
|
@@ -10113,11 +10122,11 @@ var DatePicker = React32.forwardRef(
|
|
|
10113
10122
|
resolvedMaxDate,
|
|
10114
10123
|
resolvedMinDate
|
|
10115
10124
|
]);
|
|
10116
|
-
const handleTriggerClick =
|
|
10125
|
+
const handleTriggerClick = React33.useCallback(() => {
|
|
10117
10126
|
if (isBlocked) return;
|
|
10118
10127
|
setIsOpen(true);
|
|
10119
10128
|
}, [isBlocked]);
|
|
10120
|
-
const handleTriggerKeyDown =
|
|
10129
|
+
const handleTriggerKeyDown = React33.useCallback(
|
|
10121
10130
|
(event) => {
|
|
10122
10131
|
if (isBlocked) return;
|
|
10123
10132
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -10127,7 +10136,7 @@ var DatePicker = React32.forwardRef(
|
|
|
10127
10136
|
},
|
|
10128
10137
|
[isBlocked]
|
|
10129
10138
|
);
|
|
10130
|
-
|
|
10139
|
+
React33.useEffect(() => {
|
|
10131
10140
|
if (isBlocked) {
|
|
10132
10141
|
setIsOpen(false);
|
|
10133
10142
|
}
|
|
@@ -10309,10 +10318,10 @@ function ResponsiveSheet({
|
|
|
10309
10318
|
}
|
|
10310
10319
|
|
|
10311
10320
|
// src/airbnb/input/Input.tsx
|
|
10312
|
-
var
|
|
10321
|
+
var React34 = __toESM(require("react"), 1);
|
|
10313
10322
|
var import_jsx_runtime126 = require("react/jsx-runtime");
|
|
10314
10323
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
10315
|
-
var AirbnbInput =
|
|
10324
|
+
var AirbnbInput = React34.forwardRef(
|
|
10316
10325
|
({
|
|
10317
10326
|
variant = "default",
|
|
10318
10327
|
label,
|
|
@@ -10341,15 +10350,15 @@ var AirbnbInput = React33.forwardRef(
|
|
|
10341
10350
|
placeholder,
|
|
10342
10351
|
...props
|
|
10343
10352
|
}, ref) => {
|
|
10344
|
-
const generatedId =
|
|
10345
|
-
const inputRef =
|
|
10353
|
+
const generatedId = React34.useId();
|
|
10354
|
+
const inputRef = React34.useRef(null);
|
|
10346
10355
|
const inputId = id ?? generatedId;
|
|
10347
10356
|
const fieldId = `${inputId}-field`;
|
|
10348
10357
|
const labelId = `${inputId}-label`;
|
|
10349
10358
|
const errorId = `${inputId}-error`;
|
|
10350
10359
|
const accessibleLabel = placeholder ?? label;
|
|
10351
|
-
const [isFocused, setIsFocused] =
|
|
10352
|
-
const [currentValue, setCurrentValue] =
|
|
10360
|
+
const [isFocused, setIsFocused] = React34.useState(false);
|
|
10361
|
+
const [currentValue, setCurrentValue] = React34.useState(
|
|
10353
10362
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
10354
10363
|
);
|
|
10355
10364
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -10359,11 +10368,11 @@ var AirbnbInput = React33.forwardRef(
|
|
|
10359
10368
|
const triggerError = error ?? invalid;
|
|
10360
10369
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
10361
10370
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
10362
|
-
|
|
10371
|
+
React34.useLayoutEffect(() => {
|
|
10363
10372
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
10364
10373
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
10365
10374
|
}, [value]);
|
|
10366
|
-
const setRefs =
|
|
10375
|
+
const setRefs = React34.useCallback(
|
|
10367
10376
|
(node) => {
|
|
10368
10377
|
inputRef.current = node;
|
|
10369
10378
|
if (node && value == null) {
|
|
@@ -10461,11 +10470,11 @@ var AirbnbInput = React33.forwardRef(
|
|
|
10461
10470
|
AirbnbInput.displayName = "Input";
|
|
10462
10471
|
|
|
10463
10472
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
10464
|
-
var
|
|
10473
|
+
var React40 = __toESM(require("react"), 1);
|
|
10465
10474
|
var import_lucide_react44 = require("lucide-react");
|
|
10466
10475
|
|
|
10467
10476
|
// src/airbnb/select/Select.tsx
|
|
10468
|
-
var
|
|
10477
|
+
var React39 = __toESM(require("react"), 1);
|
|
10469
10478
|
|
|
10470
10479
|
// src/airbnb/select/SelectDesktopMenu.tsx
|
|
10471
10480
|
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
@@ -10810,10 +10819,10 @@ function SelectMobileContent({
|
|
|
10810
10819
|
}
|
|
10811
10820
|
|
|
10812
10821
|
// src/airbnb/select/SelectTrigger.tsx
|
|
10813
|
-
var
|
|
10822
|
+
var React35 = __toESM(require("react"), 1);
|
|
10814
10823
|
var import_lucide_react43 = require("lucide-react");
|
|
10815
10824
|
var import_jsx_runtime131 = require("react/jsx-runtime");
|
|
10816
|
-
var SelectTrigger2 =
|
|
10825
|
+
var SelectTrigger2 = React35.forwardRef(
|
|
10817
10826
|
({
|
|
10818
10827
|
id,
|
|
10819
10828
|
open,
|
|
@@ -10880,7 +10889,7 @@ var SelectTrigger2 = React34.forwardRef(
|
|
|
10880
10889
|
SelectTrigger2.displayName = "SelectTrigger";
|
|
10881
10890
|
|
|
10882
10891
|
// src/airbnb/select/useDesktopSelect.ts
|
|
10883
|
-
var
|
|
10892
|
+
var React36 = __toESM(require("react"), 1);
|
|
10884
10893
|
function useDesktopSelect({
|
|
10885
10894
|
isMobile,
|
|
10886
10895
|
isOpen,
|
|
@@ -10889,12 +10898,12 @@ function useDesktopSelect({
|
|
|
10889
10898
|
disabled,
|
|
10890
10899
|
onChange
|
|
10891
10900
|
}) {
|
|
10892
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
10893
|
-
const triggerRef =
|
|
10894
|
-
const listRef =
|
|
10895
|
-
const optionRefs =
|
|
10901
|
+
const [highlightedIndex, setHighlightedIndex] = React36.useState(-1);
|
|
10902
|
+
const triggerRef = React36.useRef(null);
|
|
10903
|
+
const listRef = React36.useRef(null);
|
|
10904
|
+
const optionRefs = React36.useRef([]);
|
|
10896
10905
|
const selectedIndex = getOptionIndex(options, value);
|
|
10897
|
-
|
|
10906
|
+
React36.useEffect(() => {
|
|
10898
10907
|
if (!isOpen || isMobile) return;
|
|
10899
10908
|
setHighlightedIndex((currentIndex) => {
|
|
10900
10909
|
if (currentIndex >= 0) {
|
|
@@ -10909,34 +10918,34 @@ function useDesktopSelect({
|
|
|
10909
10918
|
window.cancelAnimationFrame(frameId);
|
|
10910
10919
|
};
|
|
10911
10920
|
}, [isMobile, isOpen, options, selectedIndex]);
|
|
10912
|
-
|
|
10921
|
+
React36.useEffect(() => {
|
|
10913
10922
|
if (!isOpen || isMobile || highlightedIndex < 0) return;
|
|
10914
10923
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
10915
10924
|
block: "nearest"
|
|
10916
10925
|
});
|
|
10917
10926
|
}, [highlightedIndex, isMobile, isOpen]);
|
|
10918
|
-
|
|
10927
|
+
React36.useEffect(() => {
|
|
10919
10928
|
if (isOpen) return;
|
|
10920
10929
|
setHighlightedIndex(-1);
|
|
10921
10930
|
}, [isOpen]);
|
|
10922
|
-
const focusTrigger =
|
|
10931
|
+
const focusTrigger = React36.useCallback(() => {
|
|
10923
10932
|
triggerRef.current?.focus();
|
|
10924
10933
|
}, []);
|
|
10925
|
-
const handleSelect =
|
|
10934
|
+
const handleSelect = React36.useCallback(
|
|
10926
10935
|
(option) => {
|
|
10927
10936
|
if (option.isDisabled || disabled) return;
|
|
10928
10937
|
onChange(option);
|
|
10929
10938
|
},
|
|
10930
10939
|
[disabled, onChange]
|
|
10931
10940
|
);
|
|
10932
|
-
const openMenu =
|
|
10941
|
+
const openMenu = React36.useCallback(
|
|
10933
10942
|
(targetIndex) => {
|
|
10934
10943
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
10935
10944
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
10936
10945
|
},
|
|
10937
10946
|
[options, selectedIndex]
|
|
10938
10947
|
);
|
|
10939
|
-
const handleTriggerKeyDown =
|
|
10948
|
+
const handleTriggerKeyDown = React36.useCallback(
|
|
10940
10949
|
(event, onOpen) => {
|
|
10941
10950
|
if (disabled) return;
|
|
10942
10951
|
if (event.key === "ArrowDown") {
|
|
@@ -10961,7 +10970,7 @@ function useDesktopSelect({
|
|
|
10961
10970
|
},
|
|
10962
10971
|
[disabled, openMenu, options, selectedIndex]
|
|
10963
10972
|
);
|
|
10964
|
-
const handleMenuKeyDown =
|
|
10973
|
+
const handleMenuKeyDown = React36.useCallback(
|
|
10965
10974
|
(event, onClose) => {
|
|
10966
10975
|
if (event.key === "Escape") {
|
|
10967
10976
|
event.preventDefault();
|
|
@@ -11011,7 +11020,7 @@ function useDesktopSelect({
|
|
|
11011
11020
|
},
|
|
11012
11021
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
11013
11022
|
);
|
|
11014
|
-
const setOptionRef =
|
|
11023
|
+
const setOptionRef = React36.useCallback(
|
|
11015
11024
|
(index, node) => {
|
|
11016
11025
|
optionRefs.current[index] = node;
|
|
11017
11026
|
},
|
|
@@ -11031,23 +11040,23 @@ function useDesktopSelect({
|
|
|
11031
11040
|
}
|
|
11032
11041
|
|
|
11033
11042
|
// src/airbnb/select/useMobileSelectWheel.ts
|
|
11034
|
-
var
|
|
11043
|
+
var React37 = __toESM(require("react"), 1);
|
|
11035
11044
|
function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
11036
|
-
const [pendingValue, setPendingValue] =
|
|
11045
|
+
const [pendingValue, setPendingValue] = React37.useState(
|
|
11037
11046
|
value ?? null
|
|
11038
11047
|
);
|
|
11039
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
11040
|
-
const mobileListRef =
|
|
11041
|
-
const scrollSettleTimeoutRef =
|
|
11042
|
-
const scrollAnimationFrameRef =
|
|
11043
|
-
const getTargetIndex =
|
|
11048
|
+
const [mobileScrollTop, setMobileScrollTop] = React37.useState(0);
|
|
11049
|
+
const mobileListRef = React37.useRef(null);
|
|
11050
|
+
const scrollSettleTimeoutRef = React37.useRef(null);
|
|
11051
|
+
const scrollAnimationFrameRef = React37.useRef(null);
|
|
11052
|
+
const getTargetIndex = React37.useCallback(
|
|
11044
11053
|
(targetValue) => {
|
|
11045
11054
|
const selectedIndex = getOptionIndex(options, targetValue);
|
|
11046
11055
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
11047
11056
|
},
|
|
11048
11057
|
[options]
|
|
11049
11058
|
);
|
|
11050
|
-
const syncScrollPosition =
|
|
11059
|
+
const syncScrollPosition = React37.useCallback(
|
|
11051
11060
|
(targetValue, behavior = "instant") => {
|
|
11052
11061
|
const targetIndex = getTargetIndex(targetValue);
|
|
11053
11062
|
if (targetIndex < 0) return;
|
|
@@ -11066,27 +11075,27 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11066
11075
|
},
|
|
11067
11076
|
[getTargetIndex, options]
|
|
11068
11077
|
);
|
|
11069
|
-
const clearScrollSettleTimeout =
|
|
11078
|
+
const clearScrollSettleTimeout = React37.useCallback(() => {
|
|
11070
11079
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
11071
11080
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
11072
11081
|
scrollSettleTimeoutRef.current = null;
|
|
11073
11082
|
}, []);
|
|
11074
|
-
const clearScrollAnimationFrame =
|
|
11083
|
+
const clearScrollAnimationFrame = React37.useCallback(() => {
|
|
11075
11084
|
if (scrollAnimationFrameRef.current === null) return;
|
|
11076
11085
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
11077
11086
|
scrollAnimationFrameRef.current = null;
|
|
11078
11087
|
}, []);
|
|
11079
|
-
|
|
11088
|
+
React37.useEffect(
|
|
11080
11089
|
() => () => {
|
|
11081
11090
|
clearScrollSettleTimeout();
|
|
11082
11091
|
clearScrollAnimationFrame();
|
|
11083
11092
|
},
|
|
11084
11093
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
11085
11094
|
);
|
|
11086
|
-
|
|
11095
|
+
React37.useEffect(() => {
|
|
11087
11096
|
setPendingValue(value ?? null);
|
|
11088
11097
|
}, [value]);
|
|
11089
|
-
|
|
11098
|
+
React37.useLayoutEffect(() => {
|
|
11090
11099
|
if (!isMobile || !isOpen) return;
|
|
11091
11100
|
const frameId = window.requestAnimationFrame(() => {
|
|
11092
11101
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -11095,7 +11104,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11095
11104
|
window.cancelAnimationFrame(frameId);
|
|
11096
11105
|
};
|
|
11097
11106
|
}, [isMobile, isOpen, syncScrollPosition, value]);
|
|
11098
|
-
const settleScroll =
|
|
11107
|
+
const settleScroll = React37.useCallback(() => {
|
|
11099
11108
|
if (!mobileListRef.current) return;
|
|
11100
11109
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
11101
11110
|
const nextOption = options[nextIndex];
|
|
@@ -11107,13 +11116,13 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11107
11116
|
}
|
|
11108
11117
|
setPendingValue(nextOption);
|
|
11109
11118
|
}, [options, pendingValue]);
|
|
11110
|
-
const scheduleScrollSettle =
|
|
11119
|
+
const scheduleScrollSettle = React37.useCallback(() => {
|
|
11111
11120
|
clearScrollSettleTimeout();
|
|
11112
11121
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
11113
11122
|
settleScroll();
|
|
11114
11123
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
11115
11124
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
11116
|
-
const handleScroll =
|
|
11125
|
+
const handleScroll = React37.useCallback(() => {
|
|
11117
11126
|
if (!mobileListRef.current) return;
|
|
11118
11127
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
11119
11128
|
clearScrollAnimationFrame();
|
|
@@ -11123,7 +11132,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11123
11132
|
});
|
|
11124
11133
|
scheduleScrollSettle();
|
|
11125
11134
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
11126
|
-
const focusOptionByIndex =
|
|
11135
|
+
const focusOptionByIndex = React37.useCallback(
|
|
11127
11136
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
11128
11137
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
11129
11138
|
const option = options[index];
|
|
@@ -11141,7 +11150,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11141
11150
|
},
|
|
11142
11151
|
[options, scheduleScrollSettle]
|
|
11143
11152
|
);
|
|
11144
|
-
const handleOptionClick =
|
|
11153
|
+
const handleOptionClick = React37.useCallback(
|
|
11145
11154
|
(option) => {
|
|
11146
11155
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
11147
11156
|
const optionIndex = getOptionIndex(options, option);
|
|
@@ -11150,7 +11159,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11150
11159
|
},
|
|
11151
11160
|
[disabled, focusOptionByIndex, options]
|
|
11152
11161
|
);
|
|
11153
|
-
const moveByStep =
|
|
11162
|
+
const moveByStep = React37.useCallback(
|
|
11154
11163
|
(step) => {
|
|
11155
11164
|
const currentIndex = getOptionIndex(options, pendingValue);
|
|
11156
11165
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
@@ -11162,7 +11171,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11162
11171
|
},
|
|
11163
11172
|
[focusOptionByIndex, options, pendingValue]
|
|
11164
11173
|
);
|
|
11165
|
-
const moveToBoundary =
|
|
11174
|
+
const moveToBoundary = React37.useCallback(
|
|
11166
11175
|
(boundary) => {
|
|
11167
11176
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
11168
11177
|
if (targetIndex >= 0) {
|
|
@@ -11171,7 +11180,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11171
11180
|
},
|
|
11172
11181
|
[focusOptionByIndex, options]
|
|
11173
11182
|
);
|
|
11174
|
-
const syncPendingValue =
|
|
11183
|
+
const syncPendingValue = React37.useCallback(
|
|
11175
11184
|
(nextValue) => {
|
|
11176
11185
|
const normalizedValue = nextValue ?? null;
|
|
11177
11186
|
const matchedIndex = getOptionIndex(options, normalizedValue);
|
|
@@ -11199,9 +11208,9 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11199
11208
|
}
|
|
11200
11209
|
|
|
11201
11210
|
// src/airbnb/select/useSelectIds.ts
|
|
11202
|
-
var
|
|
11211
|
+
var React38 = __toESM(require("react"), 1);
|
|
11203
11212
|
function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
11204
|
-
const reactId =
|
|
11213
|
+
const reactId = React38.useId().replace(/:/g, "");
|
|
11205
11214
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
11206
11215
|
const triggerId = `${baseId}-trigger`;
|
|
11207
11216
|
const labelId = `${baseId}-label`;
|
|
@@ -11211,7 +11220,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
11211
11220
|
const listboxId = `${baseId}-listbox`;
|
|
11212
11221
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
11213
11222
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
11214
|
-
const getOptionId2 =
|
|
11223
|
+
const getOptionId2 = React38.useCallback(
|
|
11215
11224
|
(index) => `${baseId}-option-${index}`,
|
|
11216
11225
|
[baseId]
|
|
11217
11226
|
);
|
|
@@ -11230,7 +11239,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
11230
11239
|
|
|
11231
11240
|
// src/airbnb/select/Select.tsx
|
|
11232
11241
|
var import_jsx_runtime132 = require("react/jsx-runtime");
|
|
11233
|
-
var AirbnbSelect =
|
|
11242
|
+
var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
11234
11243
|
options = [],
|
|
11235
11244
|
value,
|
|
11236
11245
|
onChange,
|
|
@@ -11257,8 +11266,8 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11257
11266
|
noOptionsMessage
|
|
11258
11267
|
}, ref) {
|
|
11259
11268
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
11260
|
-
const [isOpen, setIsOpen] =
|
|
11261
|
-
const containerRef =
|
|
11269
|
+
const [isOpen, setIsOpen] = React39.useState(false);
|
|
11270
|
+
const containerRef = React39.useRef(null);
|
|
11262
11271
|
const hasValue = Boolean(value);
|
|
11263
11272
|
const helperText = placeholder ?? label;
|
|
11264
11273
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -11316,12 +11325,12 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11316
11325
|
onOutsideClick: () => setIsOpen(false),
|
|
11317
11326
|
isDisabled: !isOpen || isMobile
|
|
11318
11327
|
});
|
|
11319
|
-
|
|
11328
|
+
React39.useEffect(() => {
|
|
11320
11329
|
if (isBlocked) {
|
|
11321
11330
|
setIsOpen(false);
|
|
11322
11331
|
}
|
|
11323
11332
|
}, [isBlocked]);
|
|
11324
|
-
|
|
11333
|
+
React39.useEffect(
|
|
11325
11334
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
11326
11335
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
11327
11336
|
return;
|
|
@@ -11333,7 +11342,7 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11333
11342
|
},
|
|
11334
11343
|
[onChange, options, value]
|
|
11335
11344
|
);
|
|
11336
|
-
const handleMobileOpenChange =
|
|
11345
|
+
const handleMobileOpenChange = React39.useCallback(
|
|
11337
11346
|
(nextOpen) => {
|
|
11338
11347
|
if (isBlocked && nextOpen) return;
|
|
11339
11348
|
setIsOpen(nextOpen);
|
|
@@ -11344,7 +11353,7 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11344
11353
|
},
|
|
11345
11354
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
11346
11355
|
);
|
|
11347
|
-
const handleMobileDone =
|
|
11356
|
+
const handleMobileDone = React39.useCallback(() => {
|
|
11348
11357
|
if (isBlocked) return;
|
|
11349
11358
|
const finalOption = pendingValue;
|
|
11350
11359
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -11353,7 +11362,7 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11353
11362
|
setIsOpen(false);
|
|
11354
11363
|
focusTrigger();
|
|
11355
11364
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
11356
|
-
const handleTriggerClick =
|
|
11365
|
+
const handleTriggerClick = React39.useCallback(() => {
|
|
11357
11366
|
if (isBlocked) return;
|
|
11358
11367
|
setIsOpen((prev) => {
|
|
11359
11368
|
const nextOpen = !prev;
|
|
@@ -11522,7 +11531,7 @@ var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
|
11522
11531
|
|
|
11523
11532
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
11524
11533
|
var import_jsx_runtime133 = require("react/jsx-runtime");
|
|
11525
|
-
var PhoneField =
|
|
11534
|
+
var PhoneField = React40.forwardRef(
|
|
11526
11535
|
({
|
|
11527
11536
|
variant = "default",
|
|
11528
11537
|
label,
|
|
@@ -11546,8 +11555,8 @@ var PhoneField = React39.forwardRef(
|
|
|
11546
11555
|
mobileTitle,
|
|
11547
11556
|
codePlaceholder = "+00"
|
|
11548
11557
|
}, ref) => {
|
|
11549
|
-
const inputId =
|
|
11550
|
-
const codeOptions =
|
|
11558
|
+
const inputId = React40.useId();
|
|
11559
|
+
const codeOptions = React40.useMemo(
|
|
11551
11560
|
() => options.map((option) => ({
|
|
11552
11561
|
value: option.value,
|
|
11553
11562
|
label: `${option.label} (${option.value})`,
|
|
@@ -11555,7 +11564,7 @@ var PhoneField = React39.forwardRef(
|
|
|
11555
11564
|
})),
|
|
11556
11565
|
[options]
|
|
11557
11566
|
);
|
|
11558
|
-
const selectedCodeOption =
|
|
11567
|
+
const selectedCodeOption = React40.useMemo(
|
|
11559
11568
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
11560
11569
|
[codeOptions, value?.code]
|
|
11561
11570
|
);
|
|
@@ -11697,11 +11706,11 @@ var PhoneField = React39.forwardRef(
|
|
|
11697
11706
|
PhoneField.displayName = "PhoneField";
|
|
11698
11707
|
|
|
11699
11708
|
// src/airbnb/search-input/SearchInput.tsx
|
|
11700
|
-
var
|
|
11709
|
+
var React41 = __toESM(require("react"), 1);
|
|
11701
11710
|
var import_react_i18next23 = require("react-i18next");
|
|
11702
11711
|
var import_lucide_react45 = require("lucide-react");
|
|
11703
11712
|
var import_jsx_runtime134 = require("react/jsx-runtime");
|
|
11704
|
-
var AirbnbSearchInput =
|
|
11713
|
+
var AirbnbSearchInput = React41.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
11705
11714
|
const { t } = (0, import_react_i18next23.useTranslation)();
|
|
11706
11715
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
11707
11716
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -11739,7 +11748,7 @@ var AirbnbSearchInput = React40.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
11739
11748
|
AirbnbSearchInput.displayName = "SearchInput";
|
|
11740
11749
|
|
|
11741
11750
|
// src/searchable-select/SearchableSelect.tsx
|
|
11742
|
-
var
|
|
11751
|
+
var React42 = __toESM(require("react"), 1);
|
|
11743
11752
|
var import_lucide_react46 = require("lucide-react");
|
|
11744
11753
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
11745
11754
|
var import_react63 = require("react");
|
|
@@ -11784,13 +11793,13 @@ var SearchableSelectInternal = ({
|
|
|
11784
11793
|
loadingMessage
|
|
11785
11794
|
}, ref) => {
|
|
11786
11795
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
11787
|
-
const reactId =
|
|
11788
|
-
const [open, setOpen] =
|
|
11789
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
11790
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
11791
|
-
const containerRef =
|
|
11792
|
-
const triggerRef =
|
|
11793
|
-
const inputRef =
|
|
11796
|
+
const reactId = React42.useId();
|
|
11797
|
+
const [open, setOpen] = React42.useState(false);
|
|
11798
|
+
const [internalSearchValue, setInternalSearchValue] = React42.useState("");
|
|
11799
|
+
const [highlightedIndex, setHighlightedIndex] = React42.useState(-1);
|
|
11800
|
+
const containerRef = React42.useRef(null);
|
|
11801
|
+
const triggerRef = React42.useRef(null);
|
|
11802
|
+
const inputRef = React42.useRef(null);
|
|
11794
11803
|
const listboxId = `${reactId}-listbox`;
|
|
11795
11804
|
const labelId = `${reactId}-label`;
|
|
11796
11805
|
const valueId = `${reactId}-value`;
|
|
@@ -11799,13 +11808,13 @@ var SearchableSelectInternal = ({
|
|
|
11799
11808
|
const searchInputId = `${reactId}-search`;
|
|
11800
11809
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
11801
11810
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
11802
|
-
const visibleOptions =
|
|
11811
|
+
const visibleOptions = React42.useMemo(() => {
|
|
11803
11812
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
11804
11813
|
return options;
|
|
11805
11814
|
}
|
|
11806
11815
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
11807
11816
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
11808
|
-
const selectedIndex =
|
|
11817
|
+
const selectedIndex = React42.useMemo(
|
|
11809
11818
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
11810
11819
|
[value?.value, visibleOptions]
|
|
11811
11820
|
);
|
|
@@ -11831,7 +11840,7 @@ var SearchableSelectInternal = ({
|
|
|
11831
11840
|
},
|
|
11832
11841
|
[handleOnOpenChange]
|
|
11833
11842
|
);
|
|
11834
|
-
|
|
11843
|
+
React42.useEffect(() => {
|
|
11835
11844
|
if (isBlocked) {
|
|
11836
11845
|
setSelectOpen(false);
|
|
11837
11846
|
return;
|
|
@@ -11844,7 +11853,7 @@ var SearchableSelectInternal = ({
|
|
|
11844
11853
|
window.cancelAnimationFrame(frameId);
|
|
11845
11854
|
};
|
|
11846
11855
|
}, [isBlocked, open, setSelectOpen]);
|
|
11847
|
-
|
|
11856
|
+
React42.useEffect(() => {
|
|
11848
11857
|
if (!open) {
|
|
11849
11858
|
setHighlightedIndex(-1);
|
|
11850
11859
|
return;
|
|
@@ -11939,7 +11948,7 @@ var SearchableSelectInternal = ({
|
|
|
11939
11948
|
onOptionHover: setHighlightedIndex
|
|
11940
11949
|
}
|
|
11941
11950
|
);
|
|
11942
|
-
|
|
11951
|
+
React42.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
11943
11952
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
|
|
11944
11953
|
"div",
|
|
11945
11954
|
{
|
|
@@ -12025,7 +12034,7 @@ var SearchableSelectInternal = ({
|
|
|
12025
12034
|
}
|
|
12026
12035
|
);
|
|
12027
12036
|
};
|
|
12028
|
-
var SearchableSelect =
|
|
12037
|
+
var SearchableSelect = React42.forwardRef(
|
|
12029
12038
|
SearchableSelectInternal
|
|
12030
12039
|
);
|
|
12031
12040
|
function SearchableSelectContent({
|
|
@@ -12052,9 +12061,9 @@ function SearchableSelectContent({
|
|
|
12052
12061
|
onOptionClick,
|
|
12053
12062
|
onOptionHover
|
|
12054
12063
|
}) {
|
|
12055
|
-
const listRef =
|
|
12056
|
-
const lastLoadMoreOptionsLengthRef =
|
|
12057
|
-
const previousHighlightedIndexRef =
|
|
12064
|
+
const listRef = React42.useRef(null);
|
|
12065
|
+
const lastLoadMoreOptionsLengthRef = React42.useRef(null);
|
|
12066
|
+
const previousHighlightedIndexRef = React42.useRef(highlightedIndex);
|
|
12058
12067
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
12059
12068
|
const virtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
12060
12069
|
count: rowCount,
|
|
@@ -12065,7 +12074,7 @@ function SearchableSelectContent({
|
|
|
12065
12074
|
const virtualItems = virtualizer.getVirtualItems();
|
|
12066
12075
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
12067
12076
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
12068
|
-
|
|
12077
|
+
React42.useEffect(() => {
|
|
12069
12078
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
12070
12079
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
12071
12080
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -12073,7 +12082,7 @@ function SearchableSelectContent({
|
|
|
12073
12082
|
onLoadMore?.();
|
|
12074
12083
|
}
|
|
12075
12084
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
12076
|
-
|
|
12085
|
+
React42.useEffect(() => {
|
|
12077
12086
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
12078
12087
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
12079
12088
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|