diff --git a/website/theme/components/ColorPickerSwatch/ColorArea.js b/website/theme/components/ColorPickerSwatch/ColorArea.js new file mode 100644 index 000000000..41f306df3 --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/ColorArea.js @@ -0,0 +1,70 @@ +import { useColorArea } from "@react-aria/color"; +import { useFocusRing } from "@react-aria/focus"; +import { useColorAreaState } from "@react-stately/color"; +import { useRef } from "react"; + +import { THUMB_SIZE, FOCUSED_THUMB_SIZE, SIZE, BORDER_RADIUS } from "./Shared"; + +export function ColorArea(props) { + const inputXRef = useRef(null); + const inputYRef = useRef(null); + const containerRef = useRef(null); + + const state = useColorAreaState(props); + + const { isDisabled } = props; + + const { + colorAreaProps, + gradientProps, + xInputProps, + yInputProps, + thumbProps, + } = useColorArea({ ...props, inputXRef, inputYRef, containerRef }, state); + + const { focusProps, isFocusVisible } = useFocusRing(); + + return ( +
+
+
+ + +
+
+ ); +} diff --git a/website/theme/components/ColorPickerSwatch/ColorSlider.js b/website/theme/components/ColorPickerSwatch/ColorSlider.js new file mode 100644 index 000000000..e382c01df --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/ColorSlider.js @@ -0,0 +1,82 @@ +import { useColorSlider } from "@react-aria/color"; +import { useFocusRing } from "@react-aria/focus"; +import { useLocale } from "@react-aria/i18n"; +import { VisuallyHidden } from "@react-aria/visually-hidden"; +import { useColorSliderState } from "@react-stately/color"; +import { useRef } from "react"; + +// import { FOCUSED_THUMB_SIZE, SIZE } from "./Shared"; + +export function ColorSlider(props) { + let { locale } = useLocale(); + let state = useColorSliderState({ ...props, locale }); + let trackRef = useRef(null); + let inputRef = useRef(null); + + // Default label to the channel name in the current locale + let label = props.label || state.value.getChannelName(props.channel, locale); + // labelProps, outputProps USED THEM FOR LABELS + let { trackProps, thumbProps, inputProps } = useColorSlider( + { + ...props, + label, + trackRef, + inputRef, + }, + state + ); + + let { focusProps, isFocusVisible } = useFocusRing(); + const thumbCls = "w-3 h-5"; // 20px + const heightCls = "h-4"; // 28px + return ( +
+ {/* Create a flex container for the label and output element. */} + {/*
+ + + {state.value.formatChannelValue(props.channel, locale)} + +
*/} + {/* The track element holds the visible track line and the thumb. */} +
+
+
+
+
+
+ + + +
+
+
+ ); +} diff --git a/website/theme/components/ColorPickerSwatch/ColorSwatch.js b/website/theme/components/ColorPickerSwatch/ColorSwatch.js new file mode 100644 index 000000000..b55cd58d1 --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/ColorSwatch.js @@ -0,0 +1,19 @@ +export function ColorSwatch(props) { + let { value, ...otherProps } = props; + return ( +
+
+
+
+ ); +} diff --git a/website/theme/components/ColorPickerSwatch/Shared.ts b/website/theme/components/ColorPickerSwatch/Shared.ts new file mode 100644 index 000000000..0791f7094 --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/Shared.ts @@ -0,0 +1,4 @@ +export const SIZE = 216; +export const FOCUSED_THUMB_SIZE = 28; +export const THUMB_SIZE = 20; +export const BORDER_RADIUS = 4; diff --git a/website/theme/components/ColorPickerSwatch/index.css b/website/theme/components/ColorPickerSwatch/index.css new file mode 100644 index 000000000..09ce3c37e --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/index.css @@ -0,0 +1,195 @@ +.color-slider-track-background, +.color-slider-track-color { + width: 100%; + border-radius: 4px; + forced-color-adjust: none; + position: relative; +} + +.color-slider-track-background, +.color-slider-track-color { + position: absolute; + height: 100%; +} + +.color-slider-thumb { + box-shadow: 0 0 0 1px black, inset 0 0 0 1px black; +} + +.color-slider-thumb .is-focused { + width: 32px; + height: 32px; +} + +.color-slider-track-background, +.color-slider-thumb-background { + background-size: 16px 16px; + background-position: -2px -2px, -2px 6px, 6px -10px, -10px -2px; + background-color: white; + background-image: linear-gradient( + -45deg, + transparent 75.5%, + rgb(188, 188, 188) 75.5% + ), + linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%), + linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%), + linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%); +} + +.color-slider-thumb-background, +.color-slider-thumb-color { + position: absolute; + border-radius: 50%; + width: 100%; + height: 100%; +} + +.color-preview-swatch-background { + position: absolute; + width: 100%; + height: 100%; + background-size: 16px 16px; + background-position: -2px -2px, -2px 6px, 6px -10px, -10px -2px; + background-color: white; + background-image: linear-gradient( + -45deg, + transparent 75.5%, + rgb(188, 188, 188) 75.5% + ), + linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%), + linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%), + linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%); +} + +.color-preview-swatch-color { + position: absolute; + width: 100%; + height: 100%; +} +.visible { + visibility: visible; +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.top-2 { + top: 0.5rem; +} + +.m-0 { + margin: 0px; +} + +.m-0\.5 { + margin: 0.125rem; +} + +.box-border { + box-sizing: border-box; +} + +.inline-block { + display: inline-block; +} + +.flex { + display: flex; +} + +.h-10 { + height: 2.5rem; +} + +.h-4 { + height: 1rem; +} + +.h-5 { + height: 1.25rem; +} + +.h-full { + height: 100%; +} + +.w-10 { + width: 2.5rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-full { + width: 100%; +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-y-2 { + row-gap: 0.5rem; +} + +.overflow-hidden { + overflow: hidden; +} + +.rounded-2xl { + border-radius: 1rem; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.border { + border-width: 1px; +} + +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.p-2 { + padding: 0.5rem; +} + +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.\[forced-color-adjust\:none\] { + forced-color-adjust: none; +} diff --git a/website/theme/components/ColorPickerSwatch/index.js b/website/theme/components/ColorPickerSwatch/index.js new file mode 100644 index 000000000..715c48805 --- /dev/null +++ b/website/theme/components/ColorPickerSwatch/index.js @@ -0,0 +1,134 @@ +"use client"; +import "./index.css"; +import { parseColor } from "@react-stately/color"; +import { useEffect, useState } from "react"; +import { + Button, + Dialog, + DialogTrigger, + OverlayArrow, + Popover, +} from "react-aria-components"; + +import { ColorArea } from "./ColorArea"; +import { ColorSlider } from "./ColorSlider"; +import { ColorSwatch } from "./ColorSwatch"; + +// ---- PopOver + +/** + value: string; + onChange: (c: Color) => void; + horizontal?: boolean; + label?: string; +*/ +export default function ColorPicker(props) { + const [color, setColor] = useState(parseColor(props?.value).toFormat("hsla")); + let [hChannel, sChannel, lChannel] = color.getColorChannels(); + const [endColor, setEndColor] = useState(color); + const [rendered, setRendered] = useState(false); + useEffect(() => { + if (rendered) props.onChange(endColor); + else setRendered(true); + }, [endColor]); + return ( + +
+ + {props?.label && ( + {props.label} + )} +
+ + + + + + + + +
+
+ + +
+
+ +
+
+ + + + ); +} + +export default function PickerItem({ + advanced, + label, + color, + onChange, + ...props +}) { + return ( +
+
+ +
+ {label} + + {isPickerOpen && ( +
+ +
+ )} +
+ ); +} diff --git a/website/theme/components/picker/index.js b/website/theme/components/picker/index.js index bb90fad06..0bb9a8f46 100644 --- a/website/theme/components/picker/index.js +++ b/website/theme/components/picker/index.js @@ -1,8 +1,11 @@ +import { parseColor } from "@react-stately/color"; import humanizeString from "humanize-string"; -import { useState, useRef } from "react"; -import { SketchPicker } from "react-color"; +import { useState, useRef, useEffect } from "react"; import useOnClickOutside from "../../hooks/useClickOutside"; +import { ColorArea } from "../ColorPickerSwatch/ColorArea"; +import { ColorSlider } from "../ColorPickerSwatch/ColorSlider"; +import { ColorSwatch } from "../ColorPickerSwatch/ColorSwatch"; import styles from "./Picker.module.scss"; @@ -46,13 +49,63 @@ export default function PickerItem({ {isPickerOpen && (
- + onChange(color.toString("hexa"))} + />
)}
); } +function SketchPicker(props) { + const [color, setColor] = useState(parseColor(props.color).toFormat("hsla")); + let [hChannel, sChannel, lChannel] = color.getColorChannels(); + const [endColor, setEndColor] = useState(color); + const [rendered, setRendered] = useState(false); + useEffect(() => { + if (rendered) props?.onChangeComplete(endColor); + else setRendered(true); + }, [endColor]); + return ( +
+ +
+
+ + +
+
+ +
+
+
+ ); +} + export function PickerToggle({ color, label, active, onClick, ...props }) { return (
diff --git a/website/theme/package.json b/website/theme/package.json index 5794d3e6d..4bf3e714f 100644 --- a/website/theme/package.json +++ b/website/theme/package.json @@ -16,7 +16,12 @@ "next": "^12.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-color": "^2.19.3", + "@react-aria/color": "^3.0.0-beta.20", + "@react-aria/focus": "^3.12.0", + "@react-aria/i18n": "^3.7.1", + "react-aria-components": "^1.0.0-alpha.3", + "@react-aria/visually-hidden": "^3.8.0", + "@react-stately/color": "^3.3.1", "sass": "^1.43.4", "use-clipboard-copy": "^0.2.0", "values.js": "^2.0.0" diff --git a/website/theme/pages/_app.js b/website/theme/pages/_app.js index b262f7a3c..558c6fe94 100644 --- a/website/theme/pages/_app.js +++ b/website/theme/pages/_app.js @@ -1,5 +1,6 @@ /* eslint-disable @next/next/no-page-custom-font */ import "../styles/globals.scss"; +import "../components/ColorPickerSwatch/index.css"; import Head from "next/head"; function MyApp({ Component, pageProps }) { diff --git a/website/theme/pages/index.js b/website/theme/pages/index.js index 433edca3d..6119d4c69 100644 --- a/website/theme/pages/index.js +++ b/website/theme/pages/index.js @@ -201,17 +201,17 @@ function Basic({ simpleColors, mode, updateColor, updateMode }) { updateColor("primary", color.hex)} + onChange={(color) => updateColor("primary", color)} /> updateColor("secondary", color.hex)} + onChange={(color) => updateColor("secondary", color)} /> updateColor("tertiary", color.hex)} + onChange={(color) => updateColor("tertiary", color)} /> @@ -263,7 +263,7 @@ function Advanced({ theme, updateTheme }) { key={c + i} color={controls[area][c]} label={c} - onChange={(color) => updateTheme(`${area}.${c}`, color.hex)} + onChange={(color) => updateTheme(`${area}.${c}`, color)} advanced /> ); diff --git a/yarn.lock b/yarn.lock index 4e2161ed6..f69926045 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1460,6 +1460,45 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@formatjs/ecma402-abstract@1.15.0": + version "1.15.0" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.15.0.tgz#0a285a5dc69889e15d53803bd5036272e23e5a18" + integrity sha512-7bAYAv0w4AIao9DNg0avfOLTCPE9woAgs6SpXuMq11IN3A+l+cq8ghczwqSZBM11myvPSJA7vLn72q0rJ0QK6Q== + dependencies: + "@formatjs/intl-localematcher" "0.2.32" + tslib "^2.4.0" + +"@formatjs/fast-memoize@2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.0.1.tgz#f15aaa73caad5562899c69bdcad8db82adcd3b0b" + integrity sha512-M2GgV+qJn5WJQAYewz7q2Cdl6fobQa69S1AzSM2y0P68ZDbK5cWrJIcPCO395Of1ksftGZoOt4LYCO/j9BKBSA== + dependencies: + tslib "^2.4.0" + +"@formatjs/icu-messageformat-parser@2.4.0": + version "2.4.0" + resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.4.0.tgz#e165f3594c68416ce15f63793768251de2a85f88" + integrity sha512-6Dh5Z/gp4F/HovXXu/vmd0If5NbYLB5dZrmhWVNb+BOGOEU3wt7Z/83KY1dtd7IDhAnYHasbmKE1RbTE0J+3hw== + dependencies: + "@formatjs/ecma402-abstract" "1.15.0" + "@formatjs/icu-skeleton-parser" "1.4.0" + tslib "^2.4.0" + +"@formatjs/icu-skeleton-parser@1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.4.0.tgz#96342eca7c4eef7a309875569e5da973db3465e6" + integrity sha512-Qq347VM616rVLkvN6QsKJELazRyNlbCiN47LdH0Mc5U7E2xV0vatiVhGqd3KFgbc055BvtnUXR7XX60dCGFuWg== + dependencies: + "@formatjs/ecma402-abstract" "1.15.0" + tslib "^2.4.0" + +"@formatjs/intl-localematcher@0.2.32": + version "0.2.32" + resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1" + integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ== + dependencies: + tslib "^2.4.0" + "@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -1500,10 +1539,34 @@ resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q== -"@icons/material@^0.2.4": - version "0.2.4" - resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" - integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== +"@internationalized/date@^3.2.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.2.0.tgz#1d266e5e5543a059cf8cca9b954fa033c3e58a75" + integrity sha512-VDMHN1m33L4eqPs5BaihzgQJXyaORbMoHOtrapFxx179J8ucY5CRIHYsq5RRLKPHZWgjNfa5v6amWWDkkMFywA== + dependencies: + "@swc/helpers" "^0.4.14" + +"@internationalized/message@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.1.0.tgz#b284014cd8bbb430a648b76c87c62bdca968b04c" + integrity sha512-Oo5m70FcBdADf7G8NkUffVSfuCdeAYVfsvNjZDi9ELpjvkc4YNJVTHt/NyTI9K7FgAVoELxiP9YmN0sJ+HNHYQ== + dependencies: + "@swc/helpers" "^0.4.14" + intl-messageformat "^10.1.0" + +"@internationalized/number@^3.2.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.2.0.tgz#dffb661cacd61a87b814c47b7d5240a286249066" + integrity sha512-GUXkhXSX1Ee2RURnzl+47uvbOxnlMnvP9Er+QePTjDjOPWuunmLKlEkYkEcLiiJp7y4l9QxGDLOlVr8m69LS5w== + dependencies: + "@swc/helpers" "^0.4.14" + +"@internationalized/string@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.1.0.tgz#0b365906a8c3f44800b0db52c2e990cff345abce" + integrity sha512-TJQKiyUb+wyAfKF59UNeZ/kELMnkxyecnyPCnBI1ma4NaXReJW+7Cc2mObXAqraIBJUVv7rgI46RLKrLgi35ng== + dependencies: + "@swc/helpers" "^0.4.14" "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" @@ -3134,6 +3197,146 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@react-aria/color@^3.0.0-beta.20": + version "3.0.0-beta.20" + resolved "https://registry.yarnpkg.com/@react-aria/color/-/color-3.0.0-beta.20.tgz#22b09c4af4ec892956ede0a6f8b076599d96432e" + integrity sha512-Cys3G9mXhoobf94D0741zZrqQnpiA1hZJKAHZHr7yCQnnRscAOD+ROJ5cDCu45OkiduZvh/bgQM5AALdL8/DHQ== + dependencies: + "@react-aria/i18n" "^3.7.1" + "@react-aria/interactions" "^3.15.0" + "@react-aria/slider" "^3.4.0" + "@react-aria/spinbutton" "^3.4.0" + "@react-aria/textfield" "^3.9.1" + "@react-aria/utils" "^3.16.0" + "@react-aria/visually-hidden" "^3.8.0" + "@react-stately/color" "^3.3.1" + "@react-types/color" "3.0.0-beta.16" + "@react-types/shared" "^3.18.0" + "@react-types/slider" "^3.5.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/focus@^3.12.0": + version "3.12.0" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.12.0.tgz#ac01f13782c608d0ed24a3f0b39c96b4a0031716" + integrity sha512-nY6/2lpXzLep6dzQEESoowiSqNcy7DFWuRD/qHj9uKcQwWpYH/rqBrHVS/RNvL6Cz/fBA7L/4AzByJ6pTBtoeA== + dependencies: + "@react-aria/interactions" "^3.15.0" + "@react-aria/utils" "^3.16.0" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + +"@react-aria/i18n@^3.7.1": + version "3.7.1" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.7.1.tgz#bd52869f67a5847f2dbe89603255a2dfc5ef45b4" + integrity sha512-2fu1cv8yD3V+rlhOqstTdGAubadoMFuPE7lA1FfYdaJNxXa09iWqvpipUPlxYJrahW0eazkesOPDKFwOEMF1iA== + dependencies: + "@internationalized/date" "^3.2.0" + "@internationalized/message" "^3.1.0" + "@internationalized/number" "^3.2.0" + "@internationalized/string" "^3.1.0" + "@react-aria/ssr" "^3.6.0" + "@react-aria/utils" "^3.16.0" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/interactions@^3.15.0": + version "3.15.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.15.0.tgz#db638d6ae0407be52ecaa1882c2ebc2931880da8" + integrity sha512-8br5uatPDISEWMINKGs7RhNPtqLhRsgwQsooaH7Jgxjs0LBlylODa8l7D3NA1uzVzlvfnZm/t2YN/y8ieRSDcQ== + dependencies: + "@react-aria/ssr" "^3.6.0" + "@react-aria/utils" "^3.16.0" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/label@^3.5.1": + version "3.5.1" + resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.5.1.tgz#ad7f9c141a1d5af143957716e01404ed4ab558e0" + integrity sha512-3KNg6/MJNMN25o0psBbCWzhJNFjtT5NtYJPrFwGHbAfVWvMTRqNftoyrhR490Ac0q2eMKIXkULl1HVn3izrAuw== + dependencies: + "@react-aria/utils" "^3.16.0" + "@react-types/label" "^3.7.3" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/live-announcer@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.3.0.tgz#04a2a233c2f48c53994f83cafdc4336ec1ea3700" + integrity sha512-6diTS6mIf70KdxfGqiDxHV+9Qv8a9A88EqBllzXGF6HWPdcwde/GIEmfpTwj8g1ImNGZYUwDkv4Hd9lFj0MXEg== + dependencies: + "@swc/helpers" "^0.4.14" + +"@react-aria/slider@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@react-aria/slider/-/slider-3.4.0.tgz#f5615861cc77dc240f2d3d7776f07badac364dcf" + integrity sha512-fW3gQhafs8ACAN7HGBpzmGV+hHVMUxI4UZ/V3h/LJ1vIxZY857iSQolzfJFBYhCyV0YU4D4uDUcYZhoH18GZnQ== + dependencies: + "@react-aria/focus" "^3.12.0" + "@react-aria/i18n" "^3.7.1" + "@react-aria/interactions" "^3.15.0" + "@react-aria/label" "^3.5.1" + "@react-aria/utils" "^3.16.0" + "@react-stately/radio" "^3.8.0" + "@react-stately/slider" "^3.3.1" + "@react-types/radio" "^3.4.1" + "@react-types/shared" "^3.18.0" + "@react-types/slider" "^3.5.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/spinbutton@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@react-aria/spinbutton/-/spinbutton-3.4.0.tgz#a500f5eb42e459f2a2789728832446f61c365313" + integrity sha512-8JEHw3pnosEYOQSZol0QpXMRhdb3z4FtaSovUdCPo7x7A7BtGCVsy3lAt31+WvQAknzZIDwxSBaNAcOj0cYhWQ== + dependencies: + "@react-aria/i18n" "^3.7.1" + "@react-aria/live-announcer" "^3.3.0" + "@react-aria/utils" "^3.16.0" + "@react-types/button" "^3.7.2" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/ssr@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.6.0.tgz#e5d52bd1686ff229f68f806cf94ee29dd9f54fb7" + integrity sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg== + dependencies: + "@swc/helpers" "^0.4.14" + +"@react-aria/textfield@^3.9.1": + version "3.9.1" + resolved "https://registry.yarnpkg.com/@react-aria/textfield/-/textfield-3.9.1.tgz#e032b0a5f2006891de7ff3465dc76381990341fc" + integrity sha512-IxJ6QupBD8yiEwF1etj4BWfwjNpc3Y00j+pzRIuo07bbkEOPl0jtKxW5YHG9un6nC9a5CKIHcILato1Q0Tsy0g== + dependencies: + "@react-aria/focus" "^3.12.0" + "@react-aria/label" "^3.5.1" + "@react-aria/utils" "^3.16.0" + "@react-types/shared" "^3.18.0" + "@react-types/textfield" "^3.7.1" + "@swc/helpers" "^0.4.14" + +"@react-aria/utils@^3.16.0": + version "3.16.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.16.0.tgz#0394f575e47b1c48a15844dc58e1775a9f72f8f5" + integrity sha512-BumpgENDlXuoRPQm1OfVUYRcxY9vwuXw1AmUpwF61v55gAZT3LvJWsfF8jgfQNzLJr5jtr7xvUx7pXuEyFpJMA== + dependencies: + "@react-aria/ssr" "^3.6.0" + "@react-stately/utils" "^3.6.0" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + +"@react-aria/visually-hidden@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.8.0.tgz#9bdcf708e4e628041d8fbac66c7dcb98b9529da9" + integrity sha512-Ox7VcO8vfdA1rCHPcUuP9DWfCI9bNFVlvN/u66AfjwBLH40MnGGdob5hZswQnbxOY4e0kwkMQDmZwNPYzBQgsg== + dependencies: + "@react-aria/interactions" "^3.15.0" + "@react-aria/utils" "^3.16.0" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + "@react-hook/intersection-observer@^3.1.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz#6b8fdb80d133c9c28bc8318368ecb3a1f8befc50" @@ -3147,6 +3350,104 @@ resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e" integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg== +"@react-stately/color@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@react-stately/color/-/color-3.3.1.tgz#8d481e45e6086c03c965e038b6637b76cc177eb6" + integrity sha512-s1PMfQ8KrDzg6v4xvLkyx7HN7m2wJo7mY3tR24aMVwqsZQWJ6r2cbNTbmYtoV08pdNiozjlXLwuISvy1fz6M5Q== + dependencies: + "@internationalized/number" "^3.2.0" + "@internationalized/string" "^3.1.0" + "@react-stately/slider" "^3.3.1" + "@react-stately/utils" "^3.6.0" + "@react-types/color" "3.0.0-beta.16" + "@react-types/numberfield" "^3.4.1" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-stately/radio@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.8.0.tgz#0d67dc499b2bebf2411e5ac272bf98e4911f2d24" + integrity sha512-3xNocZ8jlS8JcQtlS+pGhGLmrTA/P6zWs7Xi3Cx/I6ialFVL7IE0W37Z0XTYrvpNhE9hmG4+j63ZqQDNj2nu6A== + dependencies: + "@react-stately/utils" "^3.6.0" + "@react-types/radio" "^3.4.1" + "@react-types/shared" "^3.18.0" + "@swc/helpers" "^0.4.14" + +"@react-stately/slider@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@react-stately/slider/-/slider-3.3.1.tgz#4097840556259d1c89b166add3af44178d13d301" + integrity sha512-d38VY/jAvDzohYvqsdwsegcRCmzO1Ed4N3cdSGqYNTkr/nLTye/NZGpzt8kGbPUsc4UzOH7GoycqG6x6hFlyuw== + dependencies: + "@react-aria/i18n" "^3.7.1" + "@react-aria/utils" "^3.16.0" + "@react-stately/utils" "^3.6.0" + "@react-types/shared" "^3.18.0" + "@react-types/slider" "^3.5.0" + "@swc/helpers" "^0.4.14" + +"@react-stately/utils@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.6.0.tgz#f273e7fcb348254347d2e88c8f0c45571060c207" + integrity sha512-rptF7iUWDrquaYvBAS4QQhOBQyLBncDeHF03WnHXAxnuPJXNcr9cXJtjJPGCs036ZB8Q2hc9BGG5wNyMkF5v+Q== + dependencies: + "@swc/helpers" "^0.4.14" + +"@react-types/button@^3.7.2": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.7.2.tgz#954566e9b576780bda0c018d7f5046a1d44f5677" + integrity sha512-P7L+r+k4yVrvsfEWx3wlzbb+G7c9XNWzxEBfy6WX9HnKb/J5bo4sP5Zi8/TFVaKTlaG60wmVhdr+8KWSjL0GuQ== + dependencies: + "@react-types/shared" "^3.18.0" + +"@react-types/color@3.0.0-beta.16": + version "3.0.0-beta.16" + resolved "https://registry.yarnpkg.com/@react-types/color/-/color-3.0.0-beta.16.tgz#c6ec6bd81c0d82d518781b3bd14758b6df3cb28b" + integrity sha512-2fSwVRh5gGDuwaXFjJimo7m4wj16TulXTx/q0/cCZ9dsxfHsbtUspFGoVZnTmn2RwTVSWef/a1/su3K9qOqkeg== + dependencies: + "@react-types/shared" "^3.18.0" + "@react-types/slider" "^3.5.0" + +"@react-types/label@^3.7.3": + version "3.7.3" + resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.7.3.tgz#adab02949088a450f9dd947319bc5ca66eef5c4b" + integrity sha512-TKuQ2REPl4UVq/wl3CAujzixeNVVso0Kob+0T1nP8jIt9k9ssdLMAgSh8Z4zNNfR+oBIngYOA9IToMnbx6qACA== + dependencies: + "@react-types/shared" "^3.18.0" + +"@react-types/numberfield@^3.4.1": + version "3.4.1" + resolved "https://registry.yarnpkg.com/@react-types/numberfield/-/numberfield-3.4.1.tgz#f52d053b0ab6a3bd894878f621532224d3480caf" + integrity sha512-iS+s2BgOWUxYnMt+LG1OxlKZWeggKMBs55/NzVF5I2MCe1ju8ZUgM27g9A/gvUTdjt+fqx6VZu0MCipw0rVkIQ== + dependencies: + "@react-types/shared" "^3.18.0" + +"@react-types/radio@^3.4.1": + version "3.4.1" + resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.4.1.tgz#e79efb40c35109d888d3aa8de4d8dd0f4c4028e3" + integrity sha512-8r7s+Zj0JoIpYgbuHjhE/eWUHKiptaFvYXMH986yKAg969VQlQiP9Dm4oWv2d+p26WbGK7oJDQJCt8NjASWl8g== + dependencies: + "@react-types/shared" "^3.18.0" + +"@react-types/shared@^3.18.0": + version "3.18.0" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.18.0.tgz#4f2bacad5912eba6667695ee3f9e8ac9f79849f7" + integrity sha512-WJj7RAPj7NLdR/VzFObgvCju9NMDktWSruSPJ3DrL5qyrrvJoyMW67L4YjNoVp2b7Y+k10E0q4fSMV0PlJoL0w== + +"@react-types/slider@^3.5.0": + version "3.5.0" + resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.5.0.tgz#3cf51b11ee57ac54d4314f4cabab0d47dc433c85" + integrity sha512-ri0jGWt1x/+nWLLJmlRKaS0xyAjTE1UtsobEYotKkQjzG93WrsEZrb0tLmDnXyEfWi3NXyrReQcORveyv4EQ5g== + dependencies: + "@react-types/shared" "^3.18.0" + +"@react-types/textfield@^3.7.1": + version "3.7.1" + resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.7.1.tgz#6dc0c98384a1acba3f69a21b6a1563aa7b20de48" + integrity sha512-6V5+6/VgDbmgN61pyVct1VrXb2hqq7Y43BFQ+/ZhFDlVaMpC5xKWKgW/gPbGLLc27gax8t2Brt7VHJj+d+yrUw== + dependencies: + "@react-types/shared" "^3.18.0" + "@rollup/plugin-commonjs@^24.0.0": version "24.0.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c" @@ -3899,6 +4200,13 @@ dependencies: tslib "^2.4.0" +"@swc/helpers@^0.4.14": + version "0.4.14" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" + integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== + dependencies: + tslib "^2.4.0" + "@tailwindcss/nesting@^0.0.0-insiders.565cd3e": version "0.0.0-insiders.565cd3e" resolved "https://registry.yarnpkg.com/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz#cdfe802dd2900cd6b4e99006c7d13b21132d72fc" @@ -6497,7 +6805,7 @@ cloneable-readable@^1.0.0: process-nextick-args "^2.0.0" readable-stream "^2.3.5" -clsx@^1.2.1: +clsx@^1.1.1, clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== @@ -10354,6 +10662,16 @@ intersection-observer@^0.12.2: resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375" integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg== +intl-messageformat@^10.1.0: + version "10.3.5" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.3.5.tgz#f55684fc663e62616ad59d3a504ea0cac3f267b7" + integrity sha512-6kPkftF8Jg3XJCkGKa5OD+nYQ+qcSxF4ZkuDdXZ6KGG0VXn+iblJqRFyDdm9VvKcMyC0Km2+JlVQffFM52D0YA== + dependencies: + "@formatjs/ecma402-abstract" "1.15.0" + "@formatjs/fast-memoize" "2.0.1" + "@formatjs/icu-messageformat-parser" "2.4.0" + tslib "^2.4.0" + invert-kv@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6" @@ -11972,11 +12290,6 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash-es@^4.17.15: - version "4.17.21" - resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" - integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== - lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -12037,7 +12350,7 @@ lodash.uniq@4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: +lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -12322,11 +12635,6 @@ matchdep@^2.0.0: resolve "^1.4.0" stack-trace "0.0.10" -material-colors@^1.2.1: - version "1.2.6" - resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" - integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== - md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -15007,7 +15315,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.0.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -15232,19 +15540,6 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" -react-color@^2.19.3: - version "2.19.3" - resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d" - integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA== - dependencies: - "@icons/material" "^0.2.4" - lodash "^4.17.15" - lodash-es "^4.17.15" - material-colors "^1.2.1" - prop-types "^15.5.10" - reactcss "^1.2.0" - tinycolor2 "^1.4.1" - react-devtools-inline@4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68" @@ -15388,13 +15683,6 @@ react@^18.2.0: dependencies: loose-envify "^1.1.0" -reactcss@^1.2.0: - version "1.2.3" - resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" - integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A== - dependencies: - lodash "^4.0.1" - read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -17417,11 +17705,6 @@ tiny-warning@^1.0.3: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== -tinycolor2@^1.4.1: - version "1.4.2" - resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803" - integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA== - tinypool@^0.2.4: version "0.2.4" resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.2.4.tgz#4d2598c4689d1a2ce267ddf3360a9c6b3925a20c"