@cryptlex/web-components 5.2.0 → 5.3.0

package/dist/components/data-table/table-commons.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Checkbox } from "lib/components/inputs/checkbox";
+const cH = createColumnHelper();
+export const TABLE_CHECK_BOX_COLUMN = [
+    cH.accessor("checkbox", {
+        header: ({ table }) => (_jsx(Checkbox, { isIndeterminate: table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected(), isSelected: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(), onChange: () => table.toggleAllPageRowsSelected(), "aria-label": "Select all" })),
+        cell: ({ row }) => (_jsx(Checkbox, { isSelected: row.getIsSelected(), onChange: () => row.toggleSelected(), "aria-label": "Select row" })),
+        enableSorting: false,
+        enableHiding: false,
+    }),
+];
+export const TABLE_ID_COLUMN = [
+    cH.accessor("id", {
+        header: () => "ID",
+    }),
+];
+export const TABLE_DEFAULT_DATE_COLUMNS = [
+    cH.accessor("createdAt", {
+        header: () => "Creation Date",
+        cell: ({ row }) => {
+            const date = row.getValue("createdAt");
+            return formatDate(date);
+        },
+        enableHiding: false,
+    }),
+    cH.accessor("updatedAt", {
+        header: () => "Last Updated",
+        cell: ({ row }) => {
+            const date = row.getValue("updatedAt");
+            return formatDate(date);
+        },
+        enableHiding: false,
+    }),
+];
+// TODO, i18n
+export function formatDate(date) {
+    if (!date)
+        return null;
+    const _date = new Date(date);
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short",
+    }).format(_date);
+}
+/**
+ * Format multiple license parameters (expired, suspended, revoked) into a single status
+ */
+export function getLicenseStatus(license) {
+    const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();
+    // Status Column
+    switch (true) {
+        case license.revoked && license.suspended && licenseExpired:
+            return "Revoked, Suspended, Expired";
+        case license.revoked && license.suspended:
+            return "Revoked, Suspended";
+        case license.revoked && licenseExpired:
+            return "Revoked, Expired";
+        case license.suspended && licenseExpired:
+            return "Suspended, Expired";
+        case license.suspended:
+            return "Suspended";
+        case license.revoked:
+            return "Revoked";
+        case licenseExpired:
+            return "Expired";
+        default:
+            return "Active";
+    }
+}
+export function getValidityDisplay(validity) {
+    if (validity === 0 || !validity) {
+        return "Lifetime";
+    }
+    else {
+        return secondsToDuration(validity);
+    }
+}
+export function secondsToDuration(seconds) {
+    //@ts-ignore
+    const duration = intervalToDuration({
+        start: 0,
+        end: seconds * 1000,
+    });
+    const parts = [
+        duration.years && `${duration.years}y`,
+        duration.months && `${duration.months}m`,
+        duration.days && `${duration.days}d`,
+        duration.hours && `${duration.hours}h`,
+    ];
+    // Filter out undefined values and join
+    return parts.filter(Boolean).join(" ").trim();
+}
+export function getValueFromData(data, accessor) {
+    const accessors = accessor.toString().split(".");
+    let value = data;
+    for (const acc of accessors) {
+        value = value?.[acc];
+    }
+    return value;
+}
+export const ALL_OS = {
+    windows: "Windows",
+    macos: "macOS",
+    linux: "Linux",
+    ios: "iOS",
+    android: "Android",
+};
+export function createTableFetchFn(ctxclient, path) {
+    return async (pagination, sorting, searching, filters) => {
+        const query = {
+            ...filters,
+            page: pagination.pageIndex + 1,
+            limit: pagination.pageSize,
+            sort: generateSortParam(sorting[0]),
+            search: searching,
+        };
+        // const pathParams = merge(_baseQueryObject, params);
+        return ctxclient.GET(path, { query }).then((value) => {
+            const rowCount = Number.parseInt(value.response.headers.get("Pagination-Count") || "0");
+            return { total: rowCount, data: value.data };
+        });
+    };
+}
+function generateSortParam(sort) {
+    if (sort) {
+        if (sort.desc) {
+            return `-${sort.id}`;
+        }
+        else {
+            return `+${sort.id}`;
+        }
+    }
+    else {
+        return "-createdAt";
+    }
+}

package/dist/components/inputs/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+import { type FormFieldProps } from "lib/components/inputs/field";
+export declare const CheckboxGroup: (props: import("react-aria-components").CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+type CheckboxProps = AriaCheckboxProps & FormFieldProps;
+export declare function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>): import("react/jsx-runtime").JSX.Element;
+export type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, "onChange" | "onBlur" | "isChecked">;
+export declare function TfCheckbox({ ...props }: TfCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/checkbox.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as AriaCheckbox, CheckboxGroup as AriaCheckboxGroup, composeRenderProps } from "react-aria-components";
+import { FormField, labelVariants } from "lib/components/inputs/field";
+import { useFieldContext } from "lib/utils/form-context";
+import { cn } from "lib/utils/primitives";
+import { Check, Minus } from "lucide-react";
+export const CheckboxGroup = AriaCheckboxGroup;
+export function Checkbox({ className, label, description, errorMessage, ...props }) {
+    return (_jsx("div", { className: "group form-field", children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(AriaCheckbox, { className: composeRenderProps(className, (className) => cn("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2", 
+                /* Disabled */
+                "disabled-muted", labelVariants, className)), ...props, children: composeRenderProps(_jsx(_Fragment, {}), (_, renderProps) => (_jsx(_Fragment, { children: _jsx("div", { className: cn("flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background", 
+                        /* Selected */
+                        "group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground", 
+                        /* Disabled */
+                        "group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50", 
+                        /* Invalid */
+                        "group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground", 
+                        /* Resets */
+                        "focus:outline-none focus-visible:outline-none"), children: renderProps.isIndeterminate ? (_jsx(Minus, { className: "size-icon" })) : renderProps.isSelected ? (_jsx(Check, { className: "size-icon" })) : null }) }))) }) }) }));
+}
+export function TfCheckbox({ ...props }) {
+    const field = useFieldContext();
+    return (_jsx(Checkbox, { isSelected: field.state.value, isDisabled: field.form.state.isSubmitting || props.isDisabled, onChange: () => field.handleChange(!field.state.value), onBlur: field.handleBlur, ...props }));
+}
+;

package/dist/components/inputs/date-picker.d.ts

@@ -0,0 +1,11 @@
+import { DatePickerProps as AriaDatePickerProps, DateRangePickerProps as AriaDateRangePickerProps, DateValue as AriaDateValue } from "react-aria-components";
+import { type ZonedDateTime } from "@internationalized/date";
+import { type FormFieldProps } from "lib/components/inputs/field";
+interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {
+}
+export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>): import("react/jsx-runtime").JSX.Element;
+interface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {
+}
+export declare function DateRangePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DateRangePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/date-picker.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, composeRenderProps, Popover } from "react-aria-components";
+import { getLocalTimeZone, parseAbsolute } from "@internationalized/date";
+import { DateInput } from "lib/components/inputs/datefield";
+import { FieldGroup, FormField } from "lib/components/inputs/field";
+import { Button } from "lib/components/ui/button";
+import { Calendar, RangeCalendar } from "lib/components/ui/calendar";
+import { useFieldContext } from "lib/utils/form-context";
+import { getFieldErrorMessage } from "lib/utils/form-hook";
+import { cn } from "lib/utils/primitives";
+const DatePickerContent = ({ className, popoverClassName, ...props }) => (_jsx(Popover, { className: composeRenderProps(popoverClassName, (className) => cn("w-auto p-3", className)), children: _jsx(AriaDialog, { className: cn("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0", className), ...props }) }));
+export function DatePicker({ label, description, errorMessage, className, ...props }) {
+    return (_jsxs(AriaDatePicker, { className: composeRenderProps(className, (className) => cn("group flex flex-col gap-2", className)), ...props, children: [_jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsxs(FieldGroup, { "aria-label": label, children: [_jsx(DateInput, { className: "flex-1", variant: "ghost" }), _jsx(Button, { variant: "ghost", size: "icon", className: '-me-2 ms-2', children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), _jsx(DatePickerContent, { children: _jsx(Calendar, {}) })] }));
+}
+export function TfDatePicker({ ...props }) {
+    const field = useFieldContext();
+    return (_jsx(DatePicker, { hideTimeZone: true, value: field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null, onChange: (v) => v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null), onBlur: field.handleBlur, isInvalid: !!getFieldErrorMessage(field), errorMessage: getFieldErrorMessage(field), ...props }));
+}
+export function DateRangePicker({ label, description, errorMessage, className, ...props }) {
+    return (_jsxs(AriaDateRangePicker, { className: composeRenderProps(className, (className) => cn("group flex flex-col gap-2", className)), ...props, children: [_jsx(FormField, { label: label, errorMessage: errorMessage, description: description, children: _jsxs(FieldGroup, { children: [_jsx(DateInput, { variant: "ghost", slot: "start" }), _jsx("span", { "aria-hidden": true, className: "px-2 text-sm text-muted-foreground", children: "-" }), _jsx(DateInput, { className: "flex-1", variant: "ghost", slot: "end" }), _jsx(Button, { variant: "ghost", size: "icon", className: "mr-1 data-[focus-visible]:ring-offset-0", children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), _jsx(DatePickerContent, { children: _jsx(RangeCalendar, {}) })] }));
+}

package/dist/components/inputs/datefield.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from "class-variance-authority";
+import { DateFieldProps as AriaDateFieldProps, DateInputProps as AriaDateInputProps, DateSegmentProps as AriaDateSegmentProps, DateValue as AriaDateValue, TimeFieldProps as AriaTimeFieldProps, TimeValue as AriaTimeValue } from "react-aria-components";
+import { fieldGroupVariants, type FormFieldProps } from "./field";
+export declare function DateSegment({ className, ...props }: AriaDateSegmentProps): import("react/jsx-runtime").JSX.Element;
+interface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {
+}
+export declare function DateInput({ className, variant, ...props }: Omit<DateInputProps, "children">): import("react/jsx-runtime").JSX.Element;
+interface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {
+}
+export declare function DateField<T extends AriaDateValue>({ label, description, className, errorMessage, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {
+}
+export declare function TimeField<T extends AriaTimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/datefield.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateField as AriaDateField, DateInput as AriaDateInput, DateSegment as AriaDateSegment, TimeField as AriaTimeField, composeRenderProps } from "react-aria-components";
+import { cn } from "lib/utils/primitives";
+import { fieldGroupVariants, FormField } from "./field";
+export function DateSegment({ className, ...props }) {
+    return (_jsx(AriaDateSegment, { className: composeRenderProps(className, (className) => cn("inline caret-transparent outline-0", 
+        /* Placeholder */
+        "data-[placeholder]:text-muted-foreground", 
+        /* Disabled */
+        "disabled-muted", 
+        /* Focused */
+        "data-[focused]:bg-accent data-[focused]:text-accent-foreground", 
+        /* Invalid */
+        "data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive", className)), ...props }));
+}
+export function DateInput({ className, variant, ...props }) {
+    return (_jsx(AriaDateInput, { className: composeRenderProps(className, (className) => cn(fieldGroupVariants({ variant }), "text-sm", className)), ...props, children: (segment) => _jsx(DateSegment, { segment: segment }) }));
+}
+export function DateField({ label, description, className, errorMessage, ...props }) {
+    return (_jsx(AriaDateField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(DateInput, {}) }) }));
+}
+export function TimeField({ label, description, errorMessage, className, ...props }) {
+    return (_jsx(AriaTimeField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(DateInput, {}) }) }));
+}

package/dist/components/inputs/field.d.ts

@@ -0,0 +1,21 @@
+import { type VariantProps } from "class-variance-authority";
+import { GroupProps as AriaGroupProps, LabelProps as AriaLabelProps, TextProps as AriaTextProps } from "react-aria-components";
+import type React from "react";
+export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare function FieldLabel({ className, ...props }: AriaLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDescription({ className, children, ...props }: AriaTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const fieldGroupVariants: (props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {
+}
+export declare function FieldGroup({ className, variant, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
+export type FormFieldProps = {
+    label?: string;
+    description?: React.ReactNode;
+    errorMessage?: string;
+};
+export declare function FormField({ label, description, errorMessage, children }: FormFieldProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/field.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Group as AriaGroup, Label as AriaLabel, Text as AriaText, composeRenderProps } from "react-aria-components";
+import { cn } from "lib/utils/primitives";
+import { CircleX, Info } from "lucide-react";
+export const labelVariants = cva([
+    "select-none text-sm font-medium leading-none",
+    /* Disabled */
+    "disabled-muted",
+    /* Invalid */
+    "group-data-[invalid]:text-destructive",
+]);
+export function FieldLabel({ className, ...props }) {
+    return (_jsx(AriaLabel, { className: cn(labelVariants(), className), ...props }));
+}
+export function FieldDescription({ className, children, ...props }) {
+    return (_jsxs(AriaText, { className: cn("text-sm text-muted leading-tight", className), ...props, slot: "description", children: [children, _jsx(Info, { className: "inline size-2 align-text-top ms-0.5" })] }));
+}
+// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but
+// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.
+export function FieldError({ className, children, ...props }) {
+    return (_jsxs("div", { className: cn("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", className), ...props, children: [children, _jsx(CircleX, { className: "inline size-2 align-text-top ms-0.5" })] }));
+}
+export const fieldGroupVariants = cva("", {
+    variants: {
+        variant: {
+            default: [
+                // TODO standardize the padding here
+                "relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background",
+                /* Focus Within */
+                "focus-ring",
+                /* Disabled */
+                "disabled-muted",
+            ],
+            ghost: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export function FieldGroup({ className, variant, ...props }) {
+    return (_jsx(AriaGroup, { className: composeRenderProps(className, (className) => cn(fieldGroupVariants({ variant }), className)), ...props }));
+}
+export function FormField({ label, description, errorMessage, children }) {
+    return _jsxs(_Fragment, { children: [label && _jsx(FieldLabel, { children: label }), children, description && (_jsx(FieldDescription, { children: description })), errorMessage && _jsx(FieldError, { children: errorMessage })] });
+}

package/dist/components/inputs/id-search.d.ts

@@ -0,0 +1,20 @@
+export type SelectState = Set<number | string>;
+type SearchInputProps<T> = {
+    value: SelectState;
+    onChange: (v: SelectState) => void;
+    onBlur?: (v: SelectState) => void;
+    multiple: boolean;
+    disabled?: boolean;
+    idLookup?: (ids: string[]) => Promise<string[] | undefined>;
+    searchFn: (q: string) => Promise<T[] | undefined>;
+    accessor: 'id' | 'name';
+};
+export declare function IdSearchInput<T extends {
+    id: string;
+    name: string;
+}>({ value, disabled, searchFn, multiple, onChange, onBlur, accessor, idLookup }: SearchInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TfIdSearchInput<T extends {
+    id: string;
+    name: string;
+}>({ disabled, ...props }: Omit<SearchInputProps<T>, 'value' | 'onChange'>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/id-search.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { SearchField } from "lib/components/inputs/searchfield";
+import { Button } from "lib/components/ui/button";
+import { Loader } from "lib/components/ui/loader";
+import { Menu, MenuItem } from "lib/components/ui/menu";
+import { Popover, PopoverTrigger } from "lib/components/ui/popover";
+import { useFieldContext } from "lib/utils/form-context";
+import { useId, useState } from "react";
+import { Autocomplete } from 'react-aria-components';
+export function IdSearchInput({ value, disabled = false, searchFn, multiple, onChange, onBlur, accessor = 'id', idLookup }) {
+    const id = useId();
+    const [search, _setSearch] = useState('');
+    const { data, isError, isFetching, error } = useQuery({
+        queryKey: [id, search],
+        queryFn: () => searchFn(search)
+    });
+    const namesQuery = useQuery({
+        queryKey: [id, value],
+        queryFn: () => idLookup(Array.from(value.keys()).map(id => id.toString())),
+        enabled: idLookup && value.size > 0
+    });
+    const renderButtonLabel = () => {
+        return namesQuery.data?.join(',');
+    };
+    return _jsx(_Fragment, { children: _jsxs(PopoverTrigger, { onOpenChange: (o) => {
+                if (!o) {
+                    // searchInputRef.current?.focus();
+                    onBlur?.(value);
+                }
+            }, children: [_jsx(Button, { className: 'min-w-3xs', isDisabled: disabled, children: renderButtonLabel() }), _jsx(Popover, { className: 'p-2', children: _jsxs(Autocomplete, { inputValue: search, onInputChange: _setSearch, children: [_jsx(SearchField, { className: 'mb-icon', autoFocus: true }), isFetching && _jsx(Loader, { className: "p-input" }), !isFetching && !isError && _jsx(Menu, { selectedKeys: value, selectionMode: multiple ? "multiple" : 'single', onSelectionChange: (s) => {
+                                    if (typeof (s) === 'string')
+                                        return;
+                                    onChange(s);
+                                }, className: 'text-sm', items: data, renderEmptyState: () => 'No results found.', children: (item) => (_jsx(MenuItem, { id: item[accessor], children: item.name }, item['id'])) }), isError && _jsx("div", { className: "text-destructive p-icon", children: error.message })] }) })] }) });
+}
+export function TfIdSearchInput({ disabled, ...props }) {
+    const field = useFieldContext();
+    return (_jsx(IdSearchInput, { ...props, disabled: disabled || field.form.state.isSubmitting, value: field.state.value, onBlur: _ => field.handleBlur(), onChange: (e) => field.handleChange(e) }));
+}

package/dist/components/inputs/input-otp.d.ts

@@ -0,0 +1,8 @@
+import { OTPInput } from "input-otp";
+import * as React from "react";
+export declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput>): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-otp.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "lib/utils/primitives";
+import { Minus } from "lucide-react";
+import * as React from "react";
+export function InputOTP({ className, containerClassName, ...props }) {
+    return (_jsx(OTPInput, { containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
+}
+export function InputOTPGroup({ className, ...props }) {
+    return _jsx("div", { className: cn("flex items-center", className), ...props });
+}
+export function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.use(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+    return (_jsxs("div", { className: cn("relative flex h-input w-9 items-center justify-center border-2 border-input body transition-all", isActive ? "z-10  border-2 border-primary" : "", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-icon w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+}
+export function InputOTPSeparator({ ...props }) {
+    return (_jsx("div", { role: "separator", ...props, children: _jsx(Minus, {}) }));
+}

package/dist/components/inputs/multi-select.d.ts

@@ -0,0 +1,17 @@
+import { type FormFieldProps } from "lib/components/inputs/field";
+import type { SelectOption } from "lib/components/inputs/select-options";
+import { EasyMenu } from "lib/components/ui/menu";
+import React from "react";
+interface MultipleSelectionProps {
+    value: Set<string | number>;
+    onChange: (v: Set<string | number>) => void;
+    buttonLabel?: React.ReactNode;
+    items: SelectOption[];
+}
+export interface MultiSelectProps extends MultipleSelectionProps, FormFieldProps, Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {
+}
+export declare function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export interface TfMultiSelectProps extends Omit<MultiSelectProps, "value" | "onChange"> {
+}
+export declare function TfMultiSelect({ ...props }: TfMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/multi-select.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from "lib/components/inputs/field";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import { useFieldContext } from "lib/utils/form-context";
+import { getFieldErrorMessage } from "lib/utils/form-hook";
+export function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, ...props }) {
+    return (_jsx("div", { className: "group form-field", children: _jsx(FormField, { label, description, errorMessage, children: _jsx(EasyMenu, { selectionMode: "multiple", selectedKeys: value, onSelectionChange: (v) => {
+                    if (typeof (v) === 'string')
+                        return;
+                    setValue(v);
+                }, items: items, label: value.size, ...props, children: (item) => _jsx(MenuItem, { id: item.id, isDisabled: item?.disabled, children: item.label }, item.id) }) }) }));
+}
+;
+export function TfMultiSelect({ ...props }) {
+    const field = useFieldContext();
+    return (_jsx(MultiSelect, { value: field.state.value, onChange: field.setValue, onClose: field.handleBlur, errorMessage: getFieldErrorMessage(field), ...props }));
+}
+;

package/dist/components/inputs/numberfield.d.ts

@@ -0,0 +1,7 @@
+import { NumberFieldProps as AriaNumberFieldProps } from "react-aria-components";
+import type React from "react";
+import { type FormFieldProps } from "./field";
+type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;
+export declare function NumberField({ label, description, errorMessage, className, ...props }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/numberfield.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as AriaInput, NumberField as AriaNumberField, composeRenderProps } from "react-aria-components";
+import { Button } from "lib/components/ui/button";
+import { useFieldContext } from "lib/utils/form-context";
+import { getFieldErrorMessage } from "lib/utils/form-hook";
+import { cn } from "lib/utils/primitives";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { FieldGroup, FormField } from "./field";
+const ANumberField = AriaNumberField;
+function NumberFieldInput({ className, ...props }) {
+    return (_jsx(AriaInput, { className: composeRenderProps(className, (className) => cn("w-fit min-w-0 flex-1 border-r border-transparent bg-card pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden", className)), ...props }));
+}
+function NumberFieldSteppers({ className, ...props }) {
+    return (_jsxs("div", { className: cn("absolute right-0 flex h-full flex-col border-l", className), ...props, children: [_jsx(NumberFieldStepper, { slot: "increment", children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-icon" }) }), _jsx("div", { className: "border-b" }), _jsx(NumberFieldStepper, { slot: "decrement", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-icon" }) })] }));
+}
+function NumberFieldStepper({ className, ...props }) {
+    return (_jsx(Button, { className: composeRenderProps(className, (className) => cn("w-auto grow h-3 px-0.5 text-muted-foreground", className)), variant: "ghost", size: "none", ...props }));
+}
+export function NumberField({ label, description, errorMessage, className, ...props }) {
+    return (_jsx(ANumberField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsxs(FieldGroup, { children: [_jsx(NumberFieldInput, {}), _jsx(NumberFieldSteppers, {})] }) }) }));
+}
+export function TfNumberField({ isDisabled, ...props }) {
+    const field = useFieldContext();
+    return (_jsx(NumberField, { isInvalid: !!getFieldErrorMessage(field), isDisabled: isDisabled || field.form.state.isSubmitting, value: field.state.value, id: field.name, onChange: field.handleChange, onBlur: field.handleBlur, errorMessage: getFieldErrorMessage(field), ...props }));
+}

package/dist/components/inputs/searchfield.d.ts

@@ -0,0 +1,5 @@
+import { SearchFieldProps as AriaSearchFieldProps } from "react-aria-components";
+import { type FormFieldProps } from "./field";
+export interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {
+}
+export declare function SearchField({ label, description, className, errorMessage, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/searchfield.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon, XIcon } from "lucide-react";
+import { Button as AriaButton, Input as AriaInput, SearchField as AriaSearchField, composeRenderProps } from "react-aria-components";
+import { cn } from "lib/utils/primitives";
+import { FieldGroup, FormField } from "./field";
+function ASearchField({ className, ...props }) {
+    return (_jsx(AriaSearchField, { className: composeRenderProps(className, (className) => cn("group", className)), ...props }));
+}
+function ASearchFieldInput({ className, ...props }) {
+    return (_jsx(AriaInput, { className: composeRenderProps(className, (className) => cn("min-w-0 ring-0 focus-visible:outline-none flex-1 bg-card px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden", className)), ...props }));
+}
+function SearchFieldClear({ className, ...props }) {
+    return (_jsx(AriaButton, { className: composeRenderProps(className, (className) => cn("mr-1 opacity-70 ring-offset-background transition-opacity", 
+        /* Hover */
+        "data-[hovered]:opacity-100", 
+        /* Disabled */
+        "data-[disabled]:pointer-events-none", 
+        /* Empty */
+        "group-data-[empty]:invisible", className)), ...props }));
+}
+;
+export function SearchField({ label, description, className, errorMessage, ...props }) {
+    return (_jsx(ASearchField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsxs(FieldGroup, { children: [_jsx(SearchIcon, { "aria-hidden": true, className: "size-icon text-muted-foreground" }), _jsx(ASearchFieldInput, { placeholder: "" }), _jsx(SearchFieldClear, { children: _jsx(XIcon, { "aria-hidden": true, className: "size-icon" }) })] }) }) }));
+}

package/dist/components/inputs/select-options.d.ts

@@ -0,0 +1,8 @@
+export type SelectOption = {
+    id: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+export declare const LICENSE_TYPE_OPTIONS: SelectOption[];
+/** Options for MultiSelect component */
+export declare const COUNTRY_OPTIONS: SelectOption[];