@strapi/plugin-color-picker 0.0.0-experimental.62ebf57bb35846666febb5ee2078fe02fe990f57 → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

package/dist/admin/components/ColorPickerIcon.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+
+const IconBox = styledComponents.styled(designSystem.Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const ColorPickerIcon = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+        justifyContent: "center",
+        alignItems: "center",
+        width: 7,
+        height: 6,
+        hasRadius: true,
+        "aria-hidden": true,
+        children: /*#__PURE__*/ jsxRuntime.jsx(icons.PaintBrush, {})
+    });
+};
+
+exports.ColorPickerIcon = ColorPickerIcon;
+//# sourceMappingURL=ColorPickerIcon.js.map

package/dist/admin/components/ColorPickerIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerIcon.js","sources":["../../../admin/src/components/ColorPickerIcon.tsx"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n  /* Hard code color values */\n  /* to stay consistent between themes */\n  background-color: #f0f0ff; /* primary100 */\n  border: 1px solid #d9d8ff; /* primary200 */\n\n  svg > path {\n    fill: #4945ff; /* primary600 */\n  }\n`;\n\nexport const ColorPickerIcon = () => {\n  return (\n    <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n      <PaintBrush />\n    </IconBox>\n  );\n};\n"],"names":["IconBox","styled","Flex","ColorPickerIcon","_jsx","justifyContent","alignItems","width","height","hasRadius","aria-hidden","PaintBrush"],"mappings":";;;;;;;AAIA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,iBAAAA,CAAK;;;;;;;;;AAS5B,CAAC;MAEYC,eAAAA,GAAkB,IAAA;AAC7B,IAAA,qBACEC,cAAA,CAACJ,OAAAA,EAAAA;QAAQK,cAAAA,EAAe,QAAA;QAASC,UAAAA,EAAW,QAAA;QAASC,KAAAA,EAAO,CAAA;QAAGC,MAAAA,EAAQ,CAAA;QAAGC,SAAS,EAAA,IAAA;QAACC,aAAW,EAAA,IAAA;AAC7F,QAAA,QAAA,gBAAAN,cAAA,CAACO,gBAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/ColorPickerIcon.mjs

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { Flex } from '@strapi/design-system';
+import { PaintBrush } from '@strapi/icons';
+import { styled } from 'styled-components';
+
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const ColorPickerIcon = ()=>{
+    return /*#__PURE__*/ jsx(IconBox, {
+        justifyContent: "center",
+        alignItems: "center",
+        width: 7,
+        height: 6,
+        hasRadius: true,
+        "aria-hidden": true,
+        children: /*#__PURE__*/ jsx(PaintBrush, {})
+    });
+};
+
+export { ColorPickerIcon };
+//# sourceMappingURL=ColorPickerIcon.mjs.map

package/dist/admin/components/ColorPickerIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerIcon.mjs","sources":["../../../admin/src/components/ColorPickerIcon.tsx"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n  /* Hard code color values */\n  /* to stay consistent between themes */\n  background-color: #f0f0ff; /* primary100 */\n  border: 1px solid #d9d8ff; /* primary200 */\n\n  svg > path {\n    fill: #4945ff; /* primary600 */\n  }\n`;\n\nexport const ColorPickerIcon = () => {\n  return (\n    <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n      <PaintBrush />\n    </IconBox>\n  );\n};\n"],"names":["IconBox","styled","Flex","ColorPickerIcon","_jsx","justifyContent","alignItems","width","height","hasRadius","aria-hidden","PaintBrush"],"mappings":";;;;;AAIA,MAAMA,OAAAA,GAAUC,MAAAA,CAAOC,IAAAA,CAAK;;;;;;;;;AAS5B,CAAC;MAEYC,eAAAA,GAAkB,IAAA;AAC7B,IAAA,qBACEC,GAAA,CAACJ,OAAAA,EAAAA;QAAQK,cAAAA,EAAe,QAAA;QAASC,UAAAA,EAAW,QAAA;QAASC,KAAAA,EAAO,CAAA;QAAGC,MAAAA,EAAQ,CAAA;QAAGC,SAAS,EAAA,IAAA;QAACC,aAAW,EAAA,IAAA;AAC7F,QAAA,QAAA,gBAAAN,GAAA,CAACO,UAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/ColorPickerInput.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var admin = require('@strapi/strapi/admin');
+var reactColorful = require('react-colorful');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var getTrad = require('../utils/getTrad.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const ColorPreview = styledComponents.styled.div`
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  background-color: ${(props)=>props.color};
+  border: 1px solid rgba(0, 0, 0, 0.1);
+`;
+const ColorPicker = styledComponents.styled(reactColorful.HexColorPicker)`
+  && {
+    width: 100%;
+    aspect-ratio: 1.5;
+  }
+
+  .react-colorful__pointer {
+    width: ${({ theme })=>theme.spaces[3]};
+    height: ${({ theme })=>theme.spaces[3]};
+  }
+
+  .react-colorful__saturation {
+    border-radius: ${({ theme })=>theme.spaces[1]};
+    border-bottom: none;
+  }
+
+  .react-colorful__hue {
+    border-radius: 10px;
+    height: ${({ theme })=>theme.spaces[3]};
+    margin-top: ${({ theme })=>theme.spaces[2]};
+  }
+`;
+const ColorPickerToggle = styledComponents.styled(designSystem.Button)`
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  svg {
+    width: ${({ theme })=>theme.spaces[2]};
+    height: ${({ theme })=>theme.spaces[2]};
+  }
+
+  svg > path {
+    fill: ${({ theme })=>theme.colors.neutral500};
+    justify-self: flex-end;
+  }
+`;
+const ColorPickerPopover = styledComponents.styled(designSystem.Popover.Content)`
+  padding: ${({ theme })=>theme.spaces[2]};
+  min-height: 270px;
+`;
+const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef)=>{
+    const [showColorPicker, setShowColorPicker] = React__namespace.useState(false);
+    const colorPickerButtonRef = React__namespace.useRef(null);
+    const { formatMessage } = reactIntl.useIntl();
+    const field = admin.useField(name);
+    /**
+     * The color that will show in the field. We can't presume to show black or something
+     *   if no value is currently set (as `null` really corresponds to no color, not
+     *   black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
+    const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+        name: name,
+        id: name,
+        error: field.error,
+        hint: hint,
+        required: required,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 1,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                    action: labelAction,
+                    children: label
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+                    onOpenChange: setShowColorPicker,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(ColorPickerToggle, {
+                                ref: composedRefs,
+                                "aria-label": formatMessage({
+                                    id: getTrad.getTrad('color-picker.toggle.aria-label'),
+                                    defaultMessage: 'Color picker toggle'
+                                }),
+                                "aria-controls": "color-picker-value",
+                                "aria-haspopup": "dialog",
+                                "aria-expanded": showColorPicker,
+                                "aria-disabled": disabled,
+                                disabled: disabled,
+                                variant: "tertiary",
+                                size: "L",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(ColorPreview, {
+                                                color: color
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                style: {
+                                                    textTransform: 'uppercase'
+                                                },
+                                                textColor: field.value ? undefined : 'neutral500',
+                                                variant: "omega",
+                                                children: color
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(icons.CaretDown, {
+                                        "aria-hidden": true
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(ColorPickerPopover, {
+                            sideOffset: 4,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(ColorPicker, {
+                                    color: color,
+                                    onChange: (hexValue)=>field.onChange(name, hexValue)
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    paddingTop: 3,
+                                    paddingLeft: 4,
+                                    justifyContent: "flex-end",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                            paddingRight: 2,
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                variant: "omega",
+                                                tag: "label",
+                                                textColor: "neutral600",
+                                                children: formatMessage({
+                                                    id: getTrad.getTrad('color-picker.input.format'),
+                                                    defaultMessage: 'HEX'
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Input, {
+                                                "aria-label": formatMessage({
+                                                    id: getTrad.getTrad('color-picker.input.aria-label'),
+                                                    defaultMessage: 'Color picker input'
+                                                }),
+                                                style: {
+                                                    textTransform: 'uppercase'
+                                                },
+                                                name: name,
+                                                // No default value. If nothing is selected, the input will be empty.
+                                                defaultValue: field.value ?? '',
+                                                // Here we default to #000000 as the placeholder, because, absent a
+                                                //   user defined placeholder, we want to indicate the desired format.
+                                                placeholder: "#000000",
+                                                onChange: field.onChange,
+                                                ...props
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+            ]
+        })
+    });
+});
+
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=ColorPickerInput.js.map

package/dist/admin/components/ColorPickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput.js","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Box,\n  Field,\n  Flex,\n  Popover,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  margin-right: 10px;\n  background-color: ${(props) => props.color};\n  border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n  && {\n    width: 100%;\n    aspect-ratio: 1.5;\n  }\n\n  .react-colorful__pointer {\n    width: ${({ theme }) => theme.spaces[3]};\n    height: ${({ theme }) => theme.spaces[3]};\n  }\n\n  .react-colorful__saturation {\n    border-radius: ${({ theme }) => theme.spaces[1]};\n    border-bottom: none;\n  }\n\n  .react-colorful__hue {\n    border-radius: 10px;\n    height: ${({ theme }) => theme.spaces[3]};\n    margin-top: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n  & > span {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  svg {\n    width: ${({ theme }) => theme.spaces[2]};\n    height: ${({ theme }) => theme.spaces[2]};\n  }\n\n  svg > path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n    justify-self: flex-end;\n  }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n  padding: ${({ theme }) => theme.spaces[2]};\n  min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n  labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n  ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n    const [showColorPicker, setShowColorPicker] = React.useState(false);\n    const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n    const { formatMessage } = useIntl();\n    const field = useField(name);\n\n    /**\n     * The color that will show in the field. We can't presume to show black or something\n     *   if no value is currently set (as `null` really corresponds to no color, not\n     *   black), so default to empty string if nothing else is available. */\n    const color = field.value ?? props.placeholder ?? '';\n\n    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n    return (\n      <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          <Popover.Root onOpenChange={setShowColorPicker}>\n            <Popover.Trigger>\n              <ColorPickerToggle\n                ref={composedRefs}\n                aria-label={formatMessage({\n                  id: getTrad('color-picker.toggle.aria-label'),\n                  defaultMessage: 'Color picker toggle',\n                })}\n                aria-controls=\"color-picker-value\"\n                aria-haspopup=\"dialog\"\n                aria-expanded={showColorPicker}\n                aria-disabled={disabled}\n                disabled={disabled}\n                variant=\"tertiary\"\n                size=\"L\"\n              >\n                <Flex>\n                  <ColorPreview color={color} />\n                  <Typography\n                    style={{ textTransform: 'uppercase' }}\n                    textColor={field.value ? undefined : 'neutral500'}\n                    variant=\"omega\"\n                  >\n                    {color}\n                  </Typography>\n                </Flex>\n                <CaretDown aria-hidden />\n              </ColorPickerToggle>\n            </Popover.Trigger>\n            <ColorPickerPopover sideOffset={4}>\n              <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n              <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n                <Box paddingRight={2}>\n                  <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n                    {formatMessage({\n                      id: getTrad('color-picker.input.format'),\n                      defaultMessage: 'HEX',\n                    })}\n                  </Typography>\n                </Box>\n                <Field.Root>\n                  <Field.Input\n                    aria-label={formatMessage({\n                      id: getTrad('color-picker.input.aria-label'),\n                      defaultMessage: 'Color picker input',\n                    })}\n                    style={{ textTransform: 'uppercase' }}\n                    name={name}\n                    // No default value. If nothing is selected, the input will be empty.\n                    defaultValue={field.value ?? ''}\n                    // Here we default to #000000 as the placeholder, because, absent a\n                    //   user defined placeholder, we want to indicate the desired format.\n                    placeholder=\"#000000\"\n                    onChange={field.onChange}\n                    {...props}\n                  />\n                </Field.Root>\n              </Flex>\n            </ColorPickerPopover>\n          </Popover.Root>\n          <Field.Hint />\n          <Field.Error />\n        </Flex>\n      </Field.Root>\n    );\n  }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}

package/dist/admin/components/ColorPickerInput.mjs

@@ -0,0 +1,184 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useComposedRefs, Field, Flex, Popover, Typography, Box, Button } from '@strapi/design-system';
+import { CaretDown } from '@strapi/icons';
+import { useField } from '@strapi/strapi/admin';
+import { HexColorPicker } from 'react-colorful';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTrad } from '../utils/getTrad.mjs';
+
+const ColorPreview = styled.div`
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  background-color: ${(props)=>props.color};
+  border: 1px solid rgba(0, 0, 0, 0.1);
+`;
+const ColorPicker = styled(HexColorPicker)`
+  && {
+    width: 100%;
+    aspect-ratio: 1.5;
+  }
+
+  .react-colorful__pointer {
+    width: ${({ theme })=>theme.spaces[3]};
+    height: ${({ theme })=>theme.spaces[3]};
+  }
+
+  .react-colorful__saturation {
+    border-radius: ${({ theme })=>theme.spaces[1]};
+    border-bottom: none;
+  }
+
+  .react-colorful__hue {
+    border-radius: 10px;
+    height: ${({ theme })=>theme.spaces[3]};
+    margin-top: ${({ theme })=>theme.spaces[2]};
+  }
+`;
+const ColorPickerToggle = styled(Button)`
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  svg {
+    width: ${({ theme })=>theme.spaces[2]};
+    height: ${({ theme })=>theme.spaces[2]};
+  }
+
+  svg > path {
+    fill: ${({ theme })=>theme.colors.neutral500};
+    justify-self: flex-end;
+  }
+`;
+const ColorPickerPopover = styled(Popover.Content)`
+  padding: ${({ theme })=>theme.spaces[2]};
+  min-height: 270px;
+`;
+const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef)=>{
+    const [showColorPicker, setShowColorPicker] = React.useState(false);
+    const colorPickerButtonRef = React.useRef(null);
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    /**
+     * The color that will show in the field. We can't presume to show black or something
+     *   if no value is currently set (as `null` really corresponds to no color, not
+     *   black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
+    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
+    return /*#__PURE__*/ jsx(Field.Root, {
+        name: name,
+        id: name,
+        error: field.error,
+        hint: hint,
+        required: required,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 1,
+            children: [
+                /*#__PURE__*/ jsx(Field.Label, {
+                    action: labelAction,
+                    children: label
+                }),
+                /*#__PURE__*/ jsxs(Popover.Root, {
+                    onOpenChange: setShowColorPicker,
+                    children: [
+                        /*#__PURE__*/ jsx(Popover.Trigger, {
+                            children: /*#__PURE__*/ jsxs(ColorPickerToggle, {
+                                ref: composedRefs,
+                                "aria-label": formatMessage({
+                                    id: getTrad('color-picker.toggle.aria-label'),
+                                    defaultMessage: 'Color picker toggle'
+                                }),
+                                "aria-controls": "color-picker-value",
+                                "aria-haspopup": "dialog",
+                                "aria-expanded": showColorPicker,
+                                "aria-disabled": disabled,
+                                disabled: disabled,
+                                variant: "tertiary",
+                                size: "L",
+                                children: [
+                                    /*#__PURE__*/ jsxs(Flex, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(ColorPreview, {
+                                                color: color
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                style: {
+                                                    textTransform: 'uppercase'
+                                                },
+                                                textColor: field.value ? undefined : 'neutral500',
+                                                variant: "omega",
+                                                children: color
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(CaretDown, {
+                                        "aria-hidden": true
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(ColorPickerPopover, {
+                            sideOffset: 4,
+                            children: [
+                                /*#__PURE__*/ jsx(ColorPicker, {
+                                    color: color,
+                                    onChange: (hexValue)=>field.onChange(name, hexValue)
+                                }),
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    paddingTop: 3,
+                                    paddingLeft: 4,
+                                    justifyContent: "flex-end",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Box, {
+                                            paddingRight: 2,
+                                            children: /*#__PURE__*/ jsx(Typography, {
+                                                variant: "omega",
+                                                tag: "label",
+                                                textColor: "neutral600",
+                                                children: formatMessage({
+                                                    id: getTrad('color-picker.input.format'),
+                                                    defaultMessage: 'HEX'
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Field.Root, {
+                                            children: /*#__PURE__*/ jsx(Field.Input, {
+                                                "aria-label": formatMessage({
+                                                    id: getTrad('color-picker.input.aria-label'),
+                                                    defaultMessage: 'Color picker input'
+                                                }),
+                                                style: {
+                                                    textTransform: 'uppercase'
+                                                },
+                                                name: name,
+                                                // No default value. If nothing is selected, the input will be empty.
+                                                defaultValue: field.value ?? '',
+                                                // Here we default to #000000 as the placeholder, because, absent a
+                                                //   user defined placeholder, we want to indicate the desired format.
+                                                placeholder: "#000000",
+                                                onChange: field.onChange,
+                                                ...props
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Field.Hint, {}),
+                /*#__PURE__*/ jsx(Field.Error, {})
+            ]
+        })
+    });
+});
+
+export { ColorPickerInput };
+//# sourceMappingURL=ColorPickerInput.mjs.map

package/dist/admin/components/ColorPickerInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput.mjs","sources":["../../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Box,\n  Field,\n  Flex,\n  Popover,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { type InputProps, useField } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  margin-right: 10px;\n  background-color: ${(props) => props.color};\n  border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n  && {\n    width: 100%;\n    aspect-ratio: 1.5;\n  }\n\n  .react-colorful__pointer {\n    width: ${({ theme }) => theme.spaces[3]};\n    height: ${({ theme }) => theme.spaces[3]};\n  }\n\n  .react-colorful__saturation {\n    border-radius: ${({ theme }) => theme.spaces[1]};\n    border-bottom: none;\n  }\n\n  .react-colorful__hue {\n    border-radius: 10px;\n    height: ${({ theme }) => theme.spaces[3]};\n    margin-top: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n  & > span {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  svg {\n    width: ${({ theme }) => theme.spaces[2]};\n    height: ${({ theme }) => theme.spaces[2]};\n  }\n\n  svg > path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n    justify-self: flex-end;\n  }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n  padding: ${({ theme }) => theme.spaces[2]};\n  min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps & {\n  labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n  ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n    const [showColorPicker, setShowColorPicker] = React.useState(false);\n    const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n    const { formatMessage } = useIntl();\n    const field = useField(name);\n\n    /**\n     * The color that will show in the field. We can't presume to show black or something\n     *   if no value is currently set (as `null` really corresponds to no color, not\n     *   black), so default to empty string if nothing else is available. */\n    const color = field.value ?? props.placeholder ?? '';\n\n    const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n    return (\n      <Field.Root name={name} id={name} error={field.error} hint={hint} required={required}>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          <Popover.Root onOpenChange={setShowColorPicker}>\n            <Popover.Trigger>\n              <ColorPickerToggle\n                ref={composedRefs}\n                aria-label={formatMessage({\n                  id: getTrad('color-picker.toggle.aria-label'),\n                  defaultMessage: 'Color picker toggle',\n                })}\n                aria-controls=\"color-picker-value\"\n                aria-haspopup=\"dialog\"\n                aria-expanded={showColorPicker}\n                aria-disabled={disabled}\n                disabled={disabled}\n                variant=\"tertiary\"\n                size=\"L\"\n              >\n                <Flex>\n                  <ColorPreview color={color} />\n                  <Typography\n                    style={{ textTransform: 'uppercase' }}\n                    textColor={field.value ? undefined : 'neutral500'}\n                    variant=\"omega\"\n                  >\n                    {color}\n                  </Typography>\n                </Flex>\n                <CaretDown aria-hidden />\n              </ColorPickerToggle>\n            </Popover.Trigger>\n            <ColorPickerPopover sideOffset={4}>\n              <ColorPicker color={color} onChange={(hexValue) => field.onChange(name, hexValue)} />\n              <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n                <Box paddingRight={2}>\n                  <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n                    {formatMessage({\n                      id: getTrad('color-picker.input.format'),\n                      defaultMessage: 'HEX',\n                    })}\n                  </Typography>\n                </Box>\n                <Field.Root>\n                  <Field.Input\n                    aria-label={formatMessage({\n                      id: getTrad('color-picker.input.aria-label'),\n                      defaultMessage: 'Color picker input',\n                    })}\n                    style={{ textTransform: 'uppercase' }}\n                    name={name}\n                    // No default value. If nothing is selected, the input will be empty.\n                    defaultValue={field.value ?? ''}\n                    // Here we default to #000000 as the placeholder, because, absent a\n                    //   user defined placeholder, we want to indicate the desired format.\n                    placeholder=\"#000000\"\n                    onChange={field.onChange}\n                    {...props}\n                  />\n                </Field.Root>\n              </Flex>\n            </ColorPickerPopover>\n          </Popover.Root>\n          <Field.Hint />\n          <Field.Error />\n        </Flex>\n      </Field.Root>\n    );\n  }\n);\n"],"names":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}

package/dist/admin/index.js

@@ -1,9 +1,110 @@
-"use strict";
-const index = require("../_chunks/index-OJYEuoCq.js");
-require("@strapi/helper-plugin");
-require("react/jsx-runtime");
-require("@strapi/design-system");
-require("@strapi/icons");
-require("styled-components");
-module.exports = index.index;
+'use strict';
+
+var ColorPickerIcon = require('./components/ColorPickerIcon.js');
+var pluginId = require('./pluginId.js');
+var getTrad = require('./utils/getTrad.js');
+var prefixPluginTranslations = require('./utils/prefixPluginTranslations.js');
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case './translations/cs.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/cs.json.js')); });
+    case './translations/en.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/en.json.js')); });
+    case './translations/es.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/es.json.js')); });
+    case './translations/ru.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/ru.json.js')); });
+    case './translations/sk.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/sk.json.js')); });
+    case './translations/sv.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/sv.json.js')); });
+    case './translations/tr.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/tr.json.js')); });
+    case './translations/uk.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/uk.json.js')); });
+    case './translations/zh.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/zh.json.js')); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+// eslint-disable-next-line import/no-default-export
+var index = {
+    /**
+   * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.
+   */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    register (app) {
+        app.customFields.register({
+            name: 'color',
+            pluginId: 'color-picker',
+            type: 'string',
+            icon: ColorPickerIcon.ColorPickerIcon,
+            intlLabel: {
+                id: getTrad.getTrad('color-picker.label'),
+                defaultMessage: 'Color'
+            },
+            intlDescription: {
+                id: getTrad.getTrad('color-picker.description'),
+                defaultMessage: 'Select any color'
+            },
+            components: {
+                Input: async ()=>Promise.resolve().then(function () { return require('./components/ColorPickerInput.js'); }).then((module)=>({
+                            default: module.ColorPickerInput
+                        }))
+            },
+            options: {
+                advanced: [
+                    {
+                        intlLabel: {
+                            id: getTrad.getTrad('color-picker.options.advanced.regex'),
+                            defaultMessage: 'RegExp pattern'
+                        },
+                        name: 'regex',
+                        type: 'text',
+                        defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
+                        description: {
+                            id: getTrad.getTrad('color-picker.options.advanced.regex.description'),
+                            defaultMessage: 'The text of the regular expression'
+                        }
+                    },
+                    {
+                        sectionTitle: {
+                            id: 'global.settings',
+                            defaultMessage: 'Settings'
+                        },
+                        items: [
+                            {
+                                name: 'required',
+                                type: 'checkbox',
+                                intlLabel: {
+                                    id: getTrad.getTrad('color-picker.options.advanced.requiredField'),
+                                    defaultMessage: 'Required field'
+                                },
+                                description: {
+                                    id: getTrad.getTrad('color-picker.options.advanced.requiredField.description'),
+                                    defaultMessage: "You won't be able to create an entry if this field is empty"
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        });
+    },
+    async registerTrads ({ locales }) {
+        const importedTrads = await Promise.all(locales.map((locale)=>{
+            return __variableDynamicImportRuntime1__(`./translations/${locale}.json`).then(({ default: data })=>{
+                return {
+                    data: prefixPluginTranslations.prefixPluginTranslations(data, pluginId.pluginId),
+                    locale
+                };
+            }).catch(()=>{
+                return {
+                    data: {},
+                    locale
+                };
+            });
+        }));
+        return Promise.resolve(importedTrads);
+    }
+};
+
+module.exports = index;
 //# sourceMappingURL=index.js.map