@next-degree/pickle-shared-js 0.6.50 → 0.7.51
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/company_service_latest-DFxfjA2x.d.cts +4369 -0
- package/dist/company_service_latest-DFxfjA2x.d.ts +4369 -0
- package/dist/company_service_sanity--Aw-Y3Us.d.cts +7611 -0
- package/dist/company_service_sanity-B5FBDl-4.d.ts +7611 -0
- package/dist/components/buttons/BackButton.cjs +5 -1
- package/dist/components/buttons/BackButton.cjs.map +1 -1
- package/dist/components/buttons/BackButton.js +5 -1
- package/dist/components/buttons/BackButton.js.map +1 -1
- package/dist/components/company/CompanyTake.cjs +4 -2
- package/dist/components/company/CompanyTake.cjs.map +1 -1
- package/dist/components/company/CompanyTake.js +4 -2
- package/dist/components/company/CompanyTake.js.map +1 -1
- package/dist/components/jobPost/JobDescription.cjs +5 -3
- package/dist/components/jobPost/JobDescription.cjs.map +1 -1
- package/dist/components/jobPost/JobDescription.js +5 -3
- package/dist/components/jobPost/JobDescription.js.map +1 -1
- package/dist/components/jobPost/JobHeader.cjs +43 -37
- package/dist/components/jobPost/JobHeader.cjs.map +1 -1
- package/dist/components/jobPost/JobHeader.js +42 -36
- package/dist/components/jobPost/JobHeader.js.map +1 -1
- package/dist/components/jobPost/JobPost.cjs +92 -86
- package/dist/components/jobPost/JobPost.cjs.map +1 -1
- package/dist/components/jobPost/JobPost.d.cts +1 -1
- package/dist/components/jobPost/JobPost.d.ts +1 -1
- package/dist/components/jobPost/JobPost.js +92 -86
- package/dist/components/jobPost/JobPost.js.map +1 -1
- package/dist/components/primitives/avatar.cjs.map +1 -1
- package/dist/components/primitives/avatar.js.map +1 -1
- package/dist/components/primitives/command.cjs +6 -4
- package/dist/components/primitives/command.cjs.map +1 -1
- package/dist/components/primitives/command.d.cts +7 -7
- package/dist/components/primitives/command.d.ts +7 -7
- package/dist/components/primitives/command.js +6 -4
- package/dist/components/primitives/command.js.map +1 -1
- package/dist/components/primitives/dialog.cjs +4 -4
- package/dist/components/primitives/dialog.cjs.map +1 -1
- package/dist/components/primitives/dialog.js +6 -4
- package/dist/components/primitives/dialog.js.map +1 -1
- package/dist/components/primitives/input-otp.cjs +2 -2
- package/dist/components/primitives/input-otp.cjs.map +1 -1
- package/dist/components/primitives/input-otp.js +2 -2
- package/dist/components/primitives/input-otp.js.map +1 -1
- package/dist/components/primitives/popover.cjs +1 -1
- package/dist/components/primitives/popover.cjs.map +1 -1
- package/dist/components/primitives/popover.d.cts +1 -1
- package/dist/components/primitives/popover.d.ts +1 -1
- package/dist/components/primitives/popover.js +1 -1
- package/dist/components/primitives/popover.js.map +1 -1
- package/dist/components/primitives/separator.cjs.map +1 -1
- package/dist/components/primitives/separator.js.map +1 -1
- package/dist/components/primitives/tooltip.cjs.map +1 -1
- package/dist/components/primitives/tooltip.js.map +1 -1
- package/dist/components/ui/Avatar.cjs +2 -2
- package/dist/components/ui/Avatar.cjs.map +1 -1
- package/dist/components/ui/Avatar.js +4 -2
- package/dist/components/ui/Avatar.js.map +1 -1
- package/dist/components/ui/Badge.cjs.map +1 -1
- package/dist/components/ui/Badge.js.map +1 -1
- package/dist/components/ui/Button.cjs +3 -3
- package/dist/components/ui/Button.cjs.map +1 -1
- package/dist/components/ui/Button.d.cts +33 -0
- package/dist/components/ui/Button.d.ts +33 -0
- package/dist/components/ui/Button.js +5 -3
- package/dist/components/ui/Button.js.map +1 -1
- package/dist/components/ui/Checkbox.cjs.map +1 -1
- package/dist/components/ui/Checkbox.js.map +1 -1
- package/dist/components/ui/Combobox.cjs +111 -103
- package/dist/components/ui/Combobox.cjs.map +1 -1
- package/dist/components/ui/Combobox.d.cts +1 -1
- package/dist/components/ui/Combobox.d.ts +1 -1
- package/dist/components/ui/Combobox.js +108 -100
- package/dist/components/ui/Combobox.js.map +1 -1
- package/dist/components/ui/Counter.cjs +3 -1
- package/dist/components/ui/Counter.cjs.map +1 -1
- package/dist/components/ui/Counter.js +3 -1
- package/dist/components/ui/Counter.js.map +1 -1
- package/dist/components/ui/DatePicker.cjs +318 -0
- package/dist/components/ui/DatePicker.cjs.map +1 -0
- package/dist/components/ui/DatePicker.d.cts +16 -0
- package/dist/components/ui/DatePicker.d.ts +16 -0
- package/dist/components/ui/DatePicker.js +284 -0
- package/dist/components/ui/DatePicker.js.map +1 -0
- package/dist/components/ui/ErrorMessage.cjs.map +1 -1
- package/dist/components/ui/ErrorMessage.js.map +1 -1
- package/dist/components/ui/Icon.cjs.map +1 -1
- package/dist/components/ui/Icon.js.map +1 -1
- package/dist/components/ui/Input.cjs +3 -1
- package/dist/components/ui/Input.cjs.map +1 -1
- package/dist/components/ui/Input.d.cts +29 -0
- package/dist/components/ui/Input.d.ts +29 -0
- package/dist/components/ui/Input.js +3 -1
- package/dist/components/ui/Input.js.map +1 -1
- package/dist/components/ui/InputOtp.cjs +62 -58
- package/dist/components/ui/InputOtp.cjs.map +1 -1
- package/dist/components/ui/InputOtp.js +62 -58
- package/dist/components/ui/InputOtp.js.map +1 -1
- package/dist/components/ui/Label.cjs +5 -3
- package/dist/components/ui/Label.cjs.map +1 -1
- package/dist/components/ui/Label.js +7 -3
- package/dist/components/ui/Label.js.map +1 -1
- package/dist/components/ui/ListItem.cjs +7 -7
- package/dist/components/ui/ListItem.cjs.map +1 -1
- package/dist/components/ui/ListItem.js +10 -8
- package/dist/components/ui/ListItem.js.map +1 -1
- package/dist/components/ui/MapComponent.cjs.map +1 -1
- package/dist/components/ui/MapComponent.js +1 -1
- package/dist/components/ui/MapComponent.js.map +1 -1
- package/dist/components/ui/PlacesQueryInput.cjs +21 -13
- package/dist/components/ui/PlacesQueryInput.cjs.map +1 -1
- package/dist/components/ui/PlacesQueryInput.js +23 -13
- package/dist/components/ui/PlacesQueryInput.js.map +1 -1
- package/dist/components/ui/ReadMore.cjs +5 -3
- package/dist/components/ui/ReadMore.cjs.map +1 -1
- package/dist/components/ui/ReadMore.js +5 -3
- package/dist/components/ui/ReadMore.js.map +1 -1
- package/dist/components/ui/Select.cjs +63 -59
- package/dist/components/ui/Select.cjs.map +1 -1
- package/dist/components/ui/Select.js +61 -57
- package/dist/components/ui/Select.js.map +1 -1
- package/dist/components/ui/StepTabs.cjs.map +1 -1
- package/dist/components/ui/StepTabs.d.cts +1 -1
- package/dist/components/ui/StepTabs.d.ts +1 -1
- package/dist/components/ui/StepTabs.js.map +1 -1
- package/dist/components/ui/buttonShadcn.cjs +94 -0
- package/dist/components/ui/buttonShadcn.cjs.map +1 -0
- package/dist/components/ui/buttonShadcn.d.cts +14 -0
- package/dist/components/ui/buttonShadcn.d.ts +14 -0
- package/dist/components/ui/buttonShadcn.js +58 -0
- package/dist/components/ui/buttonShadcn.js.map +1 -0
- package/dist/components/ui/calendar.cjs +152 -0
- package/dist/components/ui/calendar.cjs.map +1 -0
- package/dist/components/ui/calendar.d.cts +11 -0
- package/dist/components/ui/calendar.d.ts +11 -0
- package/dist/components/ui/calendar.js +118 -0
- package/dist/components/ui/calendar.js.map +1 -0
- package/dist/{displayText-BCQw5Qq-.d.cts → displayText-CQRZ2fOT.d.cts} +2 -2
- package/dist/{displayText-Bqmpx1Va.d.ts → displayText-LlsLfkTS.d.ts} +2 -2
- package/dist/hooks/useDisplayText.cjs.map +1 -1
- package/dist/hooks/useDisplayText.d.cts +3 -3
- package/dist/hooks/useDisplayText.d.ts +3 -3
- package/dist/hooks/useDisplayText.js.map +1 -1
- package/dist/index.cjs +750 -728
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +13 -13
- package/dist/index.d.ts +13 -13
- package/dist/index.js +759 -737
- package/dist/index.js.map +1 -1
- package/dist/job_posting_service_latest-B5tqLSgo.d.cts +4247 -0
- package/dist/job_posting_service_latest-B5tqLSgo.d.ts +4247 -0
- package/dist/job_posting_service_sanity-CeX9tlpb.d.ts +8093 -0
- package/dist/job_posting_service_sanity-D5Znr6Ba.d.cts +8093 -0
- package/dist/lib/google.cjs.map +1 -1
- package/dist/lib/google.js.map +1 -1
- package/dist/lib/locations.cjs.map +1 -1
- package/dist/lib/locations.d.cts +2 -2
- package/dist/lib/locations.d.ts +2 -2
- package/dist/lib/locations.js.map +1 -1
- package/dist/lib/mappings.cjs.map +1 -1
- package/dist/lib/mappings.d.cts +3 -3
- package/dist/lib/mappings.d.ts +3 -3
- package/dist/lib/mappings.js.map +1 -1
- package/dist/lib/salaryRange.cjs.map +1 -1
- package/dist/lib/salaryRange.d.cts +1 -1
- package/dist/lib/salaryRange.d.ts +1 -1
- package/dist/lib/salaryRange.js.map +1 -1
- package/dist/lib/utils.cjs.map +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/services/displayText.cjs.map +1 -1
- package/dist/services/displayText.d.cts +3 -3
- package/dist/services/displayText.d.ts +3 -3
- package/dist/services/displayText.js.map +1 -1
- package/dist/shared_pickle_output_latest-Bwfg5B4p.d.cts +350 -0
- package/dist/shared_pickle_output_latest-Bwfg5B4p.d.ts +350 -0
- package/dist/styles/globals.css +275 -0
- package/dist/styles/globals.css.map +1 -1
- package/dist/types/data/company_service_latest.cjs.map +1 -1
- package/dist/types/data/company_service_latest.d.cts +1 -1
- package/dist/types/data/company_service_latest.d.ts +1 -1
- package/dist/types/data/company_service_latest.js.map +1 -1
- package/dist/types/data/job_posting_service_latest.cjs +3 -1
- package/dist/types/data/job_posting_service_latest.cjs.map +1 -1
- package/dist/types/data/job_posting_service_latest.d.cts +1 -1
- package/dist/types/data/job_posting_service_latest.d.ts +1 -1
- package/dist/types/data/job_posting_service_latest.js +3 -1
- package/dist/types/data/job_posting_service_latest.js.map +1 -1
- package/dist/types/data/shared_pickle_output_latest.cjs.map +1 -1
- package/dist/types/data/shared_pickle_output_latest.d.cts +1 -1
- package/dist/types/data/shared_pickle_output_latest.d.ts +1 -1
- package/dist/types/data/shared_pickle_output_latest.js.map +1 -1
- package/dist/types/index.cjs +505 -0
- package/dist/types/index.cjs.map +1 -0
- package/dist/types/index.d.cts +10 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/types/index.js +479 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/latest/company_service_latest.cjs +251 -0
- package/dist/types/latest/company_service_latest.cjs.map +1 -0
- package/dist/types/latest/company_service_latest.d.cts +2 -0
- package/dist/types/latest/company_service_latest.d.ts +2 -0
- package/dist/types/latest/company_service_latest.js +210 -0
- package/dist/types/latest/company_service_latest.js.map +1 -0
- package/dist/types/latest/custom/company_service_sanity.cjs +325 -0
- package/dist/types/latest/custom/company_service_sanity.cjs.map +1 -0
- package/dist/types/latest/custom/company_service_sanity.d.cts +4 -0
- package/dist/types/latest/custom/company_service_sanity.d.ts +4 -0
- package/dist/types/latest/custom/company_service_sanity.js +288 -0
- package/dist/types/latest/custom/company_service_sanity.js.map +1 -0
- package/dist/types/latest/custom/custom_sanity_models.cjs +43 -0
- package/dist/types/latest/custom/custom_sanity_models.cjs.map +1 -0
- package/dist/types/latest/custom/custom_sanity_models.d.cts +30 -0
- package/dist/types/latest/custom/custom_sanity_models.d.ts +30 -0
- package/dist/types/latest/custom/custom_sanity_models.js +17 -0
- package/dist/types/latest/custom/custom_sanity_models.js.map +1 -0
- package/dist/types/latest/custom/job_posting_service_sanity.cjs +376 -0
- package/dist/types/latest/custom/job_posting_service_sanity.cjs.map +1 -0
- package/dist/types/latest/custom/job_posting_service_sanity.d.cts +5 -0
- package/dist/types/latest/custom/job_posting_service_sanity.d.ts +5 -0
- package/dist/types/latest/custom/job_posting_service_sanity.js +331 -0
- package/dist/types/latest/custom/job_posting_service_sanity.js.map +1 -0
- package/dist/types/latest/job_posting_service_latest.cjs +293 -0
- package/dist/types/latest/job_posting_service_latest.cjs.map +1 -0
- package/dist/types/latest/job_posting_service_latest.d.cts +2 -0
- package/dist/types/latest/job_posting_service_latest.d.ts +2 -0
- package/dist/types/latest/job_posting_service_latest.js +257 -0
- package/dist/types/latest/job_posting_service_latest.js.map +1 -0
- package/dist/types/latest/shared_pickle_output_latest.cjs +109 -0
- package/dist/types/latest/shared_pickle_output_latest.cjs.map +1 -0
- package/dist/types/latest/shared_pickle_output_latest.d.cts +2 -0
- package/dist/types/latest/shared_pickle_output_latest.d.ts +2 -0
- package/dist/types/latest/shared_pickle_output_latest.js +75 -0
- package/dist/types/latest/shared_pickle_output_latest.js.map +1 -0
- package/package.json +27 -9
- package/dist/{company_service_latest-B7KhyYDc.d.cts → company_service_latest-8IMr2hMZ.d.cts} +142 -142
- package/dist/{company_service_latest-B7KhyYDc.d.ts → company_service_latest-8IMr2hMZ.d.ts} +142 -142
- package/dist/{job_posting_service_latest-C2z66hFK.d.cts → job_posting_service_latest-CKITrYyz.d.cts} +129 -129
- package/dist/{job_posting_service_latest-C2z66hFK.d.ts → job_posting_service_latest-CKITrYyz.d.ts} +129 -129
- package/dist/{shared_pickle_output_latest-_L9GxVle.d.cts → shared_pickle_output_latest-Cwf2EMdH.d.cts} +6 -6
- package/dist/{shared_pickle_output_latest-_L9GxVle.d.ts → shared_pickle_output_latest-Cwf2EMdH.d.ts} +6 -6
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/ui/DatePicker.tsx
|
|
4
|
+
import { cva as cva2 } from "cva";
|
|
5
|
+
|
|
6
|
+
// src/components/primitives/popover.tsx
|
|
7
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
|
|
10
|
+
// src/lib/utils.ts
|
|
11
|
+
import { clsx } from "clsx";
|
|
12
|
+
import { twMerge } from "tailwind-merge";
|
|
13
|
+
function cn(...inputs) {
|
|
14
|
+
return twMerge(clsx(inputs));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// src/components/primitives/popover.tsx
|
|
18
|
+
import { jsx } from "react/jsx-runtime";
|
|
19
|
+
var Popover = PopoverPrimitive.Root;
|
|
20
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
21
|
+
var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
22
|
+
PopoverPrimitive.Content,
|
|
23
|
+
{
|
|
24
|
+
ref,
|
|
25
|
+
align,
|
|
26
|
+
sideOffset,
|
|
27
|
+
className: cn(
|
|
28
|
+
"z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none 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",
|
|
29
|
+
className
|
|
30
|
+
),
|
|
31
|
+
...props
|
|
32
|
+
}
|
|
33
|
+
) }));
|
|
34
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
35
|
+
|
|
36
|
+
// src/components/ui/Label.tsx
|
|
37
|
+
import { InfoIcon } from "lucide-react";
|
|
38
|
+
|
|
39
|
+
// src/components/primitives/tooltip.tsx
|
|
40
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
41
|
+
import * as React2 from "react";
|
|
42
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
44
|
+
var Tooltip = TooltipPrimitive.Root;
|
|
45
|
+
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
46
|
+
var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
47
|
+
TooltipPrimitive.Content,
|
|
48
|
+
{
|
|
49
|
+
ref,
|
|
50
|
+
sideOffset,
|
|
51
|
+
className: cn(
|
|
52
|
+
"z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
|
|
53
|
+
className
|
|
54
|
+
),
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
));
|
|
58
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
59
|
+
|
|
60
|
+
// src/components/ui/Label.tsx
|
|
61
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
62
|
+
function Label({ text, required, description, className, ...props }) {
|
|
63
|
+
if (!text) return null;
|
|
64
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-1", children: [
|
|
65
|
+
/* @__PURE__ */ jsxs(
|
|
66
|
+
"label",
|
|
67
|
+
{
|
|
68
|
+
className: cn(
|
|
69
|
+
"text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
70
|
+
className
|
|
71
|
+
),
|
|
72
|
+
...props,
|
|
73
|
+
children: [
|
|
74
|
+
text,
|
|
75
|
+
required && /* @__PURE__ */ jsx3("span", { className: "text-red-600", children: "\xA0*" })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
!!description && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
80
|
+
/* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(InfoIcon, { className: "h-4 w-4" }) }),
|
|
81
|
+
/* @__PURE__ */ jsx3(TooltipContent, { className: "max-w-48", children: description })
|
|
82
|
+
] }) })
|
|
83
|
+
] });
|
|
84
|
+
}
|
|
85
|
+
var Label_default = Label;
|
|
86
|
+
|
|
87
|
+
// src/components/ui/DatePicker.tsx
|
|
88
|
+
import { forwardRef as forwardRef4, useEffect, useState } from "react";
|
|
89
|
+
import { format } from "date-fns";
|
|
90
|
+
|
|
91
|
+
// src/components/ui/calendar.tsx
|
|
92
|
+
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
93
|
+
import { DayPicker } from "react-day-picker";
|
|
94
|
+
|
|
95
|
+
// src/components/ui/buttonShadcn.tsx
|
|
96
|
+
import * as React3 from "react";
|
|
97
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
98
|
+
import { cva } from "class-variance-authority";
|
|
99
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
100
|
+
var buttonVariants = cva(
|
|
101
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
|
|
102
|
+
{
|
|
103
|
+
variants: {
|
|
104
|
+
variant: {
|
|
105
|
+
default: "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
|
|
106
|
+
destructive: "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
|
|
107
|
+
outline: "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
|
|
108
|
+
secondary: "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
|
|
109
|
+
ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
|
|
110
|
+
link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
|
|
111
|
+
},
|
|
112
|
+
size: {
|
|
113
|
+
default: "h-9 px-4 py-2",
|
|
114
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
115
|
+
lg: "h-10 rounded-md px-8",
|
|
116
|
+
icon: "h-9 w-9"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
defaultVariants: {
|
|
120
|
+
variant: "default",
|
|
121
|
+
size: "default"
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
var Button = React3.forwardRef(
|
|
126
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
127
|
+
const Comp = asChild ? Slot : "button";
|
|
128
|
+
return /* @__PURE__ */ jsx4(
|
|
129
|
+
Comp,
|
|
130
|
+
{
|
|
131
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
132
|
+
ref,
|
|
133
|
+
...props
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
Button.displayName = "Button";
|
|
139
|
+
|
|
140
|
+
// src/components/ui/calendar.tsx
|
|
141
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
142
|
+
function Calendar({
|
|
143
|
+
className,
|
|
144
|
+
classNames,
|
|
145
|
+
showOutsideDays = true,
|
|
146
|
+
...props
|
|
147
|
+
}) {
|
|
148
|
+
return /* @__PURE__ */ jsx5(
|
|
149
|
+
DayPicker,
|
|
150
|
+
{
|
|
151
|
+
showOutsideDays,
|
|
152
|
+
className: cn("p-3", className),
|
|
153
|
+
classNames: {
|
|
154
|
+
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
|
155
|
+
month: "space-y-4",
|
|
156
|
+
caption: "flex justify-center pt-1 relative items-center",
|
|
157
|
+
caption_label: "text-sm font-medium",
|
|
158
|
+
nav: "space-x-1 flex items-center",
|
|
159
|
+
nav_button: cn(
|
|
160
|
+
buttonVariants({ variant: "outline" }),
|
|
161
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
|
162
|
+
),
|
|
163
|
+
nav_button_previous: "absolute left-1",
|
|
164
|
+
nav_button_next: "absolute right-1",
|
|
165
|
+
table: "w-full border-collapse space-y-1",
|
|
166
|
+
head_row: "flex",
|
|
167
|
+
head_cell: "text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400",
|
|
168
|
+
row: "flex w-full mt-2",
|
|
169
|
+
cell: cn(
|
|
170
|
+
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50",
|
|
171
|
+
props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
|
|
172
|
+
),
|
|
173
|
+
day: cn(
|
|
174
|
+
buttonVariants({ variant: "ghost" }),
|
|
175
|
+
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
|
|
176
|
+
),
|
|
177
|
+
day_range_start: "day-range-start",
|
|
178
|
+
day_range_end: "day-range-end",
|
|
179
|
+
day_selected: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
|
|
180
|
+
day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
|
|
181
|
+
day_outside: "day-outside text-neutral-500 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
|
|
182
|
+
day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
|
|
183
|
+
day_range_middle: "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
|
|
184
|
+
day_hidden: "invisible",
|
|
185
|
+
...classNames
|
|
186
|
+
},
|
|
187
|
+
components: {
|
|
188
|
+
IconLeft: ({ className: className2, ...props2 }) => /* @__PURE__ */ jsx5(ChevronLeft, { className: cn("h-4 w-4", className2), ...props2 }),
|
|
189
|
+
IconRight: ({ className: className2, ...props2 }) => /* @__PURE__ */ jsx5(ChevronRight, { className: cn("h-4 w-4", className2), ...props2 })
|
|
190
|
+
},
|
|
191
|
+
...props
|
|
192
|
+
}
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
Calendar.displayName = "Calendar";
|
|
196
|
+
|
|
197
|
+
// src/components/ui/DatePicker.tsx
|
|
198
|
+
import { Calendar as CalendarIcon } from "lucide-react";
|
|
199
|
+
|
|
200
|
+
// src/components/ui/ErrorMessage.tsx
|
|
201
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
202
|
+
function ErrorMessage({ message, className, ...props }) {
|
|
203
|
+
if (!message) return null;
|
|
204
|
+
return /* @__PURE__ */ jsx6("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
|
|
205
|
+
}
|
|
206
|
+
var ErrorMessage_default = ErrorMessage;
|
|
207
|
+
|
|
208
|
+
// src/components/ui/DatePicker.tsx
|
|
209
|
+
import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
210
|
+
var DatePicker = forwardRef4(({ label, description, required, classNames, value, onChange, error }, ref) => {
|
|
211
|
+
const [date, setDate] = useState(null);
|
|
212
|
+
useEffect(() => {
|
|
213
|
+
setDate(value ?? null);
|
|
214
|
+
}, [value]);
|
|
215
|
+
const handleDateSelect = (dateSelected) => {
|
|
216
|
+
if (!dateSelected) return;
|
|
217
|
+
onChange?.(dateSelected);
|
|
218
|
+
setDate(dateSelected);
|
|
219
|
+
};
|
|
220
|
+
return /* @__PURE__ */ jsxs2("div", { className: cn("flex w-auto flex-col gap-1"), children: [
|
|
221
|
+
label && /* @__PURE__ */ jsx7(
|
|
222
|
+
Label_default,
|
|
223
|
+
{
|
|
224
|
+
text: label,
|
|
225
|
+
required,
|
|
226
|
+
description,
|
|
227
|
+
className: classNames?.label
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
/* @__PURE__ */ jsxs2(Popover, { children: [
|
|
231
|
+
/* @__PURE__ */ jsx7(PopoverTrigger, { children: /* @__PURE__ */ jsxs2("div", { className: cn(datePickerStyle()), children: [
|
|
232
|
+
/* @__PURE__ */ jsx7(CalendarIcon, { size: 16 }),
|
|
233
|
+
date ? format(date, "MM/dd/yyyy") : "Select a date"
|
|
234
|
+
] }) }),
|
|
235
|
+
/* @__PURE__ */ jsx7(PopoverContent, { ref, children: /* @__PURE__ */ jsx7(
|
|
236
|
+
Calendar,
|
|
237
|
+
{
|
|
238
|
+
mode: "single",
|
|
239
|
+
selected: date || void 0,
|
|
240
|
+
onSelect: handleDateSelect,
|
|
241
|
+
captionLayout: "dropdown",
|
|
242
|
+
showOutsideDays: true
|
|
243
|
+
}
|
|
244
|
+
) })
|
|
245
|
+
] }),
|
|
246
|
+
/* @__PURE__ */ jsx7(ErrorMessage_default, { message: error })
|
|
247
|
+
] });
|
|
248
|
+
});
|
|
249
|
+
var datePickerStyle = cva2(
|
|
250
|
+
[
|
|
251
|
+
"placeholder:text-muted-foreground",
|
|
252
|
+
"focus-visible:ring-ring",
|
|
253
|
+
"inline-flex",
|
|
254
|
+
"w-full",
|
|
255
|
+
"h-11",
|
|
256
|
+
"items-center",
|
|
257
|
+
"justify-start",
|
|
258
|
+
"gap-3",
|
|
259
|
+
"rounded-lg",
|
|
260
|
+
"bg-transparent",
|
|
261
|
+
"px-3",
|
|
262
|
+
"pt-0.5",
|
|
263
|
+
"text-sm",
|
|
264
|
+
"shadow-sm",
|
|
265
|
+
"ring-grey-50",
|
|
266
|
+
"transition-colors",
|
|
267
|
+
"focus-visible:outline-none",
|
|
268
|
+
"focus-visible:ring-1",
|
|
269
|
+
"disabled:cursor-not-allowed",
|
|
270
|
+
"disabled:opacity-50",
|
|
271
|
+
"appearance-none",
|
|
272
|
+
"[&::-webkit-search-cancel-button]:appearance-none",
|
|
273
|
+
"[&::-webkit-search-decoration]:appearance-none",
|
|
274
|
+
"[&::-webkit-search-results-button]:appearance-none",
|
|
275
|
+
"[&::-webkit-search-results-decoration]:appearance-none",
|
|
276
|
+
"[&::-ms-clear]:display-none",
|
|
277
|
+
"[&::-ms-reveal]:display-none",
|
|
278
|
+
"text-grey-80 border"
|
|
279
|
+
]
|
|
280
|
+
);
|
|
281
|
+
export {
|
|
282
|
+
DatePicker
|
|
283
|
+
};
|
|
284
|
+
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/DatePicker.tsx","../../../src/components/primitives/popover.tsx","../../../src/lib/utils.ts","../../../src/components/ui/Label.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/calendar.tsx","../../../src/components/ui/buttonShadcn.tsx","../../../src/components/ui/ErrorMessage.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'cva'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover'\nimport Label from '@/components/ui/Label'\nimport { cn } from \"@/lib/utils\"\nimport { forwardRef, useEffect, useState } from 'react'\nimport { format } from 'date-fns'\nimport { Calendar } from '@/components/ui/calendar'\nimport { Calendar as CalendarIcon } from 'lucide-react'\nimport ErrorMessage from '@/components/ui/ErrorMessage'\n\ntype Props = {\n label?: string\n description?: string\n required?: boolean\n classNames?: { label?: string }\n value?: Date | null\n onChange?: (date: Date) => void\n error?: string\n}\n\nexport const DatePicker = forwardRef<HTMLInputElement, Props>(({ label, description, required, classNames, value, onChange, error }, ref) => {\n const [date, setDate] = useState<Date | null>(null)\n\n useEffect(() => {\n setDate(value ?? null)\n }, [value])\n\n const handleDateSelect = (dateSelected: Date | undefined) => {\n if (!dateSelected) return\n onChange?.(dateSelected)\n setDate(dateSelected)\n }\n\n return (\n <div className={cn('flex w-auto flex-col gap-1')}>\n {label && (\n <Label\n text={label}\n required={required}\n description={description}\n className={classNames?.label}\n /> \n )}\n <Popover>\n <PopoverTrigger>\n <div className={cn(datePickerStyle())}>\n <CalendarIcon size={16} />\n {date ? format(date, 'MM/dd/yyyy') : 'Select a date'}\n </div>\n </PopoverTrigger>\n <PopoverContent ref={ref}>\n <Calendar\n mode=\"single\"\n selected={date || undefined}\n onSelect={handleDateSelect}\n captionLayout='dropdown'\n showOutsideDays={true}\n />\n </PopoverContent>\n </Popover>\n\n <ErrorMessage message={error} />\n </div>\n )\n})\n\nconst datePickerStyle = cva(\n [\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n 'text-grey-80 border'\n ]\n)","'use client'\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none 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',\n className\n )}\n {...props}\n />\n </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverContent, PopoverTrigger }\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { InfoIcon } from 'lucide-react'\nimport { type ComponentPropsWithoutRef } from 'react'\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\"> *</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/buttonShadcn\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center\",\n caption_label: \"text-sm font-medium\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400\",\n row: \"flex w-full mt-2\",\n cell: cn(\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50\",\n props.mode === \"range\"\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900\",\n day_today: \"bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50\",\n day_outside:\n \"day-outside text-neutral-500 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400\",\n day_disabled: \"text-neutral-500 opacity-50 dark:text-neutral-400\",\n day_range_middle:\n \"aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ className, ...props }) => (\n <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n IconRight: ({ className, ...props }) => (\n <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300\",\n {\n variants: {\n variant: {\n default:\n \"bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90\",\n destructive:\n \"bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90\",\n outline:\n \"border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50\",\n secondary:\n \"bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80\",\n ghost: \"hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50\",\n link: \"text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n"],"mappings":"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","names":["cva","React","jsx","jsx","forwardRef","React","jsx","jsx","className","props","jsx","jsx","jsxs","forwardRef","cva"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/ErrorMessage.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","import {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/ErrorMessage.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADOI;AAJJ,SAAS,aAAa,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoB;AACvE,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,4CAAC,OAAE,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAC3D,mBACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACOI;AAJJ,SAAS,aAAa,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoB;AACvE,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,OAAE,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAC3D,mBACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/Icon.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { cn } from '@/lib/utils'\n\ninterface IconProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconVariants> {\n active?: boolean\n readonly?: boolean\n}\n\nexport const Icon = forwardRef<HTMLButtonElement, IconProps>(\n ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {\n const Component = readonly ? Slot : 'button'\n return (\n <Component\n className={cn(\n twMerge(iconVariants({ variant: active ? 'active' : variant, size })),\n className\n )}\n {...props}\n ref={ref}\n />\n )\n }\n)\n\nIcon.displayName = 'Icon'\n\nconst iconVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'rounded-full',\n 'outline-2',\n 'outline-offset-2',\n 'outline-dashed',\n 'outline-transparent',\n 'disabled:text-grey-40',\n 'disabled:bg-transparent',\n 'disabled:pointer-events-none',\n ],\n {\n variants: {\n variant: {\n filled: [\n 'border',\n 'border-green-80',\n 'bg-green-90',\n 'text-white',\n 'hover:bg-green-80',\n 'active:bg-green-80',\n 'focus:outline-pickle-100',\n 'disabled:bg-green-70',\n ],\n transparent: [\n 'text-black',\n 'hover:bg-grey-5',\n 'active:bg-grey-10',\n 'focus:outline-purple-100',\n ],\n tonal: [\n 'border',\n 'border-grey-5',\n 'hover:border-grey-10',\n 'active:border-grey-20',\n 'focus:outline-purple-100',\n ],\n active: ['text-black', 'bg-pickle-100'],\n },\n size: {\n small: ['h-10', 'w-10', 'p-3'],\n medium: ['h-12', 'w-12', 'p-4'],\n large: ['h-14', 'w-14', 'p-4'],\n },\n },\n defaultVariants: {\n variant: 'filled',\n size: 'medium',\n },\n }\n)\n","import {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/Icon.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { cn } from '@/lib/utils'\n\ninterface IconProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconVariants> {\n active?: boolean\n readonly?: boolean\n}\n\nexport const Icon = forwardRef<HTMLButtonElement, IconProps>(\n ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {\n const Component = readonly ? Slot : 'button'\n return (\n <Component\n className={cn(\n twMerge(iconVariants({ variant: active ? 'active' : variant, size })),\n className\n )}\n {...props}\n ref={ref}\n />\n )\n }\n)\n\nIcon.displayName = 'Icon'\n\nconst iconVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'rounded-full',\n 'outline-2',\n 'outline-offset-2',\n 'outline-dashed',\n 'outline-transparent',\n 'disabled:text-grey-40',\n 'disabled:bg-transparent',\n 'disabled:pointer-events-none',\n ],\n {\n variants: {\n variant: {\n filled: [\n 'border',\n 'border-green-80',\n 'bg-green-90',\n 'text-white',\n 'hover:bg-green-80',\n 'active:bg-green-80',\n 'focus:outline-pickle-100',\n 'disabled:bg-green-70',\n ],\n transparent: [\n 'text-black',\n 'hover:bg-grey-5',\n 'active:bg-grey-10',\n 'focus:outline-purple-100',\n ],\n tonal: [\n 'border',\n 'border-grey-5',\n 'hover:border-grey-10',\n 'active:border-grey-20',\n 'focus:outline-purple-100',\n ],\n active: ['text-black', 'bg-pickle-100'],\n },\n size: {\n small: ['h-10', 'w-10', 'p-3'],\n medium: ['h-12', 'w-12', 'p-4'],\n large: ['h-14', 'w-14', 'p-4'],\n },\n },\n defaultVariants: {\n variant: 'filled',\n size: 'medium',\n },\n }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AACrB,iBAAuC;AACvC,mBAA2B;AAC3B,IAAAA,yBAAwB;;;ACHxB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADaM;AAJC,IAAM,WAAO;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,SAAS,OAAO,WAAW,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,YAAY,WAAW,yBAAO;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,cACT,gCAAQ,aAAa,EAAE,SAAS,SAAS,WAAW,SAAS,KAAK,CAAC,CAAC;AAAA,UACpE;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QACJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAM,mBAAe;AAAA,EACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,QAAQ,CAAC,cAAc,eAAe;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,QAC7B,QAAQ,CAAC,QAAQ,QAAQ,KAAK;AAAA,QAC9B,OAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;","names":["import_tailwind_merge"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/Icon.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { cn } from '@/lib/utils'\n\ninterface IconProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconVariants> {\n active?: boolean\n readonly?: boolean\n}\n\nexport const Icon = forwardRef<HTMLButtonElement, IconProps>(\n ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {\n const Component = readonly ? Slot : 'button'\n return (\n <Component\n className={cn(\n twMerge(iconVariants({ variant: active ? 'active' : variant, size })),\n className\n )}\n {...props}\n ref={ref}\n />\n )\n }\n)\n\nIcon.displayName = 'Icon'\n\nconst iconVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'rounded-full',\n 'outline-2',\n 'outline-offset-2',\n 'outline-dashed',\n 'outline-transparent',\n 'disabled:text-grey-40',\n 'disabled:bg-transparent',\n 'disabled:pointer-events-none',\n ],\n {\n variants: {\n variant: {\n filled: [\n 'border',\n 'border-green-80',\n 'bg-green-90',\n 'text-white',\n 'hover:bg-green-80',\n 'active:bg-green-80',\n 'focus:outline-pickle-100',\n 'disabled:bg-green-70',\n ],\n transparent: [\n 'text-black',\n 'hover:bg-grey-5',\n 'active:bg-grey-10',\n 'focus:outline-purple-100',\n ],\n tonal: [\n 'border',\n 'border-grey-5',\n 'hover:border-grey-10',\n 'active:border-grey-20',\n 'focus:outline-purple-100',\n ],\n active: ['text-black', 'bg-pickle-100'],\n },\n size: {\n small: ['h-10', 'w-10', 'p-3'],\n medium: ['h-12', 'w-12', 'p-4'],\n large: ['h-14', 'w-14', 'p-4'],\n },\n },\n defaultVariants: {\n variant: 'filled',\n size: 'medium',\n },\n }\n)\n","import {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/Icon.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { forwardRef } from 'react'\nimport { twMerge } from 'tailwind-merge'\n\nimport { cn } from '@/lib/utils'\n\ninterface IconProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconVariants> {\n active?: boolean\n readonly?: boolean\n}\n\nexport const Icon = forwardRef<HTMLButtonElement, IconProps>(\n ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {\n const Component = readonly ? Slot : 'button'\n return (\n <Component\n className={cn(\n twMerge(iconVariants({ variant: active ? 'active' : variant, size })),\n className\n )}\n {...props}\n ref={ref}\n />\n )\n }\n)\n\nIcon.displayName = 'Icon'\n\nconst iconVariants = cva(\n [\n 'inline-flex',\n 'items-center',\n 'rounded-full',\n 'outline-2',\n 'outline-offset-2',\n 'outline-dashed',\n 'outline-transparent',\n 'disabled:text-grey-40',\n 'disabled:bg-transparent',\n 'disabled:pointer-events-none',\n ],\n {\n variants: {\n variant: {\n filled: [\n 'border',\n 'border-green-80',\n 'bg-green-90',\n 'text-white',\n 'hover:bg-green-80',\n 'active:bg-green-80',\n 'focus:outline-pickle-100',\n 'disabled:bg-green-70',\n ],\n transparent: [\n 'text-black',\n 'hover:bg-grey-5',\n 'active:bg-grey-10',\n 'focus:outline-purple-100',\n ],\n tonal: [\n 'border',\n 'border-grey-5',\n 'hover:border-grey-10',\n 'active:border-grey-20',\n 'focus:outline-purple-100',\n ],\n active: ['text-black', 'bg-pickle-100'],\n },\n size: {\n small: ['h-10', 'w-10', 'p-3'],\n medium: ['h-12', 'w-12', 'p-4'],\n large: ['h-14', 'w-14', 'p-4'],\n },\n },\n defaultVariants: {\n variant: 'filled',\n size: 'medium',\n },\n }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,WAAAA,gBAAe;;;ACHxB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADaM;AAJC,IAAM,OAAO;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,SAAS,OAAO,WAAW,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,YAAY,WAAW,OAAO;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACTC,SAAQ,aAAa,EAAE,SAAS,SAAS,WAAW,SAAS,KAAK,CAAC,CAAC;AAAA,UACpE;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QACJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAM,eAAe;AAAA,EACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,QAAQ,CAAC,cAAc,eAAe;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,QAC7B,QAAQ,CAAC,QAAQ,QAAQ,KAAK;AAAA,QAC9B,OAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;","names":["twMerge","twMerge"]}
|
|
@@ -52,6 +52,9 @@ function ErrorMessage({ message, className, ...props }) {
|
|
|
52
52
|
}
|
|
53
53
|
var ErrorMessage_default = ErrorMessage;
|
|
54
54
|
|
|
55
|
+
// src/components/ui/Label.tsx
|
|
56
|
+
var import_lucide_react = require("lucide-react");
|
|
57
|
+
|
|
55
58
|
// src/components/primitives/tooltip.tsx
|
|
56
59
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
57
60
|
var React = __toESM(require("react"), 1);
|
|
@@ -74,7 +77,6 @@ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props },
|
|
|
74
77
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
75
78
|
|
|
76
79
|
// src/components/ui/Label.tsx
|
|
77
|
-
var import_lucide_react = require("lucide-react");
|
|
78
80
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
79
81
|
function Label({ text, required, description, className, ...props }) {
|
|
80
82
|
if (!text) return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n description?: string\n classNames?: { label?: string }\n onClear?: () => void\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n (\n { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n ref\n ) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n description={description}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { InfoIcon } from 'lucide-react'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\"> *</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n"],"mappings":"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","names":["import_lucide_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/primitives/tooltip.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n description?: string\n classNames?: { label?: string }\n onClear?: () => void\n}\n\n/**\n * A reusable input component that supports icons, labels, error messages, and clearing functionality.\n *\n * @example\n * // Basic usage\n * <Input\n * id=\"email\"\n * name=\"email\"\n * placeholder=\"Enter your email\"\n * />\n *\n * @example\n * // With label and error\n * <Input\n * id=\"username\"\n * label=\"Username\"\n * error=\"Username is required\"\n * required\n * />\n *\n * @example\n * // Search input with clear functionality\n * <Input\n * icon=\"Search\"\n * value={searchValue}\n * onChange={handleChange}\n * onClear={() => setSearchValue('')}\n * />\n */\nconst Input = forwardRef<HTMLInputElement, Props>(\n (\n { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n ref\n ) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n description={description}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","import { InfoIcon } from 'lucide-react'\nimport { type ComponentPropsWithoutRef } from 'react'\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\"> *</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":"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","names":["import_lucide_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -14,6 +14,35 @@ interface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<type
|
|
|
14
14
|
};
|
|
15
15
|
onClear?: () => void;
|
|
16
16
|
}
|
|
17
|
+
/**
|
|
18
|
+
* A reusable input component that supports icons, labels, error messages, and clearing functionality.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // Basic usage
|
|
22
|
+
* <Input
|
|
23
|
+
* id="email"
|
|
24
|
+
* name="email"
|
|
25
|
+
* placeholder="Enter your email"
|
|
26
|
+
* />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // With label and error
|
|
30
|
+
* <Input
|
|
31
|
+
* id="username"
|
|
32
|
+
* label="Username"
|
|
33
|
+
* error="Username is required"
|
|
34
|
+
* required
|
|
35
|
+
* />
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* // Search input with clear functionality
|
|
39
|
+
* <Input
|
|
40
|
+
* icon="Search"
|
|
41
|
+
* value={searchValue}
|
|
42
|
+
* onChange={handleChange}
|
|
43
|
+
* onClear={() => setSearchValue('')}
|
|
44
|
+
* />
|
|
45
|
+
*/
|
|
17
46
|
declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
|
|
18
47
|
declare const inputVariants: (props?: ({
|
|
19
48
|
theme?: "light" | "dark" | null | undefined;
|
|
@@ -14,6 +14,35 @@ interface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<type
|
|
|
14
14
|
};
|
|
15
15
|
onClear?: () => void;
|
|
16
16
|
}
|
|
17
|
+
/**
|
|
18
|
+
* A reusable input component that supports icons, labels, error messages, and clearing functionality.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // Basic usage
|
|
22
|
+
* <Input
|
|
23
|
+
* id="email"
|
|
24
|
+
* name="email"
|
|
25
|
+
* placeholder="Enter your email"
|
|
26
|
+
* />
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // With label and error
|
|
30
|
+
* <Input
|
|
31
|
+
* id="username"
|
|
32
|
+
* label="Username"
|
|
33
|
+
* error="Username is required"
|
|
34
|
+
* required
|
|
35
|
+
* />
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* // Search input with clear functionality
|
|
39
|
+
* <Input
|
|
40
|
+
* icon="Search"
|
|
41
|
+
* value={searchValue}
|
|
42
|
+
* onChange={handleChange}
|
|
43
|
+
* onClear={() => setSearchValue('')}
|
|
44
|
+
* />
|
|
45
|
+
*/
|
|
17
46
|
declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
|
|
18
47
|
declare const inputVariants: (props?: ({
|
|
19
48
|
theme?: "light" | "dark" | null | undefined;
|
|
@@ -18,6 +18,9 @@ function ErrorMessage({ message, className, ...props }) {
|
|
|
18
18
|
}
|
|
19
19
|
var ErrorMessage_default = ErrorMessage;
|
|
20
20
|
|
|
21
|
+
// src/components/ui/Label.tsx
|
|
22
|
+
import { InfoIcon } from "lucide-react";
|
|
23
|
+
|
|
21
24
|
// src/components/primitives/tooltip.tsx
|
|
22
25
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
23
26
|
import * as React from "react";
|
|
@@ -40,7 +43,6 @@ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props },
|
|
|
40
43
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
41
44
|
|
|
42
45
|
// src/components/ui/Label.tsx
|
|
43
|
-
import { InfoIcon } from "lucide-react";
|
|
44
46
|
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
45
47
|
function Label({ text, required, description, className, ...props }) {
|
|
46
48
|
if (!text) return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n description?: string\n classNames?: { label?: string }\n onClear?: () => void\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n (\n { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n ref\n ) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n description={description}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { InfoIcon } from 'lucide-react'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\"> *</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n"],"mappings":"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","names":["forwardRef","jsx","jsx","jsx","jsxs","forwardRef"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/primitives/tooltip.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n icon?: keyof typeof icons\n description?: string\n classNames?: { label?: string }\n onClear?: () => void\n}\n\n/**\n * A reusable input component that supports icons, labels, error messages, and clearing functionality.\n *\n * @example\n * // Basic usage\n * <Input\n * id=\"email\"\n * name=\"email\"\n * placeholder=\"Enter your email\"\n * />\n *\n * @example\n * // With label and error\n * <Input\n * id=\"username\"\n * label=\"Username\"\n * error=\"Username is required\"\n * required\n * />\n *\n * @example\n * // Search input with clear functionality\n * <Input\n * icon=\"Search\"\n * value={searchValue}\n * onChange={handleChange}\n * onClear={() => setSearchValue('')}\n * />\n */\nconst Input = forwardRef<HTMLInputElement, Props>(\n (\n { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n ref\n ) => {\n const handleClear = () => {\n onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n onClear?.()\n }\n\n const IconComponent = icon && icons[icon]\n\n const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n const hasIcon = !!icon\n\n const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n return (\n <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n {label && (\n <Label\n text={label}\n htmlFor={props.name}\n required={props.required}\n description={description}\n className={classNames?.label}\n />\n )}\n <div className=\"relative flex flex-row items-center\">\n {IconComponent && (\n <IconComponent\n className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n />\n )}\n <input\n className={cn(inputVariants({ theme, hasIcon }))}\n ref={ref}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n data-testid={`input-element-${props.id}`}\n {...props}\n />\n {hasIcon && value && (\n <X\n className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n onClick={handleClear}\n data-testid=\"clear-button\"\n />\n )}\n </div>\n\n <ErrorMessage message={error} />\n </div>\n )\n }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n [\n 'border-input',\n 'placeholder:text-muted-foreground',\n 'focus-visible:ring-ring',\n 'inline-flex',\n 'w-full',\n 'h-11',\n 'items-center',\n 'justify-start',\n 'gap-3',\n 'rounded-lg',\n 'bg-transparent',\n 'px-3',\n 'pt-0.5',\n 'text-sm',\n 'shadow-sm',\n 'ring-grey-50',\n 'transition-colors',\n 'focus-visible:outline-none',\n 'focus-visible:ring-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none',\n '[&::-webkit-search-results-decoration]:appearance-none',\n '[&::-ms-clear]:display-none',\n '[&::-ms-reveal]:display-none',\n ],\n {\n variants: {\n theme: {\n light: 'text-grey-80 border',\n dark: 'text-white',\n },\n hasIcon: {\n false: 'pl-3',\n true: 'pl-8',\n },\n },\n defaultVariants: {\n theme: 'light',\n hasIcon: false,\n },\n }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n if (!message) return null\n\n return (\n <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n {message}\n </p>\n )\n}\n\nexport default ErrorMessage\n","import { InfoIcon } from 'lucide-react'\nimport { type ComponentPropsWithoutRef } from 'react'\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n text?: string\n required?: boolean\n description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n if (!text) return null\n\n return (\n <div className=\"flex w-full flex-row gap-1\">\n <label\n className={cn(\n 'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n className\n )}\n {...props}\n >\n {text}\n {required && <span className=\"text-red-600\"> *</span>}\n </label>\n\n {!!description && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <InfoIcon className=\"h-4 w-4\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )\n}\n\nexport default Label\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n 'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n className\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":"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","names":["forwardRef","jsx","jsx","jsx","jsxs","forwardRef"]}
|