@strapi/plugin-color-picker 0.0.0-next.fe88c7878fe2948cfdc68f4867329c1032a618b2 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c

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,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;;;AAS5B,CAAC;MAEYC,eAAkB,GAAA,IAAA;AAC7B,IAAA,qBACEC,cAACJ,CAAAA,OAAAA,EAAAA;QAAQK,cAAe,EAAA,QAAA;QAASC,UAAW,EAAA,QAAA;QAASC,KAAO,EAAA,CAAA;QAAGC,MAAQ,EAAA,CAAA;QAAGC,SAAS,EAAA,IAAA;QAACC,aAAW,EAAA,IAAA;AAC7F,QAAA,QAAA,gBAAAN,cAACO,CAAAA,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,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;;;AAS5B,CAAC;MAEYC,eAAkB,GAAA,IAAA;AAC7B,IAAA,qBACEC,GAACJ,CAAAA,OAAAA,EAAAA;QAAQK,cAAe,EAAA,QAAA;QAASC,UAAW,EAAA,QAAA;QAASC,KAAO,EAAA,CAAA;QAAGC,MAAQ,EAAA,CAAA;QAAGC,SAAS,EAAA,IAAA;QAACC,aAAW,EAAA,IAAA;AAC7F,QAAA,QAAA,gBAAAN,GAACO,CAAAA,UAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/ColorPickerInput.js

@@ -0,0 +1,199 @@
+'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 _interopNamespaceDefault(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__*/_interopNamespaceDefault(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);
+    const color = field.value ?? '#000000';
+    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 : 'neutral600',
+                                                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,
+                                                defaultValue: color,
+                                                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    const color = field.value ?? '#000000';\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 : 'neutral600'}\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                    defaultValue={color}\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","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","placeholder","Hint","Error"],"mappings":"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"}

package/dist/admin/components/ColorPickerInput.mjs

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button, Popover, useComposedRefs, Field, Flex, Typography, Box } 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);
+    const color = field.value ?? '#000000';
+    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 : 'neutral600',
+                                                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,
+                                                defaultValue: color,
+                                                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    const color = field.value ?? '#000000';\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 : 'neutral600'}\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                    defaultValue={color}\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","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","placeholder","Hint","Error"],"mappings":"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"}

package/dist/admin/index.js

@@ -1,9 +1,108 @@
-"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/ru.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/ru.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

package/dist/admin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../admin/src/index.ts"],"sourcesContent":["import { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\nimport { prefixPluginTranslations } from './utils/prefixPluginTranslations';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  /**\n   * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  register(app: any) {\n    app.customFields.register({\n      name: 'color',\n      pluginId: 'color-picker',\n      type: 'string',\n      icon: ColorPickerIcon,\n      intlLabel: {\n        id: getTrad('color-picker.label'),\n        defaultMessage: 'Color',\n      },\n      intlDescription: {\n        id: getTrad('color-picker.description'),\n        defaultMessage: 'Select any color',\n      },\n      components: {\n        Input: async () =>\n          import('./components/ColorPickerInput').then((module) => ({\n            default: module.ColorPickerInput,\n          })),\n      },\n      options: {\n        advanced: [\n          {\n            intlLabel: {\n              id: getTrad('color-picker.options.advanced.regex'),\n              defaultMessage: 'RegExp pattern',\n            },\n            name: 'regex',\n            type: 'text',\n            defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n            description: {\n              id: getTrad('color-picker.options.advanced.regex.description'),\n              defaultMessage: 'The text of the regular expression',\n            },\n          },\n          {\n            sectionTitle: {\n              id: 'global.settings',\n              defaultMessage: 'Settings',\n            },\n            items: [\n              {\n                name: 'required',\n                type: 'checkbox',\n                intlLabel: {\n                  id: getTrad('color-picker.options.advanced.requiredField'),\n                  defaultMessage: 'Required field',\n                },\n                description: {\n                  id: getTrad('color-picker.options.advanced.requiredField.description'),\n                  defaultMessage: \"You won't be able to create an entry if this field is empty\",\n                },\n              },\n            ],\n          },\n        ],\n      },\n    });\n  },\n  async registerTrads({ locales }: { locales: string[] }) {\n    const importedTrads = await Promise.all(\n      locales.map((locale) => {\n        return import(`./translations/${locale}.json`)\n          .then(({ default: data }) => {\n            return {\n              data: prefixPluginTranslations(data, pluginId),\n              locale,\n            };\n          })\n          .catch(() => {\n            return {\n              data: {},\n              locale,\n            };\n          });\n      })\n    );\n\n    return Promise.resolve(importedTrads);\n  },\n};\n"],"names":["register","app","customFields","name","pluginId","type","icon","ColorPickerIcon","intlLabel","id","getTrad","defaultMessage","intlDescription","components","Input","then","module","default","ColorPickerInput","options","advanced","defaultValue","description","sectionTitle","items","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA;AACA,YAAe;AACb;;AAEC;AAEDA,IAAAA,QAAAA,CAAAA,CAASC,GAAQ,EAAA;QACfA,GAAIC,CAAAA,YAAY,CAACF,QAAQ,CAAC;YACxBG,IAAM,EAAA,OAAA;YACNC,QAAU,EAAA,cAAA;YACVC,IAAM,EAAA,QAAA;YACNC,IAAMC,EAAAA,+BAAAA;YACNC,SAAW,EAAA;AACTC,gBAAAA,EAAAA,EAAIC,eAAQ,CAAA,oBAAA,CAAA;gBACZC,cAAgB,EAAA;AAClB,aAAA;YACAC,eAAiB,EAAA;AACfH,gBAAAA,EAAAA,EAAIC,eAAQ,CAAA,0BAAA,CAAA;gBACZC,cAAgB,EAAA;AAClB,aAAA;YACAE,UAAY,EAAA;gBACVC,KAAO,EAAA,UACL,oDAAO,kCAAA,KAAA,CAAiCC,IAAI,CAAC,CAACC,UAAY;AACxDC,4BAAAA,OAAAA,EAASD,OAAOE;yBAClB,CAAA;AACJ,aAAA;YACAC,OAAS,EAAA;gBACPC,QAAU,EAAA;AACR,oBAAA;wBACEZ,SAAW,EAAA;AACTC,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,qCAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;wBACAR,IAAM,EAAA,OAAA;wBACNE,IAAM,EAAA,MAAA;wBACNgB,YAAc,EAAA,oCAAA;wBACdC,WAAa,EAAA;AACXb,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,iDAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB;AACF,qBAAA;AACA,oBAAA;wBACEY,YAAc,EAAA;4BACZd,EAAI,EAAA,iBAAA;4BACJE,cAAgB,EAAA;AAClB,yBAAA;wBACAa,KAAO,EAAA;AACL,4BAAA;gCACErB,IAAM,EAAA,UAAA;gCACNE,IAAM,EAAA,UAAA;gCACNG,SAAW,EAAA;AACTC,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,6CAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA;gCACAW,WAAa,EAAA;AACXb,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,yDAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB;AACF;AACD;AACH;AACD;AACH;AACF,SAAA,CAAA;AACF,KAAA;IACA,MAAMc,aAAAA,CAAAA,CAAc,EAAEC,OAAO,EAAyB,EAAA;QACpD,MAAMC,aAAAA,GAAgB,MAAMC,OAAQC,CAAAA,GAAG,CACrCH,OAAQI,CAAAA,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACX,YAAA,OAAO,iCAAM,CAAC,CAAC,eAAe,EAAEA,MAAO,CAAA,KAAK,CAAC,CAAA,CAC1ChB,IAAI,CAAC,CAAC,EAAEE,OAAAA,EAASe,IAAI,EAAE,GAAA;gBACtB,OAAO;AACLA,oBAAAA,IAAAA,EAAMC,kDAAyBD,IAAM5B,EAAAA,iBAAAA,CAAAA;AACrC2B,oBAAAA;AACF,iBAAA;AACF,aAAA,CAAA,CACCG,KAAK,CAAC,IAAA;gBACL,OAAO;AACLF,oBAAAA,IAAAA,EAAM,EAAC;AACPD,oBAAAA;AACF,iBAAA;AACF,aAAA,CAAA;AACJ,SAAA,CAAA,CAAA;QAGF,OAAOH,OAAAA,CAAQO,OAAO,CAACR,aAAAA,CAAAA;AACzB;AACF,CAAE;;;;"}