@g4rcez/components 3.0.0 → 3.0.1

package/dist/components/display/calendar.jsx

@@ -1,299 +0,0 @@
-"use client";
-import { add, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, setYear, startOfDay, startOfMonth, startOfWeek, sub, format, set, } from "date-fns";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { AnimatePresence, motion, MotionConfig } from "motion/react";
-import React, { useEffect, useRef } from "react";
-import { Is } from "sidekicker";
-import TheMaskInput from "the-mask-input";
-import { useReducer } from "use-typed-reducer";
-import { useDebounce } from "../../hooks/use-debounce";
-import { useLocale } from "../../hooks/use-locale";
-import { useSwipe } from "../../hooks/use-swipe";
-import { useTranslations } from "../../hooks/use-translations";
-import { css } from "../../lib/dom";
-import { splitInto, uuid } from "../../lib/fns";
-import { Input } from "../form/input";
-const timeRegex = /^(?<hour>\d\d):(?<min>\d\d)$/;
-const transition = { type: "spring", bounce: 0.3, duration: 0.6 };
-const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.25 });
-const variants = {
-    enter: dir(1),
-    exit: dir(-1),
-    middle: { x: "0%", opacity: 1 },
-};
-const removeImmediately = { exit: { visibility: "hidden" } };
-const createDays = (month) => {
-    const start = startOfWeek(startOfMonth(month));
-    return eachDayOfInterval({ start, end: add(start, { days: 41 }) });
-};
-const formatMonth = (d, locale) => d.toLocaleDateString(locale, { month: "long" });
-const getOptionsMonth = (id, date, locale) => Array.from({ length: 12 }).map((_, i) => {
-    const month = startOfMonth(new Date(1970, i, 1).setMonth(i));
-    const label = formatMonth(month, locale);
-    return (<option value={label} key={`${id}-${label}`} data-index={i}>
-                {label}
-            </option>);
-});
-const onChangeUsingKeyboard = {
-    ArrowLeft: (date, duration) => (duration === "days" ? sub(date, { days: 1 }) : sub(date, { months: 1 })),
-    ArrowRight: (date, duration) => (duration === "days" ? add(date, { days: 1 }) : add(date, { months: 1 })),
-    ArrowUp: (date, duration) => (duration === "days" ? sub(date, { weeks: 1 }) : sub(date, { years: 1 })),
-    ArrowDown: (date, duration) => (duration === "days" ? add(date, { weeks: 1 }) : add(date, { years: 1 })),
-};
-const focusDate = (origin, root, next, delay = 0) => {
-    const d = next.toISOString();
-    const select = () => {
-        if (origin?.dataset.focustrap) {
-            const el = root.current?.querySelector(`button[data-focustrap="${origin?.dataset.focustrap}"]`);
-            return setTimeout(() => el?.focus({ preventScroll: true }), delay);
-        }
-        if (root.current) {
-            const element = root.current.querySelector(`button[data-date="${d}"]`);
-            if (element)
-                return element.focus({ preventScroll: true });
-        }
-    };
-    if (delay === 0)
-        select();
-    setTimeout(select, delay);
-};
-const formatYear = (now) => now.getFullYear().toString().padStart(4, "0");
-const inRange = (start, middle, end) => {
-    if (start === undefined || end === undefined)
-        return false;
-    return isAfter(middle, start) && isBefore(middle, end);
-};
-const CalendarBody = (props) => {
-    const translate = useTranslations();
-    return (<motion.tbody layout variants={variants} custom={props.direction} onKeyDown={props.onKeyDown} className={css(props.styles?.week)}>
-            {props.zip.map((week, index) => {
-            const weekClassName = Is.function(props.styles?.week) ? props.styles?.week(week) : props.styles?.week;
-            return (<tr key={`week-${week.length}-${index}`} className={weekClassName}>
-                        {week.map((day) => {
-                    const key = day.toISOString();
-                    const isSelected = props.rangeMode
-                        ? key === props.range?.to?.toISOString() || key === props.range?.from?.toISOString()
-                        : key === (props.date ? startOfDay(props.date).toISOString() : undefined);
-                    const today = isToday(day) && props.markToday;
-                    const disabledByFn = props.disabledDate?.(day) || false;
-                    const sameMonth = isSameMonth(day, props.stateDate);
-                    const disableDate = !sameMonth || disabledByFn;
-                    const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
-                    return (<td key={key} align="center" className={css("relative p-1", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
-                                    <button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-9 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-9 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
-                                        <div></div>
-                                        {day.getDate()}
-                                        {isSelected && props.stateRange.from?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
-                                                <span className="text-xs text-foreground">
-                                                    {props.labelRange?.from ?? translate.calendarFromDate}
-                                                </span>
-                                            </span>) : null}
-                                        {isSelected && props.stateRange.to?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
-                                                <span className="text-xs text-foreground">{props.labelRange?.to ?? translate.calendarToDate}</span>
-                                            </span>) : null}
-                                    </button>
-                                    {props.RenderOnDay ? <props.RenderOnDay date={day}/> : null}
-                                </td>);
-                })}
-                    </tr>);
-        })}
-        </motion.tbody>);
-};
-const getToday = () => startOfDay(new Date());
-export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles, markRange = true, type = "date", datetimeTitle, ...props }) => {
-    const id = useRef(uuid());
-    const translations = useTranslations();
-    const currentLocale = useLocale(locale);
-    const root = useRef(null);
-    const { date, range } = props;
-    const providedDate = date || new Date();
-    const monthClicked = useRef(null);
-    const [state, dispatch] = useReducer({
-        date: providedDate,
-        isAnimating: false,
-        year: formatYear(providedDate),
-        direction: undefined,
-        range: { from: range?.from, to: range?.to },
-        months: getOptionsMonth(id.current, providedDate, currentLocale),
-        selectMode: (rangeMode ? "from" : undefined),
-        week: eachDayOfInterval({ start: startOfWeek(providedDate), end: endOfWeek(providedDate) }),
-    }, (get) => ({
-        onChangeYear: (year) => ({ year }),
-        onExitComplete: () => {
-            focusDate(monthClicked.current || null, root, get.state().date, 200);
-            monthClicked.current = null;
-            return { isAnimating: false };
-        },
-        date: (callback) => {
-            const newDate = callback(get.state().date);
-            return { date: newDate, year: formatYear(newDate) };
-        },
-        nextMonth: (e) => {
-            if (e)
-                monthClicked.current = e.currentTarget;
-            const state = get.state();
-            if (state.isAnimating)
-                return state;
-            const date = add(state.date, { months: 1 });
-            return { date, isAnimating: true, direction: 1, year: formatYear(date) };
-        },
-        previousMonth: (e) => {
-            if (e)
-                monthClicked.current = e.currentTarget;
-            const state = get.state();
-            if (state.isAnimating)
-                return state;
-            const date = sub(state.date, { months: 1 });
-            return { date, isAnimating: true, direction: -1, year: formatYear(date) };
-        },
-        onSelectDate: (e) => {
-            const state = get.state();
-            const isRangeMode = e.currentTarget.dataset.range === "true";
-            const d = e.currentTarget.dataset.date || "";
-            const date = new Date(d);
-            return {
-                date,
-                year: formatYear(date),
-                selectMode: state.selectMode === undefined ? undefined : state.selectMode === "from" ? "to" : "from",
-                range: !isRangeMode
-                    ? state.range
-                    : {
-                        from: state.selectMode === "from" ? date : state.range.from,
-                        to: state.selectMode === "to" ? date : state.range.to,
-                    },
-            };
-        },
-        onChangeMonth: (e) => {
-            const value = e.target.value;
-            const array = Array.from(e.target.options);
-            const month = array.find((x) => x.value === value);
-            const state = get.state();
-            if (month) {
-                const i = month.dataset.index || "";
-                const d = new Date(get.state().date);
-                d.setMonth(+i);
-                return { ...state, date: d, year: formatYear(d) };
-            }
-            return state;
-        },
-        onKeyDown: (e) => {
-            const key = e.key;
-            const state = get.state();
-            if (key in onChangeUsingKeyboard) {
-                if (key === "ArrowUp" || key === "ArrowDown")
-                    e.preventDefault();
-                const prev = get.state().date;
-                const date = Is.keyof(onChangeUsingKeyboard, key) ? onChangeUsingKeyboard[key](prev, e.shiftKey ? "month" : "days") : null;
-                if (date !== null) {
-                    focusDate(e.target, root, date);
-                    return { ...state, date, year: formatYear(date) };
-                }
-            }
-            return get.state();
-        },
-    }), {
-        props: { onChangeMonth, onChangeYear },
-        postMiddleware: [
-            (state, _, args) => {
-                const isValidMethod = args.method === "onChangeMonth" || args.method === "previousMonth" || args.method === "nextMonth";
-                if (isValidMethod)
-                    args.props.onChangeMonth?.(state.date);
-                return state;
-            },
-            (state, _, args) => {
-                const isValidMethod = args.method === "onChangeYear";
-                if (isValidMethod)
-                    args.props.onChangeYear?.(state.date);
-                return state;
-            },
-            (state, _, args) => {
-                const isValidMethod = args.method === "onSelectDate" || args.method === "setToday" || args.method === "onKeyDown";
-                if (rangeMode && isValidMethod && changeOnlyOnClick) {
-                    onChange?.(state.range);
-                    return state;
-                }
-                if (isValidMethod && changeOnlyOnClick)
-                    onChange?.(state.date);
-                return state;
-            },
-        ],
-    });
-    const allDaysOfMonth = createDays(state.date);
-    const zip = splitInto(allDaysOfMonth, 7);
-    const currentAsString = state.date.toISOString();
-    const monthString = formatMonth(state.date, currentLocale);
-    useEffect(() => {
-        if (!changeOnlyOnClick)
-            onChange?.(state.date);
-    }, [currentAsString, changeOnlyOnClick]);
-    const defer = useDebounce((y) => dispatch.date((prev) => setYear(new Date(prev), +y)), 1200);
-    const internalOnChangeYear = (e) => {
-        const value = e.currentTarget.value;
-        dispatch.onChangeYear(value);
-        onChangeYear?.(new Date(value));
-        defer(value);
-    };
-    const swipe = useSwipe((event, direction) => {
-        event.preventDefault();
-        return direction === "right" ? dispatch.previousMonth() : dispatch.nextMonth();
-    }, 10);
-    const onSetToday = () => {
-        const d = getToday();
-        dispatch.date(() => d);
-        onChange?.(d);
-    };
-    return (<MotionConfig transition={transition}>
-            <div ref={root} data-component="calendar" onTouchEnd={swipe.onTouchEnd} onTouchStart={swipe.onTouchStart} className={css("relative overflow-hidden", Is.function(styles?.calendar) ? styles?.calendar(allDaysOfMonth) : styles?.calendar)}>
-                <div className="flex flex-col justify-center rounded text-center">
-                    <AnimatePresence initial={false} mode="popLayout" custom={state.direction} onExitComplete={dispatch.onExitComplete}>
-                        <motion.div key={monthString} initial="enter" animate="middle" exit="exit">
-                            <header className="relative flex justify-between">
-                                <motion.button layout type="button" data-focustrap="prev" variants={removeImmediately} onClick={dispatch.previousMonth} title={translations.calendarBackMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
-                                    <ChevronLeftIcon className="h-4 w-4"/>
-                                </motion.button>
-                                <motion.span layout variants={variants} custom={state.direction} className="absolute inset-0 isolate z-normal flex items-center justify-center font-semibold">
-                                    <span className="flex w-fit items-center justify-center gap-0.5 py-1">
-                                        <select value={monthString} onChange={dispatch.onChangeMonth} aria-label={translations.calendarMonthLabel} style={{ width: `${monthString.length + 1}ch` }} className="cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary">
-                                            {state.months}
-                                        </select>
-                                        <TheMaskInput mask="int" maxLength={4} placeholder="YYYY" value={state.year} onChange={internalOnChangeYear} style={{ width: `${state.year.length}ch` }} className="w-16 cursor-pointer appearance-none bg-transparent hover:text-primary"/>
-                                    </span>
-                                </motion.span>
-                                <motion.button layout type="button" data-focustrap="next" variants={removeImmediately} onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
-                                    <ChevronRightIcon className="h-4 w-4"/>
-                                </motion.button>
-                            </header>
-                            <motion.table className="mt-2 table min-w-full table-auto border-0">
-                                <thead>
-                                    <tr>
-                                        {state.week.map((dayOfWeek) => (<th role="columnheader" key={dayOfWeek.toString()} className={css("py-2 text-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay)}>
-                                                {dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" })}
-                                            </th>))}
-                                    </tr>
-                                </thead>
-                                <CalendarBody zip={zip} range={range} styles={styles} date={date || null} dispatch={dispatch} markRange={markRange} markToday={markToday} rangeMode={rangeMode} stateDate={state.date} labelRange={labelRange} stateRange={state.range} RenderOnDay={RenderOnDay} direction={state.direction} disabledDate={disabledDate} onKeyDown={dispatch.onKeyDown}/>
-                            </motion.table>
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-                {type === "datetime" ? (<section className="my-4 grid items-center">
-                        <Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={(e) => {
-                const value = e.target.value;
-                const match = timeRegex.exec(value);
-                if (!match)
-                    return;
-                const hour = match.groups.hour;
-                const min = match.groups.min;
-                const d = set(state.date, { hours: Number(hour), minutes: Number(min), seconds: 0 });
-                dispatch.date(() => d);
-                onChange?.(d);
-            }}/>
-                    </section>) : null}
-                <footer className="mt-2 text-center text-primary">
-                    <button type="button" onClick={onSetToday} className="transition-transform duration-300 hover:scale-105">
-                        {translations.calendarToday}
-                    </button>
-                </footer>
-            </div>
-        </MotionConfig>);
-};

package/dist/components/display/card.jsx

@@ -1,43 +0,0 @@
-import { InfoIcon } from "lucide-react";
-import React from "react";
-import { Is } from "sidekicker";
-import { css } from "../../lib/dom";
-import { Polymorph } from "../core/polymorph";
-import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", container)}>
-        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
-                {title}
-            </header>) : (header)}
-        <div data-component="card-body" className={css("min-w-full px-6", props.className)}>
-            {loading ? (<div className="flex flex-col gap-4">
-                    <Skeleton className="w-full"/>
-                    <Skeleton className="w-8/12"/>
-                    <Skeleton className="w-10/12"/>
-                    <Skeleton className="w-1/2"/>
-                </div>) : (children)}
-        </div>
-    </Polymorph>);
-Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
-    const Component = (as || "div");
-    const Title = (titleTag || "h2");
-    const Nav = (navTag || "nav");
-    return (<Component {...props} title={Is.string(props.title) ? props.title : undefined} className={css("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", props.className)}>
-            <Title className="font-semibold">{props.title}</Title>
-            {children ? (<Nav className="gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end">{children}</Nav>) : null}
-        </Component>);
-};
-export const StatsCard = (props) => {
-    const interactive = props.interactive ?? true;
-    const Icon = props.Icon ?? InfoIcon;
-    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-4 px-0">
-            <div className={`flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`}>
-                <div className={css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark)}>
-                    {<Icon size={48}/>}
-                </div>
-                <div className="flex flex-col justify-center gap-2 py-2">
-                    <p className="text-lg">{props.title}</p>
-                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-4xl font-bold tracking-wide">{props.value}</p>}
-                </div>
-            </div>
-        </Card>);
-};

package/dist/components/display/empty.jsx

@@ -1,11 +0,0 @@
-import { FileIcon } from "lucide-react";
-import React from "react";
-import { useTranslations } from "../../hooks/use-translations";
-export const Empty = (props) => {
-    const Icon = props.Icon ?? FileIcon;
-    const translate = useTranslations();
-    return (<div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-12">
-            <Icon size={64} className="text-disabled"/>
-            <p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
-        </div>);
-};

package/dist/components/display/list.jsx

@@ -1,81 +0,0 @@
-"use client";
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
-import { AnimatePresence, motion, MotionConfig } from "motion/react";
-import { XIcon } from "lucide-react";
-import React, { Fragment, useCallback, useId, useState } from "react";
-const FloatItem = ({ item, context, setter, get, refs }) => (<FloatingPortal>
-        <MotionConfig reducedMotion="user" transition={{ type: "tween", stiffness: 25, duration: 0.3 }}>
-            <AnimatePresence presenceAffectsLayout>
-                {item ? (<motion.div exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }} className="pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"/>) : null}
-                {item ? (<FloatingOverlay lockScroll className="absolute inset-0 z-floating flex items-center justify-center">
-                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>
-                            <motion.div layout layoutId={`item-${item.id}`} className="relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card" ref={refs.setFloating} {...get()}>
-                                <nav className="absolute right-4 top-1 lg:right-2">
-                                    <button type="button" onClick={setter} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
-                                        <XIcon />
-                                    </button>
-                                </nav>
-                                <header className="flex w-full flex-wrap items-center justify-between gap-2">
-                                    <h3 className="min-w-full text-balance text-2xl font-medium">{item.title}</h3>
-                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
-                                </header>
-                                {item.children}
-                            </motion.div>
-                        </FloatingFocusManager>
-                    </FloatingOverlay>) : null}
-            </AnimatePresence>
-        </MotionConfig>
-    </FloatingPortal>);
-export const AnimatedList = (props) => {
-    const [selected, setSelected] = useState(null);
-    const id = useId();
-    const { context, refs } = useFloating({
-        open: selected !== null,
-        transform: true,
-        onOpenChange: (open) => (open ? undefined : setSelected(null)),
-    });
-    const click = useClick(context);
-    const role = useRole(context, { role: "dialog" });
-    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });
-    const { getFloatingProps } = useInteractions([click, role, dismiss]);
-    const clear = useCallback(() => {
-        setSelected(null);
-    }, []);
-    const items = React.Children.toArray(props.children);
-    return (<Fragment>
-            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear}/>
-            <ul role="list">
-                {items.map((x, index) => {
-            const item = x.props;
-            const innerId = `${id}-${index}`;
-            const setter = () => setSelected({ ...item, id: innerId });
-            const Leading = item.leading;
-            return (<motion.li layout key={innerId} layoutId={`item-${innerId}`} className={`border-b border-card-border py-2 last:border-transparent`}>
-                            <motion.div layoutId={`toast-${innerId}`} className="relative">
-                                <div className="relative flex items-start space-x-3">
-                                    <Fragment>
-                                        {item.avatar ? (<div>
-                                                <div className="relative px-1">
-                                                    <button onClick={setter} className="flex size-10 items-center justify-center ring-primary">
-                                                        {item.avatar}
-                                                    </button>
-                                                </div>
-                                            </div>) : null}
-                                        <div className="min-w-0 flex-1 py-1 text-foreground">
-                                            <div className="flex flex-row flex-nowrap justify-between gap-4">
-                                                <button onClick={setter} className="cursor-pointer text-left transition-all ease-out hover:text-primary">
-                                                    <h3>{item.title}</h3>
-                                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
-                                                </button>
-                                                {Leading ? <Leading open={setter}/> : null}
-                                            </div>
-                                        </div>
-                                    </Fragment>
-                                </div>
-                            </motion.div>
-                        </motion.li>);
-        })}
-            </ul>
-        </Fragment>);
-};
-export const AnimatedListItem = (props) => <Fragment>{props.children}</Fragment>;

package/dist/components/display/notifications.jsx

@@ -1,126 +0,0 @@
-"use client";
-import { Toast as Base } from "@base-ui/react/toast";
-import { cva } from "class-variance-authority";
-import { XIcon, CheckCircleIcon, TriangleAlertIcon, InfoIcon, Loader2Icon } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { createContext, useCallback, useContext, useRef } from "react";
-import { useHover } from "../../hooks/use-hover";
-import { css } from "../../lib/dom";
-const variants = cva("relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-xl border bg-card-background backdrop-blur-md text-sm shadow-notification transition-all duration-300", {
-    variants: {
-        theme: {
-            default: "border-card-border text-foreground shadow-black/5",
-            info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
-            warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
-            muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
-            danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
-            success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
-            secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
-        },
-    },
-    defaultVariants: { theme: "default" },
-});
-const themeIcons = {
-    default: InfoIcon,
-    info: InfoIcon,
-    warn: TriangleAlertIcon,
-    muted: InfoIcon,
-    danger: TriangleAlertIcon,
-    success: CheckCircleIcon,
-    secondary: InfoIcon,
-};
-const NotificationContext = createContext(() => {
-    throw new Error("Not implemented");
-});
-export const useNotification = () => useContext(NotificationContext);
-function Notification(props) {
-    const closable = props.toast.data?.closable ?? true;
-    const loading = props.toast.data?.loading ?? false;
-    const theme = props.toast.data?.theme || "default";
-    const className = variants({ theme });
-    const Icon = loading ? Loader2Icon : themeIcons[theme] || InfoIcon;
-    return (<Base.Root toast={props.toast} swipeDirection="right">
-            <motion.li layout initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }} transition={{
-            type: "spring",
-            damping: 25,
-            stiffness: 300,
-        }} className="pointer-events-auto w-full list-none">
-                <Base.Content className={css(className, "shadow-lg")}>
-                    <div className="flex items-start gap-3 p-4">
-                        <div className={css("mt-0.5 shrink-0 opacity-80", loading && "animate-spin")}>
-                            <Icon className="size-4"/>
-                        </div>
-
-                        <div className="flex flex-1 flex-col gap-1 overflow-hidden">
-                            {props.toast.title ? <Base.Title className="select-text truncate font-semibold leading-tight tracking-tight"/> : null}
-                            <Base.Description className="line-clamp-2 select-text text-xs font-medium leading-relaxed opacity-90"/>
-                        </div>
-
-                        {closable && !loading ? (<Base.Close className="-mr-1 -mt-1 shrink-0 rounded-lg p-1.5 text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
-                                <XIcon className="size-3.5"/>
-                            </Base.Close>) : null}
-                    </div>
-                </Base.Content>
-            </motion.li>
-        </Base.Root>);
-}
-function NotificationsViewport({ max = 5 }) {
-    const ref = useRef(null);
-    const hover = useHover(ref);
-    const toastManager = Base.useToastManager();
-    const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
-    const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
-    const hiddenCount = allToasts.length - visibleToasts.length;
-    return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3 overflow-visible outline-none">
-            <AnimatePresence mode="popLayout" initial={false}>
-                {visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
-            </AnimatePresence>
-
-            {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground/50 shadow-sm backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
-                    +{hiddenCount} more
-                </motion.div>)}
-        </Base.Viewport>);
-}
-function NotificationsInner({ children, max = 5 }) {
-    const toastManager = Base.useToastManager();
-    const clear = useCallback(() => {
-        toastManager.toasts.forEach((t) => toastManager.close(t.id));
-    }, [toastManager]);
-    const notify = useCallback((description, args) => {
-        const data = { theme: args?.theme, closable: args?.closable, loading: args?.loading };
-        if (args?.id) {
-            const existing = toastManager.toasts.find((t) => t.id === args.id);
-            if (existing) {
-                toastManager.update(args.id, {
-                    description,
-                    title: args.title,
-                    timeout: args.timeout,
-                    data,
-                });
-                return { close: () => toastManager.close(args.id), clear };
-            }
-        }
-        const id = toastManager.add({
-            description,
-            id: args?.id,
-            title: args?.title,
-            timeout: args?.timeout,
-            data,
-        });
-        return {
-            close: () => toastManager.close(id),
-            clear,
-        };
-    }, [toastManager, clear]);
-    return (<NotificationContext.Provider value={notify}>
-            {children}
-            <Base.Portal>
-                <NotificationsViewport max={max}/>
-            </Base.Portal>
-        </NotificationContext.Provider>);
-}
-export function Notifications({ children, max = 5, timeout = 5000 }) {
-    return (<Base.Provider limit={max} timeout={timeout}>
-            <NotificationsInner max={max}>{children}</NotificationsInner>
-        </Base.Provider>);
-}

package/dist/components/display/progress.jsx

@@ -1,11 +0,0 @@
-import { Is } from "sidekicker";
-import { Progress as RadixProgress } from "@base-ui/react/progress";
-import { css } from "../../lib/dom";
-export const Progress = (props) => {
-    return (<RadixProgress.Root max={props.max} value={props.percent ?? null} style={{ transform: "translateZ(0)" }} className={css("relative h-6 w-full overflow-hidden rounded-full bg-background", props.container)}>
-            <RadixProgress.Indicator style={{ transform: Is.number(props.percent) ? `translateX(-${100 - props.percent}%)` : undefined }} className={css("size-full bg-primary transition-transform duration-500 ease-in-out", props.className)}/>
-            {Is.number(props.percent) ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
-                    {props.label ? props.label : `${props.percent} %`}
-                </p>) : null}
-        </RadixProgress.Root>);
-};

package/dist/components/display/shortcut.jsx

@@ -1,23 +0,0 @@
-import { CommandIcon, OptionIcon } from "lucide-react";
-import { Fragment } from "react";
-import { isMac } from "../../lib/combi-keys";
-const remap = (x) => {
-    x = x.trim();
-    if (x === "Alt")
-        return isMac() ? <OptionIcon aria-label="Option" size={12}/> : "Alt";
-    if (x === "Mod")
-        return isMac() ? <CommandIcon aria-label="Command" size={12}/> : "Ctrl";
-    return x;
-};
-export const Shortcut = (props) => {
-    const p = props.value.trim().split("+");
-    return (<span className="flex items-center gap-1 text-sm">
-            {p.map((x, i) => {
-            const isLast = p.length - 1 === i;
-            return (<Fragment key={`${props.value}-${x}-key-${i}`}>
-                        <kbd aria-label={x}>{remap(x)}</kbd>
-                        {isLast ? null : <span>+</span>}
-                    </Fragment>);
-        })}
-        </span>);
-};

package/dist/components/display/skeleton.jsx

@@ -1,12 +0,0 @@
-import React, { useRef } from "react";
-import { css } from "../../lib/dom";
-import { Polymorph } from "../core/polymorph";
-export const SkeletonCell = <div className="h-6 w-10/12 animate-pulse rounded bg-muted"/>;
-export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block h-8 w-32 animate-pulse rounded bg-muted", props.className)}/>);
-export const SkeletonList = (props) => {
-    const items = useRef(Array.from({ length: props.rows }).map((_, i) => {
-        const rand = Math.max(100, Math.random() * 99);
-        return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as="li"/>;
-    }));
-    return <ul className={css("flex flex-col gap-6", props.className)}>{items.current}</ul>;
-};

package/dist/components/display/spinner.jsx

@@ -1,7 +0,0 @@
-import { css } from "../../lib/dom";
-export const Spinner = (props) => (<span aria-busy="true" aria-description="Carregando..." className={css("box-border inline-block aspect-square size-12 animate-spin rounded-full border-4 border-background border-b-primary", props.className)}/>);
-export const Loading = () => {
-    return (<div className="flex h-full w-full items-center justify-center p-12">
-            <Spinner />
-        </div>);
-};

package/dist/components/display/stats.jsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { css } from "../../lib/dom";
-export const Stats = (props) => {
-    return (<div className="divide-y divide-card-border rounded-card border border-card-border bg-card-background shadow-shadow-card">
-            <header className="flex items-start gap-4 p-6">
-                <div className={css("flex aspect-square size-10 items-center justify-center rounded-card bg-primary p-8", props.iconContainer)}>
-                    <div>
-                        <props.Icon className="aspect-square size-10 text-primary-foreground"/>
-                    </div>
-                </div>
-                <div className="flex flex-col gap-1">
-                    <header>
-                        <h3 className="text-base leading-none">{props.title}</h3>
-                    </header>
-                    <p className="text-4xl font-semibold">{props.children}</p>
-                </div>
-            </header>
-            {props.footer ? <footer className="px-6 py-2">{props.footer}</footer> : null}
-        </div>);
-};