mtrl-addons 0.4.4 → 0.5.1

package/dist/components/colorpicker/api.d.ts

@@ -4,6 +4,8 @@ import { HueFeature } from "./features/hue";
 import { SwatchesFeature } from "./features/swatches";
 import { InputFeature } from "./features/input";
 import { VariantFeature } from "./features/variant";
+import { PipetteFeature } from "./features/pipette";
+import { OpacityFeature } from "./features/opacity";
 /**
  * API configuration options for color picker component
  * @category Components
@@ -30,6 +32,8 @@ interface ApiOptions {
     swatches?: SwatchesFeature;
     input?: InputFeature;
     variant?: VariantFeature;
+    pipette?: PipetteFeature;
+    opacity?: OpacityFeature;
 }
 /**
  * Enhances a color picker component with API methods.

package/dist/components/colorpicker/config.d.ts

@@ -15,7 +15,7 @@ export declare const defaultConfig: ColorPickerConfig;
  * @category Components
  * @internal
  */
-export declare const createBaseConfig: (config?: ColorPickerConfig) => Required<Pick<ColorPickerConfig, "value" | "variant" | "size" | "swatchSize" | "showInput" | "showPreview" | "showSwatches" | "showHue" | "showArea" | "maxSwatches" | "closeOnSelect" | "disabled" | "prefix" | "componentName">> & ColorPickerConfig;
+export declare const createBaseConfig: (config?: ColorPickerConfig) => Required<Pick<ColorPickerConfig, "value" | "variant" | "size" | "density" | "swatchSize" | "showInput" | "showPreview" | "showSwatches" | "showHue" | "showArea" | "maxSwatches" | "closeOnSelect" | "disabled" | "prefix" | "componentName">> & ColorPickerConfig;
 /**
  * Gets the element configuration for withElement.
  *
@@ -84,6 +84,10 @@ export declare const getApiConfig: (comp: {
     hue?: {
         updateHandle: () => void;
     };
+    opacity?: {
+        updateBackground: () => void;
+        updateHandle: () => void;
+    };
     swatches?: {
         update: () => void;
         set: (swatches: unknown[]) => void;
@@ -124,6 +128,10 @@ export declare const getApiConfig: (comp: {
     hue: {
         updateHandle: () => void;
     } | undefined;
+    opacity: {
+        updateBackground: () => void;
+        updateHandle: () => void;
+    } | undefined;
     swatches: {
         update: () => void;
         set: (swatches: unknown[]) => void;

package/dist/components/colorpicker/constants.d.ts

@@ -30,6 +30,15 @@ export declare const COLORPICKER_VARIANTS: {
     /** Dialog - modal overlay centered on screen */
     readonly DIALOG: "dialog";
 };
+/**
+ * Color picker densities
+ */
+export declare const COLORPICKER_DENSITIES: {
+    /** Default density with standard spacing */
+    readonly DEFAULT: "default";
+    /** Compact density - minimal layout, hue bar under area */
+    readonly COMPACT: "compact";
+};
 /**
  * Color picker sizes
  */
@@ -73,6 +82,7 @@ export declare const COLORPICKER_CLASSES: {
     readonly DRAGGING: "colorpicker--dragging";
     readonly OPEN: "colorpicker--open";
     readonly POSITION_TOP: "colorpicker--position-top";
+    readonly COMPACT: "colorpicker--compact";
     readonly INLINE: "colorpicker--inline";
     readonly DROPDOWN: "colorpicker--dropdown";
     readonly DIALOG: "colorpicker--dialog";

package/dist/components/colorpicker/features/area.d.ts

@@ -21,6 +21,13 @@ export declare const withArea: (config: ColorPickerConfig) => <T extends {
     emit: (event: string, data?: unknown) => void;
     state?: ColorPickerState;
     pickerContent?: HTMLElement;
+    input?: {
+        update: () => void;
+    };
+    opacity?: {
+        updateBackground: () => void;
+        updateHandle: () => void;
+    };
 }>(component: T) => T & {
     area: AreaFeature;
     state: ColorPickerState;

package/dist/components/colorpicker/features/hue.d.ts

@@ -1,15 +1,14 @@
-import { createSlider } from "mtrl";
 import { ColorPickerConfig, ColorPickerState } from "../types";
 /**
  * Hue feature interface
  */
 export interface HueFeature {
     element: HTMLElement;
-    slider: ReturnType<typeof createSlider>;
+    handle: HTMLElement;
     updateHandle: () => void;
 }
 /**
- * Adds the hue slider to a color picker component using mtrl slider
+ * Adds a simple hue bar with rainbow gradient and draggable handle
  *
  * @param config - Color picker configuration
  * @returns Component enhancer function

package/dist/components/colorpicker/features/index.d.ts

@@ -12,3 +12,7 @@ export { withInput } from "./input";
 export type { InputFeature } from "./input";
 export { withVariant } from "./variant";
 export type { VariantFeature } from "./variant";
+export { withPipette, isEyeDropperSupported } from "./pipette";
+export type { PipetteFeature, PipetteConfig } from "./pipette";
+export { withOpacity } from "./opacity";
+export type { OpacityFeature } from "./opacity";

package/dist/components/colorpicker/features/opacity.d.ts

@@ -0,0 +1,29 @@
+import { ColorPickerConfig, ColorPickerState } from "../types";
+/**
+ * Opacity feature interface
+ */
+export interface OpacityFeature {
+    element: HTMLElement;
+    handle: HTMLElement;
+    updateHandle: () => void;
+    updateBackground: () => void;
+}
+/**
+ * Adds an opacity/alpha bar with checkerboard background and draggable handle
+ *
+ * @param config - Color picker configuration
+ * @returns Component enhancer function
+ */
+export declare const withOpacity: (config: ColorPickerConfig) => <T extends {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => void;
+    state?: ColorPickerState;
+    pickerContent?: HTMLElement;
+    hue?: {
+        element: HTMLElement;
+    };
+}>(component: T) => T & {
+    opacity: OpacityFeature;
+    state: ColorPickerState;
+};

package/dist/components/colorpicker/features/pipette.d.ts

@@ -0,0 +1,66 @@
+import { ColorPickerConfig, ColorPickerState } from "../types";
+/**
+ * Check if the native EyeDropper API is supported
+ */
+export declare const isEyeDropperSupported: () => boolean;
+/**
+ * Pipette feature interface
+ */
+export interface PipetteFeature {
+    /** The pipette button element */
+    element: HTMLElement;
+    /** Start pipette sampling */
+    pick: () => Promise<string | null>;
+    /** Set the image source for canvas fallback */
+    setImageSource: (source: HTMLImageElement | string | null) => void;
+    /** Check if currently sampling */
+    isSampling: () => boolean;
+    /** Destroy and cleanup */
+    destroy: () => void;
+}
+/**
+ * Pipette configuration options
+ */
+export interface PipetteConfig {
+    /**
+     * Whether to show the pipette button
+     * @default true (when supported or imageSource provided)
+     */
+    showPipette?: boolean;
+    /**
+     * Image source for canvas-based fallback sampling
+     * Can be an HTMLImageElement, URL string, or null
+     */
+    imageSource?: HTMLImageElement | string | null;
+    /**
+     * Callback when pipette sampling starts
+     */
+    onPipetteStart?: () => void;
+    /**
+     * Callback when pipette sampling ends
+     */
+    onPipetteEnd?: (color: string | null) => void;
+}
+declare module "../types" {
+    interface ColorPickerConfig extends PipetteConfig {
+    }
+}
+/**
+ * Adds pipette/color picker functionality to a color picker component
+ *
+ * @param config - Color picker configuration
+ * @returns Component enhancer function
+ */
+export declare const withPipette: (config: ColorPickerConfig) => <T extends {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => void;
+    state?: ColorPickerState;
+    pickerContent?: HTMLElement;
+    input?: {
+        element: HTMLElement;
+    };
+}>(component: T) => T & {
+    pipette: PipetteFeature;
+    state: ColorPickerState;
+};

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

@@ -17,4 +17,6 @@ export { withInput } from "./features/input";
 export type { InputFeature } from "./features/input";
 export { withVariant } from "./features/variant";
 export type { VariantFeature } from "./features/variant";
+export { withPipette, isEyeDropperSupported } from "./features/pipette";
+export type { PipetteFeature, PipetteConfig, } from "./features/pipette";
 export { withAPI } from "./api";

package/dist/components/colorpicker/types.d.ts

@@ -70,11 +70,28 @@ export interface ColorPickerConfig {
      * @default true
      */
     showHue?: boolean;
+    /**
+     * Whether to show the opacity/alpha slider
+     * @default false
+     */
+    showOpacity?: boolean;
+    /**
+     * Initial opacity value (0-1)
+     * @default 1
+     */
+    opacity?: number;
     /**
      * Component size
      * @default 'm'
      */
     size?: ColorPickerSize | string;
+    /**
+     * Component density
+     * - 'default': Standard layout with gaps and padding
+     * - 'compact': Minimal layout, hue bar directly under area, no input/preview
+     * @default 'default'
+     */
+    density?: "default" | "compact";
     /**
      * Swatch size in pixels
      * @default 32
@@ -131,6 +148,49 @@ export interface ColorPickerConfig {
      * Callback during color selection (live preview)
      */
     onInput?: (color: string) => void;
+    /**
+     * Whether to show the pipette button
+     * @default true (when native API supported or imageSource provided)
+     */
+    showPipette?: boolean;
+    /**
+     * Image source for canvas-based pipette sampling
+     * Can be an HTMLImageElement, URL string, or null
+     * When provided, clicking pipette will sample from this image
+     * When not provided and native EyeDropper API is available, uses that instead
+     */
+    imageSource?: HTMLImageElement | string | null;
+    /**
+     * Callback when pipette sampling starts
+     */
+    onPipetteStart?: () => void;
+    /**
+     * Callback when pipette sampling ends
+     * @param color - The picked color (hex) or null if cancelled
+     */
+    onPipetteEnd?: (color: string | null) => void;
+}
+/**
+ * Feature references for cross-feature updates
+ */
+export interface ColorPickerRefs {
+    input?: {
+        update: () => void;
+    };
+    opacity?: {
+        updateBackground: () => void;
+        updateHandle: () => void;
+    };
+    area?: {
+        updateBackground: () => void;
+        updateHandle: () => void;
+    };
+    hue?: {
+        updateHandle: () => void;
+    };
+    swatches?: {
+        update: () => void;
+    };
 }
 /**
  * Internal state for the color picker
@@ -140,14 +200,18 @@ export interface ColorPickerState {
     hsv: HSVColor;
     /** Current hex color */
     hex: string;
+    /** Current opacity/alpha value (0-1) */
+    opacity: number;
     /** Whether the user is currently dragging */
     isDragging: boolean;
-    /** Current drag target ('area' | 'hue' | null) */
-    dragTarget: "area" | "hue" | null;
+    /** Current drag target ('area' | 'hue' | 'opacity' | null) */
+    dragTarget: "area" | "hue" | "opacity" | null;
     /** Available swatches */
     swatches: ColorSwatch[];
     /** Whether the picker is open (dropdown/dialog variants) */
     isOpen: boolean;
+    /** Mutable refs to features for cross-feature updates */
+    refs: ColorPickerRefs;
 }
 /**
  * Color picker component interface
@@ -266,6 +330,34 @@ export interface ColorPickerComponent {
      * @returns True if open
      */
     isOpen: () => boolean;
+    /**
+     * Start pipette color picking
+     * Uses native EyeDropper API when available, or canvas sampling from imageSource
+     * @returns Promise resolving to picked color (hex) or null if cancelled
+     */
+    pickColor: () => Promise<string | null>;
+    /**
+     * Set the image source for canvas-based pipette sampling
+     * @param source - HTMLImageElement, URL string, or null
+     * @returns The component for chaining
+     */
+    setImageSource: (source: HTMLImageElement | string | null) => ColorPickerComponent;
+    /**
+     * Check if pipette is currently sampling
+     * @returns True if sampling is in progress
+     */
+    isSampling: () => boolean;
+    /**
+     * Gets the current opacity value
+     * @returns Opacity value (0-1)
+     */
+    getOpacity: () => number;
+    /**
+     * Sets the opacity value
+     * @param opacity - Opacity value (0-1)
+     * @returns The component for chaining
+     */
+    setOpacity: (opacity: number) => ColorPickerComponent;
     /**
      * Destroys the component and cleans up resources
      */