@g4rcez/components 4.0.2 → 4.1.2

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.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import { forwardRef as x, useId as w, useState as p, useRef as C, useImperativeHandle as y, useEffect as v } from "react";
 import { u as N } from "../../use-stable-ref-CYh-YkID.js";
-import { c as E } from "../../dom-Dl8XH0CK.js";
+import { c as E } from "../../dom-CyQHY7ID.js";
 const L = x(({ children: u, loading: s, container: h, error: f, ...e }, m) => {
   const r = w(), [b, i] = p(e.checked ?? !1), c = b, t = C(null), d = N(e.onChange);
   y(m, () => t.current), v(() => {
@@ -36,8 +36,8 @@ const L = x(({ children: u, loading: s, container: h, error: f, ...e }, m) => {
       /* @__PURE__ */ a(
         "button",
         {
-          type: "button",
           role: "switch",
+          type: "button",
           onClick: k,
           "aria-checked": c,
           "data-checked": c,

package/dist/components/form/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../src/components/form/switch.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from \"react\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\n\nexport type SwitchProps = React.ComponentProps<\"input\"> & {\n    error?: string;\n    loading?: boolean;\n    container?: string;\n    onCheck?: (nextValue: boolean) => void;\n};\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ children, loading, container, error, ...props }: SwitchProps, ref) => {\n    const id = useId();\n    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);\n    const checked = innerChecked;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const stableOnChange = useStableRef(props.onChange);\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffect(() => {\n        if (innerRef.current !== null) {\n            if (stableOnChange.current) {\n                const onChange = (e: any) => {\n                    if (stableOnChange.current) stableOnChange.current(e);\n                };\n                const ref = innerRef.current;\n                ref.addEventListener(\"change\", onChange);\n                return () => ref?.removeEventListener(\"change\", onChange);\n            }\n        }\n    }, []);\n\n    const onCheck = () => {\n        const checked = !innerRef.current?.checked;\n        setInnerChecked(checked);\n        props?.onCheck?.(checked);\n        if (innerRef.current !== null) {\n            innerRef.current.checked = checked;\n            innerRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n        }\n    };\n\n    return (\n        <fieldset className={css(\"flex flex-col flex-wrap justify-center\", container)} data-component=\"switch\" disabled={props.disabled || loading}>\n            <span className=\"flex flex-row flex-wrap items-center\">\n                <input\n                    {...props}\n                    hidden\n                    ref={innerRef}\n                    type=\"checkbox\"\n                    checked={checked}\n                    id={props.id || id}\n                    data-trigger=\"change\"\n                    data-checked={checked}\n                    disabled={props.disabled || loading}\n                    onChange={(e) => setInnerChecked(e.target.checked)}\n                />\n                <button\n                    type=\"button\"\n                    role=\"switch\"\n                    onClick={onCheck}\n                    aria-checked={checked}\n                    data-checked={checked}\n                    aria-labelledby={`${id}-label`}\n                    disabled={props.disabled || loading}\n                    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\"\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        data-checked={checked}\n                        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\"\n                    />\n                </button>\n                <label htmlFor={props.id || id} className=\"ml-3 inline-block text-sm\" id={`${id}-label`}>\n                    <span className=\"font-medium text-foreground\">{children}</span>\n                </label>\n            </span>\n            <span className=\"mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden\">{error}</span>\n        </fieldset>\n    );\n});\n"],"names":["Switch","forwardRef","children","loading","container","error","props","ref","id","useId","innerChecked","setInnerChecked","useState","checked","innerRef","useRef","stableOnChange","useStableRef","useImperativeHandle","useEffect","onChange","e","onCheck","jsxs","css","jsx"],"mappings":";;;;AAYO,MAAMA,IAASC,EAA0C,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAAsBC,MAAQ;AACrI,QAAMC,IAAKC,EAAA,GACL,CAACC,GAAcC,CAAe,IAAIC,EAASN,EAAM,WAAW,EAAK,GACjEO,IAAUH,GACVI,IAAWC,EAAyB,IAAI,GACxCC,IAAiBC,EAAaX,EAAM,QAAQ;AAClD,EAAAY,EAAoBX,GAAK,MAAMO,EAAS,OAAQ,GAEhDK,EAAU,MAAM;AACZ,QAAIL,EAAS,YAAY,QACjBE,EAAe,SAAS;AACxB,YAAMI,IAAW,CAACC,MAAW;AACzB,QAAIL,EAAe,WAASA,EAAe,QAAQK,CAAC;AAAA,MAAA,GAElDd,IAAMO,EAAS;AACrBP,aAAAA,EAAI,iBAAiB,UAAUa,CAAQ,GAChC,MAAMb,GAAK,oBAAoB,UAAUa,CAAQ;AAAA,IAAA;AAAA,EAEhE,GACD,EAAE;AAEL,QAAME,IAAU,MAAM;AAClB,UAAMT,IAAU,CAACC,EAAS,SAAS;AACnC,IAAAH,EAAgBE,CAAO,GACvBP,GAAO,UAAUO,CAAO,GACpBC,EAAS,YAAY,SACrBA,EAAS,QAAQ,UAAUD,GAC3BC,EAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAA,CAAM,CAAC;AAAA,EACzE;AAGJ,SACI,gBAAAS,EAAC,YAAA,EAAS,WAAWC,EAAI,0CAA0CpB,CAAS,GAAG,kBAAe,UAAS,UAAUE,EAAM,YAAYH,GAC/H,UAAA;AAAA,IAAA,gBAAAoB,EAAC,QAAA,EAAK,WAAU,wCACZ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGnB;AAAA,UACJ,QAAM;AAAA,UACN,KAAKQ;AAAA,UACL,MAAK;AAAA,UACL,SAAAD;AAAA,UACA,IAAIP,EAAM,MAAME;AAAA,UAChB,gBAAa;AAAA,UACb,gBAAcK;AAAA,UACd,UAAUP,EAAM,YAAYH;AAAA,UAC5B,UAAU,CAACkB,MAAMV,EAAgBU,EAAE,OAAO,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAErD,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAASH;AAAA,UACT,gBAAcT;AAAA,UACd,gBAAcA;AAAA,UACd,mBAAiB,GAAGL,CAAE;AAAA,UACtB,UAAUF,EAAM,YAAYH;AAAA,UAC5B,WAAU;AAAA,UAEV,UAAA,gBAAAsB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAY;AAAA,cACZ,gBAAcZ;AAAA,cACd,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,wBAEH,SAAA,EAAM,SAASP,EAAM,MAAME,GAAI,WAAU,6BAA4B,IAAI,GAAGA,CAAE,UAC3E,UAAA,gBAAAiB,EAAC,UAAK,WAAU,+BAA+B,UAAAvB,GAAS,EAAA,CAC5D;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAuB,EAAC,QAAA,EAAK,WAAU,6EAA6E,UAAApB,EAAA,CAAM;AAAA,EAAA,GACvG;AAER,CAAC;"}
+{"version":3,"file":"switch.js","sources":["../../../src/components/form/switch.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from \"react\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\n\nexport type SwitchProps = React.ComponentProps<\"input\"> & {\n    error?: string;\n    loading?: boolean;\n    container?: string;\n    onCheck?: (nextValue: boolean) => void;\n};\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ children, loading, container, error, ...props }: SwitchProps, ref) => {\n    const id = useId();\n    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);\n    const checked = innerChecked;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const stableOnChange = useStableRef(props.onChange);\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffect(() => {\n        if (innerRef.current !== null) {\n            if (stableOnChange.current) {\n                const onChange = (e: Event) => {\n                    if (stableOnChange.current) stableOnChange.current(e as unknown as React.ChangeEvent<HTMLInputElement>);\n                };\n                const ref = innerRef.current;\n                ref.addEventListener(\"change\", onChange);\n                return () => ref?.removeEventListener(\"change\", onChange);\n            }\n        }\n    }, []);\n\n    const onCheck = () => {\n        const checked = !innerRef.current?.checked;\n        setInnerChecked(checked);\n        props?.onCheck?.(checked);\n        if (innerRef.current !== null) {\n            innerRef.current.checked = checked;\n            innerRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n        }\n    };\n\n    return (\n        <fieldset className={css(\"flex flex-col flex-wrap justify-center\", container)} data-component=\"switch\" disabled={props.disabled || loading}>\n            <span className=\"flex flex-row flex-wrap items-center\">\n                <input\n                    {...props}\n                    hidden\n                    ref={innerRef}\n                    type=\"checkbox\"\n                    checked={checked}\n                    id={props.id || id}\n                    data-trigger=\"change\"\n                    data-checked={checked}\n                    disabled={props.disabled || loading}\n                    onChange={(e) => setInnerChecked(e.target.checked)}\n                />\n                <button\n                    role=\"switch\"\n                    type=\"button\"\n                    onClick={onCheck}\n                    aria-checked={checked}\n                    data-checked={checked}\n                    aria-labelledby={`${id}-label`}\n                    disabled={props.disabled || loading}\n                    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\"\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        data-checked={checked}\n                        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\"\n                    />\n                </button>\n                <label htmlFor={props.id || id} className=\"ml-3 inline-block text-sm\" id={`${id}-label`}>\n                    <span className=\"font-medium text-foreground\">{children}</span>\n                </label>\n            </span>\n            <span className=\"mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden\">{error}</span>\n        </fieldset>\n    );\n});\n"],"names":["Switch","forwardRef","children","loading","container","error","props","ref","id","useId","innerChecked","setInnerChecked","useState","checked","innerRef","useRef","stableOnChange","useStableRef","useImperativeHandle","useEffect","onChange","e","onCheck","jsxs","css","jsx"],"mappings":";;;;AAYO,MAAMA,IAASC,EAA0C,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAAsBC,MAAQ;AACrI,QAAMC,IAAKC,EAAA,GACL,CAACC,GAAcC,CAAe,IAAIC,EAASN,EAAM,WAAW,EAAK,GACjEO,IAAUH,GACVI,IAAWC,EAAyB,IAAI,GACxCC,IAAiBC,EAAaX,EAAM,QAAQ;AAClD,EAAAY,EAAoBX,GAAK,MAAMO,EAAS,OAAQ,GAEhDK,EAAU,MAAM;AACZ,QAAIL,EAAS,YAAY,QACjBE,EAAe,SAAS;AACxB,YAAMI,IAAW,CAACC,MAAa;AAC3B,QAAIL,EAAe,WAASA,EAAe,QAAQK,CAAmD;AAAA,MAAA,GAEpGd,IAAMO,EAAS;AACrBP,aAAAA,EAAI,iBAAiB,UAAUa,CAAQ,GAChC,MAAMb,GAAK,oBAAoB,UAAUa,CAAQ;AAAA,IAAA;AAAA,EAEhE,GACD,EAAE;AAEL,QAAME,IAAU,MAAM;AAClB,UAAMT,IAAU,CAACC,EAAS,SAAS;AACnC,IAAAH,EAAgBE,CAAO,GACvBP,GAAO,UAAUO,CAAO,GACpBC,EAAS,YAAY,SACrBA,EAAS,QAAQ,UAAUD,GAC3BC,EAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAA,CAAM,CAAC;AAAA,EACzE;AAGJ,SACI,gBAAAS,EAAC,YAAA,EAAS,WAAWC,EAAI,0CAA0CpB,CAAS,GAAG,kBAAe,UAAS,UAAUE,EAAM,YAAYH,GAC/H,UAAA;AAAA,IAAA,gBAAAoB,EAAC,QAAA,EAAK,WAAU,wCACZ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGnB;AAAA,UACJ,QAAM;AAAA,UACN,KAAKQ;AAAA,UACL,MAAK;AAAA,UACL,SAAAD;AAAA,UACA,IAAIP,EAAM,MAAME;AAAA,UAChB,gBAAa;AAAA,UACb,gBAAcK;AAAA,UACd,UAAUP,EAAM,YAAYH;AAAA,UAC5B,UAAU,CAACkB,MAAMV,EAAgBU,EAAE,OAAO,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAErD,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAASH;AAAA,UACT,gBAAcT;AAAA,UACd,gBAAcA;AAAA,UACd,mBAAiB,GAAGL,CAAE;AAAA,UACtB,UAAUF,EAAM,YAAYH;AAAA,UAC5B,WAAU;AAAA,UAEV,UAAA,gBAAAsB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAY;AAAA,cACZ,gBAAcZ;AAAA,cACd,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,wBAEH,SAAA,EAAM,SAASP,EAAM,MAAME,GAAI,WAAU,6BAA4B,IAAI,GAAGA,CAAE,UAC3E,UAAA,gBAAAiB,EAAC,UAAK,WAAU,+BAA+B,UAAAvB,GAAS,EAAA,CAC5D;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAuB,EAAC,QAAA,EAAK,WAAU,6EAA6E,UAAApB,EAAA,CAAM;AAAA,EAAA,GACvG;AAER,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.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.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

@@ -35,7 +35,6 @@ export * from "./form/input-field";
 export * from "./floating/dropdown";
 export * from "./form/autocomplete";
 export * from "./form/multi-select";
-export * from "./form/transfer-list";
 export * from "./core/render-on-view";
 export * from "./display/notifications";
 export * from "./floating/command-palette";

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

@@ -1 +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,sBAAsB,CAAC;AACrC,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"}
+{"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.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.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.map

@@ -1 +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,+BAyB5E"}
+{"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.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";

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

@@ -0,0 +1,46 @@
+import { isSameMonth, isToday } from "date-fns";
+import { useLocale } from "../../hooks/use-locale";
+import { useTranslations } from "../../hooks/use-translations";
+import { EventPill } from "./event-pill";
+import { toDateKey, formatDay, getWeekDays, formatWeekDay, formatFullDate } from "./page-calendar.utils";
+import { useMemo } from "react";
+export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }) {
+    const locale = useLocale();
+    const t = useTranslations();
+    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);
+    return (<div className="flex h-full flex-1 flex-col">
+            <ul role="row" aria-hidden="true" className="grid grid-cols-7 border-b border-border">
+                {WEEKDAY_LABELS.map((date) => {
+            const day = formatWeekDay(date, locale);
+            return (<li key={day} className="py-2 text-center text-xs font-medium text-muted-foreground">
+                            {day}
+                        </li>);
+        })}
+            </ul>
+            <div role="grid" aria-label={t.pageCalendarMonthGrid} className="grid flex-1 auto-rows-fr grid-cols-7">
+                {days.map((day, idx) => {
+            const key = toDateKey(day);
+            const events = eventsByDate.get(key) || [];
+            const isCurrentMonth = isSameMonth(day, currentDate);
+            const isCurrentDay = isToday(day);
+            return (<button key={idx} type="button" onClick={() => onDayClick(day)} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className={`group flex min-h-32 cursor-pointer flex-col gap-1 border-b border-r border-border p-2 transition-colors hover:bg-muted hover:bg-opacity-20 ${!isCurrentMonth ? "opacity-50" : ""}`}>
+                            <div className="flex items-center justify-between">
+                                <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                    {formatDay(day, locale)}
+                                </span>
+                                <span aria-hidden="true" className="text-lg leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
+                                    +
+                                </span>
+                            </div>
+                            <div className="min-h-0 flex-1 overflow-y-auto">
+                                <div className="flex flex-col gap-0.5">
+                                    {events.map((event) => (<div key={event.id} onClick={(e) => e.stopPropagation()}>
+                                            <EventPill compact event={event} onClick={() => onEventClick(event)}/>
+                                        </div>))}
+                                </div>
+                            </div>
+                        </button>);
+        })}
+            </div>
+        </div>);
+}

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

@@ -0,0 +1,41 @@
+import { useMemo, useState } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { groupEventsByDate, getMonthDays, getWeekDays } from "./page-calendar.utils";
+import { CalendarHeader } from "./calendar-header";
+import { MonthView } from "./month-view";
+import { WeekView } from "./week-view";
+import { DayView } from "./day-view";
+const noop = [];
+export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters = noop, defaultView = "month", onChangeFilters: onActiveFiltersChange, }) {
+    const t = useTranslations();
+    const [currentView, setCurrentView] = useState(defaultView);
+    const [currentDate, setCurrentDate] = useState(() => defaultDate ?? new Date());
+    const [internalFilters, setInternalFilters] = useState(filters);
+    const toggleFilter = (id) => {
+        setInternalFilters((prev) => {
+            const next = prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f));
+            onActiveFiltersChange?.(next);
+            return next;
+        });
+    };
+    const filteredEvents = useMemo(() => {
+        if (filters.length === 0)
+            return events;
+        const get = getFilterId ?? ((e) => e?.filterId);
+        return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);
+    }, [events, internalFilters, filters]);
+    const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);
+    const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);
+    const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);
+    const handleEventClick = (event) => onEventClick?.(event);
+    const handleDayClick = (date) => {
+        setCurrentDate(date);
+        setCurrentView("day");
+    };
+    return (<div role="application" aria-label={t.pageCalendarLabel} className="flex h-full w-full flex-grow flex-col gap-4">
+            <CalendarHeader filters={internalFilters} filterArea={filterArea} onAddEvent={onAddEvent} currentDate={currentDate} currentView={currentView} setCurrentDate={setCurrentDate} setCurrentView={setCurrentView} onToggleFilter={toggleFilter}/>
+            {currentView === "month" && (<MonthView days={monthDays} currentDate={currentDate} eventsByDate={eventsByDate} onDayClick={handleDayClick} onEventClick={handleEventClick}/>)}
+            {currentView === "week" && (<WeekView days={weekDays} currentDate={currentDate} onSlotClick={onSlotClick} eventsByDate={eventsByDate} onEventClick={handleEventClick}/>)}
+            {currentView === "day" && (<DayView currentDate={currentDate} onSlotClick={onSlotClick} renderEvent={renderEvent} eventsByDate={eventsByDate} onDateChange={setCurrentDate} onEventClick={handleEventClick}/>)}
+        </div>);
+}

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

@@ -0,0 +1 @@
+export {};