@thebasenet/ui 0.1.5 → 0.1.7
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 +224 -101
- package/dist/index.js.map +1 -1
- package/dist/ui/index.d.ts +11 -1
- package/dist/ui/index.js +221 -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,190 @@ 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: cn(
|
|
1030
|
+
"w-full justify-between font-normal font-onest text-[15px] border-input focus-visible:border-primary-500",
|
|
1031
|
+
date ? "text-black" : "text-neutral-300"
|
|
1032
|
+
),
|
|
1033
|
+
disabled,
|
|
1034
|
+
children: [
|
|
1035
|
+
formattedDateLabel,
|
|
1036
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { size: 17 })
|
|
1037
|
+
]
|
|
1038
|
+
}
|
|
1039
|
+
) }),
|
|
1040
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "w-auto overflow-hidden p-0", align: "start", children: /* @__PURE__ */ jsx(
|
|
1041
|
+
Calendar,
|
|
1042
|
+
{
|
|
1043
|
+
mode: "single",
|
|
1044
|
+
selected: date,
|
|
1045
|
+
captionLayout: "dropdown",
|
|
1046
|
+
onSelect: handleDateSelect,
|
|
1047
|
+
disabled: isDateDisabled
|
|
1048
|
+
}
|
|
1049
|
+
) })
|
|
1050
|
+
] }) }),
|
|
1051
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx(
|
|
1052
|
+
Input,
|
|
1053
|
+
{
|
|
1054
|
+
type: "time",
|
|
1055
|
+
id: "time-picker",
|
|
1056
|
+
step: "1",
|
|
1057
|
+
value: time,
|
|
1058
|
+
onChange: handleTimeChange,
|
|
1059
|
+
disabled,
|
|
1060
|
+
className: "bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none w-32"
|
|
1061
|
+
}
|
|
1062
|
+
) })
|
|
1063
|
+
] })
|
|
1064
|
+
] });
|
|
1065
|
+
};
|
|
1066
|
+
var DateTimePicker = React2.memo(DateTimePickerInner, (prev, next) => {
|
|
1067
|
+
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;
|
|
1068
|
+
});
|
|
885
1069
|
function Card({ className, ...props }) {
|
|
886
1070
|
return /* @__PURE__ */ jsx(
|
|
887
1071
|
"div",
|
|
@@ -1180,35 +1364,6 @@ function CommandShortcut({
|
|
|
1180
1364
|
}
|
|
1181
1365
|
);
|
|
1182
1366
|
}
|
|
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
1367
|
function Combobox({
|
|
1213
1368
|
options,
|
|
1214
1369
|
value,
|
|
@@ -1219,7 +1374,7 @@ function Combobox({
|
|
|
1219
1374
|
disabled = false,
|
|
1220
1375
|
className
|
|
1221
1376
|
}) {
|
|
1222
|
-
const [open, setOpen] =
|
|
1377
|
+
const [open, setOpen] = React2.useState(false);
|
|
1223
1378
|
const selectedOption = options.find((option) => option.value === value);
|
|
1224
1379
|
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
1225
1380
|
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
@@ -1508,24 +1663,8 @@ function DropdownMenuSubContent({ className, ...props }) {
|
|
|
1508
1663
|
}
|
|
1509
1664
|
);
|
|
1510
1665
|
}
|
|
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
1666
|
var Form = FormProvider;
|
|
1528
|
-
var FormFieldContext =
|
|
1667
|
+
var FormFieldContext = React2.createContext(
|
|
1529
1668
|
{}
|
|
1530
1669
|
);
|
|
1531
1670
|
var FormField = ({
|
|
@@ -1534,8 +1673,8 @@ var FormField = ({
|
|
|
1534
1673
|
return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
|
|
1535
1674
|
};
|
|
1536
1675
|
var useFormField = () => {
|
|
1537
|
-
const fieldContext =
|
|
1538
|
-
const itemContext =
|
|
1676
|
+
const fieldContext = React2.useContext(FormFieldContext);
|
|
1677
|
+
const itemContext = React2.useContext(FormItemContext);
|
|
1539
1678
|
const { getFieldState } = useFormContext();
|
|
1540
1679
|
const formState = useFormState({ name: fieldContext.name });
|
|
1541
1680
|
const fieldState = getFieldState(fieldContext.name, formState);
|
|
@@ -1552,11 +1691,11 @@ var useFormField = () => {
|
|
|
1552
1691
|
...fieldState
|
|
1553
1692
|
};
|
|
1554
1693
|
};
|
|
1555
|
-
var FormItemContext =
|
|
1694
|
+
var FormItemContext = React2.createContext(
|
|
1556
1695
|
{}
|
|
1557
1696
|
);
|
|
1558
1697
|
function FormItem({ className, ...props }) {
|
|
1559
|
-
const id =
|
|
1698
|
+
const id = React2.useId();
|
|
1560
1699
|
return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
|
|
1561
1700
|
"div",
|
|
1562
1701
|
{
|
|
@@ -1572,7 +1711,7 @@ function FormLabel({
|
|
|
1572
1711
|
}) {
|
|
1573
1712
|
const { error, formItemId } = useFormField();
|
|
1574
1713
|
return /* @__PURE__ */ jsx(
|
|
1575
|
-
|
|
1714
|
+
Label,
|
|
1576
1715
|
{
|
|
1577
1716
|
"data-slot": "form-label",
|
|
1578
1717
|
"data-error": !!error,
|
|
@@ -1624,22 +1763,6 @@ function FormMessage({ className, ...props }) {
|
|
|
1624
1763
|
}
|
|
1625
1764
|
);
|
|
1626
1765
|
}
|
|
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
1766
|
function Pagination({ className, ...props }) {
|
|
1644
1767
|
return /* @__PURE__ */ jsx(
|
|
1645
1768
|
"nav",
|
|
@@ -1917,7 +2040,7 @@ function TooltipContent({
|
|
|
1917
2040
|
}
|
|
1918
2041
|
) });
|
|
1919
2042
|
}
|
|
1920
|
-
var Progress =
|
|
2043
|
+
var Progress = React2.forwardRef(
|
|
1921
2044
|
({ className, value = 0, withTooltip = false, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1922
2045
|
"div",
|
|
1923
2046
|
{
|
|
@@ -2026,7 +2149,7 @@ function SearchInput({
|
|
|
2026
2149
|
var Select = SelectPrimitive.Root;
|
|
2027
2150
|
var SelectGroup = SelectPrimitive.Group;
|
|
2028
2151
|
var SelectValue = SelectPrimitive.Value;
|
|
2029
|
-
var SelectTrigger =
|
|
2152
|
+
var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2030
2153
|
SelectPrimitive.Trigger,
|
|
2031
2154
|
{
|
|
2032
2155
|
ref,
|
|
@@ -2042,7 +2165,7 @@ var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref)
|
|
|
2042
2165
|
}
|
|
2043
2166
|
));
|
|
2044
2167
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
2045
|
-
var SelectScrollUpButton =
|
|
2168
|
+
var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2046
2169
|
SelectPrimitive.ScrollUpButton,
|
|
2047
2170
|
{
|
|
2048
2171
|
ref,
|
|
@@ -2052,7 +2175,7 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
|
|
|
2052
2175
|
}
|
|
2053
2176
|
));
|
|
2054
2177
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
2055
|
-
var SelectScrollDownButton =
|
|
2178
|
+
var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2056
2179
|
SelectPrimitive.ScrollDownButton,
|
|
2057
2180
|
{
|
|
2058
2181
|
ref,
|
|
@@ -2062,7 +2185,7 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
|
|
|
2062
2185
|
}
|
|
2063
2186
|
));
|
|
2064
2187
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
2065
|
-
var SelectContent =
|
|
2188
|
+
var SelectContent = React2.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
2066
2189
|
SelectPrimitive.Content,
|
|
2067
2190
|
{
|
|
2068
2191
|
ref,
|
|
@@ -2087,9 +2210,9 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
|
|
|
2087
2210
|
}
|
|
2088
2211
|
) }));
|
|
2089
2212
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
2090
|
-
var SelectLabel =
|
|
2213
|
+
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
2214
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
2092
|
-
var SelectItem =
|
|
2215
|
+
var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2093
2216
|
SelectPrimitive.Item,
|
|
2094
2217
|
{
|
|
2095
2218
|
ref,
|
|
@@ -2105,7 +2228,7 @@ var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
2105
2228
|
}
|
|
2106
2229
|
));
|
|
2107
2230
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
2108
|
-
var SelectSeparator =
|
|
2231
|
+
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
2232
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
2110
2233
|
function Sheet({ ...props }) {
|
|
2111
2234
|
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
@@ -2186,7 +2309,7 @@ function Skeleton({ className, ...props }) {
|
|
|
2186
2309
|
}
|
|
2187
2310
|
);
|
|
2188
2311
|
}
|
|
2189
|
-
var Slider =
|
|
2312
|
+
var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2190
2313
|
SliderPrimitive.Root,
|
|
2191
2314
|
{
|
|
2192
2315
|
ref,
|
|
@@ -2215,7 +2338,7 @@ var Toaster = ({ ...props }) => {
|
|
|
2215
2338
|
}
|
|
2216
2339
|
);
|
|
2217
2340
|
};
|
|
2218
|
-
var Switch =
|
|
2341
|
+
var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2219
2342
|
SwitchPrimitives.Root,
|
|
2220
2343
|
{
|
|
2221
2344
|
className: cn(
|
|
@@ -2264,7 +2387,7 @@ function TabsTrigger({ className, ...props }) {
|
|
|
2264
2387
|
function TabsContent({ className, ...props }) {
|
|
2265
2388
|
return /* @__PURE__ */ jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
|
|
2266
2389
|
}
|
|
2267
|
-
var Textarea =
|
|
2390
|
+
var Textarea = React2.forwardRef(({ className, ...props }, ref) => {
|
|
2268
2391
|
return /* @__PURE__ */ jsx(
|
|
2269
2392
|
"textarea",
|
|
2270
2393
|
{
|
|
@@ -2313,7 +2436,7 @@ function Toggle({
|
|
|
2313
2436
|
}
|
|
2314
2437
|
);
|
|
2315
2438
|
}
|
|
2316
|
-
var ToggleGroupContext =
|
|
2439
|
+
var ToggleGroupContext = React2.createContext({
|
|
2317
2440
|
size: "default",
|
|
2318
2441
|
variant: "default",
|
|
2319
2442
|
spacing: 0
|
|
@@ -2350,7 +2473,7 @@ function ToggleGroupItem({
|
|
|
2350
2473
|
size,
|
|
2351
2474
|
...props
|
|
2352
2475
|
}) {
|
|
2353
|
-
const context =
|
|
2476
|
+
const context = React2.useContext(ToggleGroupContext);
|
|
2354
2477
|
return /* @__PURE__ */ jsx(
|
|
2355
2478
|
ToggleGroupPrimitive.Item,
|
|
2356
2479
|
{
|
|
@@ -2372,39 +2495,39 @@ function ToggleGroupItem({
|
|
|
2372
2495
|
}
|
|
2373
2496
|
);
|
|
2374
2497
|
}
|
|
2375
|
-
var Heading1 =
|
|
2498
|
+
var Heading1 = React2__default.forwardRef(
|
|
2376
2499
|
({ 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
2500
|
);
|
|
2378
2501
|
Heading1.displayName = "Heading1";
|
|
2379
|
-
var Heading2 =
|
|
2502
|
+
var Heading2 = React2__default.forwardRef(
|
|
2380
2503
|
({ 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
2504
|
);
|
|
2382
2505
|
Heading2.displayName = "Heading2";
|
|
2383
|
-
var Heading3 =
|
|
2506
|
+
var Heading3 = React2__default.forwardRef(
|
|
2384
2507
|
({ 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
2508
|
);
|
|
2386
2509
|
Heading3.displayName = "Heading3";
|
|
2387
|
-
var Heading4 =
|
|
2510
|
+
var Heading4 = React2__default.forwardRef(
|
|
2388
2511
|
({ 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
2512
|
);
|
|
2390
2513
|
Heading4.displayName = "Heading4";
|
|
2391
|
-
var Heading5 =
|
|
2514
|
+
var Heading5 = React2__default.forwardRef(
|
|
2392
2515
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h5", { className: cn("text-lg font-semibold text-black dark:text-neutral-300", className), ref, ...props, children })
|
|
2393
2516
|
);
|
|
2394
2517
|
Heading5.displayName = "Heading5";
|
|
2395
|
-
var Heading6 =
|
|
2518
|
+
var Heading6 = React2__default.forwardRef(
|
|
2396
2519
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h6", { className: cn("text-base font-[500] text-black dark:text-neutral-300", className), ref, ...props, children })
|
|
2397
2520
|
);
|
|
2398
2521
|
Heading6.displayName = "Heading6";
|
|
2399
|
-
var Body1 =
|
|
2522
|
+
var Body1 = React2__default.forwardRef(
|
|
2400
2523
|
({ 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
2524
|
);
|
|
2402
2525
|
Body1.displayName = "Body1";
|
|
2403
|
-
var Body2 =
|
|
2526
|
+
var Body2 = React2__default.forwardRef(
|
|
2404
2527
|
({ 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
2528
|
);
|
|
2406
2529
|
Body2.displayName = "Body2";
|
|
2407
|
-
var Body3 =
|
|
2530
|
+
var Body3 = React2__default.forwardRef(
|
|
2408
2531
|
({ 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
2532
|
);
|
|
2410
2533
|
Body3.displayName = "Body3";
|
|
@@ -2685,8 +2808,8 @@ var ThemeSwitcher = ({
|
|
|
2685
2808
|
className = ""
|
|
2686
2809
|
}) => {
|
|
2687
2810
|
const { setTheme, resolvedTheme } = useTheme();
|
|
2688
|
-
const [mounted, setMounted] =
|
|
2689
|
-
|
|
2811
|
+
const [mounted, setMounted] = React2__default.useState(false);
|
|
2812
|
+
React2__default.useEffect(() => {
|
|
2690
2813
|
setMounted(true);
|
|
2691
2814
|
}, []);
|
|
2692
2815
|
const toggleTheme = () => {
|
|
@@ -2845,7 +2968,7 @@ var CountrySelector = ({
|
|
|
2845
2968
|
setIsOpen(false);
|
|
2846
2969
|
};
|
|
2847
2970
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), ref, children: [
|
|
2848
|
-
label && /* @__PURE__ */ jsxs(
|
|
2971
|
+
label && /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "mb-2 block text-sm font-medium", children: [
|
|
2849
2972
|
label,
|
|
2850
2973
|
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
|
|
2851
2974
|
] }),
|
|
@@ -2906,6 +3029,6 @@ var CountrySelector = ({
|
|
|
2906
3029
|
] });
|
|
2907
3030
|
};
|
|
2908
3031
|
|
|
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,
|
|
3032
|
+
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
3033
|
//# sourceMappingURL=index.js.map
|
|
2911
3034
|
//# sourceMappingURL=index.js.map
|