@voyantjs/ui 0.18.0 → 0.20.0

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.
Files changed (6) hide show
  1. package/dist/components/date-picker.d.ts.map +1 -1
  2. package/dist/components/date-picker.js +6 -2
  3. package/dist/components/phone-input.d.ts +9 -0
  4. package/dist/components/phone-input.d.ts.map +1 -0
  5. package/dist/components/phone-input.js +58 -0
  6. package/package.json +5 -5
package/dist/components/date-picker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE1D,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,KAAK,eAAe,GAAG,WAAW,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAA;AAED,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC7B,YAAY,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAkJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAY,EACZ,WAA2B,EAC3B,aAAqB,EACrB,SAAS,EACT,gBAAgB,EAChB,SAAgB,EAChB,GAAG,aAAa,EACjB,EAAE,eAAe,2CA2DjB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAY,EACZ,WAAiC,EACjC,aAA0B,EAC1B,SAAS,EACT,gBAAgB,EAChB,SAAgB,EAChB,cAAkB,EAClB,GAAG,aAAa,EACjB,EAAE,oBAAoB,2CA6EtB;AAED,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAA"}
1
+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE1D,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,KAAK,eAAe,GAAG,WAAW,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAA;AAED,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC7B,YAAY,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAqJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAY,EACZ,WAA2B,EAC3B,aAAqB,EACrB,SAAS,EACT,gBAAgB,EAChB,SAAgB,EAChB,GAAG,aAAa,EACjB,EAAE,eAAe,2CA2DjB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAY,EACZ,WAAiC,EACjC,aAA0B,EAC1B,SAAS,EACT,gBAAgB,EAChB,SAAgB,EAChB,cAAkB,EAClB,GAAG,aAAa,EACjB,EAAE,oBAAoB,2CA6EtB;AAED,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAA"}
package/dist/components/date-picker.js CHANGED
@@ -36,8 +36,12 @@ function formatRangeLabel(value, displayFormat, placeholder) {
36
36
  }
37
37
  return placeholder;
38
38
  }
39
- function DatePickerTrigger({ className, empty, children }) {
40
- return (_jsxs(Button, { variant: "outline", "data-empty": empty, className: cn("w-full justify-start text-left font-normal data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: children })] }));
39
+ function DatePickerTrigger({ className, empty, children, ...props }) {
40
+ // Spread `...props` so base-ui's `<PopoverTrigger render={<DatePickerTrigger />}>`
41
+ // can forward its merged onClick / aria-expanded / ref onto the actual Button —
42
+ // without this, the popover never opens because the click handler stops at this
43
+ // wrapper.
44
+ return (_jsxs(Button, { ...props, variant: "outline", "data-empty": empty, className: cn("w-full justify-start text-left font-normal data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: children })] }));
41
45
  }
42
46
  function DatePickerFooter({ clearable, hasValue, onClear }) {
43
47
  if (!clearable || !hasValue)
package/dist/components/phone-input.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import * as RPNInput from "react-phone-number-input";
3
+ type PhoneInputProps = Omit<React.ComponentProps<"input">, "onChange" | "value" | "ref"> & Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
4
+ onChange?: (value: RPNInput.Value) => void;
5
+ };
6
+ declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps>;
7
+ export type { PhoneInputProps };
8
+ export { PhoneInput };
9
+ //# sourceMappingURL=phone-input.d.ts.map
package/dist/components/phone-input.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAA;AAiBpD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC,GACtF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAEH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,yBAAyB,CAAC,eAAe,CA0B/D,CAAA;AAyIF,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,CAAA"}
package/dist/components/phone-input.js ADDED
@@ -0,0 +1,58 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { CheckIcon, ChevronsUpDown } from "lucide-react";
3
+ import * as React from "react";
4
+ import * as RPNInput from "react-phone-number-input";
5
+ import flags from "react-phone-number-input/flags";
6
+ import { cn } from "../lib/utils";
7
+ import { Button } from "./button";
8
+ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command";
9
+ import { Input } from "./input";
10
+ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
11
+ import { ScrollArea } from "./scroll-area";
12
+ const PhoneInput = React.forwardRef(({ className, onChange, value, ...props }, ref) => {
13
+ return (_jsx(RPNInput.default, { ref: ref, className: cn("flex", className), flagComponent: FlagComponent, countrySelectComponent: CountrySelect, inputComponent: InputComponent, smartCaret: false, value: value || undefined,
14
+ /**
15
+ * Handles the onChange event.
16
+ *
17
+ * react-phone-number-input might trigger the onChange event as undefined
18
+ * when a valid phone number is not entered. To prevent this,
19
+ * the value is coerced to an empty string.
20
+ *
21
+ * @param {E164Number | undefined} value - The entered value
22
+ */
23
+ onChange: (value) => onChange?.(value || ""), ...props }));
24
+ });
25
+ PhoneInput.displayName = "PhoneInput";
26
+ const InputComponent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Input, { className: cn("rounded-e-lg rounded-s-none", className), ...props, ref: ref })));
27
+ InputComponent.displayName = "InputComponent";
28
+ const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange, }) => {
29
+ const scrollAreaRef = React.useRef(null);
30
+ const [searchValue, setSearchValue] = React.useState("");
31
+ const [isOpen, setIsOpen] = React.useState(false);
32
+ return (_jsxs(Popover, { open: isOpen, modal: true, onOpenChange: (open) => {
33
+ setIsOpen(open);
34
+ open && setSearchValue("");
35
+ }, children: [_jsxs(PopoverTrigger, { disabled: disabled, render: _jsx(Button, { type: "button", variant: "outline", className: "flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10" }), children: [_jsx(FlagComponent, { country: selectedCountry, countryName: selectedCountry }), _jsx(ChevronsUpDown, { className: cn("-mr-2 size-4 opacity-50", disabled ? "hidden" : "opacity-100") })] }), _jsx(PopoverContent, { className: "w-[300px] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { value: searchValue, onValueChange: (value) => {
36
+ setSearchValue(value);
37
+ setTimeout(() => {
38
+ if (scrollAreaRef.current) {
39
+ const viewportElement = scrollAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
40
+ if (viewportElement) {
41
+ viewportElement.scrollTop = 0;
42
+ }
43
+ }
44
+ }, 0);
45
+ }, placeholder: "Search country..." }), _jsx(CommandList, { children: _jsxs(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [_jsx(CommandEmpty, { children: "No country found." }), _jsx(CommandGroup, { children: countryList.map(({ value, label }) => value ? (_jsx(CountrySelectOption, { country: value, countryName: label, selectedCountry: selectedCountry, onChange: onChange, onSelectComplete: () => setIsOpen(false) }, value)) : null) })] }) })] }) })] }));
46
+ };
47
+ const CountrySelectOption = ({ country, countryName, selectedCountry, onChange, onSelectComplete, }) => {
48
+ const handleSelect = () => {
49
+ onChange(country);
50
+ onSelectComplete();
51
+ };
52
+ return (_jsxs(CommandItem, { className: "gap-2", onSelect: handleSelect, children: [_jsx(FlagComponent, { country: country, countryName: countryName }), _jsx("span", { className: "flex-1 text-sm", children: countryName }), _jsx("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }), _jsx(CheckIcon, { className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}` })] }));
53
+ };
54
+ const FlagComponent = ({ country, countryName }) => {
55
+ const Flag = flags[country];
56
+ return (_jsx("span", { className: "flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag && _jsx(Flag, { title: countryName }) }));
57
+ };
58
+ export { PhoneInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@voyantjs/ui",
3
- "version": "0.18.0",
3
+ "version": "0.20.0",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -35,10 +35,10 @@
35
35
  "tw-animate-css": "^1.3.5",
36
36
  "vaul": "^1.1.2",
37
37
  "zod": "^4.3.6",
38
- "@voyantjs/i18n": "0.18.0",
39
- "@voyantjs/notifications-react": "0.18.0",
40
- "@voyantjs/notifications": "0.18.0",
41
- "@voyantjs/utils": "0.18.0"
38
+ "@voyantjs/i18n": "0.20.0",
39
+ "@voyantjs/notifications": "0.20.0",
40
+ "@voyantjs/notifications-react": "0.20.0",
41
+ "@voyantjs/utils": "0.20.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@tailwindcss/postcss": "^4.1.11",