@g4rcez/components 4.1.1 → 4.1.3

package/dist/components/form/radiobox.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Radiobox = ({ children, className = "", size, ...props }) => (<label data-component="radiobox" data-disabled={props.disabled} aria-disabled={props.disabled} className="group flex items-center gap-2 font-normal data-[disabled=true]:cursor-not-allowed">
+        <input {...props} type="radio" className={css("app form-radio inline-block h-4 w-4 appearance-none rounded-full border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)} {...props}/>
+        {children}
+    </label>);

package/dist/components/form/select.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Override } from "../../types";
+import { InputFieldProps } from "./input-field";
+export type OptionProps = Override<React.ComponentProps<"option">, {
+    value: string;
+    "data-dynamic"?: string;
+} & Partial<Record<`data-${string}`, string>>>;
+export type SelectProps = Override<InputFieldProps<"select">, {
+    options: OptionProps[];
+    selectContainer?: string;
+}>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=select.d.ts.map

package/dist/components/form/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA2GlB,CAAC"}

package/dist/components/form/select.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const Select = forwardRef(({ required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
+    const translation = useTranslations();
+    const inputRef = useRef(null);
+    const id = props.id ?? props.name;
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        const controller = new AbortController();
+        const input = inputRef.current;
+        const focus = initializeInputDataset(inputRef.current);
+        input.addEventListener("change", () => input.setAttribute("data-selected", "true"), {
+            once: true,
+            signal: controller.signal,
+        });
+        return () => {
+            focus();
+            controller.abort();
+        };
+    }, []);
+    const onClickLabel = () => inputRef.current?.focus();
+    return (<InputField info={info} left={left} error={error} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} hiddenLabel={hiddenLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<label htmlFor={id}>
+                        {right}
+                        <button onClick={onClickLabel} type="button" className="mt-2 transition-colors hover:text-primary">
+                            <CaretDownIcon size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                    </label>}>
+                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-10 w-full flex-1 appearance-none rounded-md text-base", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
+                    <option value="" disabled hidden>
+                        {props.placeholder}
+                    </option>
+                    {options.map((option) => (<option {...option} value={option.value} children={option.label ?? option.value} key={`${id}-select-option-${option.value}`}/>))}
+                </select>
+            </InputField>);
+});

package/dist/components/form/slider.d.ts

@@ -0,0 +1,7 @@
+import { Slider as Base } from "@base-ui/react/slider";
+type SliderProps = Parameters<typeof Base.Root>[0] & {
+    tooltip?: boolean;
+};
+export declare const Slider: (props: SliderProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/form/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQvD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCAgBxC,CAAC"}

package/dist/components/form/slider.jsx

@@ -0,0 +1,45 @@
+"use client";
+import { Slider as Base } from "@base-ui/react/slider";
+import { Is } from "sidekicker";
+import { css } from "../../lib/dom";
+import { Tooltip } from "../floating/tooltip";
+import { useEffect, useRef, useState } from "react";
+import { uuid } from "../../lib/fns";
+import { useLocale } from "../../hooks/use-locale";
+const Thumb = (props) => {
+    const [float, setFloat] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
+        const html = ref.current;
+        if (html === null)
+            return;
+        const initialValue = Number(html.getAttribute("aria-valuenow"));
+        if (Is.number(initialValue)) {
+            setFloat(initialValue);
+        }
+        const observer = new MutationObserver((changes) => {
+            const span = changes[0].target;
+            const value = Number(span.getAttribute("aria-valuenow"));
+            setFloat(Is.number(value) ? value : null);
+        });
+        observer.observe(html, { attributeFilter: ["aria-valuenow"] });
+        return () => observer.disconnect();
+    }, []);
+    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="focus-within::scale-105 block size-5 cursor-grab rounded-full border-2 border-input-border bg-input-switch shadow-shadow-floating focus-within:border-primary focus-within:outline active:cursor-grabbing">
+            {float}
+        </Tooltip>);
+};
+export const Slider = (props) => {
+    const { tooltip, className, defaultValue, value, ...restProps } = props;
+    const id = useRef(uuid());
+    const array = defaultValue || value || [];
+    const locale = useLocale();
+    return (<Base.Root {...restProps} value={value} locale={locale} defaultValue={defaultValue}>
+            <Base.Control className={css("relative flex h-5 w-full touch-none select-none items-center", className)}>
+                <Base.Track className="relative h-2 grow rounded-full bg-background">
+                    <Base.Indicator className="absolute h-full rounded-full bg-primary"/>
+                </Base.Track>
+                {Array.isArray(array) ? array.map((_, i) => <Thumb tooltip={tooltip ?? false} key={`${id.current}-${i}`}/>) : null}
+            </Base.Control>
+        </Base.Root>);
+};

package/dist/components/form/switch.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type SwitchProps = React.ComponentProps<"input"> & {
+    error?: string;
+    loading?: boolean;
+    container?: string;
+    onCheck?: (nextValue: boolean) => void;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/form/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGAqEjB,CAAC"}

package/dist/components/form/switch.jsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { css } from "../../lib/dom";
+export const Switch = forwardRef(({ children, loading, container, error, ...props }, ref) => {
+    const id = useId();
+    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);
+    const checked = innerChecked;
+    const innerRef = useRef(null);
+    const stableOnChange = useStableRef(props.onChange);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current !== null) {
+            if (stableOnChange.current) {
+                const onChange = (e) => {
+                    if (stableOnChange.current)
+                        stableOnChange.current(e);
+                };
+                const ref = innerRef.current;
+                ref.addEventListener("change", onChange);
+                return () => ref?.removeEventListener("change", onChange);
+            }
+        }
+    }, []);
+    const onCheck = () => {
+        const checked = !innerRef.current?.checked;
+        setInnerChecked(checked);
+        props?.onCheck?.(checked);
+        if (innerRef.current !== null) {
+            innerRef.current.checked = checked;
+            innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    };
+    return (<fieldset className={css("flex flex-col flex-wrap justify-center", container)} data-component="switch" disabled={props.disabled || loading}>
+            <span className="flex flex-row flex-wrap items-center">
+                <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
+                <button role="switch" type="button" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
+                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
+                </button>
+                <label htmlFor={props.id || id} className="ml-3 inline-block text-sm" id={`${id}-label`}>
+                    <span className="font-medium text-foreground">{children}</span>
+                </label>
+            </span>
+            <span className="mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden">{error}</span>
+        </fieldset>);
+});

package/dist/components/form/task-list.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps, PropsWithChildren } from "react";
+export declare const TaskList: (props: PropsWithChildren<ComponentProps<"fieldset">>) => import("react").JSX.Element;
+//# sourceMappingURL=task-list.d.ts.map

package/dist/components/form/task-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/task-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,gCA2B5E,CAAC"}

package/dist/components/form/task-list.jsx

@@ -0,0 +1,26 @@
+"use client";
+import { stagger, useAnimate } from "motion/react";
+import { useEffect } from "react";
+export const TaskList = (props) => {
+    const [ref, animate] = useAnimate();
+    useEffect(() => {
+        const container = ref.current;
+        if (!container)
+            return;
+        const handler = (e) => {
+            const input = e.target;
+            const items = Array.from(container.querySelectorAll("input[data-task=true]"));
+            const allTaskChecked = items.every((el) => el.checked);
+            const index = items.indexOf(input);
+            if (allTaskChecked && index !== -1) {
+                animate("input", { scale: [1, 1.35, 1], rotate: [0, 20, -20, 0] }, {
+                    duration: 0.5,
+                    delay: stagger(0.075, { from: index }),
+                });
+            }
+        };
+        container.addEventListener("change", handler);
+        return () => container.removeEventListener("change", handler);
+    }, []);
+    return <fieldset {...props} data-component="task-list" ref={ref}/>;
+};

package/dist/components/form/textarea.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { Any } from "../../types";
+import { FreeTextProps } from "./free-text";
+export type TextareaProps = FreeTextProps<"textarea", Any>;
+export declare const Textarea: React.FC<TextareaProps>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/form/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/form/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;AAE3D,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAC"}

package/dist/components/form/textarea.jsx

@@ -0,0 +1,12 @@
+"use client";
+import { createFreeText } from "./free-text";
+export const Textarea = createFreeText("textarea", "textarea", { container: "w-full" }, (textarea) => {
+    const adjustHeight = () => {
+        const lineBreakers = textarea.value.split("\n");
+        textarea.style.height = "auto";
+        if (lineBreakers.length > 1)
+            return void (textarea.style.height = `${textarea.scrollHeight}px`);
+    };
+    textarea.addEventListener("input", adjustHeight);
+    return () => textarea.removeEventListener("input", adjustHeight);
+});

package/dist/components/index.d.ts

@@ -0,0 +1,45 @@
+export * from "./core/tag";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./core/button";
+export * from "./form/select";
+export * from "./form/slider";
+export * from "./form/switch";
+export * from "./table/index";
+export * from "./display/card";
+export * from "./display/list";
+export * from "./display/step";
+export * from "./display/tabs";
+export * from "./display/alert";
+export * from "./display/empty";
+export * from "./display/stats";
+export * from "./floating/menu";
+export * from "./form/checkbox";
+export * from "./form/radiobox";
+export * from "./form/textarea";
+export * from "./core/polymorph";
+export * from "./floating/modal";
+export * from "./form/task-list";
+export * from "./core/typography";
+export * from "./display/spinner";
+export * from "./floating/expand";
+export * from "./floating/wizard";
+export * from "./display/calendar";
+export * from "./display/progress";
+export * from "./display/timeline";
+export * from "./floating/toolbar";
+export * from "./floating/tooltip";
+export * from "./form/date-picker";
+export * from "./form/file-upload";
+export * from "./form/input-field";
+export * from "./floating/dropdown";
+export * from "./form/autocomplete";
+export * from "./form/multi-select";
+export * from "./core/render-on-view";
+export * from "./display/notifications";
+export * from "./floating/command-palette";
+export { CommandPalette as Commander } from "./floating/command-palette";
+export * from "./page-calendar";
+export { formReset } from "./form/formReset";
+export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACzE,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,44 @@
+export * from "./core/tag";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./core/button";
+export * from "./form/select";
+export * from "./form/slider";
+export * from "./form/switch";
+export * from "./table/index";
+export * from "./display/card";
+export * from "./display/list";
+export * from "./display/step";
+export * from "./display/tabs";
+export * from "./display/alert";
+export * from "./display/empty";
+export * from "./display/stats";
+export * from "./floating/menu";
+export * from "./form/checkbox";
+export * from "./form/radiobox";
+export * from "./form/textarea";
+export * from "./core/polymorph";
+export * from "./floating/modal";
+export * from "./form/task-list";
+export * from "./core/typography";
+export * from "./display/spinner";
+export * from "./floating/expand";
+export * from "./floating/wizard";
+export * from "./display/calendar";
+export * from "./display/progress";
+export * from "./display/timeline";
+export * from "./floating/toolbar";
+export * from "./floating/tooltip";
+export * from "./form/date-picker";
+export * from "./form/file-upload";
+export * from "./form/input-field";
+export * from "./floating/dropdown";
+export * from "./form/autocomplete";
+export * from "./form/multi-select";
+export * from "./core/render-on-view";
+export * from "./display/notifications";
+export * from "./floating/command-palette";
+export { CommandPalette as Commander } from "./floating/command-palette";
+export * from "./page-calendar";
+export { formReset } from "./form/formReset";
+export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";

package/dist/components/page-calendar/calendar-header.d.ts

@@ -0,0 +1,16 @@
+import type { CalendarFilter, ViewMode } from "./page-calendar.types";
+import type { SetState } from "../../types";
+import { type ReactNode } from "react";
+type CalendarHeaderProps = {
+    currentDate: Date;
+    currentView: ViewMode;
+    onAddEvent?: () => void;
+    filters: CalendarFilter[];
+    filterArea?: ReactNode;
+    setCurrentDate: SetState<Date>;
+    setCurrentView: SetState<ViewMode>;
+    onToggleFilter: (id: string) => void;
+};
+export declare function CalendarHeader({ currentDate, currentView, filters, filterArea, setCurrentDate, setCurrentView, onToggleFilter, onAddEvent, }: CalendarHeaderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=calendar-header.d.ts.map

package/dist/components/page-calendar/calendar-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/calendar-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,KAAK,mBAAmB,GAAG;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACb,EAAE,mBAAmB,+BAuHrB"}

package/dist/components/page-calendar/calendar-header.jsx

@@ -0,0 +1,83 @@
+import { Button } from "../core/button";
+import { Tag } from "../core/tag";
+import { useLocale } from "../../hooks/use-locale";
+import { useTranslations } from "../../hooks/use-translations";
+import { CaretLeftIcon, CaretRightIcon, PlusCircleIcon, CalendarIcon } from "@phosphor-icons/react";
+import { addDays, addMonths, addWeeks, isToday, subDays, subMonths, subWeeks } from "date-fns";
+import { formatDay, formatMonthShort, formatMonthYear, getWeekNumber } from "./page-calendar.utils";
+import { useMemo } from "react";
+export function CalendarHeader({ currentDate, currentView, filters, filterArea, setCurrentDate, setCurrentView, onToggleFilter, onAddEvent, }) {
+    const locale = useLocale();
+    const t = useTranslations();
+    const isDateToday = isToday(currentDate);
+    const VIEWS = useMemo(() => [
+        { value: "month", label: t.pageCalendarMonthView },
+        { value: "week", label: t.pageCalendarWeekView },
+        { value: "day", label: t.pageCalendarDayView },
+    ], [t]);
+    const handlePrev = () => {
+        setCurrentDate((currentDate) => {
+            if (currentView === "month")
+                return subMonths(currentDate, 1);
+            if (currentView === "week")
+                return subWeeks(currentDate, 1);
+            return subDays(currentDate, 1);
+        });
+    };
+    const handleNext = () => {
+        setCurrentDate((currentDate) => {
+            if (currentView === "month")
+                return addMonths(currentDate, 1);
+            if (currentView === "week")
+                return addWeeks(currentDate, 1);
+            return addDays(currentDate, 1);
+        });
+    };
+    const weekNum = getWeekNumber(currentDate);
+    return (<header className="flex flex-col gap-4">
+            <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                    <div aria-hidden="true" className={`flex size-12 flex-col items-center justify-center overflow-hidden rounded-lg text-xs ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
+                        <span className="font-light uppercase leading-none">{formatMonthShort(currentDate, locale)}</span>
+                        <span className="text-xl font-medium leading-none">{formatDay(currentDate, locale)}</span>
+                    </div>
+                    <div>
+                        <h1 aria-live="polite" aria-atomic="true" className="text-xl font-bold leading-tight">
+                            {formatMonthYear(currentDate, locale)}
+                        </h1>
+                        <span className="text-xs text-muted-foreground">{t.pageCalendarWeekLabel(weekNum)}</span>
+                    </div>
+                </div>
+                <nav aria-label={t.pageCalendarNavigation} className="flex items-center gap-2">
+                    <div className="flex items-center gap-1">
+                        <Button size="small" title={t.pageCalendarPrevious} aria-label={t.pageCalendarPrevious} theme="ghost-muted" onClick={handlePrev}>
+                            <CaretLeftIcon size={16}/>
+                        </Button>
+                        <button type="button" aria-label={t.pageCalendarToday} onClick={() => setCurrentDate(new Date())} className="rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-muted/50">
+                            {t.pageCalendarToday}
+                        </button>
+                        <Button size="small" title={t.pageCalendarNext} aria-label={t.pageCalendarNext} theme="ghost-muted" onClick={handleNext}>
+                            <CaretRightIcon size={16}/>
+                        </Button>
+                    </div>
+                    <div className="flex rounded-md">
+                        {VIEWS.map((v) => (<Button size="small" key={v.value} onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="rounded-none first:rounded-l-button last:rounded-r-button">
+                                {v.label}
+                            </Button>))}
+                    </div>
+                    {onAddEvent && (<Button theme="primary" size="small" onClick={onAddEvent}>
+                            <PlusCircleIcon size={14}/>
+                            {t.pageCalendarAddEvent}
+                        </Button>)}
+                </nav>
+            </div>
+            {filterArea ??
+            (filters.length > 0 && (<div role="group" aria-label={t.pageCalendarFilter} className="flex flex-wrap items-center gap-1.5">
+                        <CalendarIcon size={14} className="text-muted-foreground" aria-hidden="true"/>
+                        <span className="mr-1 text-xs text-muted-foreground">{t.pageCalendarFilter}</span>
+                        {filters.map((filter) => (<Tag as="button" size="small" type="button" key={filter.id} theme={filter.theme} indicator={filter.enabled ? filter.theme : undefined} aria-pressed={filter.enabled} aria-label={`${filter.label}, ${filter.enabled ? t.pageCalendarFilterEnabled : t.pageCalendarFilterDisabled}`} onClick={() => onToggleFilter(filter.id)}>
+                                {filter.label}
+                            </Tag>))}
+                    </div>))}
+        </header>);
+}

package/dist/components/page-calendar/day-view.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarEvent, CalendarEventBase } from "./page-calendar.types";
+type DayViewProps<T extends CalendarEventBase> = {
+    currentDate: Date;
+    onDateChange: (date: Date) => void;
+    onSlotClick?: (date: Date) => void;
+    eventsByDate: Map<string, CalendarEvent<T>[]>;
+    onEventClick: (event: CalendarEvent<T>) => void;
+    renderEvent?: (event: CalendarEvent<T>) => React.ReactNode;
+};
+export declare function DayView<T extends CalendarEventBase>({ currentDate, onSlotClick, renderEvent, eventsByDate, onDateChange, onEventClick, }: DayViewProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=day-view.d.ts.map

package/dist/components/page-calendar/day-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-view.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/day-view.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAuB9E,KAAK,YAAY,CAAC,CAAC,SAAS,iBAAiB,IAAI;IAC7C,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,iBAAiB,EAAE,EACjD,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,GACf,EAAE,YAAY,CAAC,CAAC,CAAC,+BA+HjB"}

package/dist/components/page-calendar/day-view.jsx

@@ -0,0 +1,94 @@
+import { isToday } from "date-fns";
+import { useEffect, useRef, useState } from "react";
+import { Tag } from "../core/tag";
+import { useLocale } from "../../hooks/use-locale";
+import { EventPill } from "./event-pill";
+import { Calendar } from "../display/calendar";
+import { getHourSlots, toDateKey, formatDay, formatWeekdayLong, formatMonthYear, formatHourLabel, formatFullDate, formatTime, computeEventColumns, } from "./page-calendar.utils";
+const HOUR_HEIGHT = 48;
+function getTopOffset(event) {
+    const hour = event.date.getHours();
+    const minutes = event.date.getMinutes();
+    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;
+}
+export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, onDateChange, onEventClick, }) {
+    const locale = useLocale();
+    const currentHourRef = useRef(null);
+    const scrollBodyRef = useRef(null);
+    const hours = getHourSlots();
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    useEffect(() => {
+        if (scrollBodyRef.current && currentHourRef.current) {
+            const top = currentHourRef.current.offsetTop;
+            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
+        }
+    }, []);
+    const dayKey = toDateKey(currentDate);
+    const events = eventsByDate.get(dayKey) || [];
+    const RenderOnDay = ({ date }) => {
+        const key = toDateKey(date);
+        const hasEvents = (eventsByDate.get(key) || []).length > 0;
+        const isSelected = toDateKey(date) === toDateKey(currentDate);
+        if (!hasEvents || isSelected)
+            return null;
+        return <span className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"/>;
+    };
+    const handleEventClick = (event) => {
+        setSelectedEvent(event);
+        onEventClick(event);
+    };
+    return (<div className="flex min-w-full flex-1">
+            <div className="flex w-full flex-1 flex-col">
+                <div aria-label={formatFullDate(currentDate, locale)} className="flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2">
+                    <span className={`inline-flex h-8 w-8 items-center justify-center rounded-full font-bold ${isToday(currentDate) ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                        {formatDay(currentDate, locale)}
+                    </span>
+                    <div>
+                        <div className="font-semibold">{formatWeekdayLong(currentDate, locale)}</div>
+                        <div className="text-xs text-muted-foreground">{formatMonthYear(currentDate, locale)}</div>
+                    </div>
+                </div>
+                <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
+                    <div className="w-[60px] flex-shrink-0">
+                        {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
+                                <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
+                                    {hour === 0 ? "" : formatHourLabel(hour, locale)}
+                                </span>
+                                {hour === new Date().getHours() && <div ref={currentHourRef}/>}
+                            </div>))}
+                    </div>
+                    <div className="relative flex-1 border-l border-card-border">
+                        {hours.map((hour) => {
+            const slotDate = new Date(currentDate);
+            slotDate.setHours(hour, 0, 0, 0);
+            return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onSlotClick?.(slotDate);
+                    }
+                }}/>);
+        })}
+                        {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} className="absolute" style={{
+                top: getTopOffset(event),
+                height: HOUR_HEIGHT,
+                left: `calc(${(columnIndex / columnCount) * 100}% + 2px)`,
+                width: `calc(${100 / columnCount}% - 4px)`,
+            }} onClick={(e) => e.stopPropagation()}>
+                                <EventPill event={event} onClick={() => handleEventClick(event)}/>
+                            </div>))}
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col overflow-y-auto border-l border-card-border px-4">
+                <Calendar date={currentDate} markToday changeOnlyOnClick RenderOnDay={RenderOnDay} onChange={(d) => d && onDateChange(d)}/>
+                {selectedEvent && (<div className="flex flex-col gap-2 border-t p-3">
+                        {renderEvent ? (renderEvent(selectedEvent)) : (<>
+                                <div className="truncate text-sm font-semibold">{selectedEvent.title}</div>
+                                <div className="text-xs text-muted-foreground">{formatFullDate(selectedEvent.date, locale)}</div>
+                                <div className="text-xs text-muted-foreground">{formatTime(selectedEvent.date, locale)}</div>
+                                <Tag theme={selectedEvent.className ? "custom" : "primary"} size="small" className={`self-start${selectedEvent.className ? ` ${selectedEvent.className}` : ""}`}/>
+                            </>)}
+                    </div>)}
+            </div>
+        </div>);
+}

package/dist/components/page-calendar/event-pill.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarEvent } from "./page-calendar.types";
+type EventPillProps = {
+    compact?: boolean;
+    onClick: () => void;
+    event: CalendarEvent;
+};
+export declare function EventPill({ event, onClick, compact }: EventPillProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=event-pill.d.ts.map

package/dist/components/page-calendar/event-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-pill.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/event-pill.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,KAAK,cAAc,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAe,EAAE,EAAE,cAAc,+BAuC5E"}

package/dist/components/page-calendar/event-pill.jsx

@@ -0,0 +1,25 @@
+import { Button } from "../core/button";
+import { css } from "../../lib/dom";
+import { useTranslations } from "../../hooks/use-translations";
+import { formatEventTime } from "./page-calendar.utils";
+export function EventPill({ event, onClick, compact = false }) {
+    const t = useTranslations();
+    const props = {
+        style: {
+            border: "0",
+            padding: "0 0.5rem",
+            height: "1.25rem",
+            borderRadius: "0.25rem",
+        },
+        className: css("w-full border-0 justify-start rounded text-xs truncate text-ellipsis overflow-hidden border leading-tight", event.className),
+    };
+    if (compact) {
+        return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
+                {event.title}
+            </Button>);
+    }
+    return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
+            <div className="truncate font-medium">{event.title}</div>
+            <div className="text-xs opacity-60">{formatEventTime(event.date)}</div>
+        </Button>);
+}

package/dist/components/page-calendar/index.d.ts

@@ -0,0 +1,4 @@
+export { PageCalendar } from "./page-calendar";
+export type { CalendarEvent, CalendarFilter, ViewMode } from "./page-calendar.types";
+export { toDateKey, groupEventsByDate, getMonthDays, getWeekDays, getHourSlots, formatEventTime, formatDay, formatWeekdayLong, formatWeekdayShort, formatMonthYear, formatMonthShort, formatHourLabel, formatFullDate, formatTime, getWeekNumber, } from "./page-calendar.utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/page-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EACH,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,UAAU,EACV,aAAa,GAChB,MAAM,uBAAuB,CAAC"}

package/dist/components/page-calendar/index.js

@@ -0,0 +1,2 @@
+export { PageCalendar } from "./page-calendar";
+export { toDateKey, groupEventsByDate, getMonthDays, getWeekDays, getHourSlots, formatEventTime, formatDay, formatWeekdayLong, formatWeekdayShort, formatMonthYear, formatMonthShort, formatHourLabel, formatFullDate, formatTime, getWeekNumber, } from "./page-calendar.utils";