@fleetia/components 1.1.1

package/dist/ColorPicker/useColorWheel.js

@@ -0,0 +1,232 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { parseColor, formatColor, slToTrianglePoint, hslToRgb, rgbToHex, cartesianToAngle, clampToTriangle, trianglePointToSL, getTriangleVertices, polarToCartesian, hexToRgb, rgbToHsl } from '../utils/colorUtils.js';
+import { WHEEL_SIZE, INNER_RADIUS, TRIANGLE_RADIUS, RING_WIDTH } from './ColorPicker.constants.js';
+import { detectFormat, drawTriangle, drawIndicator, clamp } from './ColorPicker.utils.js';
+
+const CX = WHEEL_SIZE / 2;
+const CY = WHEEL_SIZE / 2;
+function useColorWheel(value, onChange, showAlpha) {
+    const [hsla, setHsla] = useState(() => parseColor(value));
+    const [format, setFormat] = useState(() => detectFormat(value));
+    const dragTarget = useRef(null);
+    const canvasRef = useRef(null);
+    const hueWheelCache = useRef(null);
+    const prevValueRef = useRef(value);
+    const alphaTrackRef = useRef(null);
+    // Sync external value changes
+    useEffect(() => {
+        if (value !== prevValueRef.current) {
+            prevValueRef.current = value;
+            const parsed = parseColor(value);
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing external prop to internal state
+            setHsla(parsed);
+        }
+    }, [value]);
+    const emit = useCallback((next) => {
+        const fmt = showAlpha && next.a < 1 ? (format === "hex" ? "rgba" : format) : format;
+        const str = formatColor(next, fmt);
+        prevValueRef.current = str;
+        onChange(str);
+    }, [format, onChange, showAlpha]);
+    // --- Canvas rendering ---
+    const drawWheel = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const size = WHEEL_SIZE;
+        canvas.width = size * dpr;
+        canvas.height = size * dpr;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, size, size);
+        // Hue ring (cache)
+        if (!hueWheelCache.current ||
+            hueWheelCache.current.width !== canvas.width) {
+            const offscreen = document.createElement("canvas");
+            offscreen.width = canvas.width;
+            offscreen.height = canvas.height;
+            const octx = offscreen.getContext("2d");
+            if (!octx)
+                return;
+            octx.scale(dpr, dpr);
+            const outerR = size / 2;
+            const cg = octx.createConicGradient(-Math.PI / 2, CX, CY);
+            for (let i = 0; i <= 360; i += 1) {
+                cg.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
+            }
+            octx.beginPath();
+            octx.arc(CX, CY, outerR, 0, Math.PI * 2);
+            octx.arc(CX, CY, INNER_RADIUS, 0, Math.PI * 2, true);
+            octx.fillStyle = cg;
+            octx.fill();
+            hueWheelCache.current = octx.getImageData(0, 0, canvas.width, canvas.height);
+        }
+        ctx.putImageData(hueWheelCache.current, 0, 0);
+        // Triangle
+        const [v0, v1, v2] = getTriangleVertices(CX, CY, TRIANGLE_RADIUS, 0);
+        drawTriangle(ctx, v0, v1, v2, hsla.h);
+        // Hue indicator
+        const hueAngle = hsla.h - 90;
+        const hueR = INNER_RADIUS + RING_WIDTH / 2;
+        const hp = polarToCartesian(CX, CY, hueR, hueAngle);
+        drawIndicator(ctx, hp.x, hp.y, 7, `hsl(${hsla.h}, 100%, 50%)`);
+        // SL indicator
+        const slPt = slToTrianglePoint(hsla.s, hsla.l, v0, v1, v2);
+        const [ir, ig, ib] = hslToRgb(hsla.h, hsla.s, hsla.l);
+        drawIndicator(ctx, slPt.x, slPt.y, 6, rgbToHex(ir, ig, ib));
+    }, [hsla.h, hsla.s, hsla.l]);
+    // --- Drag helpers ---
+    const getCanvasPos = (e) => {
+        const canvas = canvasRef.current;
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = WHEEL_SIZE / rect.width;
+        const scaleY = WHEEL_SIZE / rect.height;
+        return {
+            x: (e.clientX - rect.left) * scaleX,
+            y: (e.clientY - rect.top) * scaleY
+        };
+    };
+    const updateHue = useCallback((p) => {
+        const angle = cartesianToAngle(p.x - CX, p.y - CY);
+        const h = Math.round((angle + 90) % 360);
+        setHsla(prev => {
+            const next = { ...prev, h };
+            queueMicrotask(() => emit(next));
+            return next;
+        });
+    }, [emit]);
+    const updateTriangle = useCallback((p) => {
+        setHsla(prev => {
+            const [v0, v1, v2] = getTriangleVertices(CX, CY, TRIANGLE_RADIUS, 0);
+            const clamped = clampToTriangle(p, v0, v1, v2);
+            const { s, l } = trianglePointToSL(clamped, v0, v1, v2);
+            const next = { ...prev, s, l };
+            queueMicrotask(() => emit(next));
+            return next;
+        });
+    }, [emit]);
+    const handlePointerDown = (e) => {
+        const p = getCanvasPos(e);
+        const dx = p.x - CX, dy = p.y - CY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist >= INNER_RADIUS && dist <= WHEEL_SIZE / 2) {
+            dragTarget.current = "hue";
+            updateHue(p);
+        }
+        else if (dist < INNER_RADIUS) {
+            dragTarget.current = "triangle";
+            updateTriangle(p);
+        }
+        canvasRef.current.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+        if (!dragTarget.current)
+            return;
+        const p = getCanvasPos(e);
+        if (dragTarget.current === "hue")
+            updateHue(p);
+        else if (dragTarget.current === "triangle")
+            updateTriangle(p);
+    };
+    const handlePointerUp = () => {
+        dragTarget.current = null;
+    };
+    // --- Alpha slider ---
+    const updateAlphaFromEvent = (e) => {
+        const track = alphaTrackRef.current;
+        const rect = track.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const a = Math.round(ratio * 100) / 100;
+        setHsla(prev => {
+            const next = { ...prev, a };
+            queueMicrotask(() => emit(next));
+            return next;
+        });
+    };
+    const handleAlphaPointerDown = (e) => {
+        dragTarget.current = "alpha";
+        alphaTrackRef.current.setPointerCapture(e.pointerId);
+        updateAlphaFromEvent(e);
+    };
+    const handleAlphaPointerMove = (e) => {
+        if (dragTarget.current !== "alpha")
+            return;
+        updateAlphaFromEvent(e);
+    };
+    // --- Format input ---
+    const handleFieldChange = (field, raw) => {
+        const val = parseFloat(raw);
+        if (isNaN(val))
+            return;
+        let next = { ...hsla };
+        if (format === "hsla") {
+            if (field === "h")
+                next.h = clamp(val, 0, 360);
+            else if (field === "s")
+                next.s = clamp(val, 0, 100);
+            else if (field === "l")
+                next.l = clamp(val, 0, 100);
+            else if (field === "a")
+                next.a = clamp(val, 0, 1);
+        }
+        else if (format === "rgba") {
+            const [r, g, b] = hslToRgb(next.h, next.s, next.l);
+            let nr = r, ng = g, nb = b;
+            if (field === "r")
+                nr = clamp(val, 0, 255);
+            else if (field === "g")
+                ng = clamp(val, 0, 255);
+            else if (field === "b")
+                nb = clamp(val, 0, 255);
+            else if (field === "a") {
+                next.a = clamp(val, 0, 1);
+                setHsla(next);
+                emit(next);
+                return;
+            }
+            const [h, s, l] = rgbToHsl(nr, ng, nb);
+            // preserve hue when achromatic
+            next = { h: s === 0 ? next.h : h, s, l, a: next.a };
+        }
+        setHsla(next);
+        emit(next);
+    };
+    const handleHexInput = (raw) => {
+        const cleaned = raw.startsWith("#") ? raw : `#${raw}`;
+        if (!/^#[0-9a-fA-F]{6}$/.test(cleaned))
+            return;
+        const [r, g, b] = hexToRgb(cleaned);
+        const [h, s, l] = rgbToHsl(r, g, b);
+        const next = { h: s === 0 ? hsla.h : h, s, l, a: hsla.a };
+        setHsla(next);
+        emit(next);
+    };
+    // --- Display ---
+    const displayValue = formatColor(hsla, showAlpha ? (format === "hex" ? "rgba" : format) : format);
+    const swatchColor = useMemo(() => {
+        const [r, g, b] = hslToRgb(hsla.h, hsla.s, hsla.l);
+        return `rgba(${r}, ${g}, ${b}, ${hsla.a})`;
+    }, [hsla.h, hsla.s, hsla.l, hsla.a]);
+    return {
+        hsla,
+        format,
+        setFormat,
+        displayValue,
+        swatchColor,
+        canvasRef,
+        alphaTrackRef,
+        drawWheel,
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        handleAlphaPointerDown,
+        handleAlphaPointerMove,
+        handleFieldChange,
+        handleHexInput
+    };
+}
+
+export { useColorWheel };

package/dist/ColorRow/ColorRow.css.d.ts

@@ -0,0 +1 @@
+export declare const colorRow: string;

package/dist/ColorRow/ColorRow.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type ColorRowProps = {
+    label: string;
+    value: string;
+    showAlpha?: boolean;
+    onChange: (color: string) => void;
+};
+declare function ColorRow({ label, value, showAlpha, onChange }: ColorRowProps): React.ReactElement;
+export { ColorRow };

package/dist/ColorRow/ColorRow.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ColorPicker as MemoizedColorPicker } from '../ColorPicker/ColorPicker.js';
+import { colorRow } from './ColorRow.styles.js';
+
+function ColorRow({ label, value, showAlpha, onChange }) {
+    return (jsxs("div", { className: colorRow, children: [jsx("span", { children: label }), jsx(MemoizedColorPicker, { value: value, showAlpha: showAlpha, onChange: onChange })] }));
+}
+
+export { ColorRow };

package/dist/ColorRow/ColorRow.styles.js

@@ -0,0 +1,5 @@
+import './../styles/ColorRow/ColorRow.css';
+
+var colorRow = 'ColorRow_colorRow__1oalhfi0';
+
+export { colorRow };

package/dist/ColorRow/index.d.ts

@@ -0,0 +1 @@
+export { ColorRow, type ColorRowProps } from "./ColorRow";

package/dist/ColorRow/index.js

@@ -0,0 +1 @@
+export { ColorRow } from './ColorRow.js';

package/dist/ConfirmDialog/ConfirmDialog.css.d.ts

@@ -0,0 +1,7 @@
+export declare const overlay: string;
+export declare const dialog: string;
+export declare const title: string;
+export declare const message: string;
+export declare const actions: string;
+export declare const cancelButton: string;
+export declare const confirmButton: string;

package/dist/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ConfirmDialogProps } from "./ConfirmDialog.type";
+export type { ConfirmDialogProps };
+export declare function ConfirmDialog({ isOpen, onConfirm, onCancel, title, message, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp }: ConfirmDialogProps): React.ReactElement | null;

package/dist/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { useTranslation } from '../i18n/context.js';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+import { overlay, dialog, title, message, actions, cancelButton, confirmButton } from './ConfirmDialog.styles.js';
+
+function ConfirmDialog({ isOpen, onConfirm, onCancel, title: title$1, message: message$1, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp }) {
+    const { t } = useTranslation();
+    const messageId = useId();
+    const dialogRef = useFocusTrap({
+        enabled: isOpen,
+        onEscape: onCancel,
+        initialFocusSelector: `.${cancelButton}`
+    });
+    const confirmLabel = confirmLabelProp ?? t("confirmDialog.confirm");
+    const cancelLabel = cancelLabelProp ?? t("confirmDialog.cancel");
+    if (!isOpen)
+        return null;
+    return (jsx("div", { className: overlay, onClick: onCancel, children: jsxs("div", { ref: dialogRef, className: dialog, onClick: e => e.stopPropagation(), role: "alertdialog", "aria-modal": "true", "aria-describedby": messageId, children: [jsx("h3", { className: title, children: title$1 }), jsx("p", { id: messageId, className: message, children: message$1 }), jsxs("div", { className: actions, children: [jsx("button", { className: cancelButton, onClick: onCancel, children: cancelLabel }), jsx("button", { className: confirmButton, onClick: onConfirm, children: confirmLabel })] })] }) }));
+}
+
+export { ConfirmDialog };

package/dist/ConfirmDialog/ConfirmDialog.styles.js

@@ -0,0 +1,12 @@
+import './../styles/tokens.css';
+import './../styles/ConfirmDialog/ConfirmDialog.css';
+
+var actions = 'ConfirmDialog_actions__115b6yi4';
+var cancelButton = 'ConfirmDialog_cancelButton__115b6yi6 ConfirmDialog_actionButtonBase__115b6yi5';
+var confirmButton = 'ConfirmDialog_confirmButton__115b6yi7 ConfirmDialog_actionButtonBase__115b6yi5';
+var dialog = 'ConfirmDialog_dialog__115b6yi1';
+var message = 'ConfirmDialog_message__115b6yi3';
+var overlay = 'ConfirmDialog_overlay__115b6yi0';
+var title = 'ConfirmDialog_title__115b6yi2';
+
+export { actions, cancelButton, confirmButton, dialog, message, overlay, title };

package/dist/ConfirmDialog/ConfirmDialog.type.d.ts

@@ -0,0 +1,9 @@
+export type ConfirmDialogProps = {
+    isOpen: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+};

package/dist/ConfirmDialog/index.d.ts

@@ -0,0 +1 @@
+export { ConfirmDialog, type ConfirmDialogProps } from "./ConfirmDialog";

package/dist/ConfirmDialog/index.js

@@ -0,0 +1 @@
+export { ConfirmDialog } from './ConfirmDialog.js';

package/dist/ContextMenu/ContextMenu.css.d.ts

@@ -0,0 +1,3 @@
+export declare const contextMenu: string;
+export declare const contextMenuItem: string;
+export declare const deleteVariant: string;

package/dist/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ContextMenuItem, ContextMenuProps } from "./ContextMenu.type";
+export type { ContextMenuItem, ContextMenuProps };
+declare function ContextMenu({ x, y, items, onClose }: ContextMenuProps): React.ReactElement;
+export { ContextMenu };

package/dist/ContextMenu/ContextMenu.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { useContextMenuKeyboard } from './useContextMenuKeyboard.js';
+import { useViewportClamp } from './useViewportClamp.js';
+import { contextMenu, contextMenuItem, deleteVariant } from './ContextMenu.styles.js';
+
+function ContextMenu({ x, y, items, onClose }) {
+    const { menuRef, handleKeyDown } = useContextMenuKeyboard(onClose);
+    useViewportClamp(menuRef, x, y);
+    return (jsx("div", { ref: menuRef, className: contextMenu, style: { left: x, top: y }, role: "menu", onKeyDown: handleKeyDown, children: items.map((item, index) => (jsx("button", { role: "menuitem", tabIndex: -1, onClick: () => {
+                item.onClick();
+                onClose?.();
+            }, className: clsx(contextMenuItem, item.variant === "danger" && deleteVariant), children: item.label }, index))) }));
+}
+
+export { ContextMenu };

package/dist/ContextMenu/ContextMenu.styles.js

@@ -0,0 +1,8 @@
+import './../styles/tokens.css';
+import './../styles/ContextMenu/ContextMenu.css';
+
+var contextMenu = 'ContextMenu_contextMenu__1hifssv0';
+var contextMenuItem = 'ContextMenu_contextMenuItem__1hifssv1';
+var deleteVariant = 'ContextMenu_deleteVariant__1hifssv2';
+
+export { contextMenu, contextMenuItem, deleteVariant };

package/dist/ContextMenu/ContextMenu.type.d.ts

@@ -0,0 +1,11 @@
+export type ContextMenuItem = {
+    label: string;
+    onClick: () => void;
+    variant?: "default" | "danger";
+};
+export type ContextMenuProps = {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    onClose?: () => void;
+};

package/dist/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { ContextMenu, type ContextMenuProps, type ContextMenuItem } from "./ContextMenu";

package/dist/ContextMenu/index.js

@@ -0,0 +1 @@
+export { ContextMenu } from './ContextMenu.js';

package/dist/ContextMenu/useContextMenuKeyboard.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function useContextMenuKeyboard(onClose?: () => void): {
+    menuRef: React.RefObject<HTMLDivElement | null>;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+};

package/dist/ContextMenu/useContextMenuKeyboard.js

@@ -0,0 +1,63 @@
+import { useRef, useEffect } from 'react';
+
+function useContextMenuKeyboard(onClose) {
+    const menuRef = useRef(null);
+    // Auto-focus first item
+    useEffect(() => {
+        const firstItem = menuRef.current?.querySelector('[role="menuitem"]');
+        firstItem?.focus();
+    }, []);
+    // Close on outside click
+    useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose?.();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [onClose]);
+    const handleKeyDown = (e) => {
+        const focusable = menuRef.current?.querySelectorAll('[role="menuitem"]');
+        if (!focusable || focusable.length === 0)
+            return;
+        const focusableItems = Array.from(focusable);
+        const currentIndex = focusableItems.indexOf(document.activeElement);
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                const next = (currentIndex + 1) % focusableItems.length;
+                focusableItems[next].focus();
+                break;
+            }
+            case "ArrowUp": {
+                e.preventDefault();
+                const prev = (currentIndex - 1 + focusableItems.length) % focusableItems.length;
+                focusableItems[prev].focus();
+                break;
+            }
+            case "Home":
+                e.preventDefault();
+                focusableItems[0].focus();
+                break;
+            case "End":
+                e.preventDefault();
+                focusableItems[focusableItems.length - 1].focus();
+                break;
+            case "Escape":
+                e.preventDefault();
+                onClose?.();
+                break;
+            case "Enter": {
+                e.preventDefault();
+                if (currentIndex >= 0) {
+                    focusableItems[currentIndex].click();
+                }
+                break;
+            }
+        }
+    };
+    return { menuRef, handleKeyDown };
+}
+
+export { useContextMenuKeyboard };

package/dist/ContextMenu/useViewportClamp.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useViewportClamp(ref: RefObject<HTMLElement | null>, x: number, y: number): void;

package/dist/ContextMenu/useViewportClamp.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+function useViewportClamp(ref, x, y) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            el.style.left = `${x - (rect.right - window.innerWidth)}px`;
+        }
+        if (rect.bottom > window.innerHeight) {
+            el.style.top = `${y - (rect.bottom - window.innerHeight)}px`;
+        }
+    }, [ref, x, y]);
+}
+
+export { useViewportClamp };

package/dist/DateInput/DateInput.css.d.ts

@@ -0,0 +1,5 @@
+export declare const input: string;
+export declare const inputError: string;
+export declare const segment: string;
+export declare const separator: string;
+export declare const nativeInput: string;

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type DateInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onFocus?: () => void;
+    min?: string;
+    max?: string;
+    className?: string;
+    hasError?: boolean;
+};
+export declare function DateInput({ value, onChange, onFocus, min, max, className, hasError }: DateInputProps): React.ReactElement;

package/dist/DateInput/DateInput.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import clsx from 'clsx';
+import { segment, separator, nativeInput, input, inputError } from './DateInput.styles.js';
+
+function parse(value) {
+    const [y, m, d] = value.split("-").map(Number);
+    return { year: y || 0, month: m || 0, day: d || 0 };
+}
+function DateInput({ value, onChange, onFocus, min, max, className, hasError }) {
+    const nativeRef = useRef(null);
+    const { year, month, day } = parse(value);
+    const handleNativeChange = useCallback((e) => {
+        if (e.target.value)
+            onChange(e.target.value);
+    }, [onChange]);
+    const handleClick = useCallback(() => {
+        nativeRef.current?.showPicker();
+    }, []);
+    return (jsxs("div", { className: clsx(input, hasError && inputError, className), onClick: handleClick, children: [jsx("span", { className: segment, children: year || "YYYY" }), jsx("span", { className: separator, children: "." }), jsx("span", { className: segment, children: month || "MM" }), jsx("span", { className: separator, children: "." }), jsx("span", { className: segment, children: day || "DD" }), jsx("input", { ref: nativeRef, type: "date", className: nativeInput, value: value, min: min, max: max, onChange: handleNativeChange, onFocus: onFocus, tabIndex: -1, "aria-hidden": true })] }));
+}
+
+export { DateInput };

package/dist/DateInput/DateInput.styles.js

@@ -0,0 +1,10 @@
+import './../styles/tokens.css';
+import './../styles/DateInput/DateInput.css';
+
+var input = 'DateInput_input__1p13e9q0';
+var inputError = 'DateInput_inputError__1p13e9q1';
+var nativeInput = 'DateInput_nativeInput__1p13e9q4';
+var segment = 'DateInput_segment__1p13e9q2';
+var separator = 'DateInput_separator__1p13e9q3';
+
+export { input, inputError, nativeInput, segment, separator };

package/dist/DateInput/index.d.ts

@@ -0,0 +1 @@
+export { DateInput, type DateInputProps } from "./DateInput";

package/dist/DateInput/index.js

@@ -0,0 +1 @@
+export { DateInput } from './DateInput.js';

package/dist/IconButton/IconButton.css.d.ts

@@ -0,0 +1,7 @@
+export declare const IconButton: string;
+export declare const icon: string;
+export declare const hasIcon: string;
+export declare const name: string;
+export declare const horizontal: string;
+export declare const folder: string;
+export declare const empty: string;

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { IconButtonProps } from "./IconButton.type";
+export type { IconButtonProps };
+declare const IconButton: React.NamedExoticComponent<IconButtonProps>;
+export { IconButton };

package/dist/IconButton/IconButton.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { clsx } from 'clsx';
+import { useTranslation } from '../i18n/context.js';
+import { icon, hasIcon, name, IconButton as IconButton$1, folder, horizontal, empty } from './IconButton.styles.js';
+
+const IconButton = React.memo(function IconButton(props) {
+    const { type, onClick, layout } = props;
+    const isHorizontal = layout === "horizontal";
+    const { t } = useTranslation();
+    if (type === "folder") {
+        const { name: name$1, iconUrl, onContextMenu, bookmarkId, folderKey } = props;
+        return (jsxs("button", { className: clsx(IconButton$1, folder, isHorizontal && horizontal), onClick: onClick, onContextMenu: e => onContextMenu ? onContextMenu(e) : e.preventDefault(), "aria-label": name$1, "data-bookmark-id": bookmarkId, "data-folder-key": folderKey, children: [jsx("div", { className: clsx(icon, iconUrl && hasIcon), children: iconUrl ? (jsx("img", { src: iconUrl, alt: name$1 })) : (jsx("svg", { width: "60%", height: "60%", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H12L10 5H5C3.89543 5 3 5.89543 3 7Z", fill: "currentColor", opacity: "0.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("span", { className: name, children: name$1 })] }));
+    }
+    if (type === "empty") {
+        return (jsxs("button", { className: clsx(IconButton$1, empty, isHorizontal && horizontal), onClick: onClick, onContextMenu: e => e.preventDefault(), "aria-label": t("iconButton.add"), children: [jsx("div", { className: icon, children: "+" }), jsx("span", { className: name, children: t("iconButton.add") })] }));
+    }
+    const { iconUrl, name: name$1, onContextMenu, bookmarkId, url, folderKey } = props;
+    return (jsxs("button", { className: clsx(IconButton$1, isHorizontal && horizontal), onClick: onClick, onContextMenu: e => onContextMenu ? onContextMenu(e) : e.preventDefault(), "aria-label": name$1, "data-bookmark-id": bookmarkId, "data-url": url, "data-folder-key": folderKey, children: [jsx("div", { className: clsx(icon, iconUrl && hasIcon), children: iconUrl ? (jsx("img", { src: iconUrl, alt: name$1 })) : (name$1.charAt(0).toUpperCase()) }), jsx("span", { className: name, children: name$1 })] }));
+});
+
+export { IconButton };

package/dist/IconButton/IconButton.styles.js

@@ -0,0 +1,12 @@
+import './../styles/tokens.css';
+import './../styles/IconButton/IconButton.css';
+
+var IconButton = 'IconButton_IconButton__18setjd0';
+var empty = 'IconButton_empty__18setjd6';
+var folder = 'IconButton_folder__18setjd5';
+var hasIcon = 'IconButton_hasIcon__18setjd2';
+var horizontal = 'IconButton_horizontal__18setjd4';
+var icon = 'IconButton_icon__18setjd1';
+var name = 'IconButton_name__18setjd3';
+
+export { IconButton, empty, folder, hasIcon, horizontal, icon, name };

package/dist/IconButton/IconButton.type.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+type BaseIconButtonProps = {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    layout?: "vertical" | "horizontal";
+};
+type NormalIconButtonProps = BaseIconButtonProps & {
+    type: "normal";
+    iconUrl?: string;
+    name: string;
+    bookmarkId?: string;
+    url?: string;
+    folderKey?: string;
+    onContextMenu?: (e: React.MouseEvent) => void;
+};
+type FolderIconButtonProps = BaseIconButtonProps & {
+    type: "folder";
+    name: string;
+    iconUrl?: string;
+    bookmarkId?: string;
+    folderKey?: string;
+    onContextMenu?: (e: React.MouseEvent) => void;
+};
+type EmptyIconButtonProps = BaseIconButtonProps & {
+    type: "empty";
+};
+export type IconButtonProps = NormalIconButtonProps | FolderIconButtonProps | EmptyIconButtonProps;
+export {};

package/dist/IconButton/index.d.ts

@@ -0,0 +1 @@
+export { IconButton, type IconButtonProps } from "./IconButton";

package/dist/IconButton/index.js

@@ -0,0 +1 @@
+export { IconButton } from './IconButton.js';

package/dist/Modal/Modal.css.d.ts

@@ -0,0 +1,6 @@
+export declare const overlay: string;
+export declare const modal: Record<"sm" | "md" | "lg", string>;
+export declare const header: string;
+export declare const title: string;
+export declare const closeButton: string;
+export declare const body: string;