@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/color-area/styles.d.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorAreaVariants: import("tailwind-variants").TVReturnType<{
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, undefined, {
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, import("tailwind-variants").TVReturnType<{
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorAreaVariants = VariantProps<typeof colorAreaVariants>;

package/dist/components/color-area/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorAreaVariants = tv({
+  defaultVariants: {
+    showDots: false
+  },
+  slots: {
+    base: "color-area",
+    thumb: "color-area__thumb"
+  },
+  variants: {
+    showDots: {
+      false: {},
+      true: {
+        base: "color-area--show-dots"
+      }
+    }
+  }
+});
+
+export { colorAreaVariants };

package/dist/components/color-field/color-field.d.ts

@@ -0,0 +1,9 @@
+import type { ColorFieldVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { Color } from "react-aria-components";
+import { ColorField as ColorFieldPrimitive } from "react-aria-components";
+interface ColorFieldRootProps extends ComponentPropsWithRef<typeof ColorFieldPrimitive>, ColorFieldVariants {
+}
+declare function ColorFieldRoot({ children, className, fullWidth, ...props }: ColorFieldRootProps): import("react/jsx-runtime").JSX.Element;
+export { ColorFieldRoot };
+export type { ColorFieldRootProps, Color as ColorValue };

package/dist/components/color-field/color-field.js

@@ -0,0 +1,29 @@
+"use client";
+import React__default from 'react';
+import { ColorField } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { colorFieldVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ColorFieldRoot({
+  children,
+  className,
+  fullWidth,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => colorFieldVariants({
+    fullWidth
+  }), [fullWidth]);
+  return /*#__PURE__*/jsx(ColorField, {
+    "data-required": dataAttr(props.isRequired),
+    "data-slot": "color-field",
+    ...props,
+    className: composeTwRenderProps(className, styles),
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+}
+
+export { ColorFieldRoot };

package/dist/components/color-field/index.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix } from "../color-input-group";
+import { ColorFieldRoot } from "./color-field";
+export declare const ColorField: typeof ColorFieldRoot & {
+    Group: ({ children, className, fullWidth, variant, ...props }: import("../color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("../color-input-group").ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("../color-input-group").ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Root: typeof ColorFieldRoot;
+    Suffix: ({ children, className, ...props }: import("../color-input-group").ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorField = {
+    Props: ComponentProps<typeof ColorFieldRoot>;
+    RootProps: ComponentProps<typeof ColorFieldRoot>;
+    GroupProps: ComponentProps<typeof ColorInputGroupRoot>;
+    InputProps: ComponentProps<typeof ColorInputGroupInput>;
+    PrefixProps: ComponentProps<typeof ColorInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof ColorInputGroupSuffix>;
+};
+export { ColorFieldRoot };
+export type { ColorFieldRootProps, ColorFieldRootProps as ColorFieldProps, ColorValue, } from "./color-field";
+export { colorFieldVariants } from "./styles";
+export type { ColorFieldVariants } from "./styles";

package/dist/components/color-field/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import '../color-input-group/index.js';
+import { ColorFieldRoot } from './color-field.js';
+export { colorFieldVariants } from './styles.js';
+import { ColorInputGroupSuffix, ColorInputGroupPrefix, ColorInputGroupInput, ColorInputGroupRoot } from '../color-input-group/color-input-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorField = Object.assign(ColorFieldRoot, {
+  Group: ColorInputGroupRoot,
+  Input: ColorInputGroupInput,
+  Prefix: ColorInputGroupPrefix,
+  Root: ColorFieldRoot,
+  Suffix: ColorInputGroupSuffix
+});
+
+export { ColorField, ColorFieldRoot };

package/dist/components/color-field/styles.d.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "color-field", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "color-field", unknown, unknown, undefined>>;
+export type ColorFieldVariants = VariantProps<typeof colorFieldVariants>;

package/dist/components/color-field/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorFieldVariants = tv({
+  base: "color-field",
+  defaultVariants: {
+    fullWidth: false
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "color-field--full-width"
+    }
+  }
+});
+
+export { colorFieldVariants };

package/dist/components/color-input-group/color-input-group.d.ts

@@ -0,0 +1,19 @@
+import type { ColorInputGroupVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { InputProps as InputPrimitiveProps } from "react-aria-components";
+import { Group as GroupPrimitive } from "react-aria-components";
+interface ColorInputGroupRootProps extends ComponentPropsWithRef<typeof GroupPrimitive>, ColorInputGroupVariants {
+}
+declare const ColorInputGroupRoot: ({ children, className, fullWidth, variant, ...props }: ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupPrefixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ColorInputGroupPrefix: ({ children, className, ...props }: ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupInputProps extends InputPrimitiveProps {
+    className?: string;
+}
+declare const ColorInputGroupInput: ({ className, ...props }: ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupSuffixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ColorInputGroupSuffix: ({ children, className, ...props }: ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorInputGroupRoot, ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupSuffix };
+export type { ColorInputGroupRootProps, ColorInputGroupInputProps, ColorInputGroupPrefixProps, ColorInputGroupSuffixProps, };

package/dist/components/color-input-group/color-input-group.js

@@ -0,0 +1,98 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Group, Input } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { colorInputGroupVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const ColorInputGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorInputGroupVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(ColorInputGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Group, {
+      className: composeTwRenderProps(className, slots?.base()),
+      "data-slot": "color-input-group",
+      ...props,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Prefix
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupPrefix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.prefix, className),
+    "data-slot": "color-input-group-prefix",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "color-input-group-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Suffix
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupSuffix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.suffix, className),
+    "data-slot": "color-input-group-suffix",
+    ...props,
+    children: children
+  });
+};
+
+export { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };

package/dist/components/color-input-group/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix } from "./color-input-group";
+export declare const ColorInputGroup: (({ children, className, fullWidth, variant, ...props }: import("./color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Input: ({ className, ...props }: import("./color-input-group").ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("./color-input-group").ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("./color-input-group").ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorInputGroup = {
+    Props: ComponentProps<typeof ColorInputGroupRoot>;
+    RootProps: ComponentProps<typeof ColorInputGroupRoot>;
+    InputProps: ComponentProps<typeof ColorInputGroupInput>;
+    PrefixProps: ComponentProps<typeof ColorInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof ColorInputGroupSuffix>;
+};
+export { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };
+export type { ColorInputGroupRootProps, ColorInputGroupRootProps as ColorInputGroupProps, ColorInputGroupInputProps, ColorInputGroupPrefixProps, ColorInputGroupSuffixProps, } from "./color-input-group";
+export { colorInputGroupVariants } from "./styles";
+export type { ColorInputGroupVariants } from "./styles";

package/dist/components/color-input-group/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ColorInputGroupRoot, ColorInputGroupSuffix, ColorInputGroupPrefix, ColorInputGroupInput } from './color-input-group.js';
+export { colorInputGroupVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorInputGroup = Object.assign(ColorInputGroupRoot, {
+  Input: ColorInputGroupInput,
+  Prefix: ColorInputGroupPrefix,
+  Root: ColorInputGroupRoot,
+  Suffix: ColorInputGroupSuffix
+});
+
+export { ColorInputGroup, ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };

package/dist/components/color-input-group/styles.d.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorInputGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorInputGroupVariants = VariantProps<typeof colorInputGroupVariants>;

package/dist/components/color-input-group/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorInputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  slots: {
+    base: "color-input-group",
+    input: "color-input-group__input",
+    prefix: "color-input-group__prefix",
+    suffix: "color-input-group__suffix"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "color-input-group--full-width"
+      }
+    },
+    variant: {
+      primary: {
+        base: "color-input-group--primary"
+      },
+      secondary: {
+        base: "color-input-group--secondary"
+      }
+    }
+  }
+});
+
+export { colorInputGroupVariants };

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,21 @@
+import type { ColorPickerVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ColorPickerProps as ColorPickerPrimitiveProps } from "react-aria-components";
+import React from "react";
+import { Button as ButtonPrimitive, Popover as PopoverPrimitive } from "react-aria-components";
+interface ColorPickerRootProps extends Omit<ColorPickerPrimitiveProps, "children">, ColorPickerVariants {
+    /** Additional class name for the wrapper element */
+    className?: string;
+    /** Content of the color picker (Trigger, Popover, etc.) */
+    children: React.ReactNode;
+}
+declare const ColorPickerRoot: ({ children, className, ...props }: ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorPickerTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const ColorPickerTrigger: ({ children, className, ...props }: ColorPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorPickerPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const ColorPickerPopover: ({ children, className, placement, ...props }: ColorPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorPickerRoot, ColorPickerTrigger, ColorPickerPopover };
+export type { ColorPickerRootProps, ColorPickerTriggerProps, ColorPickerPopoverProps };

package/dist/components/color-picker/color-picker.js

@@ -0,0 +1,86 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ColorPicker, DialogTrigger, Button, Popover } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { colorPickerVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const ColorPickerContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorPickerVariants(), []);
+  return /*#__PURE__*/jsx(ColorPickerContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorPicker, {
+      ...props,
+      children: /*#__PURE__*/jsx(DialogTrigger, {
+        children: /*#__PURE__*/jsx("div", {
+          className: composeSlotClassName(slots?.base, className),
+          "data-slot": "color-picker",
+          children: children
+        })
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorPickerContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "color-picker-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerPopover = ({
+  children,
+  className,
+  placement = "bottom left",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorPickerContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+
+export { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger } from "./color-picker";
+export declare const ColorPicker: (({ children, className, ...props }: import("./color-picker").ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Popover: ({ children, className, placement, ...props }: import("./color-picker").ColorPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, ...props }: import("./color-picker").ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./color-picker").ColorPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorPicker = {
+    Props: ComponentProps<typeof ColorPickerRoot>;
+    RootProps: ComponentProps<typeof ColorPickerRoot>;
+    TriggerProps: ComponentProps<typeof ColorPickerTrigger>;
+    PopoverProps: ComponentProps<typeof ColorPickerPopover>;
+};
+export { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };
+export type { ColorPickerRootProps, ColorPickerRootProps as ColorPickerProps, ColorPickerTriggerProps, ColorPickerPopoverProps, } from "./color-picker";
+export { colorPickerVariants } from "./styles";
+export type { ColorPickerVariants } from "./styles";

package/dist/components/color-picker/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { ColorPickerRoot, ColorPickerTrigger, ColorPickerPopover } from './color-picker.js';
+export { colorPickerVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorPicker = Object.assign(ColorPickerRoot, {
+  Popover: ColorPickerPopover,
+  Root: ColorPickerRoot,
+  Trigger: ColorPickerTrigger
+});
+
+export { ColorPicker, ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };

package/dist/components/color-picker/styles.d.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            popover?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            popover?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            popover?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorPickerVariants = VariantProps<typeof colorPickerVariants>;

package/dist/components/color-picker/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorPickerVariants = tv({
+  slots: {
+    base: "color-picker",
+    popover: "color-picker__popover",
+    trigger: "color-picker__trigger"
+  }
+});
+
+export { colorPickerVariants };