@fleetia/components 1.1.1

package/dist/Badge/Badge.css.d.ts

@@ -0,0 +1 @@
+export declare const variant: Record<"default" | "active" | "inactive", string>;

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type BadgeProps = {
+    variant?: "active" | "inactive" | "default";
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function Badge({ variant, children, className }: BadgeProps): React.ReactElement;

package/dist/Badge/Badge.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { variant } from './Badge.styles.js';
+
+function Badge({ variant: variant$1 = "default", children, className }) {
+    return (jsx("span", { role: variant$1 !== "default" ? "status" : undefined, className: clsx(variant[variant$1], className), children: children }));
+}
+
+export { Badge };

package/dist/Badge/Badge.styles.js

@@ -0,0 +1,6 @@
+import './../styles/tokens.css';
+import './../styles/Badge/Badge.css';
+
+var variant = {active:'Badge_variant_active__oin6dk1 Badge_base__oin6dk0',inactive:'Badge_variant_inactive__oin6dk2 Badge_base__oin6dk0','default':'Badge_variant_default__oin6dk3 Badge_base__oin6dk0'};
+
+export { variant };

package/dist/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from "./Badge";

package/dist/Badge/index.js

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

package/dist/Box/Box.css.d.ts

@@ -0,0 +1,4 @@
+export declare const container: string;
+export declare const header: string;
+export declare const title: string;
+export declare const subtitle: string;

package/dist/Box/Box.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type BoxProps = {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function Box({ title, subtitle, children, className }: BoxProps): React.ReactElement;

package/dist/Box/Box.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import { header, title, subtitle, container } from './Box.styles.js';
+
+function Box({ title: title$1, subtitle: subtitle$1, children, className }) {
+    const titleId = useId();
+    const hasHeader = title$1 != null || subtitle$1 != null;
+    const isStringTitle = typeof title$1 === "string";
+    return (jsxs("section", { role: isStringTitle ? "group" : undefined, "aria-labelledby": isStringTitle ? titleId : undefined, className: clsx(container, className), children: [hasHeader && (jsxs("div", { className: header, children: [isStringTitle ? (jsx("span", { id: titleId, className: title, children: title$1 })) : (title$1), subtitle$1 != null &&
+                        (typeof subtitle$1 === "string" ? (jsx("span", { className: subtitle, children: subtitle$1 })) : (subtitle$1))] })), children] }));
+}
+
+export { Box };

package/dist/Box/Box.styles.js

@@ -0,0 +1,9 @@
+import './../styles/tokens.css';
+import './../styles/Box/Box.css';
+
+var container = 'Box_container__141rrv70';
+var header = 'Box_header__141rrv71';
+var subtitle = 'Box_subtitle__141rrv73';
+var title = 'Box_title__141rrv72';
+
+export { container, header, subtitle, title };

package/dist/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";

package/dist/Box/index.js

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

package/dist/Breadcrumb/Breadcrumb.css.d.ts

@@ -0,0 +1,4 @@
+export declare const breadcrumb: string;
+export declare const breadcrumbItem: string;
+export declare const breadcrumbItemActive: string;
+export declare const breadcrumbSeparator: string;

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type BreadcrumbItem = {
+    label: string;
+    onClick?: () => void;
+};
+export type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+};
+declare function Breadcrumb({ items, className }: BreadcrumbProps): React.ReactElement;
+export { Breadcrumb };

package/dist/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { clsx } from 'clsx';
+import { breadcrumbSeparator, breadcrumbItem, breadcrumbItemActive, breadcrumb } from './Breadcrumb.styles.js';
+
+function Breadcrumb({ items, className }) {
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: clsx(breadcrumb, className), children: items.map((item, i) => (jsxs(React.Fragment, { children: [i > 0 && (jsx("span", { className: breadcrumbSeparator, "aria-hidden": "true", children: "/" })), jsx("button", { className: clsx(breadcrumbItem, i === items.length - 1 && breadcrumbItemActive), onClick: item.onClick, "aria-current": i === items.length - 1 ? "page" : undefined, children: item.label })] }, item.label))) }));
+}
+
+export { Breadcrumb };

package/dist/Breadcrumb/Breadcrumb.styles.js

@@ -0,0 +1,9 @@
+import './../styles/tokens.css';
+import './../styles/Breadcrumb/Breadcrumb.css';
+
+var breadcrumb = 'Breadcrumb_breadcrumb__1bb9vx80';
+var breadcrumbItem = 'Breadcrumb_breadcrumbItem__1bb9vx81';
+var breadcrumbItemActive = 'Breadcrumb_breadcrumbItemActive__1bb9vx82';
+var breadcrumbSeparator = 'Breadcrumb_breadcrumbSeparator__1bb9vx83';
+
+export { breadcrumb, breadcrumbItem, breadcrumbItemActive, breadcrumbSeparator };

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from "./Breadcrumb";

package/dist/Breadcrumb/index.js

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

package/dist/Button/Button.css.d.ts

@@ -0,0 +1,2 @@
+export declare const size: Record<"sm" | "md", string>;
+export declare const variant: Record<"primary" | "secondary" | "ghost" | "danger", string>;

package/dist/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type ButtonProps = {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "sm" | "md";
+    disabled?: boolean;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+    "aria-busy"?: boolean;
+};
+export declare function Button({ variant, size, disabled, children, onClick, type, className, "aria-busy": ariaBusy }: ButtonProps): React.ReactElement;

package/dist/Button/Button.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { size, variant } from './Button.styles.js';
+
+function Button({ variant: variant$1 = "secondary", size: size$1 = "md", disabled, children, onClick, type = "button", className, "aria-busy": ariaBusy }) {
+    return (jsx("button", { type: type, disabled: disabled, "aria-disabled": disabled || undefined, "aria-busy": ariaBusy, onClick: onClick, className: clsx(size[size$1], variant[variant$1], className), children: children }));
+}
+
+export { Button };

package/dist/Button/Button.styles.js

@@ -0,0 +1,7 @@
+import './../styles/tokens.css';
+import './../styles/Button/Button.css';
+
+var size = {sm:'Button_size_sm__171gz8m1 Button_base__171gz8m0',md:'Button_size_md__171gz8m2 Button_base__171gz8m0'};
+var variant = {primary:'Button_variant_primary__171gz8m3',secondary:'Button_variant_secondary__171gz8m4',ghost:'Button_variant_ghost__171gz8m5',danger:'Button_variant_danger__171gz8m6'};
+
+export { size, variant };

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from "./Button";

package/dist/Button/index.js

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

package/dist/CardPagination/CardPagination.css.d.ts

@@ -0,0 +1,3 @@
+export declare const cardNav: string;
+export declare const cardNavButton: string;
+export declare const cardNavIndicator: string;

package/dist/CardPagination/CardPagination.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type CardPaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPrev: () => void;
+    onNext: () => void;
+};
+declare const CardPagination: React.NamedExoticComponent<CardPaginationProps>;
+export { CardPagination };

package/dist/CardPagination/CardPagination.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { TriangleUpIcon } from '../icons/TriangleUpIcon.js';
+import { TriangleDownIcon } from '../icons/TriangleDownIcon.js';
+import { useTranslation } from '../i18n/context.js';
+import { cardNav, cardNavButton, cardNavIndicator } from './CardPagination.styles.js';
+
+const CardPagination = React.memo(function CardPagination({ currentPage, totalPages, onPrev, onNext }) {
+    const { t } = useTranslation();
+    const isFirst = currentPage === 0;
+    const isLast = currentPage === totalPages - 1;
+    return (jsxs("nav", { "aria-label": "Pagination", className: cardNav, children: [jsx("button", { className: cardNavButton, onClick: onPrev, "aria-label": t("pagination.previousPage"), disabled: isFirst, "aria-disabled": isFirst, children: jsx(TriangleUpIcon, {}) }), jsxs("span", { className: cardNavIndicator, "aria-current": "page", children: [currentPage + 1, "/", totalPages] }), jsx("button", { className: cardNavButton, onClick: onNext, "aria-label": t("pagination.nextPage"), disabled: isLast, "aria-disabled": isLast, children: jsx(TriangleDownIcon, {}) })] }));
+});
+
+export { CardPagination };

package/dist/CardPagination/CardPagination.styles.js

@@ -0,0 +1,8 @@
+import './../styles/tokens.css';
+import './../styles/CardPagination/CardPagination.css';
+
+var cardNav = 'CardPagination_cardNav__nwr0gc0';
+var cardNavButton = 'CardPagination_cardNavButton__nwr0gc1';
+var cardNavIndicator = 'CardPagination_cardNavIndicator__nwr0gc2';
+
+export { cardNav, cardNavButton, cardNavIndicator };

package/dist/CardPagination/index.d.ts

@@ -0,0 +1 @@
+export { CardPagination, type CardPaginationProps } from "./CardPagination";

package/dist/CardPagination/index.js

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

package/dist/Checkbox/Checkbox.css.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapper: string;
+export declare const input: string;
+export declare const label: string;

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type CheckboxProps = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function Checkbox({ label, checked, onChange, disabled, className }: CheckboxProps): React.ReactElement;

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import { input, label, wrapper } from './Checkbox.styles.js';
+
+function Checkbox({ label: label$1, checked, onChange, disabled, className }) {
+    const inputId = useId();
+    return (jsxs("label", { htmlFor: inputId, className: clsx(wrapper, className), "data-disabled": disabled || undefined, children: [jsx("input", { id: inputId, type: "checkbox", checked: checked, "aria-checked": checked, onChange: e => onChange(e.target.checked), disabled: disabled, className: input }), jsx("span", { className: label, children: label$1 })] }));
+}
+
+export { Checkbox };

package/dist/Checkbox/Checkbox.styles.js

@@ -0,0 +1,8 @@
+import './../styles/tokens.css';
+import './../styles/Checkbox/Checkbox.css';
+
+var input = 'Checkbox_input__9vz1121';
+var label = 'Checkbox_label__9vz1122';
+var wrapper = 'Checkbox_wrapper__9vz1120';
+
+export { input, label, wrapper };

package/dist/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from "./Checkbox";

package/dist/Checkbox/index.js

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

package/dist/CollapsibleSection/CollapsibleSection.css.d.ts

@@ -0,0 +1,3 @@
+export declare const item: string;
+export declare const title: string;
+export declare const body: string;

package/dist/CollapsibleSection/CollapsibleSection.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type CollapsibleSectionProps = {
+    title: string;
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+};
+declare function CollapsibleSection({ title, defaultOpen, children }: CollapsibleSectionProps): React.ReactElement;
+export { CollapsibleSection };

package/dist/CollapsibleSection/CollapsibleSection.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useId } from 'react';
+import { item, title, body } from './CollapsibleSection.styles.js';
+
+function CollapsibleSection({ title: title$1, defaultOpen = false, children }) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const contentId = useId();
+    return (jsxs("div", { className: item, children: [jsx("button", { className: title, onClick: () => setIsOpen(prev => !prev), "aria-expanded": isOpen, "aria-controls": contentId, children: title$1 }), isOpen && (jsx("div", { id: contentId, className: body, children: children }))] }));
+}
+
+export { CollapsibleSection };

package/dist/CollapsibleSection/CollapsibleSection.styles.js

@@ -0,0 +1,8 @@
+import './../styles/tokens.css';
+import './../styles/CollapsibleSection/CollapsibleSection.css';
+
+var body = 'CollapsibleSection_body__1ktikzy2';
+var item = 'CollapsibleSection_item__1ktikzy0';
+var title = 'CollapsibleSection_title__1ktikzy1';
+
+export { body, item, title };

package/dist/CollapsibleSection/index.d.ts

@@ -0,0 +1 @@
+export { CollapsibleSection, type CollapsibleSectionProps } from "./CollapsibleSection";

package/dist/CollapsibleSection/index.js

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

package/dist/ColorPicker/ColorPicker.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const WHEEL_SIZE = 220;
+export declare const RING_WIDTH = 22;
+export declare const INNER_RADIUS: number;
+export declare const TRIANGLE_RADIUS: number;
+export declare const isTouchDevice: boolean;

package/dist/ColorPicker/ColorPicker.constants.js

@@ -0,0 +1,8 @@
+const WHEEL_SIZE = 220;
+const RING_WIDTH = 22;
+const INNER_RADIUS = WHEEL_SIZE / 2 - RING_WIDTH;
+const TRIANGLE_RADIUS = INNER_RADIUS - 4;
+const isTouchDevice = typeof window !== "undefined" &&
+    window.matchMedia("(pointer: coarse)").matches;
+
+export { INNER_RADIUS, RING_WIDTH, TRIANGLE_RADIUS, WHEEL_SIZE, isTouchDevice };

package/dist/ColorPicker/ColorPicker.css.d.ts

@@ -0,0 +1,19 @@
+export declare const wrapper: string;
+export declare const trigger: string;
+export declare const swatch: string;
+export declare const panel: string;
+export declare const canvasWrap: string;
+export declare const alphaSection: string;
+export declare const alphaLabel: string;
+export declare const alphaTrack: string;
+export declare const alphaGradient: string;
+export declare const alphaThumb: string;
+export declare const formatRow: string;
+export declare const formatButton: string;
+export declare const formatButtonActive: string;
+export declare const inputRow: string;
+export declare const fieldGroup: string;
+export declare const fieldInput: string;
+export declare const fieldLabel: string;
+export declare const backdrop: string;
+export declare const nativeInput: string;

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ColorPickerProps } from "./ColorPicker.type";
+declare function ColorPickerSwitch(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+declare const MemoizedColorPicker: React.MemoExoticComponent<typeof ColorPickerSwitch>;
+export { MemoizedColorPicker as ColorPicker };
+export type { ColorPickerProps };

package/dist/ColorPicker/ColorPicker.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+import { rgbToHex, hslToRgb } from '../utils/colorUtils.js';
+import { truncate } from './ColorPicker.utils.js';
+import { useColorWheel } from './useColorWheel.js';
+import { useColorPanel } from './useColorPanel.js';
+import { isTouchDevice } from './ColorPicker.constants.js';
+import { NativeColorPicker } from './NativeColorPicker.js';
+import { trigger, swatch, backdrop, panel, canvasWrap, alphaSection, alphaLabel, alphaTrack, alphaGradient, alphaThumb, formatRow, formatButton, formatButtonActive, inputRow, fieldGroup, fieldInput, fieldLabel, wrapper } from './ColorPicker.styles.js';
+
+function ColorPicker({ value, onChange, showAlpha = false, align = "right", className }) {
+    const { hsla, format, setFormat, displayValue, swatchColor, canvasRef, alphaTrackRef, drawWheel, handlePointerDown, handlePointerMove, handlePointerUp, handleAlphaPointerDown, handleAlphaPointerMove, handleFieldChange, handleHexInput } = useColorWheel(value, onChange, showAlpha);
+    const { open, setOpen, panelPos, wrapperRef, toggleOpen } = useColorPanel(align);
+    useEffect(() => {
+        if (open)
+            drawWheel();
+    }, [open, drawWheel]);
+    return (jsxs("div", { className: clsx(wrapper, className), ref: wrapperRef, children: [jsxs("button", { type: "button", className: trigger, onClick: toggleOpen, children: [jsx("span", { className: swatch, style: { background: swatchColor } }), jsx("span", { children: truncate(displayValue, 22) })] }), open &&
+                createPortal(jsxs(Fragment, { children: [jsx("div", { className: backdrop, onClick: () => setOpen(false), "aria-label": "Close color picker" }), jsxs("div", { className: panel, style: panelPos
+                                ? { top: panelPos.top, left: panelPos.left }
+                                : undefined, role: "dialog", "aria-label": "Color picker", children: [jsx("div", { className: canvasWrap, children: jsx("canvas", { ref: canvasRef, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }) }), showAlpha && (jsxs("div", { className: alphaSection, children: [jsxs("span", { className: alphaLabel, children: ["Alpha: ", Math.round(hsla.a * 100), "%"] }), jsxs("div", { ref: alphaTrackRef, className: alphaTrack, onPointerDown: handleAlphaPointerDown, onPointerMove: handleAlphaPointerMove, onPointerUp: handlePointerUp, children: [jsx("div", { className: alphaGradient, style: {
+                                                        background: `linear-gradient(to right, transparent, ${rgbToHex(...hslToRgb(hsla.h, hsla.s, hsla.l))})`
+                                                    } }), jsx("div", { className: alphaThumb, style: { left: `${hsla.a * 100}%` } })] })] })), jsx("div", { className: formatRow, children: ["hex", "rgba", "hsla"].map(f => (jsx("button", { type: "button", className: clsx(formatButton, format === f && formatButtonActive), onClick: () => setFormat(f), children: f.toUpperCase() }, f))) }), format === "hex" && (jsx("div", { className: inputRow, children: jsxs("div", { className: fieldGroup, children: [jsx("input", { className: fieldInput, value: rgbToHex(...hslToRgb(hsla.h, hsla.s, hsla.l)), onChange: e => handleHexInput(e.target.value) }), jsx("span", { className: fieldLabel, children: "HEX" })] }) })), format === "rgba" &&
+                                    (() => {
+                                        const [r, g, b] = hslToRgb(hsla.h, hsla.s, hsla.l);
+                                        const fields = [
+                                            { label: "R", field: "r", value: r, max: 255 },
+                                            { label: "G", field: "g", value: g, max: 255 },
+                                            { label: "B", field: "b", value: b, max: 255 },
+                                            ...(showAlpha
+                                                ? [{ label: "A", field: "a", value: hsla.a, max: 1 }]
+                                                : [])
+                                        ];
+                                        return (jsx("div", { className: inputRow, children: fields.map(({ label, field, value: v }) => (jsxs("div", { className: fieldGroup, children: [jsx("input", { className: fieldInput, type: "number", step: field === "a" ? 0.01 : 1, value: v, onChange: e => handleFieldChange(field, e.target.value) }), jsx("span", { className: fieldLabel, children: label })] }, field))) }));
+                                    })(), format === "hsla" &&
+                                    (() => {
+                                        const fields = [
+                                            { label: "H", field: "h", value: hsla.h },
+                                            { label: "S", field: "s", value: hsla.s },
+                                            { label: "L", field: "l", value: hsla.l },
+                                            ...(showAlpha
+                                                ? [{ label: "A", field: "a", value: hsla.a }]
+                                                : [])
+                                        ];
+                                        return (jsx("div", { className: inputRow, children: fields.map(({ label, field, value: v }) => (jsxs("div", { className: fieldGroup, children: [jsx("input", { className: fieldInput, type: "number", step: field === "a" ? 0.01 : 1, value: v, onChange: e => handleFieldChange(field, e.target.value) }), jsx("span", { className: fieldLabel, children: label })] }, field))) }));
+                                    })()] })] }), document.body)] }));
+}
+function ColorPickerSwitch(props) {
+    return isTouchDevice ? (jsx(NativeColorPicker, { value: props.value, onChange: props.onChange, className: props.className })) : (jsx(ColorPicker, { ...props }));
+}
+const MemoizedColorPicker = React.memo(ColorPickerSwitch);
+
+export { MemoizedColorPicker as ColorPicker };

package/dist/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,24 @@
+import './../styles/tokens.css';
+import './../styles/ColorPicker/ColorPicker.css';
+
+var alphaGradient = 'ColorPicker_alphaGradient__1m4hgd48';
+var alphaLabel = 'ColorPicker_alphaLabel__1m4hgd46';
+var alphaSection = 'ColorPicker_alphaSection__1m4hgd45';
+var alphaThumb = 'ColorPicker_alphaThumb__1m4hgd49';
+var alphaTrack = 'ColorPicker_alphaTrack__1m4hgd47';
+var backdrop = 'ColorPicker_backdrop__1m4hgd4h';
+var canvasWrap = 'ColorPicker_canvasWrap__1m4hgd44';
+var fieldGroup = 'ColorPicker_fieldGroup__1m4hgd4e';
+var fieldInput = 'ColorPicker_fieldInput__1m4hgd4f';
+var fieldLabel = 'ColorPicker_fieldLabel__1m4hgd4g';
+var formatButton = 'ColorPicker_formatButton__1m4hgd4b';
+var formatButtonActive = 'ColorPicker_formatButtonActive__1m4hgd4c';
+var formatRow = 'ColorPicker_formatRow__1m4hgd4a';
+var inputRow = 'ColorPicker_inputRow__1m4hgd4d';
+var nativeInput = 'ColorPicker_nativeInput__1m4hgd4i';
+var panel = 'ColorPicker_panel__1m4hgd43';
+var swatch = 'ColorPicker_swatch__1m4hgd42';
+var trigger = 'ColorPicker_trigger__1m4hgd41';
+var wrapper = 'ColorPicker_wrapper__1m4hgd40';
+
+export { alphaGradient, alphaLabel, alphaSection, alphaThumb, alphaTrack, backdrop, canvasWrap, fieldGroup, fieldInput, fieldLabel, formatButton, formatButtonActive, formatRow, inputRow, nativeInput, panel, swatch, trigger, wrapper };

package/dist/ColorPicker/ColorPicker.type.d.ts

@@ -0,0 +1,8 @@
+export type ColorPickerProps = {
+    value: string;
+    onChange: (color: string) => void;
+    showAlpha?: boolean;
+    align?: "left" | "right";
+    className?: string;
+};
+export type DragTarget = "hue" | "triangle" | "alpha" | null;

package/dist/ColorPicker/ColorPicker.utils.d.ts

@@ -0,0 +1,6 @@
+import type { Point, ColorFormat } from "../utils/colorUtils";
+export declare function drawTriangle(ctx: CanvasRenderingContext2D, v0: Point, v1: Point, v2: Point, hue: number): void;
+export declare function drawIndicator(ctx: CanvasRenderingContext2D, x: number, y: number, r: number, color: string): void;
+export declare function detectFormat(value: string): ColorFormat;
+export declare function clamp(v: number, min: number, max: number): number;
+export declare function truncate(s: string, max: number): string;

package/dist/ColorPicker/ColorPicker.utils.js

@@ -0,0 +1,49 @@
+function drawTriangle(ctx, v0, v1, v2, hue) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(v0.x, v0.y);
+    ctx.lineTo(v1.x, v1.y);
+    ctx.lineTo(v2.x, v2.y);
+    ctx.closePath();
+    ctx.clip();
+    ctx.fillStyle = "#fff";
+    ctx.fill();
+    const grad1 = ctx.createLinearGradient(v0.x, v0.y, (v1.x + v2.x) / 2, (v1.y + v2.y) / 2);
+    grad1.addColorStop(0, `hsl(${hue}, 100%, 50%)`);
+    grad1.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = grad1;
+    ctx.fill();
+    const grad2 = ctx.createLinearGradient(v2.x, v2.y, (v0.x + v1.x) / 2, (v0.y + v1.y) / 2);
+    grad2.addColorStop(0, "rgba(0,0,0,1)");
+    grad2.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = grad2;
+    ctx.fill();
+    ctx.restore();
+}
+function drawIndicator(ctx, x, y, r, color) {
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.strokeStyle = "#fff";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.strokeStyle = "rgba(0,0,0,0.3)";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+}
+function detectFormat(value) {
+    if (value.match(/^rgba?\(/))
+        return "rgba";
+    if (value.match(/^hsla?\(/))
+        return "hsla";
+    return "hex";
+}
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function truncate(s, max) {
+    return s.length > max ? s.slice(0, max) + "…" : s;
+}
+
+export { clamp, detectFormat, drawIndicator, drawTriangle, truncate };

package/dist/ColorPicker/NativeColorPicker.d.ts

@@ -0,0 +1,2 @@
+import type { ColorPickerProps } from "./ColorPicker.type";
+export declare function NativeColorPicker({ value, onChange, className }: Pick<ColorPickerProps, "value" | "onChange" | "className">): import("react/jsx-runtime").JSX.Element;

package/dist/ColorPicker/NativeColorPicker.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { parseColor, rgbToHex, hslToRgb } from '../utils/colorUtils.js';
+import { truncate } from './ColorPicker.utils.js';
+import { trigger, swatch, nativeInput, wrapper } from './ColorPicker.styles.js';
+
+function NativeColorPicker({ value, onChange, className }) {
+    const hsla = parseColor(value);
+    const hex = rgbToHex(...hslToRgb(hsla.h, hsla.s, hsla.l));
+    return (jsx("div", { className: clsx(wrapper, className), children: jsxs("label", { className: trigger, children: [jsx("span", { className: swatch, style: { background: hex } }), jsx("span", { children: truncate(value, 22) }), jsx("input", { type: "color", value: hex, onChange: e => onChange(e.target.value), className: nativeInput })] }) }));
+}
+
+export { NativeColorPicker };

package/dist/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker, type ColorPickerProps } from "./ColorPicker";

package/dist/ColorPicker/index.js

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

package/dist/ColorPicker/useColorPanel.d.ts

@@ -0,0 +1,11 @@
+import type { ColorPickerProps } from "./ColorPicker.type";
+export declare function useColorPanel(align?: ColorPickerProps["align"]): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    panelPos: {
+        top: number;
+        left: number;
+    } | null;
+    wrapperRef: import("react").RefObject<HTMLDivElement | null>;
+    toggleOpen: () => void;
+};

package/dist/ColorPicker/useColorPanel.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useColorPanel(align = "right") {
+    const [open, setOpen] = useState(false);
+    const [panelPos, setPanelPos] = useState(null);
+    const wrapperRef = useRef(null);
+    const toggleOpen = () => {
+        if (!open) {
+            const rect = wrapperRef.current?.getBoundingClientRect();
+            if (rect) {
+                const panelW = 240;
+                const panelH = 340;
+                const flipUp = rect.bottom + panelH > window.innerHeight;
+                const top = flipUp ? rect.top - panelH - 4 : rect.bottom + 4;
+                let left = align === "left" ? rect.left : rect.right - panelW;
+                // clamp to viewport
+                left = Math.max(4, Math.min(left, window.innerWidth - panelW - 4));
+                setPanelPos({ top, left });
+            }
+        }
+        setOpen(!open);
+    };
+    // Close on Escape
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open]);
+    return { open, setOpen, panelPos, wrapperRef, toggleOpen };
+}
+
+export { useColorPanel };

package/dist/ColorPicker/useColorWheel.d.ts

@@ -0,0 +1,18 @@
+import { type HSLA, type ColorFormat } from "../utils/colorUtils";
+export declare function useColorWheel(value: string, onChange: (color: string) => void, showAlpha: boolean): {
+    hsla: HSLA;
+    format: ColorFormat;
+    setFormat: import("react").Dispatch<import("react").SetStateAction<ColorFormat>>;
+    displayValue: string;
+    swatchColor: string;
+    canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
+    alphaTrackRef: import("react").RefObject<HTMLDivElement | null>;
+    drawWheel: () => void;
+    handlePointerDown: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerMove: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerUp: () => void;
+    handleAlphaPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+    handleAlphaPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
+    handleFieldChange: (field: string, raw: string) => void;
+    handleHexInput: (raw: string) => void;
+};