@coffer-org/web-ui 4.0.0

package/dist/components/ui/month-year-picker.d.ts

@@ -0,0 +1,10 @@
+interface PickerProps {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+}
+export declare function YearPicker({ value, onChange, placeholder }: PickerProps): import("react").JSX.Element;
+export declare function MonthPicker({ value, onChange, placeholder }: PickerProps): import("react").JSX.Element;
+export declare function YearGridPanel({ value, onChange }: Omit<PickerProps, 'placeholder'>): import("react").JSX.Element;
+export declare function MonthGridPanel({ value, onChange }: Omit<PickerProps, 'placeholder'>): import("react").JSX.Element;
+export {};

package/dist/components/ui/month-year-picker.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker, parseDate } from '@ark-ui/react/date-picker';
+import { Portal } from '@ark-ui/react/portal';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+const contentCls = 'z-50 w-72 rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-xl outline-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95';
+const tableCls = 'w-full table-fixed border-separate border-spacing-1';
+const cellCls = cn(buttonVariants({ variant: 'ghost' }), 'w-full px-0 font-normal data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary');
+const navBtnCls = cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-7');
+function ViewHeader({ withViewTrigger = false }) {
+    return (_jsxs(DatePicker.ViewControl, { className: "flex items-center justify-between gap-1 pb-2", children: [_jsx(DatePicker.PrevTrigger, { className: navBtnCls, children: _jsx(ChevronLeftIcon, { className: "size-4" }) }), withViewTrigger ? (_jsx(DatePicker.ViewTrigger, { className: cn(buttonVariants({ variant: 'ghost', size: 'sm' }), 'h-7 text-sm font-medium'), children: _jsx(DatePicker.RangeText, {}) })) : (_jsx("span", { className: "text-sm font-medium", children: _jsx(DatePicker.RangeText, {}) })), _jsx(DatePicker.NextTrigger, { className: navBtnCls, children: _jsx(ChevronRightIcon, { className: "size-4" }) })] }));
+}
+function YearGrid() {
+    return (_jsx(DatePicker.Context, { children: (api) => (_jsx(DatePicker.Table, { className: tableCls, children: _jsx(DatePicker.TableBody, { children: api.getYearsGrid({ columns: 4 }).map((row, i) => (_jsx(DatePicker.TableRow, { children: row.map((cell, j) => (_jsx(DatePicker.TableCell, { value: cell.value, children: _jsx(DatePicker.TableCellTrigger, { className: cellCls, children: cell.label }) }, j))) }, i))) }) })) }));
+}
+function MonthGrid() {
+    return (_jsx(DatePicker.Context, { children: (api) => (_jsx(DatePicker.Table, { className: tableCls, children: _jsx(DatePicker.TableBody, { children: api.getMonthsGrid({ columns: 3, format: 'short' }).map((row, i) => (_jsx(DatePicker.TableRow, { children: row.map((cell, j) => (_jsx(DatePicker.TableCell, { value: cell.value, children: _jsx(DatePicker.TableCellTrigger, { className: cellCls, children: cell.label }) }, j))) }, i))) }) })) }));
+}
+function TriggerButton({ display, placeholder }) {
+    return (_jsx(DatePicker.Control, { className: "w-full", children: _jsxs(DatePicker.Trigger, { className: cn(buttonVariants({ variant: 'outline' }), 'w-full justify-between px-3 font-normal'), children: [display || _jsx("span", { className: "text-muted-foreground", children: placeholder }), _jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })] }) }));
+}
+export function YearPicker({ value, onChange, placeholder = 'YYYY' }) {
+    const selected = /^\d{4}$/.test(value) ? [parseDate(`${value}-01-01`)] : [];
+    return (_jsxs(DatePicker.Root, { value: selected, onValueChange: (d) => onChange(d.value[0] ? String(d.value[0].year) : ''), defaultView: "year", minView: "year", children: [_jsx(TriggerButton, { display: value, placeholder: placeholder }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { className: contentCls, children: _jsxs(DatePicker.View, { view: "year", children: [_jsx(ViewHeader, {}), _jsx(YearGrid, {})] }) }) }) })] }));
+}
+export function MonthPicker({ value, onChange, placeholder = 'MM.YYYY' }) {
+    const m = /^(\d{4})-(\d{2})$/.exec(value);
+    const selected = m ? [parseDate(`${value}-01`)] : [];
+    return (_jsxs(DatePicker.Root, { value: selected, onValueChange: (d) => {
+            const v = d.value[0];
+            onChange(v ? `${v.year}-${String(v.month).padStart(2, '0')}` : '');
+        }, defaultView: "month", minView: "month", children: [_jsx(TriggerButton, { display: m ? `${m[2]}.${m[1]}` : '', placeholder: placeholder }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsxs(DatePicker.Content, { className: contentCls, children: [_jsxs(DatePicker.View, { view: "month", children: [_jsx(ViewHeader, { withViewTrigger: true }), _jsx(MonthGrid, {})] }), _jsxs(DatePicker.View, { view: "year", children: [_jsx(ViewHeader, {}), _jsx(YearGrid, {})] })] }) }) })] }));
+}
+export function YearGridPanel({ value, onChange }) {
+    const selected = /^\d{4}$/.test(value) ? [parseDate(`${value}-01-01`)] : [];
+    return (_jsx(DatePicker.Root, { inline: true, value: selected, onValueChange: (d) => onChange(d.value[0] ? String(d.value[0].year) : ''), defaultView: "year", minView: "year", children: _jsxs(DatePicker.View, { view: "year", children: [_jsx(ViewHeader, {}), _jsx(YearGrid, {})] }) }));
+}
+export function MonthGridPanel({ value, onChange }) {
+    const m = /^(\d{4})-(\d{2})$/.exec(value);
+    const selected = m ? [parseDate(`${value}-01`)] : [];
+    return (_jsxs(DatePicker.Root, { inline: true, value: selected, onValueChange: (d) => {
+            const v = d.value[0];
+            onChange(v ? `${v.year}-${String(v.month).padStart(2, '0')}` : '');
+        }, defaultView: "month", minView: "month", children: [_jsxs(DatePicker.View, { view: "month", children: [_jsx(ViewHeader, { withViewTrigger: true }), _jsx(MonthGrid, {})] }), _jsxs(DatePicker.View, { view: "year", children: [_jsx(ViewHeader, {}), _jsx(YearGrid, {})] })] }));
+}

package/dist/components/ui/option-icon.d.ts

@@ -0,0 +1,15 @@
+import type { OptionIcon } from '@coffer-org/sdk/fields';
+declare const PX: {
+    readonly xs: 14;
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 28;
+};
+export type OptionIconSize = keyof typeof PX;
+export declare function OptionIconView({ icon, size, framed, className, }: {
+    icon: OptionIcon;
+    size?: OptionIconSize;
+    framed?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/ui/option-icon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../Icon.js";
+const PX = { xs: 14, sm: 16, md: 20, lg: 28 };
+export function OptionIconView({ icon, size = 'sm', framed = false, className, }) {
+    const px = PX[size];
+    if (framed) {
+        const box = { width: px, height: px };
+        if (icon.kind === 'image')
+            return (_jsx("img", { src: icon.value, alt: "", loading: "lazy", className: `shrink-0 rounded-full border border-border object-cover ${className ?? ''}`, style: box }));
+        if (icon.kind === 'swatch')
+            return (_jsx("span", { className: `shrink-0 rounded-full border border-border ${className ?? ''}`, style: { ...box, backgroundColor: icon.value } }));
+        return (_jsx("span", { className: `shrink-0 grid place-items-center rounded-full border border-border bg-elevated text-muted ${className ?? ''}`, style: box, children: _jsx(Icon, { name: icon.value, size: Math.round(px * 0.55) }) }));
+    }
+    if (icon.kind === 'swatch')
+        return (_jsx("span", { className: `shrink-0 inline-block rounded-full border border-border/60 ${className ?? ''}`, style: { width: px, height: px, backgroundColor: icon.value } }));
+    if (icon.kind === 'image')
+        return (_jsx("img", { src: icon.value, alt: "", loading: "lazy", className: `shrink-0 rounded-full border border-border object-cover ${className ?? ''}`, style: { width: px, height: px } }));
+    return _jsx(Icon, { name: icon.value, size: px, className: `shrink-0 ${className ?? ''}` });
+}

package/dist/components/ui/phone-input.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import * as BasePhoneInput from 'react-phone-number-input';
+type PhoneInputSize = 'sm' | 'default' | 'lg';
+type PhoneInputProps = Omit<ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> & Omit<BasePhoneInput.Props<typeof BasePhoneInput.default>, 'onChange' | 'variant' | 'popupClassName' | 'scrollAreaClassName'> & {
+    onChange?: (value: BasePhoneInput.Value) => void;
+    variant?: PhoneInputSize;
+    popupClassName?: string;
+    scrollAreaClassName?: string;
+    inputClassName?: string;
+    triggerClassName?: string;
+};
+declare const PhoneInput: ({ className, variant, popupClassName, scrollAreaClassName, inputClassName, triggerClassName, onChange, value, ...props }: PhoneInputProps) => import("react").JSX.Element;
+export { PhoneInput };

package/dist/components/ui/phone-input.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from 'react';
+import * as BasePhoneInput from 'react-phone-number-input';
+import flags from 'react-phone-number-input/flags';
+import { Button } from "./button.js";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, } from "./combobox.js";
+import { Input } from "./input.js";
+import { ScrollArea } from "./scroll-area.js";
+import { cn } from "../../lib/utils.js";
+import { EarthIcon } from 'lucide-react';
+const PhoneInputContext = createContext({
+    variant: 'default',
+    popupClassName: undefined,
+    scrollAreaClassName: undefined,
+    inputClassName: undefined,
+    triggerClassName: undefined,
+    readOnly: false,
+});
+const PhoneInput = ({ className, variant, popupClassName, scrollAreaClassName, inputClassName, triggerClassName, onChange, value, ...props }) => {
+    const phoneInputSize = variant || 'default';
+    return (_jsx(PhoneInputContext.Provider, { value: {
+            variant: phoneInputSize,
+            popupClassName,
+            scrollAreaClassName,
+            inputClassName,
+            triggerClassName,
+            readOnly: props.readOnly,
+        }, children: _jsx(BasePhoneInput.default, { className: cn('flex', props['aria-invalid'] &&
+                '[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50', className), flagComponent: FlagComponent, countrySelectComponent: CountrySelect, inputComponent: InputComponent, smartCaret: false, value: value || undefined, onChange: (value) => onChange?.(value || ''), ...props }) }));
+};
+const InputComponent = ({ className, ...props }) => {
+    const { variant, inputClassName } = useContext(PhoneInputContext);
+    return (_jsx(Input, { className: cn('rounded-l-none focus:z-1', variant === 'sm' && 'h-auto! py-0!', variant === 'lg' && 'h-auto!', inputClassName, className), ...props }));
+};
+const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange }) => {
+    const { variant, popupClassName, triggerClassName, readOnly } = useContext(PhoneInputContext);
+    const [searchValue, setSearchValue] = useState('');
+    const filteredCountries = useMemo(() => {
+        if (!searchValue)
+            return countryList;
+        return countryList.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()));
+    }, [countryList, searchValue]);
+    return (_jsxs(Combobox, { items: filteredCountries, value: selectedCountry || '', onValueChange: (country) => {
+            if (country) {
+                onChange(country);
+            }
+        }, children: [_jsx(ComboboxTrigger, { render: _jsxs(Button, { variant: "outline", size: variant, className: cn('flex gap-1 rounded-r-none border-e-0 px-2.5 py-0 leading-none hover:bg-transparent focus:z-10 aria-pressed:bg-transparent', disabled && 'dark:disabled:bg-input/80', triggerClassName), disabled: disabled || readOnly, children: [_jsx("span", { className: "sr-only", children: _jsx(ComboboxValue, {}) }), _jsx(FlagComponent, { country: selectedCountry, countryName: selectedCountry })] }) }), _jsxs(ComboboxContent, { className: cn('w-xs *:data-[slot=input-group]:bg-transparent', popupClassName), children: [_jsx(ComboboxInput, { placeholder: "e.g. United States", value: searchValue, onChange: (e) => setSearchValue(e.target.value), showTrigger: false, className: "border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0" }), _jsx(ComboboxSeparator, {}), _jsx(ComboboxEmpty, { className: "px-4 py-2.5 text-sm", children: "No country found." }), _jsx(ComboboxList, { children: _jsx("div", { className: "relative flex max-h-full", children: _jsx("div", { className: "flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain", children: _jsx(ScrollArea, { className: "size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain", children: filteredCountries.map((item) => item.value ? (_jsxs(ComboboxItem, { value: item.value, className: "flex items-center gap-2", children: [_jsx(FlagComponent, { country: item.value, countryName: item.label }), _jsx("span", { className: "flex-1 text-sm", children: item.label }), _jsx("span", { className: "text-foreground/50 text-sm", children: `+${BasePhoneInput.getCountryCallingCode(item.value)}` })] }, item.value)) : null) }) }) }) })] })] }));
+};
+const FlagComponent = ({ country, countryName }) => {
+    const Flag = flags[country];
+    return (_jsx("span", { className: "flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]", children: Flag ? _jsx(Flag, { title: countryName }) : _jsx(EarthIcon, { className: "size-4 opacity-60" }) }));
+};
+export { PhoneInput };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverArrow({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Arrow>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/components/ui/popover.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from "../../lib/utils.js";
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverArrow({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Arrow, { asChild: true, width: 16, height: 8, ...props, children: _jsxs("span", { "data-slot": "popover-arrow", className: cn('relative block h-2 w-4', className), children: [_jsx("span", { className: "absolute inset-0 bg-border [clip-path:polygon(50%_100%,0_0,100%_0)]" }), _jsx("span", { className: "absolute inset-x-px top-0 bottom-px bg-popover [clip-path:polygon(50%_100%,0_0,100%_0)]" })] }) }));
+}
+function PopoverHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "popover-header", className: cn('flex flex-col gap-1 text-sm', className), ...props });
+}
+function PopoverTitle({ className, ...props }) {
+    return _jsx("div", { "data-slot": "popover-title", className: cn('font-medium', className), ...props });
+}
+function PopoverDescription({ className, ...props }) {
+    return _jsx("p", { "data-slot": "popover-description", className: cn('text-muted-foreground', className), ...props });
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/components/ui/rating.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+type Direction = 'ltr' | 'rtl';
+type Orientation = 'horizontal' | 'vertical';
+type ActivationMode = 'automatic' | 'manual';
+type Size = 'default' | 'sm' | 'lg';
+type Step = 0.5 | 1;
+type DataState = 'full' | 'partial' | 'empty';
+interface StoreState {
+    value: number;
+    hoveredValue: number | null;
+}
+interface Store {
+    subscribe: (callback: () => void) => () => void;
+    getState: () => StoreState;
+    setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+    notify: () => void;
+}
+declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T;
+interface RatingProps extends React.ComponentProps<'div'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onHover?: (value: number | null) => void;
+    max?: number;
+    activationMode?: ActivationMode;
+    dir?: Direction;
+    orientation?: Orientation;
+    size?: Size;
+    asChild?: boolean;
+    step?: Step;
+    clearable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+}
+declare function Rating(props: RatingProps): React.JSX.Element;
+interface RatingItemProps extends Omit<React.ComponentProps<'button'>, 'children'> {
+    index?: number;
+    asChild?: boolean;
+    children?: React.ReactNode | ((dataState: DataState) => React.ReactNode);
+}
+declare function RatingItem(props: RatingItemProps): React.JSX.Element;
+export { Rating, RatingItem, useStore as useRating };