@wistia/ui 0.13.6-beta.e8bdf48a.d4d35de → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +11 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +8 -13
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.13.6
|
|
3
|
+
* @license @wistia/ui v0.13.6
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -10007,7 +10007,6 @@ ColorGrid.displayName = "ColorGrid_UI";
|
|
|
10007
10007
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10008
10008
|
import styled34 from "styled-components";
|
|
10009
10009
|
import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
|
|
10010
|
-
import { formatHex as formatHex3 } from "culori/fn";
|
|
10011
10010
|
|
|
10012
10011
|
// src/components/ColorPicker/ColorSwatch.tsx
|
|
10013
10012
|
import styled32 from "styled-components";
|
|
@@ -10234,8 +10233,7 @@ var Container2 = styled34(RadioGroupItem)`
|
|
|
10234
10233
|
user-select: none;
|
|
10235
10234
|
`;
|
|
10236
10235
|
var ColorGridOption = ({ value, name }) => {
|
|
10237
|
-
const {
|
|
10238
|
-
const valueAsHex = formatHex3(valueAsHsv);
|
|
10236
|
+
const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
|
|
10239
10237
|
const isSelected = valueAsHex === value;
|
|
10240
10238
|
const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
|
|
10241
10239
|
return /* @__PURE__ */ jsx229(
|
|
@@ -10332,7 +10330,6 @@ ColorListGroup.displayName = "ColorListGroup_UI";
|
|
|
10332
10330
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10333
10331
|
import styled37 from "styled-components";
|
|
10334
10332
|
import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
|
|
10335
|
-
import { formatHex as formatHex4 } from "culori/fn";
|
|
10336
10333
|
|
|
10337
10334
|
// src/components/ColorPicker/ColorNameOrHexCode.tsx
|
|
10338
10335
|
import { jsx as jsx232, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
@@ -10392,8 +10389,7 @@ var Container4 = styled37(ToggleGroupItem)`
|
|
|
10392
10389
|
}
|
|
10393
10390
|
`;
|
|
10394
10391
|
var ColorListOption = ({ value, name }) => {
|
|
10395
|
-
const {
|
|
10396
|
-
const valueAsHex = formatHex4(valueAsHsv);
|
|
10392
|
+
const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
|
|
10397
10393
|
const isSelected = valueAsHex === value;
|
|
10398
10394
|
const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
|
|
10399
10395
|
return /* @__PURE__ */ jsxs24(
|
|
@@ -10465,7 +10461,6 @@ var StyledPopoverContent = styled38(PopoverContent)`
|
|
|
10465
10461
|
flex-direction: column;
|
|
10466
10462
|
max-width: ${COLOR_PICKER_POPOVER_MAX_WIDTH_PX}px;
|
|
10467
10463
|
overflow: hidden;
|
|
10468
|
-
z-index: var(--wui-zindex-select);
|
|
10469
10464
|
`;
|
|
10470
10465
|
var ColorPickerPopoverContent = ({
|
|
10471
10466
|
children
|
|
@@ -11218,12 +11213,12 @@ import {
|
|
|
11218
11213
|
Thumb as SliderThumb
|
|
11219
11214
|
} from "@radix-ui/react-slider";
|
|
11220
11215
|
import styled45 from "styled-components";
|
|
11221
|
-
import { formatHex as
|
|
11216
|
+
import { formatHex as formatHex4 } from "culori/fn";
|
|
11222
11217
|
|
|
11223
11218
|
// src/components/ColorPicker/HSVHueCanvas.tsx
|
|
11224
11219
|
import { useEffect as useEffect12, useRef as useRef11 } from "react";
|
|
11225
11220
|
import styled44 from "styled-components";
|
|
11226
|
-
import { formatHex as
|
|
11221
|
+
import { formatHex as formatHex3 } from "culori/fn";
|
|
11227
11222
|
import { jsx as jsx247 } from "react/jsx-runtime";
|
|
11228
11223
|
var Canvas = styled44.canvas`
|
|
11229
11224
|
display: block;
|
|
@@ -11245,7 +11240,7 @@ var HSVHueCanvas = ({ hsv }) => {
|
|
|
11245
11240
|
const gradient = ctx.createLinearGradient(0, 0, width, 0);
|
|
11246
11241
|
for (let i = 0; i <= THREE_SIXTY; i++) {
|
|
11247
11242
|
const hue = i;
|
|
11248
|
-
const hexColor =
|
|
11243
|
+
const hexColor = formatHex3({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
|
|
11249
11244
|
if (hexColor) {
|
|
11250
11245
|
gradient.addColorStop(i / THREE_SIXTY, hexColor);
|
|
11251
11246
|
}
|
|
@@ -11308,7 +11303,7 @@ var HueSlider = () => {
|
|
|
11308
11303
|
const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
|
|
11309
11304
|
const containerStyle = useMemo9(() => {
|
|
11310
11305
|
return {
|
|
11311
|
-
backgroundColor:
|
|
11306
|
+
backgroundColor: formatHex4({
|
|
11312
11307
|
h: 0,
|
|
11313
11308
|
// red
|
|
11314
11309
|
s: valueAsHsv.s,
|
|
@@ -11318,7 +11313,7 @@ var HueSlider = () => {
|
|
|
11318
11313
|
};
|
|
11319
11314
|
}, [valueAsHsv.s, valueAsHsv.v]);
|
|
11320
11315
|
const thumbInnerStyle = useMemo9(() => {
|
|
11321
|
-
return { backgroundColor:
|
|
11316
|
+
return { backgroundColor: formatHex4(valueAsHsv) };
|
|
11322
11317
|
}, [valueAsHsv]);
|
|
11323
11318
|
const onHueChange = useCallback14(
|
|
11324
11319
|
(values) => {
|