@raystack/apsara 0.49.0 → 0.49.1
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/components/calendar/range-picker.cjs +19 -18
- package/dist/components/calendar/range-picker.cjs.map +1 -1
- package/dist/components/calendar/range-picker.d.ts +5 -4
- package/dist/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/components/calendar/range-picker.js +19 -18
- package/dist/components/calendar/range-picker.js.map +1 -1
- package/dist/components/color-picker/color-picker-alpha.cjs +15 -0
- package/dist/components/color-picker/color-picker-alpha.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-alpha.d.ts +5 -0
- package/dist/components/color-picker/color-picker-alpha.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-alpha.js +13 -0
- package/dist/components/color-picker/color-picker-alpha.js.map +1 -0
- package/dist/components/color-picker/color-picker-area.cjs +73 -0
- package/dist/components/color-picker/color-picker-area.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-area.d.ts +4 -0
- package/dist/components/color-picker/color-picker-area.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-area.js +71 -0
- package/dist/components/color-picker/color-picker-area.js.map +1 -0
- package/dist/components/color-picker/color-picker-hue.cjs +15 -0
- package/dist/components/color-picker/color-picker-hue.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-hue.d.ts +5 -0
- package/dist/components/color-picker/color-picker-hue.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-hue.js +13 -0
- package/dist/components/color-picker/color-picker-hue.js.map +1 -0
- package/dist/components/color-picker/color-picker-input.cjs +16 -0
- package/dist/components/color-picker/color-picker-input.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-input.d.ts +4 -0
- package/dist/components/color-picker/color-picker-input.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-input.js +14 -0
- package/dist/components/color-picker/color-picker-input.js.map +1 -0
- package/dist/components/color-picker/color-picker-mode.cjs +16 -0
- package/dist/components/color-picker/color-picker-mode.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-mode.d.ts +8 -0
- package/dist/components/color-picker/color-picker-mode.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-mode.js +14 -0
- package/dist/components/color-picker/color-picker-mode.js.map +1 -0
- package/dist/components/color-picker/color-picker-root.cjs +53 -0
- package/dist/components/color-picker/color-picker-root.cjs.map +1 -0
- package/dist/components/color-picker/color-picker-root.d.ts +25 -0
- package/dist/components/color-picker/color-picker-root.d.ts.map +1 -0
- package/dist/components/color-picker/color-picker-root.js +50 -0
- package/dist/components/color-picker/color-picker-root.js.map +1 -0
- package/dist/components/color-picker/color-picker.cjs +19 -0
- package/dist/components/color-picker/color-picker.cjs.map +1 -0
- package/dist/components/color-picker/color-picker.js +17 -0
- package/dist/components/color-picker/color-picker.js.map +1 -0
- package/dist/components/color-picker/color-picker.module.css.cjs +8 -0
- package/dist/components/color-picker/color-picker.module.css.cjs.map +1 -0
- package/dist/components/color-picker/color-picker.module.css.js +4 -0
- package/dist/components/color-picker/color-picker.module.css.js.map +1 -0
- package/dist/components/color-picker/index.d.ts +2 -0
- package/dist/components/color-picker/index.d.ts.map +1 -0
- package/dist/components/color-picker/utils.cjs +18 -0
- package/dist/components/color-picker/utils.cjs.map +1 -0
- package/dist/components/color-picker/utils.d.ts +11 -0
- package/dist/components/color-picker/utils.d.ts.map +1 -0
- package/dist/components/color-picker/utils.js +15 -0
- package/dist/components/color-picker/utils.js.map +1 -0
- package/dist/components/filter-chip/filter-chip.cjs +1 -1
- package/dist/components/filter-chip/filter-chip.js +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/conversions.cjs +986 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/conversions.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/conversions.js +982 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/conversions.js.map +1 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/index.cjs +86 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/index.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/index.js +82 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/index.js.map +1 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/route.cjs +103 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/route.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/route.js +99 -0
- package/dist/node_modules/.pnpm/color-convert@3.1.0/node_modules/color-convert/route.js.map +1 -0
- package/dist/node_modules/.pnpm/color-name@2.0.0/node_modules/color-name/index.cjs +157 -0
- package/dist/node_modules/.pnpm/color-name@2.0.0/node_modules/color-name/index.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color-name@2.0.0/node_modules/color-name/index.js +153 -0
- package/dist/node_modules/.pnpm/color-name@2.0.0/node_modules/color-name/index.js.map +1 -0
- package/dist/node_modules/.pnpm/color-string@2.0.1/node_modules/color-string/index.cjs +235 -0
- package/dist/node_modules/.pnpm/color-string@2.0.1/node_modules/color-string/index.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color-string@2.0.1/node_modules/color-string/index.js +231 -0
- package/dist/node_modules/.pnpm/color-string@2.0.1/node_modules/color-string/index.js.map +1 -0
- package/dist/node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs +501 -0
- package/dist/node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs.map +1 -0
- package/dist/node_modules/.pnpm/color@5.0.0/node_modules/color/index.js +497 -0
- package/dist/node_modules/.pnpm/color@5.0.0/node_modules/color/index.js.map +1 -0
- package/dist/style.css +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
5
|
+
var colorPickerRoot = require('./color-picker-root.cjs');
|
|
6
|
+
var colorPicker_module = require('./color-picker.module.css.cjs');
|
|
7
|
+
var index = require('../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.cjs');
|
|
8
|
+
|
|
9
|
+
const ColorPickerHue = ({ className, ...props }) => {
|
|
10
|
+
const { hue, setColor } = colorPickerRoot.useColorPicker();
|
|
11
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(index.Root, { className: index$1.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntime.jsxRuntimeExports.jsx(index.Track, { className: index$1.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: jsxRuntime.jsxRuntimeExports.jsx(index.Range, { className: colorPicker_module.default.sliderRange }) }), jsxRuntime.jsxRuntimeExports.jsx(index.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.ColorPickerHue = ColorPickerHue;
|
|
15
|
+
//# sourceMappingURL=color-picker-hue.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n className,\n ...props\n}: ColorPickerHueProps) => {\n const { hue, setColor } = useColorPicker();\n return (\n <Slider.Root\n className={cx(styles.sliderRoot, className)}\n max={360}\n onValueChange={([hue]) => setColor({ h: hue })}\n step={1}\n value={[hue]}\n {...props}\n >\n <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n <Slider.Range className={styles.sliderRange} />\n </Slider.Track>\n <Slider.Thumb className={styles.sliderThumb} />\n </Slider.Root>\n );\n};\n"],"names":["useColorPicker","_jsxs","Slider.Root","cx","styles","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAGA,8BAAc,EAAE,CAAC;IAC3C,QACEC,kCAACC,UAAW,EACV,EAAA,SAAS,EAAEC,UAAE,CAACC,0BAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,gCAAC,CAAAC,WAAY,EAAA,EAAC,SAAS,EAAEH,UAAE,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAC,gCAAA,CAACE,WAAY,EAAC,EAAA,SAAS,EAAEH,0BAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfC,gCAAC,CAAAG,WAAY,EAAA,EAAC,SAAS,EAAEJ,0BAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Slider } from 'radix-ui';
|
|
2
|
+
import { type ComponentProps } from 'react';
|
|
3
|
+
export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
|
|
4
|
+
export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
//# sourceMappingURL=color-picker-hue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAiBrB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
3
|
+
import { useColorPicker } from './color-picker-root.js';
|
|
4
|
+
import styles from './color-picker.module.css.js';
|
|
5
|
+
import { Root, Track, Range, Thumb } from '../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.js';
|
|
6
|
+
|
|
7
|
+
const ColorPickerHue = ({ className, ...props }) => {
|
|
8
|
+
const { hue, setColor } = useColorPicker();
|
|
9
|
+
return (jsxRuntimeExports.jsxs(Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntimeExports.jsx(Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: jsxRuntimeExports.jsx(Range, { className: styles.sliderRange }) }), jsxRuntimeExports.jsx(Thumb, { className: styles.sliderThumb })] }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { ColorPickerHue };
|
|
13
|
+
//# sourceMappingURL=color-picker-hue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n className,\n ...props\n}: ColorPickerHueProps) => {\n const { hue, setColor } = useColorPicker();\n return (\n <Slider.Root\n className={cx(styles.sliderRoot, className)}\n max={360}\n onValueChange={([hue]) => setColor({ h: hue })}\n step={1}\n value={[hue]}\n {...props}\n >\n <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n <Slider.Range className={styles.sliderRange} />\n </Slider.Track>\n <Slider.Thumb className={styles.sliderThumb} />\n </Slider.Root>\n );\n};\n"],"names":["_jsxs","Slider.Root","_jsx","Slider.Track","Slider.Range","Slider.Thumb"],"mappings":";;;;;;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAC3C,QACEA,uBAACC,IAAW,EACV,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAC9C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,GAAG,CAAC,EACR,GAAA,KAAK,aAETC,qBAAC,CAAAC,KAAY,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC9D,QAAA,EAAAD,qBAAA,CAACE,KAAY,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA,EAAA,CAClC,EACfF,qBAAC,CAAAG,KAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var index = require('../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs');
|
|
5
|
+
var inputField = require('../input-field/input-field.cjs');
|
|
6
|
+
var colorPickerRoot = require('./color-picker-root.cjs');
|
|
7
|
+
var utils = require('./utils.cjs');
|
|
8
|
+
|
|
9
|
+
const ColorPickerInput = (props) => {
|
|
10
|
+
const { hue, saturation, lightness, alpha, mode } = colorPickerRoot.useColorPicker();
|
|
11
|
+
const color = index.default.hsl(hue, saturation, lightness, alpha ?? 1);
|
|
12
|
+
return jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { value: utils.getColorString(color, mode), readOnly: true, ...props });
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
exports.ColorPickerInput = ColorPickerInput;
|
|
16
|
+
//# sourceMappingURL=color-picker-input.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-input.cjs","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["useColorPicker","Color","_jsx","InputField","getColorString"],"mappings":";;;;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAGA,8BAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAGC,aAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOC,iCAACC,qBAAU,EAAA,EAAC,KAAK,EAAEC,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { InputField } from '../input-field';
|
|
3
|
+
export declare const ColorPickerInput: (props: ComponentPropsWithoutRef<typeof InputField>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
//# sourceMappingURL=color-picker-input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-input.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,eAAO,MAAM,gBAAgB,UACpB,yBAAyB,iBAAiB,CAAC,4CAMnD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
|
|
3
|
+
import { InputField } from '../input-field/input-field.js';
|
|
4
|
+
import { useColorPicker } from './color-picker-root.js';
|
|
5
|
+
import { getColorString } from './utils.js';
|
|
6
|
+
|
|
7
|
+
const ColorPickerInput = (props) => {
|
|
8
|
+
const { hue, saturation, lightness, alpha, mode } = useColorPicker();
|
|
9
|
+
const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
|
|
10
|
+
return jsxRuntimeExports.jsx(InputField, { value: getColorString(color, mode), readOnly: true, ...props });
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { ColorPickerInput };
|
|
14
|
+
//# sourceMappingURL=color-picker-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-input.js","sources":["../../../components/color-picker/color-picker-input.tsx"],"sourcesContent":["import Color from 'color';\nimport { ComponentPropsWithoutRef } from 'react';\nimport { InputField } from '../input-field';\nimport { useColorPicker } from './color-picker-root';\nimport { getColorString } from './utils';\n\nexport const ColorPickerInput = (\n props: ComponentPropsWithoutRef<typeof InputField>\n) => {\n const { hue, saturation, lightness, alpha, mode } = useColorPicker();\n const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);\n\n return <InputField value={getColorString(color, mode)} readOnly {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAMa,MAAA,gBAAgB,GAAG,CAC9B,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAC;AACrE,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAEhE,IAAA,OAAOA,sBAAC,UAAU,EAAA,EAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAK,IAAA,EAAA,GAAA,KAAK,GAAI,CAAC;AAChF;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
5
|
+
var select = require('../select/select.cjs');
|
|
6
|
+
var colorPickerRoot = require('./color-picker-root.cjs');
|
|
7
|
+
var colorPicker_module = require('./color-picker.module.css.cjs');
|
|
8
|
+
var utils = require('./utils.cjs');
|
|
9
|
+
|
|
10
|
+
const ColorPickerMode = ({ className, options = utils.SUPPORTED_MODES, ...props }) => {
|
|
11
|
+
const { mode, setMode } = colorPickerRoot.useColorPicker();
|
|
12
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { onValueChange: value => setMode(value), value: mode, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: index.cx(colorPicker_module.default.selectTrigger, className), ...props, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Mode' }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map(option => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
exports.ColorPickerMode = ColorPickerMode;
|
|
16
|
+
//# sourceMappingURL=color-picker-mode.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-mode.cjs","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\nimport { ModeType, SUPPORTED_MODES } from './utils';\n\nexport interface ColorPickerModeProps\n extends ComponentProps<typeof Select.Trigger> {\n options?: ModeType[];\n}\n\nexport const ColorPickerMode = ({\n className,\n options = SUPPORTED_MODES,\n ...props\n}: ColorPickerModeProps) => {\n const { mode, setMode } = useColorPicker();\n return (\n <Select onValueChange={value => setMode(value as ModeType)} value={mode}>\n <Select.Trigger\n className={cx(styles.selectTrigger, className)}\n {...props}\n >\n <Select.Value placeholder='Mode' />\n </Select.Trigger>\n <Select.Content>\n {options.map(option => (\n <Select.Item key={option} value={option}>\n {option.toUpperCase()}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n};\n"],"names":["SUPPORTED_MODES","useColorPicker","_jsxs","Select","_jsx","cx","styles"],"mappings":";;;;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,GAAGA,qBAAe,EACzB,GAAG,KAAK,EACa,KAAI;IACzB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAGC,8BAAc,EAAE,CAAC;AAC3C,IAAA,QACEC,iCAAC,CAAAC,aAAM,EAAC,EAAA,aAAa,EAAE,KAAK,IAAI,OAAO,CAAC,KAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAA,QAAA,EAAA,CACrEC,gCAAC,CAAAD,aAAM,CAAC,OAAO,EAAA,EACb,SAAS,EAAEE,QAAE,CAACC,0BAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAA,GAC1C,KAAK,EAET,QAAA,EAAAF,gCAAA,CAACD,aAAM,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,MAAM,EAAA,CAAG,GACpB,EACjBC,gCAAA,CAACD,aAAM,CAAC,OAAO,EACZ,EAAA,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBC,gCAAA,CAACD,aAAM,CAAC,IAAI,EAAc,EAAA,KAAK,EAAE,MAAM,EAAA,QAAA,EACpC,MAAM,CAAC,WAAW,EAAE,EAAA,EADL,MAAM,CAEV,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACT;AACJ;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ComponentProps } from 'react';
|
|
2
|
+
import { Select } from '../select';
|
|
3
|
+
import { ModeType } from './utils';
|
|
4
|
+
export interface ColorPickerModeProps extends ComponentProps<typeof Select.Trigger> {
|
|
5
|
+
options?: ModeType[];
|
|
6
|
+
}
|
|
7
|
+
export declare const ColorPickerMode: ({ className, options, ...props }: ColorPickerModeProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
//# sourceMappingURL=color-picker-mode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-mode.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-mode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,QAAQ,EAAmB,MAAM,SAAS,CAAC;AAEpD,MAAM,WAAW,oBACf,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,qCAIzB,oBAAoB,4CAmBtB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
3
|
+
import { Select } from '../select/select.js';
|
|
4
|
+
import { useColorPicker } from './color-picker-root.js';
|
|
5
|
+
import styles from './color-picker.module.css.js';
|
|
6
|
+
import { SUPPORTED_MODES } from './utils.js';
|
|
7
|
+
|
|
8
|
+
const ColorPickerMode = ({ className, options = SUPPORTED_MODES, ...props }) => {
|
|
9
|
+
const { mode, setMode } = useColorPicker();
|
|
10
|
+
return (jsxRuntimeExports.jsxs(Select, { onValueChange: value => setMode(value), value: mode, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: cx(styles.selectTrigger, className), ...props, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Mode' }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map(option => (jsxRuntimeExports.jsx(Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { ColorPickerMode };
|
|
14
|
+
//# sourceMappingURL=color-picker-mode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-mode.js","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\nimport { ModeType, SUPPORTED_MODES } from './utils';\n\nexport interface ColorPickerModeProps\n extends ComponentProps<typeof Select.Trigger> {\n options?: ModeType[];\n}\n\nexport const ColorPickerMode = ({\n className,\n options = SUPPORTED_MODES,\n ...props\n}: ColorPickerModeProps) => {\n const { mode, setMode } = useColorPicker();\n return (\n <Select onValueChange={value => setMode(value as ModeType)} value={mode}>\n <Select.Trigger\n className={cx(styles.selectTrigger, className)}\n {...props}\n >\n <Select.Value placeholder='Mode' />\n </Select.Trigger>\n <Select.Content>\n {options.map(option => (\n <Select.Item key={option} value={option}>\n {option.toUpperCase()}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,GAAG,eAAe,EACzB,GAAG,KAAK,EACa,KAAI;IACzB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3C,IAAA,QACEA,sBAAC,CAAA,MAAM,EAAC,EAAA,aAAa,EAAE,KAAK,IAAI,OAAO,CAAC,KAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAA,QAAA,EAAA,CACrEC,qBAAC,CAAA,MAAM,CAAC,OAAO,EAAA,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAA,GAC1C,KAAK,EAET,QAAA,EAAAA,qBAAA,CAAC,MAAM,CAAC,KAAK,EAAC,EAAA,WAAW,EAAC,MAAM,EAAA,CAAG,GACpB,EACjBA,qBAAA,CAAC,MAAM,CAAC,OAAO,EACZ,EAAA,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBA,qBAAA,CAAC,MAAM,CAAC,IAAI,EAAc,EAAA,KAAK,EAAE,MAAM,EAAA,QAAA,EACpC,MAAM,CAAC,WAAW,EAAE,EAAA,EADL,MAAM,CAEV,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACT;AACJ;;;;"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var index = require('../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.cjs');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var flex = require('../flex/flex.cjs');
|
|
7
|
+
var utils = require('./utils.cjs');
|
|
8
|
+
|
|
9
|
+
const ColorPickerContext = React.createContext(undefined);
|
|
10
|
+
const useColorPicker = () => {
|
|
11
|
+
const context = React.useContext(ColorPickerContext);
|
|
12
|
+
if (!context) {
|
|
13
|
+
throw new Error('useColorPicker must be used within a ColorPickerProvider');
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
16
|
+
};
|
|
17
|
+
const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defaultMode = 'hex', mode: providedMode, onModeChange, ...props }) => {
|
|
18
|
+
const providedColor = value && index.default(value).hsl().object();
|
|
19
|
+
const [internalColor, setInternalColor] = React.useState(index.default(defaultValue).hsl().object());
|
|
20
|
+
const [internalMode, setInternalMode] = React.useState(defaultMode);
|
|
21
|
+
const hue = providedColor ? providedColor.h : internalColor.h;
|
|
22
|
+
const saturation = providedColor ? providedColor.s : internalColor.s;
|
|
23
|
+
const lightness = providedColor ? providedColor.l : internalColor.l;
|
|
24
|
+
const alpha = (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;
|
|
25
|
+
const mode = providedMode ?? internalMode;
|
|
26
|
+
const setColor = React.useCallback(value => {
|
|
27
|
+
setInternalColor(_color => {
|
|
28
|
+
const updatedColor = { ..._color, ...value };
|
|
29
|
+
if (!onValueChange)
|
|
30
|
+
return updatedColor;
|
|
31
|
+
const color = index.default.hsl(updatedColor.h, updatedColor.s, updatedColor.l, updatedColor?.alpha ?? 1);
|
|
32
|
+
onValueChange(utils.getColorString(color, mode), mode);
|
|
33
|
+
return updatedColor;
|
|
34
|
+
});
|
|
35
|
+
}, [mode, onValueChange]);
|
|
36
|
+
const setMode = React.useCallback(value => {
|
|
37
|
+
setInternalMode(value);
|
|
38
|
+
onModeChange?.(value);
|
|
39
|
+
}, [onModeChange]);
|
|
40
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(ColorPickerContext.Provider, { value: {
|
|
41
|
+
hue,
|
|
42
|
+
saturation,
|
|
43
|
+
lightness,
|
|
44
|
+
alpha,
|
|
45
|
+
mode,
|
|
46
|
+
setColor,
|
|
47
|
+
setMode
|
|
48
|
+
}, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: 'column', gap: 4, ...props }) }));
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
exports.ColorPickerRoot = ColorPickerRoot;
|
|
52
|
+
exports.useColorPicker = useColorPicker;
|
|
53
|
+
//# sourceMappingURL=color-picker-root.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n ComponentPropsWithoutRef,\n createContext,\n useCallback,\n useContext,\n useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n hue: number;\n saturation: number;\n lightness: number;\n alpha: number;\n mode: ModeType;\n setColor: (color: Partial<ColorObject>) => void;\n setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n undefined\n);\n\nexport const useColorPicker = () => {\n const context = useContext(ColorPickerContext);\n if (!context) {\n throw new Error('useColorPicker must be used within a ColorPickerProvider');\n }\n return context;\n};\n\nexport interface ColorPickerProps\n extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n value?: ColorLike;\n defaultValue?: ColorLike;\n onValueChange?: (value: string, mode: string) => void;\n defaultMode?: ModeType;\n mode?: ModeType;\n onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n value,\n defaultValue = '#ffffff',\n onValueChange,\n defaultMode = 'hex',\n mode: providedMode,\n onModeChange,\n ...props\n}: ColorPickerProps) => {\n const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n const [internalColor, setInternalColor] = useState(\n Color(defaultValue).hsl().object() as ColorObject\n );\n const [internalMode, setInternalMode] = useState(defaultMode);\n\n const hue = providedColor ? providedColor.h : internalColor.h;\n const saturation = providedColor ? providedColor.s : internalColor.s;\n const lightness = providedColor ? providedColor.l : internalColor.l;\n const alpha =\n (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n const mode = providedMode ?? internalMode;\n\n const setColor = useCallback<ColorPickerContextValue['setColor']>(\n value => {\n setInternalColor(_color => {\n const updatedColor = { ..._color, ...value };\n\n if (!onValueChange) return updatedColor;\n\n const color = Color.hsl(\n updatedColor.h,\n updatedColor.s,\n updatedColor.l,\n updatedColor?.alpha ?? 1\n );\n\n onValueChange(getColorString(color, mode), mode);\n\n return updatedColor;\n });\n },\n [mode, onValueChange]\n );\n\n const setMode = useCallback<ColorPickerContextValue['setMode']>(\n value => {\n setInternalMode(value);\n onModeChange?.(value);\n },\n [onModeChange]\n );\n\n return (\n <ColorPickerContext.Provider\n value={{\n hue,\n saturation,\n lightness,\n alpha,\n mode,\n setColor,\n setMode\n }}\n >\n <Flex direction='column' gap={4} {...props} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["createContext","useContext","Color","useState","useCallback","getColorString","_jsx","Flex"],"mappings":";;;;;;;;AAqBA,MAAM,kBAAkB,GAAGA,mBAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAKC,aAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAChDD,aAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAGF,aAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAACG,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGD,iBAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEE,gCAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,gCAAC,CAAAC,SAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ColorLike } from 'color';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { Flex } from '../flex';
|
|
4
|
+
import { ColorObject, ModeType } from './utils';
|
|
5
|
+
type ColorPickerContextValue = {
|
|
6
|
+
hue: number;
|
|
7
|
+
saturation: number;
|
|
8
|
+
lightness: number;
|
|
9
|
+
alpha: number;
|
|
10
|
+
mode: ModeType;
|
|
11
|
+
setColor: (color: Partial<ColorObject>) => void;
|
|
12
|
+
setMode: (mode: ModeType) => void;
|
|
13
|
+
};
|
|
14
|
+
export declare const useColorPicker: () => ColorPickerContextValue;
|
|
15
|
+
export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {
|
|
16
|
+
value?: ColorLike;
|
|
17
|
+
defaultValue?: ColorLike;
|
|
18
|
+
onValueChange?: (value: string, mode: string) => void;
|
|
19
|
+
defaultMode?: ModeType;
|
|
20
|
+
mode?: ModeType;
|
|
21
|
+
onModeChange?: (mode: ModeType) => void;
|
|
22
|
+
}
|
|
23
|
+
export declare const ColorPickerRoot: ({ value, defaultValue, onValueChange, defaultMode, mode: providedMode, onModeChange, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=color-picker-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,CAAC;AAMF,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,eAAe,oGAQzB,gBAAgB,4CA6DlB,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
|
|
3
|
+
import { createContext, useState, useCallback, useContext } from 'react';
|
|
4
|
+
import { Flex } from '../flex/flex.js';
|
|
5
|
+
import { getColorString } from './utils.js';
|
|
6
|
+
|
|
7
|
+
const ColorPickerContext = createContext(undefined);
|
|
8
|
+
const useColorPicker = () => {
|
|
9
|
+
const context = useContext(ColorPickerContext);
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error('useColorPicker must be used within a ColorPickerProvider');
|
|
12
|
+
}
|
|
13
|
+
return context;
|
|
14
|
+
};
|
|
15
|
+
const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defaultMode = 'hex', mode: providedMode, onModeChange, ...props }) => {
|
|
16
|
+
const providedColor = value && Color(value).hsl().object();
|
|
17
|
+
const [internalColor, setInternalColor] = useState(Color(defaultValue).hsl().object());
|
|
18
|
+
const [internalMode, setInternalMode] = useState(defaultMode);
|
|
19
|
+
const hue = providedColor ? providedColor.h : internalColor.h;
|
|
20
|
+
const saturation = providedColor ? providedColor.s : internalColor.s;
|
|
21
|
+
const lightness = providedColor ? providedColor.l : internalColor.l;
|
|
22
|
+
const alpha = (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;
|
|
23
|
+
const mode = providedMode ?? internalMode;
|
|
24
|
+
const setColor = useCallback(value => {
|
|
25
|
+
setInternalColor(_color => {
|
|
26
|
+
const updatedColor = { ..._color, ...value };
|
|
27
|
+
if (!onValueChange)
|
|
28
|
+
return updatedColor;
|
|
29
|
+
const color = Color.hsl(updatedColor.h, updatedColor.s, updatedColor.l, updatedColor?.alpha ?? 1);
|
|
30
|
+
onValueChange(getColorString(color, mode), mode);
|
|
31
|
+
return updatedColor;
|
|
32
|
+
});
|
|
33
|
+
}, [mode, onValueChange]);
|
|
34
|
+
const setMode = useCallback(value => {
|
|
35
|
+
setInternalMode(value);
|
|
36
|
+
onModeChange?.(value);
|
|
37
|
+
}, [onModeChange]);
|
|
38
|
+
return (jsxRuntimeExports.jsx(ColorPickerContext.Provider, { value: {
|
|
39
|
+
hue,
|
|
40
|
+
saturation,
|
|
41
|
+
lightness,
|
|
42
|
+
alpha,
|
|
43
|
+
mode,
|
|
44
|
+
setColor,
|
|
45
|
+
setMode
|
|
46
|
+
}, children: jsxRuntimeExports.jsx(Flex, { direction: 'column', gap: 4, ...props }) }));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { ColorPickerRoot, useColorPicker };
|
|
50
|
+
//# sourceMappingURL=color-picker-root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n ComponentPropsWithoutRef,\n createContext,\n useCallback,\n useContext,\n useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n hue: number;\n saturation: number;\n lightness: number;\n alpha: number;\n mode: ModeType;\n setColor: (color: Partial<ColorObject>) => void;\n setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n undefined\n);\n\nexport const useColorPicker = () => {\n const context = useContext(ColorPickerContext);\n if (!context) {\n throw new Error('useColorPicker must be used within a ColorPickerProvider');\n }\n return context;\n};\n\nexport interface ColorPickerProps\n extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n value?: ColorLike;\n defaultValue?: ColorLike;\n onValueChange?: (value: string, mode: string) => void;\n defaultMode?: ModeType;\n mode?: ModeType;\n onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n value,\n defaultValue = '#ffffff',\n onValueChange,\n defaultMode = 'hex',\n mode: providedMode,\n onModeChange,\n ...props\n}: ColorPickerProps) => {\n const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n const [internalColor, setInternalColor] = useState(\n Color(defaultValue).hsl().object() as ColorObject\n );\n const [internalMode, setInternalMode] = useState(defaultMode);\n\n const hue = providedColor ? providedColor.h : internalColor.h;\n const saturation = providedColor ? providedColor.s : internalColor.s;\n const lightness = providedColor ? providedColor.l : internalColor.l;\n const alpha =\n (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n const mode = providedMode ?? internalMode;\n\n const setColor = useCallback<ColorPickerContextValue['setColor']>(\n value => {\n setInternalColor(_color => {\n const updatedColor = { ..._color, ...value };\n\n if (!onValueChange) return updatedColor;\n\n const color = Color.hsl(\n updatedColor.h,\n updatedColor.s,\n updatedColor.l,\n updatedColor?.alpha ?? 1\n );\n\n onValueChange(getColorString(color, mode), mode);\n\n return updatedColor;\n });\n },\n [mode, onValueChange]\n );\n\n const setMode = useCallback<ColorPickerContextValue['setMode']>(\n value => {\n setInternalMode(value);\n onModeChange?.(value);\n },\n [onModeChange]\n );\n\n return (\n <ColorPickerContext.Provider\n value={{\n hue,\n saturation,\n lightness,\n alpha,\n mode,\n setColor,\n setMode\n }}\n >\n <Flex direction='column' gap={4} {...props} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAqBA,MAAM,kBAAkB,GAAG,aAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAK,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEA,qBAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,qBAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var colorPickerAlpha = require('./color-picker-alpha.cjs');
|
|
4
|
+
var colorPickerArea = require('./color-picker-area.cjs');
|
|
5
|
+
var colorPickerHue = require('./color-picker-hue.cjs');
|
|
6
|
+
var colorPickerInput = require('./color-picker-input.cjs');
|
|
7
|
+
var colorPickerMode = require('./color-picker-mode.cjs');
|
|
8
|
+
var colorPickerRoot = require('./color-picker-root.cjs');
|
|
9
|
+
|
|
10
|
+
const ColorPicker = Object.assign(colorPickerRoot.ColorPickerRoot, {
|
|
11
|
+
Area: colorPickerArea.ColorPickerArea,
|
|
12
|
+
Hue: colorPickerHue.ColorPickerHue,
|
|
13
|
+
Alpha: colorPickerAlpha.ColorPickerAlpha,
|
|
14
|
+
Input: colorPickerInput.ColorPickerInput,
|
|
15
|
+
Mode: colorPickerMode.ColorPickerMode
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
exports.ColorPicker = ColorPicker;
|
|
19
|
+
//# sourceMappingURL=color-picker.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker.cjs","sources":["../../../components/color-picker/color-picker.tsx"],"sourcesContent":["import { ColorPickerAlpha } from './color-picker-alpha';\nimport { ColorPickerArea } from './color-picker-area';\nimport { ColorPickerHue } from './color-picker-hue';\nimport { ColorPickerInput } from './color-picker-input';\nimport { ColorPickerMode } from './color-picker-mode';\nimport { ColorPickerRoot } from './color-picker-root';\n\nexport const ColorPicker = Object.assign(ColorPickerRoot, {\n Area: ColorPickerArea,\n Hue: ColorPickerHue,\n Alpha: ColorPickerAlpha,\n Input: ColorPickerInput,\n Mode: ColorPickerMode\n});\n"],"names":["ColorPickerRoot","ColorPickerArea","ColorPickerHue","ColorPickerAlpha","ColorPickerInput","ColorPickerMode"],"mappings":";;;;;;;;;MAOa,WAAW,GAAG,MAAM,CAAC,MAAM,CAACA,+BAAe,EAAE;AACxD,IAAA,IAAI,EAAEC,+BAAe;AACrB,IAAA,GAAG,EAAEC,6BAAc;AACnB,IAAA,KAAK,EAAEC,iCAAgB;AACvB,IAAA,KAAK,EAAEC,iCAAgB;AACvB,IAAA,IAAI,EAAEC,+BAAe;AACtB,CAAA;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ColorPickerAlpha } from './color-picker-alpha.js';
|
|
2
|
+
import { ColorPickerArea } from './color-picker-area.js';
|
|
3
|
+
import { ColorPickerHue } from './color-picker-hue.js';
|
|
4
|
+
import { ColorPickerInput } from './color-picker-input.js';
|
|
5
|
+
import { ColorPickerMode } from './color-picker-mode.js';
|
|
6
|
+
import { ColorPickerRoot } from './color-picker-root.js';
|
|
7
|
+
|
|
8
|
+
const ColorPicker = Object.assign(ColorPickerRoot, {
|
|
9
|
+
Area: ColorPickerArea,
|
|
10
|
+
Hue: ColorPickerHue,
|
|
11
|
+
Alpha: ColorPickerAlpha,
|
|
12
|
+
Input: ColorPickerInput,
|
|
13
|
+
Mode: ColorPickerMode
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export { ColorPicker };
|
|
17
|
+
//# sourceMappingURL=color-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker.js","sources":["../../../components/color-picker/color-picker.tsx"],"sourcesContent":["import { ColorPickerAlpha } from './color-picker-alpha';\nimport { ColorPickerArea } from './color-picker-area';\nimport { ColorPickerHue } from './color-picker-hue';\nimport { ColorPickerInput } from './color-picker-input';\nimport { ColorPickerMode } from './color-picker-mode';\nimport { ColorPickerRoot } from './color-picker-root';\n\nexport const ColorPicker = Object.assign(ColorPickerRoot, {\n Area: ColorPickerArea,\n Hue: ColorPickerHue,\n Alpha: ColorPickerAlpha,\n Input: ColorPickerInput,\n Mode: ColorPickerMode\n});\n"],"names":[],"mappings":";;;;;;;MAOa,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;AACxD,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,GAAG,EAAE,cAAc;AACnB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,IAAI,EAAE,eAAe;AACtB,CAAA;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
|
|
6
|
+
|
|
7
|
+
exports.default = styles;
|
|
8
|
+
//# sourceMappingURL=color-picker.module.css.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
|
|
2
|
+
|
|
3
|
+
export { styles as default };
|
|
4
|
+
//# sourceMappingURL=color-picker.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const getColorString = (color, mode) => {
|
|
4
|
+
let string;
|
|
5
|
+
if (mode === 'hex')
|
|
6
|
+
string =
|
|
7
|
+
color.alpha() === 1 ? color.hex().toString() : color.hexa().toString();
|
|
8
|
+
else if (mode === 'hsl')
|
|
9
|
+
string = color.hsl().toString();
|
|
10
|
+
else
|
|
11
|
+
string = color.rgb().toString();
|
|
12
|
+
return string;
|
|
13
|
+
};
|
|
14
|
+
const SUPPORTED_MODES = ['hex', 'hsl', 'rgb'];
|
|
15
|
+
|
|
16
|
+
exports.SUPPORTED_MODES = SUPPORTED_MODES;
|
|
17
|
+
exports.getColorString = getColorString;
|
|
18
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../components/color-picker/utils.ts"],"sourcesContent":["import { type ColorInstance } from 'color';\n\nexport const getColorString = (color: ColorInstance, mode: string) => {\n let string;\n if (mode === 'hex')\n string =\n color.alpha() === 1 ? color.hex().toString() : color.hexa().toString();\n else if (mode === 'hsl') string = color.hsl().toString();\n else string = color.rgb().toString();\n\n return string;\n};\n\nexport const SUPPORTED_MODES = ['hex', 'hsl', 'rgb'];\n\nexport type ModeType = (typeof SUPPORTED_MODES)[number];\n\nexport type ColorObject = {\n h: number;\n s: number;\n l: number;\n alpha?: number;\n};\n"],"names":[],"mappings":";;MAEa,cAAc,GAAG,CAAC,KAAoB,EAAE,IAAY,KAAI;AACnE,IAAA,IAAI,MAAM,CAAC;IACX,IAAI,IAAI,KAAK,KAAK;QAChB,MAAM;YACJ,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;SACtE,IAAI,IAAI,KAAK,KAAK;QAAE,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;QACpD,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;AAErC,IAAA,OAAO,MAAM,CAAC;AAChB,EAAE;AAEW,MAAA,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK;;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ColorInstance } from 'color';
|
|
2
|
+
export declare const getColorString: (color: ColorInstance, mode: string) => string;
|
|
3
|
+
export declare const SUPPORTED_MODES: string[];
|
|
4
|
+
export type ModeType = (typeof SUPPORTED_MODES)[number];
|
|
5
|
+
export type ColorObject = {
|
|
6
|
+
h: number;
|
|
7
|
+
s: number;
|
|
8
|
+
l: number;
|
|
9
|
+
alpha?: number;
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../components/color-picker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,cAAc,UAAW,aAAa,QAAQ,MAAM,WAShE,CAAC;AAEF,eAAO,MAAM,eAAe,UAAwB,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const getColorString = (color, mode) => {
|
|
2
|
+
let string;
|
|
3
|
+
if (mode === 'hex')
|
|
4
|
+
string =
|
|
5
|
+
color.alpha() === 1 ? color.hex().toString() : color.hexa().toString();
|
|
6
|
+
else if (mode === 'hsl')
|
|
7
|
+
string = color.hsl().toString();
|
|
8
|
+
else
|
|
9
|
+
string = color.rgb().toString();
|
|
10
|
+
return string;
|
|
11
|
+
};
|
|
12
|
+
const SUPPORTED_MODES = ['hex', 'hsl', 'rgb'];
|
|
13
|
+
|
|
14
|
+
export { SUPPORTED_MODES, getColorString };
|
|
15
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../components/color-picker/utils.ts"],"sourcesContent":["import { type ColorInstance } from 'color';\n\nexport const getColorString = (color: ColorInstance, mode: string) => {\n let string;\n if (mode === 'hex')\n string =\n color.alpha() === 1 ? color.hex().toString() : color.hexa().toString();\n else if (mode === 'hsl') string = color.hsl().toString();\n else string = color.rgb().toString();\n\n return string;\n};\n\nexport const SUPPORTED_MODES = ['hex', 'hsl', 'rgb'];\n\nexport type ModeType = (typeof SUPPORTED_MODES)[number];\n\nexport type ColorObject = {\n h: number;\n s: number;\n l: number;\n alpha?: number;\n};\n"],"names":[],"mappings":"MAEa,cAAc,GAAG,CAAC,KAAoB,EAAE,IAAY,KAAI;AACnE,IAAA,IAAI,MAAM,CAAC;IACX,IAAI,IAAI,KAAK,KAAK;QAChB,MAAM;YACJ,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;SACtE,IAAI,IAAI,KAAK,KAAK;QAAE,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;QACpD,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;AAErC,IAAA,OAAO,MAAM,CAAC;AAChB,EAAE;AAEW,MAAA,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK;;;;"}
|
|
@@ -12,8 +12,8 @@ require('../skeleton/skeleton.cjs');
|
|
|
12
12
|
require('../tooltip/tooltip.cjs');
|
|
13
13
|
var datePicker = require('../calendar/date-picker.cjs');
|
|
14
14
|
require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
|
|
15
|
-
require('../popover/popover.cjs');
|
|
16
15
|
var inputField = require('../input-field/input-field.cjs');
|
|
16
|
+
require('../popover/popover.cjs');
|
|
17
17
|
var text = require('../text/text.cjs');
|
|
18
18
|
var filterChipOperation = require('./filter-chip-operation.cjs');
|
|
19
19
|
var filterChip_module = require('./filter-chip.module.css.cjs');
|
|
@@ -10,8 +10,8 @@ import '../skeleton/skeleton.js';
|
|
|
10
10
|
import '../tooltip/tooltip.js';
|
|
11
11
|
import { DatePicker } from '../calendar/date-picker.js';
|
|
12
12
|
import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
|
|
13
|
-
import '../popover/popover.js';
|
|
14
13
|
import { InputField } from '../input-field/input-field.js';
|
|
14
|
+
import '../popover/popover.js';
|
|
15
15
|
import { Text } from '../text/text.js';
|
|
16
16
|
import { Operation } from './filter-chip-operation.js';
|
|
17
17
|
import styles from './filter-chip.module.css.js';
|
package/dist/index.cjs
CHANGED
|
@@ -54,6 +54,7 @@ var theme = require('./components/theme-provider/theme.cjs');
|
|
|
54
54
|
var toast = require('./components/toast/toast.cjs');
|
|
55
55
|
var tooltip = require('./components/tooltip/tooltip.cjs');
|
|
56
56
|
var index = require('./components/grid/index.cjs');
|
|
57
|
+
var colorPicker = require('./components/color-picker/color-picker.cjs');
|
|
57
58
|
|
|
58
59
|
|
|
59
60
|
|
|
@@ -114,4 +115,5 @@ exports.ToastContainer = toast.ToastContainer;
|
|
|
114
115
|
exports.toast = toast.toast;
|
|
115
116
|
exports.Tooltip = tooltip.Tooltip;
|
|
116
117
|
exports.Grid = index.Grid;
|
|
118
|
+
exports.ColorPicker = colorPicker.ColorPicker;
|
|
117
119
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -48,4 +48,5 @@ export { ThemeProvider, ThemeProviderProps, ThemeSwitcher, useTheme } from './co
|
|
|
48
48
|
export { toast, ToastContainer } from './components/toast';
|
|
49
49
|
export { Tooltip } from './components/tooltip';
|
|
50
50
|
export { Grid } from './components/grid';
|
|
51
|
+
export * from './components/color-picker';
|
|
51
52
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -52,4 +52,5 @@ export { ThemeProvider, useTheme } from './components/theme-provider/theme.js';
|
|
|
52
52
|
export { ToastContainer, toast } from './components/toast/toast.js';
|
|
53
53
|
export { Tooltip } from './components/tooltip/tooltip.js';
|
|
54
54
|
export { Grid } from './components/grid/index.js';
|
|
55
|
+
export { ColorPicker } from './components/color-picker/color-picker.js';
|
|
55
56
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|