@kopexa/color-picker 0.0.2

package/dist/index.js

@@ -0,0 +1,284 @@
+"use client";
+"use strict";
+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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ColorArea: () => ColorArea,
+  ColorField: () => ColorField,
+  ColorPicker: () => ColorPicker,
+  ColorPickerField: () => ColorPickerField,
+  ColorSlider: () => ColorSlider,
+  ColorSwatch: () => ColorSwatch,
+  ColorSwatchPicker: () => ColorSwatchPicker,
+  ColorSwatchPickerItem: () => ColorSwatchPickerItem,
+  ColorThumb: () => ColorThumb,
+  ColorWheel: () => ColorWheel,
+  ColorWheelTrack: () => ColorWheelTrack,
+  SliderOutput: () => SliderOutput,
+  SliderTrack: () => SliderTrack
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/color-picker.tsx
+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
+    }
+  );
+}
+
+// src/color-picker-field.tsx
+var import_i18n2 = require("@kopexa/i18n");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_react = require("react");
+var import_react_aria_components2 = 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_runtime2 = 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_components2.parseColor)(hex);
+    } catch {
+      return (0, import_react_aria_components2.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_utils2.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_runtime2.jsx)(import_react_aria_components2.ColorPicker, { value: color, onChange: handleChange, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.DialogTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatch, { className: "size-5 rounded border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono", children: hexValue })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_aria_components2.Popover,
+      {
+        placement: "bottom start",
+        className: "rounded-lg border border-border bg-popover p-3 shadow-lg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.Dialog, { className: "flex flex-col gap-3 outline-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_react_aria_components2.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_runtime2.jsx)(import_react_aria_components2.ColorThumb, { className: "z-50 size-5 rounded-full border-2 border-white shadow-md" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSlider, { colorSpace: "hsb", channel: "hue", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.SliderTrack, { className: "h-7 w-[192px] rounded-t-none rounded-b-md border border-t-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorThumb, { className: "top-1/2 size-5 rounded-full border-2 border-white shadow-md" }) }) })
+          ] }),
+          !hideHexInput && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Label, { className: "text-sm", children: t.hexLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.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_runtime2.jsx)(import_react_aria_components2.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) })
+        ] })
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorPickerField,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  ColorSwatchPickerItem,
+  ColorThumb,
+  ColorWheel,
+  ColorWheelTrack,
+  SliderOutput,
+  SliderTrack
+});

package/dist/index.mjs

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

package/dist/messages.d.mts

@@ -0,0 +1,16 @@
+declare const messages: {
+    label: {
+        id: string;
+        defaultMessage: string;
+    };
+    hexLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+    pickColor: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+
+export { messages };

package/dist/messages.d.ts

@@ -0,0 +1,16 @@
+declare const messages: {
+    label: {
+        id: string;
+        defaultMessage: string;
+    };
+    hexLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+    pickColor: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+
+export { messages };

package/dist/messages.js

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+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/messages.ts
+var messages_exports = {};
+__export(messages_exports, {
+  messages: () => messages
+});
+module.exports = __toCommonJS(messages_exports);
+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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  messages
+});

package/dist/messages.mjs

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

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@kopexa/color-picker",
+  "version": "0.0.2",
+  "description": "Color picker components for selecting and managing colors.",
+  "keywords": [
+    "color-picker",
+    "color",
+    "picker"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/color-picker"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "@kopexa/theme": "17.22.4"
+  },
+  "dependencies": {
+    "react-aria-components": "^1.7.1",
+    "@kopexa/shared-utils": "17.0.43",
+    "@kopexa/i18n": "17.7.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src"
+  }
+}