@thebasenet/ui 0.1.5 → 0.1.6
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.d.ts +1 -1
- package/dist/index.js +221 -101
- package/dist/index.js.map +1 -1
- package/dist/ui/index.d.ts +11 -1
- package/dist/ui/index.js +218 -98
- package/dist/ui/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { accent, brand, colors, fontFamily, fontSize, fontWeight, neutral, primary, radius, secondary, typography } from './tokens/index.js';
|
|
2
2
|
export { BrandIcon, BrandIconProps, BrandLogo, LogoIcon, LogoIconProps } from './brand/index.js';
|
|
3
|
-
export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Body1, Body2, Body3, BodyProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingProps, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PasswordInput2, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, toggleVariants, useFormField } from './ui/index.js';
|
|
3
|
+
export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Body1, Body2, Body3, BodyProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateTimePicker, DateTimePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingProps, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PasswordInput2, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, toggleVariants, useFormField } from './ui/index.js';
|
|
4
4
|
export { BackButton, Country, CountrySelector, CountrySelectorProps, CustomModal, CustomModalProps, EmptyState, ErrorState, Loader, LoadingState, PageLoader, ProfileImage, ThemeSwitcher, useIsMobile } from './components/index.js';
|
|
5
5
|
export { cn } from './utils/cn.js';
|
|
6
6
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -6,19 +6,19 @@ import { clsx } from 'clsx';
|
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
8
|
import { Slot } from '@radix-ui/react-slot';
|
|
9
|
-
import { EyeIcon, EyeOffIcon, ChevronDown, ChevronUp, Check,
|
|
9
|
+
import { EyeIcon, EyeOffIcon, ChevronDown, ChevronUp, Check, ChevronDownIcon, X, ChevronLeftIcon, ChevronRightIcon, ChevronRight, MoreHorizontal, CheckIcon, XIcon, SearchIcon, ChevronsUpDown, CircleIcon, MoreHorizontalIcon, Search } from 'lucide-react';
|
|
10
10
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
11
|
-
import * as
|
|
12
|
-
import
|
|
11
|
+
import * as React2 from 'react';
|
|
12
|
+
import React2__default, { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
|
|
13
13
|
import { getDefaultClassNames, DayPicker } from 'react-day-picker';
|
|
14
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
15
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
14
16
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
15
17
|
import { Command as Command$1 } from 'cmdk';
|
|
16
18
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
17
|
-
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
18
19
|
import { Drawer as Drawer$1 } from 'vaul';
|
|
19
20
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
20
21
|
import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
|
|
21
|
-
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
22
22
|
import { motion } from 'framer-motion';
|
|
23
23
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
24
24
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
@@ -858,8 +858,8 @@ function CalendarDayButton({
|
|
|
858
858
|
...props
|
|
859
859
|
}) {
|
|
860
860
|
const defaultClassNames = getDefaultClassNames();
|
|
861
|
-
const ref =
|
|
862
|
-
|
|
861
|
+
const ref = React2.useRef(null);
|
|
862
|
+
React2.useEffect(() => {
|
|
863
863
|
if (modifiers.focused) ref.current?.focus();
|
|
864
864
|
}, [modifiers.focused]);
|
|
865
865
|
return /* @__PURE__ */ jsx(
|
|
@@ -882,6 +882,187 @@ function CalendarDayButton({
|
|
|
882
882
|
}
|
|
883
883
|
);
|
|
884
884
|
}
|
|
885
|
+
function Input({ className, type, ...props }) {
|
|
886
|
+
return /* @__PURE__ */ jsx(
|
|
887
|
+
"input",
|
|
888
|
+
{
|
|
889
|
+
type,
|
|
890
|
+
"data-slot": "input",
|
|
891
|
+
className: cn(
|
|
892
|
+
"file:text-foreground placeholder:text-neutral-200/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-neutral-100/60 flex h-12 w-full min-w-0 rounded-md border-[1px] bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base cursor-pointer font-golos",
|
|
893
|
+
"focus-visible:border-primary-600",
|
|
894
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
895
|
+
className
|
|
896
|
+
),
|
|
897
|
+
...props
|
|
898
|
+
}
|
|
899
|
+
);
|
|
900
|
+
}
|
|
901
|
+
function Label({
|
|
902
|
+
className,
|
|
903
|
+
...props
|
|
904
|
+
}) {
|
|
905
|
+
return /* @__PURE__ */ jsx(
|
|
906
|
+
LabelPrimitive.Root,
|
|
907
|
+
{
|
|
908
|
+
"data-slot": "label",
|
|
909
|
+
className: cn(
|
|
910
|
+
"flex items-center gap-2 text-[14px] leading-none font-normal font-onest text-neutral-400 pl-1 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
911
|
+
className
|
|
912
|
+
),
|
|
913
|
+
...props
|
|
914
|
+
}
|
|
915
|
+
);
|
|
916
|
+
}
|
|
917
|
+
function Popover({ ...props }) {
|
|
918
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
919
|
+
}
|
|
920
|
+
function PopoverTrigger({ ...props }) {
|
|
921
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
922
|
+
}
|
|
923
|
+
function PopoverContent({
|
|
924
|
+
className,
|
|
925
|
+
align = "center",
|
|
926
|
+
sideOffset = 4,
|
|
927
|
+
...props
|
|
928
|
+
}) {
|
|
929
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
930
|
+
PopoverPrimitive.Content,
|
|
931
|
+
{
|
|
932
|
+
"data-slot": "popover-content",
|
|
933
|
+
align,
|
|
934
|
+
sideOffset,
|
|
935
|
+
className: cn(
|
|
936
|
+
"bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
937
|
+
className
|
|
938
|
+
),
|
|
939
|
+
...props
|
|
940
|
+
}
|
|
941
|
+
) });
|
|
942
|
+
}
|
|
943
|
+
function PopoverAnchor({ ...props }) {
|
|
944
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
945
|
+
}
|
|
946
|
+
function parseValue(value) {
|
|
947
|
+
if (!value) return { date: void 0, time: "" };
|
|
948
|
+
const [datePart, timePart] = value.split(" ");
|
|
949
|
+
if (!datePart || !timePart)
|
|
950
|
+
return { date: void 0, time: "" };
|
|
951
|
+
const timeNoMs = timePart.split(".")[0];
|
|
952
|
+
const parsedDate = /* @__PURE__ */ new Date(`${datePart}T${timeNoMs}`);
|
|
953
|
+
if (isNaN(parsedDate.getTime()))
|
|
954
|
+
return { date: void 0, time: "" };
|
|
955
|
+
return { date: parsedDate, time: timeNoMs };
|
|
956
|
+
}
|
|
957
|
+
var DateTimePickerInner = ({
|
|
958
|
+
value,
|
|
959
|
+
onChange,
|
|
960
|
+
className,
|
|
961
|
+
label,
|
|
962
|
+
disabled,
|
|
963
|
+
disablePastDates = true
|
|
964
|
+
}) => {
|
|
965
|
+
const [open, setOpen] = React2.useState(false);
|
|
966
|
+
const [date, setDate] = React2.useState(
|
|
967
|
+
() => parseValue(value).date
|
|
968
|
+
);
|
|
969
|
+
const [time, setTime] = React2.useState(() => parseValue(value).time);
|
|
970
|
+
const suppressNotifyRef = React2.useRef(false);
|
|
971
|
+
const lastNotifiedValue = React2.useRef(null);
|
|
972
|
+
const parsed = React2.useMemo(() => parseValue(value), [value]);
|
|
973
|
+
React2.useEffect(() => {
|
|
974
|
+
const incomingDateTimeStr = parsed.date ? parsed.date.getTime() : void 0;
|
|
975
|
+
const currentDateTimeStr = date ? date.getTime() : void 0;
|
|
976
|
+
if (incomingDateTimeStr !== currentDateTimeStr) {
|
|
977
|
+
suppressNotifyRef.current = true;
|
|
978
|
+
setDate(parsed.date);
|
|
979
|
+
}
|
|
980
|
+
if (parsed.time !== time) {
|
|
981
|
+
suppressNotifyRef.current = true;
|
|
982
|
+
setTime(parsed.time);
|
|
983
|
+
}
|
|
984
|
+
}, [parsed.date?.getTime(), parsed.time]);
|
|
985
|
+
const formattedDateLabel = React2.useMemo(
|
|
986
|
+
() => date ? date.toLocaleDateString() : "Select date",
|
|
987
|
+
[date]
|
|
988
|
+
);
|
|
989
|
+
const isDateDisabled = React2.useCallback(
|
|
990
|
+
(d) => {
|
|
991
|
+
if (!disablePastDates) return false;
|
|
992
|
+
const todayStart = /* @__PURE__ */ new Date();
|
|
993
|
+
todayStart.setHours(0, 0, 0, 0);
|
|
994
|
+
return d < todayStart;
|
|
995
|
+
},
|
|
996
|
+
[disablePastDates]
|
|
997
|
+
);
|
|
998
|
+
React2.useEffect(() => {
|
|
999
|
+
if (suppressNotifyRef.current) {
|
|
1000
|
+
suppressNotifyRef.current = false;
|
|
1001
|
+
return;
|
|
1002
|
+
}
|
|
1003
|
+
if (!onChange) return;
|
|
1004
|
+
if (!date || !time) return;
|
|
1005
|
+
const isoString = `${date.toISOString().split("T")[0]} ${time}.000000+00`;
|
|
1006
|
+
if (lastNotifiedValue.current === isoString) return;
|
|
1007
|
+
lastNotifiedValue.current = isoString;
|
|
1008
|
+
onChange(isoString);
|
|
1009
|
+
}, [date, time, onChange]);
|
|
1010
|
+
const handleDateSelect = React2.useCallback((selectedDate) => {
|
|
1011
|
+
setDate(selectedDate);
|
|
1012
|
+
setOpen(false);
|
|
1013
|
+
}, []);
|
|
1014
|
+
const handleTimeChange = React2.useCallback(
|
|
1015
|
+
(e) => {
|
|
1016
|
+
setTime(e.target.value);
|
|
1017
|
+
},
|
|
1018
|
+
[]
|
|
1019
|
+
);
|
|
1020
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
|
|
1021
|
+
label && /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: label }),
|
|
1022
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
|
|
1023
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 flex-col gap-3", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
1024
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsxs(
|
|
1025
|
+
Button,
|
|
1026
|
+
{
|
|
1027
|
+
variant: "outline",
|
|
1028
|
+
id: "date-picker",
|
|
1029
|
+
className: "w-full justify-between font-normal font-onest text-[15px] border-input focus-visible:border-primary-500 text-black placeholder:text-neutral-200!",
|
|
1030
|
+
disabled,
|
|
1031
|
+
children: [
|
|
1032
|
+
formattedDateLabel,
|
|
1033
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { size: 17 })
|
|
1034
|
+
]
|
|
1035
|
+
}
|
|
1036
|
+
) }),
|
|
1037
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "w-auto overflow-hidden p-0", align: "start", children: /* @__PURE__ */ jsx(
|
|
1038
|
+
Calendar,
|
|
1039
|
+
{
|
|
1040
|
+
mode: "single",
|
|
1041
|
+
selected: date,
|
|
1042
|
+
captionLayout: "dropdown",
|
|
1043
|
+
onSelect: handleDateSelect,
|
|
1044
|
+
disabled: isDateDisabled
|
|
1045
|
+
}
|
|
1046
|
+
) })
|
|
1047
|
+
] }) }),
|
|
1048
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx(
|
|
1049
|
+
Input,
|
|
1050
|
+
{
|
|
1051
|
+
type: "time",
|
|
1052
|
+
id: "time-picker",
|
|
1053
|
+
step: "1",
|
|
1054
|
+
value: time,
|
|
1055
|
+
onChange: handleTimeChange,
|
|
1056
|
+
disabled,
|
|
1057
|
+
className: "bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none w-32"
|
|
1058
|
+
}
|
|
1059
|
+
) })
|
|
1060
|
+
] })
|
|
1061
|
+
] });
|
|
1062
|
+
};
|
|
1063
|
+
var DateTimePicker = React2.memo(DateTimePickerInner, (prev, next) => {
|
|
1064
|
+
return prev.value === next.value && prev.disabled === next.disabled && prev.disablePastDates === next.disablePastDates && prev.label === next.label && prev.className === next.className && prev.onChange === next.onChange;
|
|
1065
|
+
});
|
|
885
1066
|
function Card({ className, ...props }) {
|
|
886
1067
|
return /* @__PURE__ */ jsx(
|
|
887
1068
|
"div",
|
|
@@ -1180,35 +1361,6 @@ function CommandShortcut({
|
|
|
1180
1361
|
}
|
|
1181
1362
|
);
|
|
1182
1363
|
}
|
|
1183
|
-
function Popover({ ...props }) {
|
|
1184
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
1185
|
-
}
|
|
1186
|
-
function PopoverTrigger({ ...props }) {
|
|
1187
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
1188
|
-
}
|
|
1189
|
-
function PopoverContent({
|
|
1190
|
-
className,
|
|
1191
|
-
align = "center",
|
|
1192
|
-
sideOffset = 4,
|
|
1193
|
-
...props
|
|
1194
|
-
}) {
|
|
1195
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
1196
|
-
PopoverPrimitive.Content,
|
|
1197
|
-
{
|
|
1198
|
-
"data-slot": "popover-content",
|
|
1199
|
-
align,
|
|
1200
|
-
sideOffset,
|
|
1201
|
-
className: cn(
|
|
1202
|
-
"bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
1203
|
-
className
|
|
1204
|
-
),
|
|
1205
|
-
...props
|
|
1206
|
-
}
|
|
1207
|
-
) });
|
|
1208
|
-
}
|
|
1209
|
-
function PopoverAnchor({ ...props }) {
|
|
1210
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
1211
|
-
}
|
|
1212
1364
|
function Combobox({
|
|
1213
1365
|
options,
|
|
1214
1366
|
value,
|
|
@@ -1219,7 +1371,7 @@ function Combobox({
|
|
|
1219
1371
|
disabled = false,
|
|
1220
1372
|
className
|
|
1221
1373
|
}) {
|
|
1222
|
-
const [open, setOpen] =
|
|
1374
|
+
const [open, setOpen] = React2.useState(false);
|
|
1223
1375
|
const selectedOption = options.find((option) => option.value === value);
|
|
1224
1376
|
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
1225
1377
|
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
@@ -1508,24 +1660,8 @@ function DropdownMenuSubContent({ className, ...props }) {
|
|
|
1508
1660
|
}
|
|
1509
1661
|
);
|
|
1510
1662
|
}
|
|
1511
|
-
function Label2({
|
|
1512
|
-
className,
|
|
1513
|
-
...props
|
|
1514
|
-
}) {
|
|
1515
|
-
return /* @__PURE__ */ jsx(
|
|
1516
|
-
LabelPrimitive.Root,
|
|
1517
|
-
{
|
|
1518
|
-
"data-slot": "label",
|
|
1519
|
-
className: cn(
|
|
1520
|
-
"flex items-center gap-2 text-[14px] leading-none font-normal font-onest text-neutral-400 pl-1 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
1521
|
-
className
|
|
1522
|
-
),
|
|
1523
|
-
...props
|
|
1524
|
-
}
|
|
1525
|
-
);
|
|
1526
|
-
}
|
|
1527
1663
|
var Form = FormProvider;
|
|
1528
|
-
var FormFieldContext =
|
|
1664
|
+
var FormFieldContext = React2.createContext(
|
|
1529
1665
|
{}
|
|
1530
1666
|
);
|
|
1531
1667
|
var FormField = ({
|
|
@@ -1534,8 +1670,8 @@ var FormField = ({
|
|
|
1534
1670
|
return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
|
|
1535
1671
|
};
|
|
1536
1672
|
var useFormField = () => {
|
|
1537
|
-
const fieldContext =
|
|
1538
|
-
const itemContext =
|
|
1673
|
+
const fieldContext = React2.useContext(FormFieldContext);
|
|
1674
|
+
const itemContext = React2.useContext(FormItemContext);
|
|
1539
1675
|
const { getFieldState } = useFormContext();
|
|
1540
1676
|
const formState = useFormState({ name: fieldContext.name });
|
|
1541
1677
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
@@ -1552,11 +1688,11 @@ var useFormField = () => {
|
|
|
1552
1688
|
...fieldState
|
|
1553
1689
|
};
|
|
1554
1690
|
};
|
|
1555
|
-
var FormItemContext =
|
|
1691
|
+
var FormItemContext = React2.createContext(
|
|
1556
1692
|
{}
|
|
1557
1693
|
);
|
|
1558
1694
|
function FormItem({ className, ...props }) {
|
|
1559
|
-
const id =
|
|
1695
|
+
const id = React2.useId();
|
|
1560
1696
|
return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
|
|
1561
1697
|
"div",
|
|
1562
1698
|
{
|
|
@@ -1572,7 +1708,7 @@ function FormLabel({
|
|
|
1572
1708
|
}) {
|
|
1573
1709
|
const { error, formItemId } = useFormField();
|
|
1574
1710
|
return /* @__PURE__ */ jsx(
|
|
1575
|
-
|
|
1711
|
+
Label,
|
|
1576
1712
|
{
|
|
1577
1713
|
"data-slot": "form-label",
|
|
1578
1714
|
"data-error": !!error,
|
|
@@ -1624,22 +1760,6 @@ function FormMessage({ className, ...props }) {
|
|
|
1624
1760
|
}
|
|
1625
1761
|
);
|
|
1626
1762
|
}
|
|
1627
|
-
function Input({ className, type, ...props }) {
|
|
1628
|
-
return /* @__PURE__ */ jsx(
|
|
1629
|
-
"input",
|
|
1630
|
-
{
|
|
1631
|
-
type,
|
|
1632
|
-
"data-slot": "input",
|
|
1633
|
-
className: cn(
|
|
1634
|
-
"file:text-foreground placeholder:text-neutral-200/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-neutral-100/60 flex h-12 w-full min-w-0 rounded-md border-[1px] bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base cursor-pointer font-golos",
|
|
1635
|
-
"focus-visible:border-primary-600",
|
|
1636
|
-
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
1637
|
-
className
|
|
1638
|
-
),
|
|
1639
|
-
...props
|
|
1640
|
-
}
|
|
1641
|
-
);
|
|
1642
|
-
}
|
|
1643
1763
|
function Pagination({ className, ...props }) {
|
|
1644
1764
|
return /* @__PURE__ */ jsx(
|
|
1645
1765
|
"nav",
|
|
@@ -1917,7 +2037,7 @@ function TooltipContent({
|
|
|
1917
2037
|
}
|
|
1918
2038
|
) });
|
|
1919
2039
|
}
|
|
1920
|
-
var Progress =
|
|
2040
|
+
var Progress = React2.forwardRef(
|
|
1921
2041
|
({ className, value = 0, withTooltip = false, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1922
2042
|
"div",
|
|
1923
2043
|
{
|
|
@@ -2026,7 +2146,7 @@ function SearchInput({
|
|
|
2026
2146
|
var Select = SelectPrimitive.Root;
|
|
2027
2147
|
var SelectGroup = SelectPrimitive.Group;
|
|
2028
2148
|
var SelectValue = SelectPrimitive.Value;
|
|
2029
|
-
var SelectTrigger =
|
|
2149
|
+
var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2030
2150
|
SelectPrimitive.Trigger,
|
|
2031
2151
|
{
|
|
2032
2152
|
ref,
|
|
@@ -2042,7 +2162,7 @@ var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref)
|
|
|
2042
2162
|
}
|
|
2043
2163
|
));
|
|
2044
2164
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
2045
|
-
var SelectScrollUpButton =
|
|
2165
|
+
var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2046
2166
|
SelectPrimitive.ScrollUpButton,
|
|
2047
2167
|
{
|
|
2048
2168
|
ref,
|
|
@@ -2052,7 +2172,7 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
|
|
|
2052
2172
|
}
|
|
2053
2173
|
));
|
|
2054
2174
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
2055
|
-
var SelectScrollDownButton =
|
|
2175
|
+
var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2056
2176
|
SelectPrimitive.ScrollDownButton,
|
|
2057
2177
|
{
|
|
2058
2178
|
ref,
|
|
@@ -2062,7 +2182,7 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
|
|
|
2062
2182
|
}
|
|
2063
2183
|
));
|
|
2064
2184
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
2065
|
-
var SelectContent =
|
|
2185
|
+
var SelectContent = React2.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
2066
2186
|
SelectPrimitive.Content,
|
|
2067
2187
|
{
|
|
2068
2188
|
ref,
|
|
@@ -2087,9 +2207,9 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
|
|
|
2087
2207
|
}
|
|
2088
2208
|
) }));
|
|
2089
2209
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
2090
|
-
var SelectLabel =
|
|
2210
|
+
var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, { ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
|
|
2091
2211
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
2092
|
-
var SelectItem =
|
|
2212
|
+
var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2093
2213
|
SelectPrimitive.Item,
|
|
2094
2214
|
{
|
|
2095
2215
|
ref,
|
|
@@ -2105,7 +2225,7 @@ var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
2105
2225
|
}
|
|
2106
2226
|
));
|
|
2107
2227
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
2108
|
-
var SelectSeparator =
|
|
2228
|
+
var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
|
|
2109
2229
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
2110
2230
|
function Sheet({ ...props }) {
|
|
2111
2231
|
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
@@ -2186,7 +2306,7 @@ function Skeleton({ className, ...props }) {
|
|
|
2186
2306
|
}
|
|
2187
2307
|
);
|
|
2188
2308
|
}
|
|
2189
|
-
var Slider =
|
|
2309
|
+
var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2190
2310
|
SliderPrimitive.Root,
|
|
2191
2311
|
{
|
|
2192
2312
|
ref,
|
|
@@ -2215,7 +2335,7 @@ var Toaster = ({ ...props }) => {
|
|
|
2215
2335
|
}
|
|
2216
2336
|
);
|
|
2217
2337
|
};
|
|
2218
|
-
var Switch =
|
|
2338
|
+
var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2219
2339
|
SwitchPrimitives.Root,
|
|
2220
2340
|
{
|
|
2221
2341
|
className: cn(
|
|
@@ -2264,7 +2384,7 @@ function TabsTrigger({ className, ...props }) {
|
|
|
2264
2384
|
function TabsContent({ className, ...props }) {
|
|
2265
2385
|
return /* @__PURE__ */ jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
|
|
2266
2386
|
}
|
|
2267
|
-
var Textarea =
|
|
2387
|
+
var Textarea = React2.forwardRef(({ className, ...props }, ref) => {
|
|
2268
2388
|
return /* @__PURE__ */ jsx(
|
|
2269
2389
|
"textarea",
|
|
2270
2390
|
{
|
|
@@ -2313,7 +2433,7 @@ function Toggle({
|
|
|
2313
2433
|
}
|
|
2314
2434
|
);
|
|
2315
2435
|
}
|
|
2316
|
-
var ToggleGroupContext =
|
|
2436
|
+
var ToggleGroupContext = React2.createContext({
|
|
2317
2437
|
size: "default",
|
|
2318
2438
|
variant: "default",
|
|
2319
2439
|
spacing: 0
|
|
@@ -2350,7 +2470,7 @@ function ToggleGroupItem({
|
|
|
2350
2470
|
size,
|
|
2351
2471
|
...props
|
|
2352
2472
|
}) {
|
|
2353
|
-
const context =
|
|
2473
|
+
const context = React2.useContext(ToggleGroupContext);
|
|
2354
2474
|
return /* @__PURE__ */ jsx(
|
|
2355
2475
|
ToggleGroupPrimitive.Item,
|
|
2356
2476
|
{
|
|
@@ -2372,39 +2492,39 @@ function ToggleGroupItem({
|
|
|
2372
2492
|
}
|
|
2373
2493
|
);
|
|
2374
2494
|
}
|
|
2375
|
-
var Heading1 =
|
|
2495
|
+
var Heading1 = React2__default.forwardRef(
|
|
2376
2496
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-[700] font-onest text-black dark:text-white", className), ref, ...props, children })
|
|
2377
2497
|
);
|
|
2378
2498
|
Heading1.displayName = "Heading1";
|
|
2379
|
-
var Heading2 =
|
|
2499
|
+
var Heading2 = React2__default.forwardRef(
|
|
2380
2500
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h2", { className: cn("text-[26px] font-[600] font-onest text-black dark:text-neutral-100", className), ref, ...props, children })
|
|
2381
2501
|
);
|
|
2382
2502
|
Heading2.displayName = "Heading2";
|
|
2383
|
-
var Heading3 =
|
|
2503
|
+
var Heading3 = React2__default.forwardRef(
|
|
2384
2504
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-semibold font-onest text-neutral-900 dark:text-neutral-200", className), ref, ...props, children })
|
|
2385
2505
|
);
|
|
2386
2506
|
Heading3.displayName = "Heading3";
|
|
2387
|
-
var Heading4 =
|
|
2507
|
+
var Heading4 = React2__default.forwardRef(
|
|
2388
2508
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h4", { className: cn("text-[22px] font-semibold text-neutral-800 dark:text-neutral-200", className), ref, ...props, children })
|
|
2389
2509
|
);
|
|
2390
2510
|
Heading4.displayName = "Heading4";
|
|
2391
|
-
var Heading5 =
|
|
2511
|
+
var Heading5 = React2__default.forwardRef(
|
|
2392
2512
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h5", { className: cn("text-lg font-semibold text-black dark:text-neutral-300", className), ref, ...props, children })
|
|
2393
2513
|
);
|
|
2394
2514
|
Heading5.displayName = "Heading5";
|
|
2395
|
-
var Heading6 =
|
|
2515
|
+
var Heading6 = React2__default.forwardRef(
|
|
2396
2516
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h6", { className: cn("text-base font-[500] text-black dark:text-neutral-300", className), ref, ...props, children })
|
|
2397
2517
|
);
|
|
2398
2518
|
Heading6.displayName = "Heading6";
|
|
2399
|
-
var Body1 =
|
|
2519
|
+
var Body1 = React2__default.forwardRef(
|
|
2400
2520
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-[18px] text-neutral-700 dark:text-neutral-400 font-golos", className), ref, ...props, children })
|
|
2401
2521
|
);
|
|
2402
2522
|
Body1.displayName = "Body1";
|
|
2403
|
-
var Body2 =
|
|
2523
|
+
var Body2 = React2__default.forwardRef(
|
|
2404
2524
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-base text-neutral-700 dark:text-neutral-400 font-golos", className), ref, ...props, children })
|
|
2405
2525
|
);
|
|
2406
2526
|
Body2.displayName = "Body2";
|
|
2407
|
-
var Body3 =
|
|
2527
|
+
var Body3 = React2__default.forwardRef(
|
|
2408
2528
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-sm lg:leading-[22px] text-neutral-600 dark:text-neutral-400 font-golos", className), ref, ...props, children })
|
|
2409
2529
|
);
|
|
2410
2530
|
Body3.displayName = "Body3";
|
|
@@ -2685,8 +2805,8 @@ var ThemeSwitcher = ({
|
|
|
2685
2805
|
className = ""
|
|
2686
2806
|
}) => {
|
|
2687
2807
|
const { setTheme, resolvedTheme } = useTheme();
|
|
2688
|
-
const [mounted, setMounted] =
|
|
2689
|
-
|
|
2808
|
+
const [mounted, setMounted] = React2__default.useState(false);
|
|
2809
|
+
React2__default.useEffect(() => {
|
|
2690
2810
|
setMounted(true);
|
|
2691
2811
|
}, []);
|
|
2692
2812
|
const toggleTheme = () => {
|
|
@@ -2845,7 +2965,7 @@ var CountrySelector = ({
|
|
|
2845
2965
|
setIsOpen(false);
|
|
2846
2966
|
};
|
|
2847
2967
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), ref, children: [
|
|
2848
|
-
label && /* @__PURE__ */ jsxs(
|
|
2968
|
+
label && /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "mb-2 block text-sm font-medium", children: [
|
|
2849
2969
|
label,
|
|
2850
2970
|
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
|
|
2851
2971
|
] }),
|
|
@@ -2906,6 +3026,6 @@ var CountrySelector = ({
|
|
|
2906
3026
|
] });
|
|
2907
3027
|
};
|
|
2908
3028
|
|
|
2909
|
-
export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, BackButton, Badge, Body1, Body2, Body3, BrandIcon_default as BrandIcon, BrandLogo_default as BrandLogo, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CountrySelector, CustomModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Input,
|
|
3029
|
+
export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, BackButton, Badge, Body1, Body2, Body3, BrandIcon_default as BrandIcon, BrandLogo_default as BrandLogo, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CountrySelector, CustomModal, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Input, Label, Loader, LoadingState, LogoIcon_default as LogoIcon, PageLoader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PasswordInput2, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProfileImage, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, accent, badgeVariants, brand, buttonGroupVariants, buttonVariants, cn, colors, fontFamily, fontSize, fontWeight, neutral, primary, radius, secondary, toggleVariants, typography, useFormField, useIsMobile };
|
|
2910
3030
|
//# sourceMappingURL=index.js.map
|
|
2911
3031
|
//# sourceMappingURL=index.js.map
|