@strapi/plugin-color-picker 0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad → 0.0.0-next.fc9d26d995624dc886b29f563e1de655d47e6609

package/dist/admin/chunks/ColorPickerInput-BO3lsUmM.js

@@ -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 { g as getTrad } from './index-EI7HMw_Q.js';
+
+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-BO3lsUmM.js.map

package/dist/admin/chunks/ColorPickerInput-BO3lsUmM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput-BO3lsUmM.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":";;;;;;;;;;AAmBA,MAAMA,YAAAA,GAAeC,MAAOC,CAAAA,GAAG;;;;;AAKX,oBAAA,EAAE,CAACC,KAAAA,GAAUA,KAAMC,CAAAA,KAAK,CAAC;;AAE7C,CAAC;AAED,MAAMC,WAAAA,GAAcJ,MAAOK,CAAAA,cAAAA,CAAe;;;;;;;WAO/B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;YAChC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;mBAI1B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;YAMxC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;gBAC7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;AAEjD,CAAC;AAED,MAAMC,iBAAAA,GAAoBR,MAAOS,CAAAA,MAAAA,CAAO;;;;;;;;;WAS7B,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;YAChC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;UAInC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMI,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGnD,CAAC;AAED,MAAMC,kBAAqBZ,GAAAA,MAAAA,CAAOa,OAAQC,CAAAA,OAAO,CAAC;WACvC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;AAE5C,CAAC;AAMM,MAAMQ,iCAAmBC,KAAMC,CAAAA,UAAU,CAC9C,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGrB,KAAAA,EAAO,EAAEsB,YAAAA,GAAAA;AACjE,IAAA,MAAM,CAACC,eAAiBC,EAAAA,kBAAAA,CAAmB,GAAGV,KAAAA,CAAMW,QAAQ,CAAC,KAAA,CAAA;IAC7D,MAAMC,oBAAAA,GAAuBZ,KAAMa,CAAAA,MAAM,CAAoB,IAAA,CAAA;IAC7D,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQC,QAASX,CAAAA,IAAAA,CAAAA;IACvB,MAAMnB,KAAAA,GAAQ6B,KAAME,CAAAA,KAAK,IAAI,SAAA;IAE7B,MAAMC,YAAAA,GAAeC,gBAAgBZ,YAAcI,EAAAA,oBAAAA,CAAAA;IAEnD,qBACES,GAAA,CAACC,MAAMC,IAAI,EAAA;QAACjB,IAAMA,EAAAA,IAAAA;QAAMkB,EAAIlB,EAAAA,IAAAA;AAAMmB,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEvB,IAAMA,EAAAA,IAAAA;QAAMK,QAAUA,EAAAA,QAAAA;AAC1E,QAAA,QAAA,gBAAAmB,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;;AACjD,8BAAAT,GAAA,CAACC,MAAMS,KAAK,EAAA;oBAACC,MAAQ5B,EAAAA,WAAAA;AAAcC,oBAAAA,QAAAA,EAAAA;;AACnC,8BAAAqB,IAAA,CAAC7B,QAAQ0B,IAAI,EAAA;oBAACU,YAAcvB,EAAAA,kBAAAA;;AAC1B,sCAAAW,GAAA,CAACxB,QAAQqC,OAAO,EAAA;AACd,4BAAA,QAAA,gBAAAR,IAAClC,CAAAA,iBAAAA,EAAAA;gCACC2C,GAAKhB,EAAAA,YAAAA;AACLiB,gCAAAA,YAAAA,EAAYtB,aAAc,CAAA;AACxBU,oCAAAA,EAAAA,EAAIa,OAAQ,CAAA,gCAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAC,eAAc,EAAA,oBAAA;gCACdC,eAAc,EAAA,QAAA;gCACdC,eAAehC,EAAAA,eAAAA;gCACfiC,eAAevC,EAAAA,QAAAA;gCACfA,QAAUA,EAAAA,QAAAA;gCACVwC,OAAQ,EAAA,UAAA;gCACRC,IAAK,EAAA,GAAA;;kDAELlB,IAACC,CAAAA,IAAAA,EAAAA;;0DACCN,GAACtC,CAAAA,YAAAA,EAAAA;gDAAaI,KAAOA,EAAAA;;0DACrBkC,GAACwB,CAAAA,UAAAA,EAAAA;gDACCC,KAAO,EAAA;oDAAEC,aAAe,EAAA;AAAY,iDAAA;gDACpCC,SAAWhC,EAAAA,KAAAA,CAAME,KAAK,GAAG+B,SAAY,GAAA,YAAA;gDACrCN,OAAQ,EAAA,OAAA;AAEPxD,gDAAAA,QAAAA,EAAAA;;;;kDAGLkC,GAAC6B,CAAAA,SAAAA,EAAAA;wCAAUC,aAAW,EAAA;;;;;sCAG1BzB,IAAC9B,CAAAA,kBAAAA,EAAAA;4BAAmBwD,UAAY,EAAA,CAAA;;8CAC9B/B,GAACjC,CAAAA,WAAAA,EAAAA;oCAAYD,KAAOA,EAAAA,KAAAA;AAAOkE,oCAAAA,QAAAA,EAAU,CAACC,QAAAA,GAAatC,KAAMqC,CAAAA,QAAQ,CAAC/C,IAAMgD,EAAAA,QAAAA;;8CACxE5B,IAACC,CAAAA,IAAAA,EAAAA;oCAAK4B,UAAY,EAAA,CAAA;oCAAGC,WAAa,EAAA,CAAA;oCAAGC,cAAe,EAAA,UAAA;;sDAClDpC,GAACqC,CAAAA,GAAAA,EAAAA;4CAAIC,YAAc,EAAA,CAAA;AACjB,4CAAA,QAAA,gBAAAtC,GAACwB,CAAAA,UAAAA,EAAAA;gDAAWF,OAAQ,EAAA,OAAA;gDAAQiB,GAAI,EAAA,OAAA;gDAAQZ,SAAU,EAAA,YAAA;0DAC/ClC,aAAc,CAAA;AACbU,oDAAAA,EAAAA,EAAIa,OAAQ,CAAA,2BAAA,CAAA;oDACZC,cAAgB,EAAA;AAClB,iDAAA;;;AAGJ,sDAAAjB,GAAA,CAACC,MAAMC,IAAI,EAAA;oEACTF,GAAA,CAACC,MAAMuC,KAAK,EAAA;AACVzB,gDAAAA,YAAAA,EAAYtB,aAAc,CAAA;AACxBU,oDAAAA,EAAAA,EAAIa,OAAQ,CAAA,+BAAA,CAAA;oDACZC,cAAgB,EAAA;AAClB,iDAAA,CAAA;gDACAQ,KAAO,EAAA;oDAAEC,aAAe,EAAA;AAAY,iDAAA;gDACpCzC,IAAMA,EAAAA,IAAAA;gDACNwD,YAAc3E,EAAAA,KAAAA;gDACd4E,WAAY,EAAA,SAAA;AACZV,gDAAAA,QAAAA,EAAUrC,MAAMqC,QAAQ;AACvB,gDAAA,GAAGnE;;;;;;;;;AAMd,8BAAAmC,GAAA,CAACC,MAAM0C,IAAI,EAAA,EAAA,CAAA;AACX,8BAAA3C,GAAA,CAACC,MAAM2C,KAAK,EAAA,EAAA;;;;AAIpB,CACA;;;;"}

package/dist/admin/chunks/ColorPickerInput-CR8yH0F7.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 index = require('./index-jpCMMLS-.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: index.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: index.getTrad('color-picker.input.format'),
+                                                    defaultMessage: 'HEX'
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Input, {
+                                                "aria-label": formatMessage({
+                                                    id: index.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-CR8yH0F7.js.map

package/dist/admin/chunks/ColorPickerInput-CR8yH0F7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput-CR8yH0F7.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/chunks/cs-BI5icLZ-.js

@@ -0,0 +1,15 @@
+var cs = {
+    "color-picker.description": "Vyberte libovolnou barvu",
+    "color-picker.input.aria-label": "Vstup pro výběr barvy",
+    "color-picker.input.format": "HEX",
+    "color-picker.label": "Barva",
+    "color-picker.options.advanced.regex": "RegExp vzor",
+    "color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
+    "color-picker.options.advanced.requiredField": "Povinné pole",
+    "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
+    "color-picker.settings": "Nastavení",
+    "color-picker.toggle.aria-label": "Přepínač výběru barvy"
+};
+
+export { cs as default };
+//# sourceMappingURL=cs-BI5icLZ-.js.map

package/dist/admin/chunks/cs-BI5icLZ-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-BI5icLZ-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/admin/chunks/cs-DABbHfFT.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var cs = {
+    "color-picker.description": "Vyberte libovolnou barvu",
+    "color-picker.input.aria-label": "Vstup pro výběr barvy",
+    "color-picker.input.format": "HEX",
+    "color-picker.label": "Barva",
+    "color-picker.options.advanced.regex": "RegExp vzor",
+    "color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
+    "color-picker.options.advanced.requiredField": "Povinné pole",
+    "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
+    "color-picker.settings": "Nastavení",
+    "color-picker.toggle.aria-label": "Přepínač výběru barvy"
+};
+
+exports.default = cs;
+//# sourceMappingURL=cs-DABbHfFT.js.map

package/dist/admin/chunks/cs-DABbHfFT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-DABbHfFT.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/admin/chunks/en-DhCwQ39J.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var en = {
+    "color-picker.description": "Select any color",
+    "color-picker.input.aria-label": "Color picker input",
+    "color-picker.input.format": "HEX",
+    "color-picker.label": "Color",
+    "color-picker.options.advanced.regex": "RegExp pattern",
+    "color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
+    "color-picker.options.advanced.requiredField": "Required field",
+    "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
+    "color-picker.settings": "Settings",
+    "color-picker.toggle.aria-label": "Color picker toggle",
+    "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
+    "plugin.description.short": "A Strapi-maintained color picker custom field.",
+    "plugin.name": "Color picker"
+};
+
+exports.default = en;
+//# sourceMappingURL=en-DhCwQ39J.js.map

package/dist/admin/chunks/en-DhCwQ39J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-DhCwQ39J.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/admin/chunks/en-uI0wnpc1.js

@@ -0,0 +1,18 @@
+var en = {
+    "color-picker.description": "Select any color",
+    "color-picker.input.aria-label": "Color picker input",
+    "color-picker.input.format": "HEX",
+    "color-picker.label": "Color",
+    "color-picker.options.advanced.regex": "RegExp pattern",
+    "color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
+    "color-picker.options.advanced.requiredField": "Required field",
+    "color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
+    "color-picker.settings": "Settings",
+    "color-picker.toggle.aria-label": "Color picker toggle",
+    "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
+    "plugin.description.short": "A Strapi-maintained color picker custom field.",
+    "plugin.name": "Color picker"
+};
+
+export { en as default };
+//# sourceMappingURL=en-uI0wnpc1.js.map

package/dist/admin/chunks/en-uI0wnpc1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-uI0wnpc1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/admin/chunks/index-EI7HMw_Q.js

@@ -0,0 +1,136 @@
+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, {})
+    });
+};
+
+const pluginId = 'color-picker';
+
+const getTrad = (id)=>`${pluginId}.${id}`;
+
+const prefixPluginTranslations = (trad, pluginId)=>{
+    return Object.keys(trad).reduce((acc, current)=>{
+        acc[`${pluginId}.${current}`] = trad[current];
+        return acc;
+    }, {});
+};
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case './translations/cs.json': return import('./cs-BI5icLZ-.js');
+    case './translations/en.json': return import('./en-uI0wnpc1.js');
+    case './translations/ru.json': return import('./ru-DQvhmgfv.js');
+    case './translations/sv.json': return import('./sv-soBCY9Rd.js');
+    case './translations/tr.json': return import('./tr-pt6M-dRX.js');
+    case './translations/zh.json': return import('./zh-DQMeqBK7.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,
+            intlLabel: {
+                id: getTrad('color-picker.label'),
+                defaultMessage: 'Color'
+            },
+            intlDescription: {
+                id: getTrad('color-picker.description'),
+                defaultMessage: 'Select any color'
+            },
+            components: {
+                Input: async ()=>import('./ColorPickerInput-BO3lsUmM.js').then((module)=>({
+                            default: module.ColorPickerInput
+                        }))
+            },
+            options: {
+                advanced: [
+                    {
+                        intlLabel: {
+                            id: 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('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('color-picker.options.advanced.requiredField'),
+                                    defaultMessage: 'Required field'
+                                },
+                                description: {
+                                    id: 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(data, pluginId),
+                    locale
+                };
+            }).catch(()=>{
+                return {
+                    data: {},
+                    locale
+                };
+            });
+        }));
+        return Promise.resolve(importedTrads);
+    }
+};
+
+export { getTrad as g, index as i };
+//# sourceMappingURL=index-EI7HMw_Q.js.map