@kopexa/color-picker 0.0.2

package/dist/color-picker-field.js

@@ -0,0 +1,138 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/color-picker-field.tsx
+var color_picker_field_exports = {};
+__export(color_picker_field_exports, {
+  ColorPickerField: () => ColorPickerField
+});
+module.exports = __toCommonJS(color_picker_field_exports);
+var import_i18n2 = require("@kopexa/i18n");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("react");
+var import_react_aria_components = require("react-aria-components");
+
+// src/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  label: {
+    id: "color-picker.label",
+    defaultMessage: "Color"
+  },
+  hexLabel: {
+    id: "color-picker.hex_label",
+    defaultMessage: "Hex"
+  },
+  pickColor: {
+    id: "color-picker.pick_color",
+    defaultMessage: "Pick a color"
+  }
+});
+
+// src/color-picker-field.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_PRESETS = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#14b8a6",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899",
+  "#6366f1",
+  "#a855f7"
+];
+function ColorPickerField({
+  value,
+  defaultValue = "#3b82f6",
+  onChange,
+  presets = DEFAULT_PRESETS,
+  hidePresets = false,
+  hideHexInput = false,
+  triggerClassName,
+  triggerContent,
+  isDisabled = false
+}) {
+  const intl = (0, import_i18n2.useSafeIntl)();
+  const t = {
+    hexLabel: intl.formatMessage(messages.hexLabel)
+  };
+  const safeParseColor = (hex) => {
+    try {
+      return (0, import_react_aria_components.parseColor)(hex);
+    } catch {
+      return (0, import_react_aria_components.parseColor)("#3b82f6");
+    }
+  };
+  const [color, setColor] = (0, import_react.useState)(
+    () => safeParseColor(value != null ? value : defaultValue)
+  );
+  const handleChange = (newColor) => {
+    setColor(newColor);
+    onChange == null ? void 0 : onChange(newColor.toString("hex"));
+  };
+  const hexValue = color.toString("hex");
+  const triggerClasses = (0, import_shared_utils.cn)(
+    "flex h-10 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm",
+    "hover:bg-accent hover:text-accent-foreground",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    triggerClassName
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorPicker, { value: color, onChange: handleChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.DialogTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatch, { className: "size-5 rounded border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: hexValue })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_aria_components.Popover,
+      {
+        placement: "bottom start",
+        className: "rounded-lg border border-border bg-popover p-3 shadow-lg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.Dialog, { className: "flex flex-col gap-3 outline-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_aria_components.ColorArea,
+              {
+                colorSpace: "hsb",
+                xChannel: "saturation",
+                yChannel: "brightness",
+                className: "h-[164px] w-[192px] rounded-t-md rounded-b-none border border-b-0",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorThumb, { className: "z-50 size-5 rounded-full border-2 border-white shadow-md" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSlider, { colorSpace: "hsb", channel: "hue", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.SliderTrack, { className: "h-7 w-[192px] rounded-t-none rounded-b-md border border-t-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorThumb, { className: "top-1/2 size-5 rounded-full border-2 border-white shadow-md" }) }) })
+          ] }),
+          !hideHexInput && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Label, { className: "text-sm", children: t.hexLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Input, { className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
+          ] }),
+          !hidePresets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) })
+        ] })
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPickerField
+});

package/dist/color-picker-field.mjs

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+import {
+  ColorPickerField
+} from "./chunk-GSZMYL3E.mjs";
+import "./chunk-JFALBXTO.mjs";
+export {
+  ColorPickerField
+};

package/dist/color-picker.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ColorWheelProps as ColorWheelProps$1, ColorPicker as ColorPicker$1, ColorAreaProps, SliderTrackProps, ColorThumbProps, ColorSwatchPickerProps, ColorSwatchPickerItemProps, ColorSwatchProps } from 'react-aria-components';
+
+declare const ColorSlider: react.ForwardRefExoticComponent<react_aria_components.ColorSliderProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorField: react.ForwardRefExoticComponent<react_aria_components.ColorFieldProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorWheelTrack: react.ForwardRefExoticComponent<react_aria_components.ColorWheelTrackProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorPicker: typeof ColorPicker$1;
+declare const SliderOutput: (props: react_aria_components.SliderOutputProps & React.RefAttributes<HTMLOutputElement>) => React.ReactElement | null;
+interface ColorWheelProps extends Omit<ColorWheelProps$1, "outerRadius" | "innerRadius"> {
+    outerRadius?: number;
+    innerRadius?: number;
+}
+declare function ColorWheel({ className, outerRadius, innerRadius, ...props }: ColorWheelProps): react_jsx_runtime.JSX.Element;
+declare function ColorArea({ className, ...props }: ColorAreaProps): react_jsx_runtime.JSX.Element;
+declare function SliderTrack({ className, ...props }: SliderTrackProps): react_jsx_runtime.JSX.Element;
+declare function ColorThumb({ className, ...props }: ColorThumbProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatchPicker({ className, ...props }: ColorSwatchPickerProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatchPickerItem({ className, ...props }: ColorSwatchPickerItemProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatch({ className, ...props }: ColorSwatchProps): react_jsx_runtime.JSX.Element;
+
+export { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorThumb, ColorWheel, type ColorWheelProps, ColorWheelTrack, SliderOutput, SliderTrack };

package/dist/color-picker.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ColorWheelProps as ColorWheelProps$1, ColorPicker as ColorPicker$1, ColorAreaProps, SliderTrackProps, ColorThumbProps, ColorSwatchPickerProps, ColorSwatchPickerItemProps, ColorSwatchProps } from 'react-aria-components';
+
+declare const ColorSlider: react.ForwardRefExoticComponent<react_aria_components.ColorSliderProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorField: react.ForwardRefExoticComponent<react_aria_components.ColorFieldProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorWheelTrack: react.ForwardRefExoticComponent<react_aria_components.ColorWheelTrackProps & react.RefAttributes<HTMLDivElement>>;
+declare const ColorPicker: typeof ColorPicker$1;
+declare const SliderOutput: (props: react_aria_components.SliderOutputProps & React.RefAttributes<HTMLOutputElement>) => React.ReactElement | null;
+interface ColorWheelProps extends Omit<ColorWheelProps$1, "outerRadius" | "innerRadius"> {
+    outerRadius?: number;
+    innerRadius?: number;
+}
+declare function ColorWheel({ className, outerRadius, innerRadius, ...props }: ColorWheelProps): react_jsx_runtime.JSX.Element;
+declare function ColorArea({ className, ...props }: ColorAreaProps): react_jsx_runtime.JSX.Element;
+declare function SliderTrack({ className, ...props }: SliderTrackProps): react_jsx_runtime.JSX.Element;
+declare function ColorThumb({ className, ...props }: ColorThumbProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatchPicker({ className, ...props }: ColorSwatchPickerProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatchPickerItem({ className, ...props }: ColorSwatchPickerItemProps): react_jsx_runtime.JSX.Element;
+declare function ColorSwatch({ className, ...props }: ColorSwatchProps): react_jsx_runtime.JSX.Element;
+
+export { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorThumb, ColorWheel, type ColorWheelProps, ColorWheelTrack, SliderOutput, SliderTrack };

package/dist/color-picker.js

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/color-picker.tsx
+var color_picker_exports = {};
+__export(color_picker_exports, {
+  ColorArea: () => ColorArea,
+  ColorField: () => ColorField,
+  ColorPicker: () => ColorPicker,
+  ColorSlider: () => ColorSlider,
+  ColorSwatch: () => ColorSwatch,
+  ColorSwatchPicker: () => ColorSwatchPicker,
+  ColorSwatchPickerItem: () => ColorSwatchPickerItem,
+  ColorThumb: () => ColorThumb,
+  ColorWheel: () => ColorWheel,
+  ColorWheelTrack: () => ColorWheelTrack,
+  SliderOutput: () => SliderOutput,
+  SliderTrack: () => SliderTrack
+});
+module.exports = __toCommonJS(color_picker_exports);
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react_aria_components = require("react-aria-components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ColorSlider = import_react_aria_components.ColorSlider;
+var ColorField = import_react_aria_components.ColorField;
+var ColorWheelTrack = import_react_aria_components.ColorWheelTrack;
+var ColorPicker = import_react_aria_components.ColorPicker;
+var SliderOutput = import_react_aria_components.SliderOutput;
+function ColorWheel({
+  className,
+  outerRadius = 100,
+  innerRadius = 74,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorWheel,
+    {
+      innerRadius,
+      outerRadius,
+      className: (0, import_react_aria_components.composeRenderProps)(className, (className2) => (0, import_shared_utils.cn)(className2)),
+      ...props
+    }
+  );
+}
+function ColorArea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorArea,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)(
+          "size-[192px] shrink-0 rounded-md border border-border shadow-md",
+          className2
+        )
+      ),
+      ...props
+    }
+  );
+}
+function SliderTrack({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.SliderTrack,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)("h-7 w-[192px] rounded-md border border-border", className2)
+      ),
+      ...props
+    }
+  );
+}
+function ColorThumb({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorThumb,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)(
+          "z-10 box-border size-5 rounded-[50%] border-2 border-white shadow-md",
+          /* Focus Visible */
+          "data-[focus-visible]:size-6",
+          className2
+        )
+      ),
+      ...props
+    }
+  );
+}
+function ColorSwatchPicker({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorSwatchPicker,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)("flex flex-wrap gap-2", className2)
+      ),
+      ...props
+    }
+  );
+}
+function ColorSwatchPickerItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorSwatchPickerItem,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)(
+          "size-8 overflow-hidden rounded-md border-2 ring-offset-background transition-colors",
+          /* Selected */
+          "data-[selected]:border-white",
+          /* Disabled */
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          /* Focus Visible */
+          "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring",
+          className2
+        )
+      ),
+      ...props
+    }
+  );
+}
+function ColorSwatch({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ColorSwatch,
+    {
+      className: (0, import_react_aria_components.composeRenderProps)(
+        className,
+        (className2) => (0, import_shared_utils.cn)("size-8", className2)
+      ),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  ColorSwatchPickerItem,
+  ColorThumb,
+  ColorWheel,
+  ColorWheelTrack,
+  SliderOutput,
+  SliderTrack
+});

package/dist/color-picker.mjs

@@ -0,0 +1,30 @@
+"use client";
+"use client";
+import {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  ColorSwatchPickerItem,
+  ColorThumb,
+  ColorWheel,
+  ColorWheelTrack,
+  SliderOutput,
+  SliderTrack
+} from "./chunk-EA7FR3KG.mjs";
+export {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  ColorSwatchPickerItem,
+  ColorThumb,
+  ColorWheel,
+  ColorWheelTrack,
+  SliderOutput,
+  SliderTrack
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorThumb, ColorWheel, ColorWheelProps, ColorWheelTrack, SliderOutput, SliderTrack } from './color-picker.mjs';
+export { ColorPickerField, ColorPickerFieldProps } from './color-picker-field.mjs';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-aria-components';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorThumb, ColorWheel, ColorWheelProps, ColorWheelTrack, SliderOutput, SliderTrack } from './color-picker.js';
+export { ColorPickerField, ColorPickerFieldProps } from './color-picker-field.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-aria-components';