@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 11.1 kB
Source Map (JSON)
{"version":3,"file":"color-picker.cjs","names":["createSlotComponent","colorPickerStyle","useGroupItemProps","useColorPicker","useInputBorder","useInputPropsContext","ColorSwatch","PipetteIcon"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n Direction,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n UseColorPickerProps,\n UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n extends Pick<ColorPickerProps, \"inputProps\">,\n Pick<\n UseColorPickerReturn,\n \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n > {}\n\nexport interface ColorPickerProps\n extends Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n UseColorPickerProps,\n PopupAnimationProps,\n Pick<\n ColorSelector.RootProps,\n | \"alphaSliderProps\"\n | \"colorSwatches\"\n | \"colorSwatchGroupColumns\"\n | \"colorSwatchGroupLabel\"\n | \"colorSwatchGroupLabelProps\"\n | \"colorSwatchGroupProps\"\n | \"colorSwatchItemProps\"\n | \"hueSliderProps\"\n | \"saturationSliderProps\"\n >,\n ThemeProps<ColorPickerStyle>,\n UseInputBorderProps {\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Direction\n /**\n * If `true`, the color swatch component will be displayed.\n *\n * @default true\n */\n withColorSwatch?: boolean\n /**\n * If `true`, the eye dropper component will be displayed.\n *\n * @default true\n */\n withEyeDropper?: boolean\n /**\n * Props for the color swatch component.\n */\n colorSwatchProps?: ColorPickerColorSwatchProps\n /**\n * Props for content element.\n */\n contentProps?: ColorPickerContentProps\n /**\n * The props for the input element.\n */\n elementProps?: InputGroup.ElementProps\n /**\n * The props for the end element.\n */\n endElementProps?: InputGroup.ElementProps\n /**\n * Props for the eye dropper component.\n */\n eyeDropperProps?: ColorPickerEyeDropperProps\n /**\n * The props for the field component.\n */\n fieldProps?: ColorPickerFieldProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for root element.\n */\n rootProps?: InputGroup.RootProps\n /**\n * Props for the selector component.\n */\n selectorProps?: ColorSelector.RootProps\n /**\n * The props for the start element.\n */\n startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorPickerPropsContext,\n useComponentContext,\n usePropsContext: useColorPickerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n \"color-picker\",\n colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n (props) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n size,\n animationScheme = \"block-start\",\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n duration,\n errorBorderColor,\n focusBorderColor,\n withColorSwatch = true,\n withEyeDropper = true,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n colorSwatchProps,\n contentProps,\n elementProps,\n endElementProps,\n eyeDropperProps,\n fieldProps,\n hueSliderProps,\n inputProps,\n rootProps,\n saturationSliderProps,\n selectorProps,\n startElementProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const {\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n } = useColorPicker(rest)\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const componentContext = useMemo(\n () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n [getEyeDropperProps, getInputProps, inputProps, value],\n )\n\n return (\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n className={className}\n css={css}\n colorScheme={colorScheme}\n {...getRootProps({ ...groupItemProps, ...rootProps })}\n >\n {withColorSwatch ? (\n <InputGroup.Element {...elementProps} {...startElementProps}>\n <ColorPickerColorSwatch {...colorSwatchProps} />\n </InputGroup.Element>\n ) : null}\n\n <Popover.Trigger>\n <ColorPickerField\n {...getFieldProps({ ...varProps, ...fieldProps })}\n />\n </Popover.Trigger>\n\n {withEyeDropper ? (\n <InputGroup.Element\n clickable\n {...elementProps}\n {...endElementProps}\n >\n <ColorPickerEyeDropper\n {...getEyeDropperProps(eyeDropperProps)}\n />\n </InputGroup.Element>\n ) : null}\n </InputGroup.Root>\n\n <ColorPickerContent\n {...cast<ColorPickerContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n <ColorSelector.Root\n size={size}\n {...getSelectorProps({\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...selectorProps,\n })}\n />\n </ColorPickerContent>\n </Popover.Root>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n children: <ColorPickerInput {...getInputProps(inputProps)} />,\n ...props,\n }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n ColorSwatch,\n \"colorSwatch\",\n)(undefined, (props) => {\n const { value } = useComponentContext()\n\n return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n \"div\",\n \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon || children || <PipetteIcon />,\n ...rest,\n })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n Popover.Content,\n \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACEA,6CACF,gBACAC,4CACD;;;;;;AASD,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,kBACA,GAAG,UAEHC,oCAAkB,MAAM;CAC5B,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACEC,wCAAe,KAAK;CACxB,MAAM,+CACG;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;AAMvE,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAO;GAAoB;GAAe;GAAY,GAC/D;GAAC;GAAoB;GAAe;GAAY;GAAM,CACvD;YAIG;GAAc,GAAI;cAChB;IACa;IACN;IACQ;IACb,GAAI,aAAa;KAAE,GAAG;KAAgB,GAAG;KAAW,CAAC;;KAEpD,kBACC;MAAoB,GAAI;MAAc,GAAI;gBACxC,2CAAC,0BAAuB,GAAI,mBAAoB;OAC7B,GACnB;KAEJ,uFACE,2CAAC,oBACC,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;MAAY,CAAC,GACjD,GACc;KAEjB,iBACC;MACE;MACA,GAAI;MACJ,GAAI;gBAEJ,2CAAC,yBACC,GAAI,mBAAmB,gBAAgB,GACvC;OACiB,GACnB;;KACY,EAElB,2CAAC;IACC,+CACE,4DAAgC,aAAa,CAAC,CAC/C;cAED;KACQ;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;MACJ,CAAC;MACF;KACiB;IACR;GACE;GAGvB,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOC,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,mBAAmB,YACvB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,GAAG,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,qBAAqB;AAE3D,QAAO;EACL,UAAU,2CAAC,oBAAiB,GAAI,cAAc,WAAW,GAAI;EAC7D,GAAG;EACJ;EACD;AAIF,MAAM,mBAAmB,YACvB,SACA,QACD,EAAE;AAIH,MAAM,yBAAyB,YAC7BC,kCACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;EAAO;EACpD;AAMF,MAAM,wBAAwB,YAC5B,OACA,aACD,CAAC,SAAY,EAAE,UAAU,KAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,2CAACC,qCAAc;EAC7C,GAAG;EACJ,CAAC;EACF;AAIF,MAAM,qBAAqB,4CAEzB,UACD,EAAE"}