Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

456
node_modules/@fluentui/react-color-picker/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,456 @@
# Change Log - @fluentui/react-color-picker
This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
<!-- Start content -->
## [9.2.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.15)
Wed, 25 Feb 2026 13:28:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.14..@fluentui/react-color-picker_v9.2.15)
### Patches
- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
## [9.2.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.14)
Thu, 12 Feb 2026 10:46:15 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.13..@fluentui/react-color-picker_v9.2.14)
### Patches
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
## [9.2.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.13)
Thu, 22 Jan 2026 17:06:50 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.12..@fluentui/react-color-picker_v9.2.13)
### Patches
- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
## [9.2.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.12)
Wed, 17 Dec 2025 18:10:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.11..@fluentui/react-color-picker_v9.2.12)
### Patches
- Bump @fluentui/react-context-selector to v9.2.13 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
## [9.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.11)
Tue, 11 Nov 2025 19:18:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.10..@fluentui/react-color-picker_v9.2.11)
### Patches
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.10)
Thu, 06 Nov 2025 15:01:25 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.9..@fluentui/react-color-picker_v9.2.10)
### Patches
- Bump @fluentui/react-context-selector to v9.2.11 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.2 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-tabster to v9.26.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.9)
Fri, 31 Oct 2025 16:22:06 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.8..@fluentui/react-color-picker_v9.2.9)
### Patches
- Bump @fluentui/react-context-selector to v9.2.10 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.8)
Tue, 21 Oct 2025 14:16:59 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.7..@fluentui/react-color-picker_v9.2.8)
### Patches
- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.7)
Wed, 08 Oct 2025 12:04:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.6..@fluentui/react-color-picker_v9.2.7)
### Patches
- Bump @fluentui/react-context-selector to v9.2.9 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.6)
Thu, 02 Oct 2025 15:12:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.5..@fluentui/react-color-picker_v9.2.6)
### Patches
- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.5)
Mon, 08 Sep 2025 12:51:36 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.4..@fluentui/react-color-picker_v9.2.5)
### Patches
- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.4)
Thu, 21 Aug 2025 12:25:39 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.3..@fluentui/react-color-picker_v9.2.4)
### Patches
- Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.3)
Thu, 07 Aug 2025 10:03:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.2..@fluentui/react-color-picker_v9.2.3)
### Patches
- Bump @fluentui/react-context-selector to v9.2.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.2)
Wed, 30 Jul 2025 13:10:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.1..@fluentui/react-color-picker_v9.2.2)
### Patches
- Bump @fluentui/react-context-selector to v9.2.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-tabster to v9.26.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-theme to v9.2.0 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.1)
Mon, 28 Jul 2025 18:48:21 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.2.0..@fluentui/react-color-picker_v9.2.1)
### Patches
- Bump @fluentui/react-context-selector to v9.2.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.0)
Thu, 17 Jul 2025 13:49:36 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.3..@fluentui/react-color-picker_v9.2.0)
### Minor changes
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.1.3)
Fri, 27 Jun 2025 13:39:41 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.2..@fluentui/react-color-picker_v9.1.3)
### Patches
- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.1.2)
Thu, 26 Jun 2025 14:11:55 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.1..@fluentui/react-color-picker_v9.1.2)
### Patches
- Bump @fluentui/react-context-selector to v9.2.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-tabster to v9.25.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.1.1)
Wed, 18 Jun 2025 17:34:00 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.0..@fluentui/react-color-picker_v9.1.1)
### Patches
- Bump @fluentui/react-context-selector to v9.2.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-tabster to v9.25.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.1.0)
Thu, 12 Jun 2025 09:43:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.7..@fluentui/react-color-picker_v9.1.0)
### Minor changes
- Bump @fluentui/react-context-selector to v9.2.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-tabster to v9.25.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.7)
Wed, 11 Jun 2025 22:31:56 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.6..@fluentui/react-color-picker_v9.0.7)
### Patches
- docs: removed text from preview stage ([PR #34612](https://github.com/microsoft/fluentui/pull/34612) by vkozlova@microsoft.com)
## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.6)
Fri, 06 Jun 2025 13:15:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.5..@fluentui/react-color-picker_v9.0.6)
### Patches
- Bump @fluentui/react-context-selector to v9.1.77 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.55 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-tabster to v9.24.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-utilities to v9.20.0 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.5)
Wed, 14 May 2025 18:49:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.4..@fluentui/react-color-picker_v9.0.5)
### Patches
- fix: added touch events for ColorArea ([PR #34328](https://github.com/microsoft/fluentui/pull/34328) by v.kozlova13@gmail.com)
- Bump @fluentui/react-tabster to v9.24.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.4)
Thu, 24 Apr 2025 09:59:45 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.3..@fluentui/react-color-picker_v9.0.4)
### Patches
- Bump @fluentui/react-tabster to v9.24.6 ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by beachball)
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.3)
Wed, 16 Apr 2025 19:42:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.2..@fluentui/react-color-picker_v9.0.3)
### Patches
- Bump @fluentui/react-context-selector to v9.1.76 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.54 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-tabster to v9.24.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.2)
Tue, 01 Apr 2025 15:08:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.1..@fluentui/react-color-picker_v9.0.2)
### Patches
- Bump @fluentui/react-tabster to v9.24.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.1)
Thu, 27 Mar 2025 21:12:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.0.0..@fluentui/react-color-picker_v9.0.1)
### Patches
- Bump @fluentui/react-context-selector to v9.1.75 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-tabster to v9.24.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.0.0)
Wed, 19 Mar 2025 15:40:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.3.1..@fluentui/react-color-picker_v9.0.0)
### Minor changes
- feat: release ColorPicker as 9.0.0 stable ([PR #33969](https://github.com/microsoft/fluentui/pull/33969) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.74 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.52 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-tabster to v9.24.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-utilities to v9.18.22 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.3.1)
Tue, 11 Mar 2025 18:58:50 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.3.0..@fluentui/react-color-picker-preview_v0.3.1)
### Patches
- fix: placed thumb half outside of colorSlider and colorArea ([PR #33880](https://github.com/microsoft/fluentui/pull/33880) by vkozlova@microsoft.com)
- fix: focus on Y axis ([PR #33899](https://github.com/microsoft/fluentui/pull/33899) by v.kozlova13@gmail.com)
- Bump @fluentui/react-context-selector to v9.1.73 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.3.0)
Fri, 21 Feb 2025 14:34:05 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.2.0..@fluentui/react-color-picker-preview_v0.3.0)
### Minor changes
- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.2.0)
Tue, 18 Feb 2025 11:26:27 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.6..@fluentui/react-color-picker-preview_v0.2.0)
### Minor changes
- custom color channels ([PR #33763](https://github.com/microsoft/fluentui/pull/33763) by v.kozlova13@gmail.com)
### Patches
- fix: design changes for ColorPicker ([PR #33785](https://github.com/microsoft/fluentui/pull/33785) by vkozlova@microsoft.com)
## [0.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.6)
Fri, 07 Feb 2025 10:42:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.5..@fluentui/react-color-picker-preview_v0.1.6)
### Patches
- fix: thumb design for ColorPicker - partner's ask ([PR #33743](https://github.com/microsoft/fluentui/pull/33743) by v.kozlova13@gmail.com)
## [0.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.5)
Mon, 27 Jan 2025 20:27:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.4..@fluentui/react-color-picker-preview_v0.1.5)
### Patches
- fix: default state for ColorSliders ([PR #33715](https://github.com/microsoft/fluentui/pull/33715) by v.kozlova13@gmail.com)
## [0.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.4)
Wed, 22 Jan 2025 14:00:14 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.3..@fluentui/react-color-picker-preview_v0.1.4)
### Patches
- chore: Moving @ctrl/tinycolor dependency to be a caret dependency in production packages. ([PR #33611](https://github.com/microsoft/fluentui/pull/33611) by makotom@microsoft.com)
- fix: focus jumps to inputY instead of next element ([PR #33620](https://github.com/microsoft/fluentui/pull/33620) by vkozlova@microsoft.com)
- feat: Added `transparent` option to the AlphaSlider ([PR #33572](https://github.com/microsoft/fluentui/pull/33572) by v.kozlova13@gmail.com)
- Bump @fluentui/react-context-selector to v9.1.72 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-tabster to v9.23.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.3)
Wed, 08 Jan 2025 18:33:32 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.2..@fluentui/react-color-picker-preview_v0.1.3)
### Patches
- fix: contrast border of thumb ([PR #33526](https://github.com/microsoft/fluentui/pull/33526) by vkozlova@microsoft.com)
- feat: added aria-attributes to the ColorPicker ([PR #33543](https://github.com/microsoft/fluentui/pull/33543) by vkozlova@microsoft.com)
- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.2)
Mon, 16 Dec 2024 16:26:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.1..@fluentui/react-color-picker-preview_v0.1.2)
### Patches
- fix(react-color-picker): active axis for ColorPicker ([PR #33415](https://github.com/microsoft/fluentui/pull/33415) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.71 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.48 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-tabster to v9.23.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-theme to v9.1.24 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-utilities to v9.18.19 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.1)
Mon, 09 Dec 2024 17:38:10 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.0..@fluentui/react-color-picker-preview_v0.1.1)
### Patches
- chore: remove usage of "export \*" ([PR #33384](https://github.com/microsoft/fluentui/pull/33384) by olfedias@microsoft.com)
## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.0)
Fri, 06 Dec 2024 12:53:39 GMT
### Minor changes
- 'feat(react-color-picker): Release ColorPicker as unstable ([PR #33395](https://github.com/microsoft/fluentui/pull/33395) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.70 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.47 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-tabster to v9.23.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-theme to v9.1.23 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-utilities to v9.18.18 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)

15
node_modules/@fluentui/react-color-picker/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-color-picker
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

48
node_modules/@fluentui/react-color-picker/README.md generated vendored Normal file
View File

@@ -0,0 +1,48 @@
# @fluentui/react-color-picker
**React Color Picker components for [Fluent UI React](https://react.fluentui.dev/)**
The ColorPicker allows users to browse and select colors.
By default, it enables navigation through a color spectrum and operates in HSV/HSL format.
However, it is also possible to specify a color using Red-Green-Blue (RGB), an alpha color code, or hexadecimal values in the text boxes.
## Usage
To import React ColorPicker components:
```tsx
import { ColorPicker, ColorSwatch, type ColorPickerOnSelectEventHandler } from '@fluentui/react-components';
```
Simple example of ColorPicker Usage:
```tsx
import { tinycolor } from '@ctrl/tinycolor';
import { ColorPicker, ColorSlider, AlphaSlider, type ColorPickerProps, ColorArea } from '@fluentui/react-components';
export const App = () => {
const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
const handleChange: ColorPickerProps['onColorChange'] = (_, data) =>
setColor({ ...data.color, a: data.color.a ?? 1 });
return (
<>
<ColorPicker color={color} onColorChange={handleChange}>
<ColorSlider />
<AlphaSlider />
<ColorArea />
</ColorPicker>
<div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
</>
);
};
```
## Specification
See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
## API
For information about the components, please refer to the API documentation.

View File

@@ -0,0 +1,282 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* AlphaSlider component
*/
export declare const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
export declare const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
/**
* AlphaSlider Props
*/
export declare type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {
/**
* The `transparency` property determines how the alpha channel is interpreted.
* - When `false`, the alpha channel represents the opacity of the color.
* - When `true`, the alpha channel represents the transparency of the color.
* For example, a 30% transparent color has 70% opacity.
*
* @defaultvalue false
*/
transparency?: boolean;
};
export declare type AlphaSliderSlots = ColorSliderSlots;
/**
* State used in rendering AlphaSlider
*/
export declare type AlphaSliderState = ComponentState<AlphaSliderSlots> & Pick<AlphaSliderProps, 'vertical'> & Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;
/**
* ColorArea component
*/
export declare const ColorArea: ForwardRefComponent<ColorAreaProps>;
export declare const colorAreaClassNames: SlotClassNames<ColorAreaSlots>;
declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | PointerEvent> & {
color: HsvColor;
};
/**
* ColorArea Props
*/
export declare type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> & Pick<ColorPickerProps, 'shape'> & {
/**
* The current color of the ColorArea.
*/
color?: HsvColor;
/**
* The starting value for an uncontrolled ColorArea.
*/
defaultColor?: HsvColor;
/**
* Triggers a callback when the value has been changed. This will be called on every individual step.
*/
onChange?: EventHandler<ColorAreaOnColorChangeData>;
};
export declare type ColorAreaSlots = {
root: NonNullable<Slot<'div'>>;
thumb?: NonNullable<Slot<'div'>>;
inputX?: NonNullable<Slot<'input'>>;
inputY?: NonNullable<Slot<'input'>>;
};
/**
* State used in rendering ColorArea
*/
export declare type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;
declare type ColorChannel = 'hue' | 'saturation' | 'value';
/**
* ColorPicker component
*/
export declare const ColorPicker: ForwardRefComponent<ColorPickerProps>;
export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
/**
* The context through which individual color controls communicate with the picker.
*/
declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
/**
* @internal
* Callback used by Sliders to request a change on it's selected value
* Should be used to get value of color channel
*/
requestChange: (event: React_2.ChangeEvent<HTMLInputElement>, data: {
color: HsvColor;
}) => void;
};
declare type ColorPickerContextValues = {
colorPicker: ColorPickerContextValue;
};
declare type ColorPickerOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
color: HsvColor;
};
/**
* ColorPicker Props
*/
export declare type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {
/**
* Selected color.
*/
color?: HsvColor;
/**
* Callback for when the user changes the color.
*/
onColorChange?: EventHandler<ColorPickerOnChangeData>;
/**
* ColorPicker shape
* @defaultvalue 'rounded'
*/
shape?: 'rounded' | 'square';
};
export declare type ColorPickerSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering ColorPicker
*/
export declare type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;
/**
* ColorSlider component
*/
export declare const ColorSlider: ForwardRefComponent<ColorSliderProps>;
export declare const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
/**
* ColorSlider Props
*/
export declare type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | 'color'> & Pick<ColorPickerProps, 'shape'> & {
/**
* Color channel of the Slider.
* @default `hue`
*/
channel?: ColorChannel;
/**
* Triggers a callback when the value has been changed. This will be called on every individual step.
*/
onChange?: EventHandler<SliderOnChangeData>;
/**
* Render the Slider in a vertical orientation, smallest value on the bottom.
* @default `false`
*/
vertical?: boolean;
/**
* Color of the ColorPicker
*/
color?: HsvColor;
/**
* The starting color for an uncontrolled ColorSlider.
*/
defaultColor?: HsvColor;
};
export declare type ColorSliderSlots = {
root: NonNullable<Slot<'div'>>;
rail: NonNullable<Slot<'div'>>;
thumb: NonNullable<Slot<'div'>>;
input: NonNullable<Slot<'input'>>;
};
/**
* State used in rendering ColorSlider
*/
export declare type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;
declare type HsvColor = {
h: number;
s: number;
v: number;
a?: number;
};
/**
* Render the final JSX of AlphaSlider
*/
export declare const renderAlphaSlider_unstable: (state: AlphaSliderState) => JSXElement;
/**
* Render the final JSX of ColorArea
*/
export declare const renderColorArea_unstable: (state: ColorAreaState) => JSXElement;
/**
* Render the final JSX of ColorPicker
*/
export declare const renderColorPicker_unstable: (state: ColorPickerState, contextValues: ColorPickerContextValues) => JSXElement;
/**
* Render the final JSX of ColorSlider
*/
export declare const renderColorSlider_unstable: (state: ColorSliderState) => JSXElement;
declare type SliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
color: HsvColor;
};
/**
* Create the state required to render AlphaSlider.
*
* The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,
* before being passed to renderAlphaSlider_unstable.
*
* @param props - props from this instance of AlphaSlider
* @param ref - reference to root HTMLInputElement of AlphaSlider
*/
export declare const useAlphaSlider_unstable: (props: AlphaSliderProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderState;
/**
* Apply styling to the AlphaSlider slots based on the state
*/
export declare const useAlphaSliderStyles_unstable: (state: AlphaSliderState) => AlphaSliderState;
/**
* Create the state required to render ColorArea.
*
* The returned state can be modified with hooks such as useColorAreaStyles_unstable,
* before being passed to renderColorArea_unstable.
*
* @param props - props from this instance of ColorArea
* @param ref - reference to root HTMLDivElement of ColorArea
*/
export declare const useColorArea_unstable: (props: ColorAreaProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaState;
/**
* Apply styling to the ColorArea slots based on the state
*/
export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => ColorAreaState;
/**
* Create the state required to render ColorPicker.
*
* The returned state can be modified with hooks such as useColorPickerStyles_unstable,
* before being passed to renderColorPicker_unstable.
*
* @param props - props from this instance of ColorPicker
* @param ref - reference to root HTMLDivElement of ColorPicker
*/
export declare const useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
/**
* Apply styling to the ColorPicker slots based on the state
*/
export declare const useColorPickerStyles_unstable: (state: ColorPickerState) => ColorPickerState;
/**
* Create the state required to render ColorSlider.
*
* The returned state can be modified with hooks such as useColorSliderStyles_unstable,
* before being passed to renderColorSlider_unstable.
*
* @param props - props from this instance of ColorSlider
* @param ref - reference to root HTMLInputElement of ColorSlider
*/
export declare const useColorSlider_unstable: (props: ColorSliderProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderState;
/**
* Apply styling to the ColorSlider slots based on the state
*/
export declare const useColorSliderStyles_unstable: (state: ColorSliderState) => ColorSliderState;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AlphaSlider: function() {
return _index.AlphaSlider;
},
alphaSliderCSSVars: function() {
return _index.alphaSliderCSSVars;
},
alphaSliderClassNames: function() {
return _index.alphaSliderClassNames;
},
renderAlphaSlider_unstable: function() {
return _index.renderAlphaSlider_unstable;
},
useAlphaSliderStyles_unstable: function() {
return _index.useAlphaSliderStyles_unstable;
},
useAlphaSlider_unstable: function() {
return _index.useAlphaSlider_unstable;
}
});
const _index = require("./components/AlphaSlider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './components/AlphaSlider/index';\nexport {\n AlphaSlider,\n alphaSliderCSSVars,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,yBAAkB;;;eAClBC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorArea: function() {
return _index.ColorArea;
},
colorAreaCSSVars: function() {
return _index.colorAreaCSSVars;
},
colorAreaClassNames: function() {
return _index.colorAreaClassNames;
},
renderColorArea_unstable: function() {
return _index.renderColorArea_unstable;
},
useColorAreaStyles_unstable: function() {
return _index.useColorAreaStyles_unstable;
},
useColorArea_unstable: function() {
return _index.useColorArea_unstable;
}
});
const _index = require("./components/ColorArea/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n ColorAreaOnColorChangeData,\n ColorAreaProps,\n ColorAreaSlots,\n ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n ColorArea,\n colorAreaCSSVars,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"mappings":";;;;;;;;;;;;eAOEA,gBAAS;;;eACTC,uBAAgB;;;eAChBC,0BAAmB;;;eACnBC,+BAAwB;;;eACxBC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAChB,+BAA+B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorPicker: function() {
return _index.ColorPicker;
},
colorPickerClassNames: function() {
return _index.colorPickerClassNames;
},
renderColorPicker_unstable: function() {
return _index.renderColorPicker_unstable;
},
useColorPickerStyles_unstable: function() {
return _index.useColorPickerStyles_unstable;
},
useColorPicker_unstable: function() {
return _index.useColorPicker_unstable;
}
});
const _index = require("./components/ColorPicker/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"mappings":";;;;;;;;;;;;eAOEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSlider: function() {
return _index.ColorSlider;
},
colorSliderCSSVars: function() {
return _index.colorSliderCSSVars;
},
colorSliderClassNames: function() {
return _index.colorSliderClassNames;
},
renderColorSlider_unstable: function() {
return _index.renderColorSlider_unstable;
},
useColorSliderStyles_unstable: function() {
return _index.useColorSliderStyles_unstable;
},
useColorSlider_unstable: function() {
return _index.useColorSlider_unstable;
}
});
const _index = require("./components/ColorSlider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n ColorSlider,\n colorSliderCSSVars,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"mappings":";;;;;;;;;;;;eAOEA,kBAAW;;;eACXC,yBAAkB;;;eAClBC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AlphaSlider", {
enumerable: true,
get: function() {
return AlphaSlider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAlphaSlider = require("./useAlphaSlider");
const _renderAlphaSlider = require("./renderAlphaSlider");
const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const AlphaSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAlphaSlider.useAlphaSlider_unstable)(props, ref);
(0, _useAlphaSliderStylesstyles.useAlphaSliderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAlphaSliderStyles_unstable')(state);
return (0, _renderAlphaSlider.renderAlphaSlider_unstable)(state);
});
AlphaSlider.displayName = 'AlphaSlider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n const state = useAlphaSlider_unstable(props, ref);\n\n useAlphaSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering AlphaSlider
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n /**\n * The `transparency` property determines how the alpha channel is interpreted.\n * - When `false`, the alpha channel represents the opacity of the color.\n * - When `true`, the alpha channel represents the transparency of the color.\n * For example, a 30% transparent color has 70% opacity.\n *\n * @defaultvalue false\n */\n transparency?: boolean;\n};\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n Pick<AlphaSliderProps, 'vertical'> &\n Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WAEgE"}

View File

@@ -0,0 +1,39 @@
/**
* Adjusts the given value based on the transparency flag.
*
* @param value - The numeric value to adjust.
* @param transparency - A boolean flag indicating whether to adjust for transparency.
* @returns The adjusted value.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
adjustToTransparency: function() {
return adjustToTransparency;
},
calculateTransparencyValue: function() {
return calculateTransparencyValue;
},
getSliderDirection: function() {
return getSliderDirection;
}
});
function adjustToTransparency(value, transparency) {
return transparency ? 100 - value : value;
}
function calculateTransparencyValue(transparency, value) {
return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;
}
function getSliderDirection(dir, vertical, transparency) {
if (vertical) {
return transparency ? '180deg' : '0deg';
}
return dir === 'ltr' && !transparency ? '90deg' : '-90deg';
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean): number {\n return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number): number | undefined {\n return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean): string {\n if (vertical) {\n return transparency ? '180deg' : '0deg';\n }\n return dir === 'ltr' && !transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;wBAAgBA;;;8BAWAG;;;IAYAE,kBAAAA;;;;AAvBT,SAASL,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AASO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAUO,4BAA4BE,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAOI,QAAQ,SAAS,CAACJ,eAAe,UAAU;AACpD"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AlphaSlider: function() {
return _AlphaSlider.AlphaSlider;
},
alphaSliderCSSVars: function() {
return _useAlphaSliderStylesstyles.alphaSliderCSSVars;
},
alphaSliderClassNames: function() {
return _useAlphaSliderStylesstyles.alphaSliderClassNames;
},
renderAlphaSlider_unstable: function() {
return _renderAlphaSlider.renderAlphaSlider_unstable;
},
useAlphaSliderStyles_unstable: function() {
return _useAlphaSliderStylesstyles.useAlphaSliderStyles_unstable;
},
useAlphaSlider_unstable: function() {
return _useAlphaSlider.useAlphaSlider_unstable;
}
});
const _AlphaSlider = require("./AlphaSlider");
const _renderAlphaSlider = require("./renderAlphaSlider");
const _useAlphaSlider = require("./useAlphaSlider");
const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSlider_unstable } from './useAlphaSlider';\nexport {\n alphaSliderCSSVars,\n alphaSliderClassNames,\n useAlphaSliderStyles_unstable,\n} from './useAlphaSliderStyles.styles';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSlider_unstable","alphaSliderCSSVars","alphaSliderClassNames","useAlphaSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,8CAAkB;;;eAClBC,iDAAqB;;;eAJdH,6CAA0B;;;eAKjCI,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CAKpD,gCAAgC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAlphaSlider_unstable", {
enumerable: true,
get: function() {
return renderAlphaSlider_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderAlphaSlider_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.rail, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.thumb, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/renderAlphaSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { AlphaSliderState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderState): JSXElement => {\n assertSlots<AlphaSliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAlphaSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAlphaSlider_unstable", {
enumerable: true,
get: function() {
return useAlphaSlider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useAlphaSliderState = require("./useAlphaSliderState");
const _colorPicker = require("../../contexts/colorPicker");
const useAlphaSlider_unstable = (props, ref)=>{
const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'onChange',
'color'
]
});
const { shape = shapeFromContext, vertical, root, input, rail, thumb } = props;
const state = {
shape,
vertical,
components: {
input: 'input',
rail: 'div',
root: 'div',
thumb: 'div'
},
root: _reactutilities.slot.always(root, {
defaultProps: nativeProps.root,
elementType: 'div'
}),
input: _reactutilities.slot.always(input, {
defaultProps: {
id: (0, _reactutilities.useId)('slider-', props.id),
ref,
...nativeProps.primary,
type: 'range'
},
elementType: 'input'
}),
rail: _reactutilities.slot.always(rail, {
elementType: 'div'
}),
thumb: _reactutilities.slot.always(thumb, {
elementType: 'div'
})
};
(0, _useAlphaSliderState.useAlphaSliderState_unstable)(state, props);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type { AlphaSliderProps, AlphaSliderState } from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n props: AlphaSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: AlphaSliderState = {\n shape,\n vertical,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n useAlphaSliderState_unstable(state, props);\n\n return state;\n};\n"],"names":["React","getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;+BAiBaM;;;;;;;iEAfU,QAAQ;gCACwB,4BAA4B;qCAEtC,wBAAwB;6BACjB,6BAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,cAAcX,6CAAAA,EAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIvB,qBAAAA,EAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEApB,iDAAAA,EAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}

View File

@@ -0,0 +1,70 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAlphaSliderState_unstable", {
enumerable: true,
get: function() {
return useAlphaSliderState_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _tinycolor = require("@ctrl/tinycolor");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");
const _colorPicker = require("../../contexts/colorPicker");
const _constants = require("../../utils/constants");
const _getPercent = require("../../utils/getPercent");
const _alphaSliderUtils = require("./alphaSliderUtils");
const _createHsvColor = require("../../utils/createHsvColor");
const useAlphaSliderState_unstable = (state, props)=>{
'use no memo';
var _props_defaultColor;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;
const hsvColor = color || colorFromContext;
const hslColor = (0, _tinycolor.tinycolor)(hsvColor).toHsl();
const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
defaultState: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, (_props_defaultColor = props.defaultColor) === null || _props_defaultColor === void 0 ? void 0 : _props_defaultColor.a),
state: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, hsvColor === null || hsvColor === void 0 ? void 0 : hsvColor.a),
initialState: (0, _alphaSliderUtils.adjustToTransparency)(100, transparency)
});
const clampedValue = (0, _reactutilities.clamp)(currentValue, _constants.MIN, _constants.MAX);
const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, _constants.MAX);
const inputOnChange = state.input.onChange;
const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
const newValue = (0, _alphaSliderUtils.adjustToTransparency)(Number(event.target.value), transparency);
const newColor = (0, _createHsvColor.createHsvColor)({
...hsvColor,
a: newValue / 100
});
setCurrentValue(newValue);
inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(event);
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
type: 'change',
event,
color: newColor
});
});
const sliderDirection = (0, _alphaSliderUtils.getSliderDirection)(dir, vertical, transparency);
const rootVariables = {
[_useAlphaSliderStylesstyles.alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,
[_useAlphaSliderStylesstyles.alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
[_useAlphaSliderStylesstyles.alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,
[_useAlphaSliderStylesstyles.alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
};
// Root props
state.root.style = {
...rootVariables,
...state.root.style
};
// Input Props
state.input.value = clampedValue;
state.input.onChange = _onChange;
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,116 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
alphaSliderCSSVars: function() {
return alphaSliderCSSVars;
},
alphaSliderClassNames: function() {
return alphaSliderClassNames;
},
useAlphaSliderStyles_unstable: function() {
return useAlphaSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
const alphaSliderClassNames = {
root: 'fui-AlphaSlider',
rail: 'fui-AlphaSlider__rail',
thumb: 'fui-AlphaSlider__thumb',
input: 'fui-AlphaSlider__input'
};
const alphaSliderCSSVars = {
sliderDirectionVar: `--fui-AlphaSlider--direction`,
sliderProgressVar: `--fui-AlphaSlider--progress`,
thumbColorVar: `--fui-AlphaSlider__thumb--color`,
railColorVar: `--fui-AlphaSlider__rail--color`
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
rail: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fm9niy",
Bcmaq0h: "f183gti0"
}
}, {
d: [
[
".fm9niy{border:1px solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
`.f183gti0{background-image:linear-gradient(var(--fui-AlphaSlider--direction), transparent, var(--fui-AlphaSlider__rail--color)),url(https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png);}`
]
});
/**
* Styles for the thumb slot
*/ const useThumbStyles = /*#__PURE__*/ (0, _react.__styles)({
thumb: {
De3pzq: "fxugw4r",
cmx5o7: "f5vbyc6"
},
horizontal: {
Bz10aip: [
"f13gfj74",
"f1nfknbn"
],
oyh7mz: [
"fsmxtey",
"fh8h8tc"
]
},
vertical: {
Bz10aip: "f5cv5a3",
B5kzvoi: "falo4kr"
}
}, {
d: [
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f5vbyc6::before{background-color:var(--fui-AlphaSlider__thumb--color);}",
".f13gfj74{transform:translateX(-50%);}",
".f1nfknbn{transform:translateX(50%);}",
".fsmxtey{left:var(--fui-AlphaSlider--progress);}",
".fh8h8tc{right:var(--fui-AlphaSlider--progress);}",
".f5cv5a3{transform:translateY(50%);}",
".falo4kr{bottom:var(--fui-AlphaSlider--progress);}"
]
});
const useAlphaSliderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const thumbStyles = useThumbStyles();
state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
(0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,76 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
alphaSliderCSSVars: function() {
return alphaSliderCSSVars;
},
alphaSliderClassNames: function() {
return alphaSliderClassNames;
},
useAlphaSliderStyles_unstable: function() {
return useAlphaSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
const alphaSliderClassNames = {
root: 'fui-AlphaSlider',
rail: 'fui-AlphaSlider__rail',
thumb: 'fui-AlphaSlider__thumb',
input: 'fui-AlphaSlider__input'
};
const alphaSliderCSSVars = {
sliderDirectionVar: `--fui-AlphaSlider--direction`,
sliderProgressVar: `--fui-AlphaSlider--progress`,
thumbColorVar: `--fui-AlphaSlider__thumb--color`,
railColorVar: `--fui-AlphaSlider__rail--color`
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
rail: {
border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
}
});
/**
* Styles for the thumb slot
*/ const useThumbStyles = (0, _react.makeStyles)({
thumb: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
'::before': {
backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`
}
},
horizontal: {
transform: 'translateX(-50%)',
left: `var(${alphaSliderCSSVars.sliderProgressVar})`
},
vertical: {
transform: 'translateY(50%)',
bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`
}
});
const useAlphaSliderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const thumbStyles = useThumbStyles();
state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
(0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ColorArea", {
enumerable: true,
get: function() {
return ColorArea;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useColorArea = require("./useColorArea");
const _renderColorArea = require("./renderColorArea");
const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ColorArea = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useColorArea.useColorArea_unstable)(props, ref);
(0, _useColorAreaStylesstyles.useColorAreaStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorAreaStyles_unstable')(state);
return (0, _renderColorArea.renderColorArea_unstable)(state);
});
ColorArea.displayName = 'ColorArea';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n const state = useColorArea_unstable(props, ref);\n\n useColorAreaStyles_unstable(state);\n useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAEO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAE9B,kCAAkC;AAKvE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n root: NonNullable<Slot<'div'>>;\n thumb?: NonNullable<Slot<'div'>>;\n inputX?: NonNullable<Slot<'input'>>;\n inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n Pick<ColorPickerProps, 'shape'> & {\n /**\n * The current color of the ColorArea.\n */\n color?: HsvColor;\n\n /**\n * The starting value for an uncontrolled ColorArea.\n */\n defaultColor?: HsvColor;\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: EventHandler<ColorAreaOnColorChangeData>;\n };\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorArea: function() {
return _ColorArea.ColorArea;
},
colorAreaCSSVars: function() {
return _useColorAreaStylesstyles.colorAreaCSSVars;
},
colorAreaClassNames: function() {
return _useColorAreaStylesstyles.colorAreaClassNames;
},
renderColorArea_unstable: function() {
return _renderColorArea.renderColorArea_unstable;
},
useColorAreaStyles_unstable: function() {
return _useColorAreaStylesstyles.useColorAreaStyles_unstable;
},
useColorArea_unstable: function() {
return _useColorArea.useColorArea_unstable;
}
});
const _ColorArea = require("./ColorArea");
const _renderColorArea = require("./renderColorArea");
const _useColorArea = require("./useColorArea");
const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type { ColorAreaOnColorChangeData, ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorArea_unstable } from './useColorArea';\nexport { colorAreaCSSVars, colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\n"],"names":["ColorArea","renderColorArea_unstable","useColorArea_unstable","colorAreaCSSVars","colorAreaClassNames","useColorAreaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAITG,0CAAgB;;;eAAEC,6CAAmB;;;eAFrCH,yCAAwB;;;eAEeI,qDAA2B;;;eADlEH,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CAC4B,8BAA8B"}

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderColorArea_unstable", {
enumerable: true,
get: function() {
return renderColorArea_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderColorArea_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.thumb, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.inputX, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.inputY, {})
]
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorAreaState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaState): JSXElement => {\n assertSlots<ColorAreaSlots>(state);\n\n return (\n <state.root>\n <state.thumb>\n <state.inputX />\n <state.inputY />\n </state.thumb>\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACD,MAAME,KAAK,EAAA;;kCACV,eAAA,EAACF,MAAMG,MAAM,EAAA,CAAA;kCACb,eAAA,EAACH,MAAMI,MAAM,EAAA,CAAA;;;;AAIrB,EAAE"}

View File

@@ -0,0 +1,191 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useColorArea_unstable", {
enumerable: true,
get: function() {
return useColorArea_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _tinycolor = require("@ctrl/tinycolor");
const _reactutilities = require("@fluentui/react-utilities");
const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacttabster = require("@fluentui/react-tabster");
const _constants = require("../../utils/constants");
const _getCoordinates = require("../../utils/getCoordinates");
const _colorPicker = require("../../contexts/colorPicker");
const useColorArea_unstable = (props, ref)=>{
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const rootRef = _react.useRef(null);
const xRef = _react.useRef(null);
const yRef = _react.useRef(null);
const focusWithinRef = (0, _reacttabster.useFocusWithin)();
const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
const { onChange = onChangeFromContext, shape = shapeFromContext, inputX, inputY, thumb, color, ...rest } = props;
const [hsvColor, setColor] = (0, _reactutilities.useControllableState)({
defaultState: props.defaultColor,
state: color || colorFromContext,
initialState: _constants.INITIAL_COLOR_HSV
});
const saturation = Math.round(hsvColor.s * 100);
const value = Math.round(hsvColor.v * 100);
const [activeAxis, setActiveAxis] = _react.useState(null);
const requestColorChange = (0, _reactutilities.useEventCallback)((event)=>{
if (!rootRef.current) {
return;
}
const coordinates = (0, _getCoordinates.getCoordinates)(rootRef.current, event);
const newColor = {
...hsvColor,
s: coordinates.x,
v: coordinates.y
};
setColor(newColor);
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
type: 'change',
event,
color: newColor
});
});
const handleDocumentPointerMove = _react.useCallback((event)=>{
requestColorChange(event);
}, [
requestColorChange
]);
const handleDocumentPointerUp = (0, _reactutilities.useEventCallback)(()=>{
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('pointermove', handleDocumentPointerMove);
});
const handleRootOnPointerDown = (0, _reactutilities.useEventCallback)((event)=>{
event.stopPropagation();
event.preventDefault();
requestColorChange(event.nativeEvent);
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointermove', handleDocumentPointerMove);
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('pointerup', handleDocumentPointerUp, {
once: true
});
});
const handleInputOnChange = (0, _reactutilities.useEventCallback)((event)=>{
const targetValue = Number(event.target.value) / 100;
const newColor = {
...hsvColor,
...event.target === xRef.current && {
s: targetValue
},
...event.target === yRef.current && {
v: targetValue
}
};
setColor(newColor);
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
type: 'change',
event,
color: newColor
});
});
const handleRootOnKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
let deltaX = 0;
let deltaY = 0;
let axis = 'x';
switch(event.key){
case 'ArrowUp':
event.preventDefault();
axis = 'y';
deltaY = 1;
break;
case 'ArrowDown':
event.preventDefault();
axis = 'y';
deltaY = -1;
break;
case 'ArrowLeft':
event.preventDefault();
axis = 'x';
deltaX = -1;
break;
case 'ArrowRight':
event.preventDefault();
axis = 'x';
deltaX = 1;
break;
}
if (deltaX === 0 && deltaY === 0) {
return;
}
const newColor = {
...hsvColor,
s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),
v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1)
};
setColor(newColor);
setActiveAxis(axis);
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
type: 'change',
event,
color: newColor
});
});
const rootVariables = {
[_useColorAreaStylesstyles.colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,
[_useColorAreaStylesstyles.colorAreaCSSVars.areaYProgressVar]: `${value}%`,
[_useColorAreaStylesstyles.colorAreaCSSVars.thumbColorVar]: (0, _tinycolor.tinycolor)(hsvColor).toRgbString(),
[_useColorAreaStylesstyles.colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`
};
const state = {
shape,
components: {
inputX: 'input',
inputY: 'input',
root: 'div',
thumb: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...rest
}), {
elementType: 'div'
}),
inputX: _reactutilities.slot.always(inputX, {
defaultProps: {
id: (0, _reactutilities.useId)('sliderX-'),
type: 'range',
...activeAxis && {
tabIndex: activeAxis === 'x' ? 0 : -1
}
},
elementType: 'input'
}),
inputY: _reactutilities.slot.always(inputY, {
defaultProps: {
id: (0, _reactutilities.useId)('sliderY-'),
type: 'range',
tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1
},
elementType: 'input'
}),
thumb: _reactutilities.slot.always(thumb, {
elementType: 'div'
})
};
state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, rootRef);
state.thumb.ref = (0, _reactutilities.useMergedRefs)(state.thumb.ref, focusWithinRef);
state.inputX.ref = (0, _reactutilities.useMergedRefs)(state.inputX.ref, xRef);
state.inputY.ref = (0, _reactutilities.useMergedRefs)(state.inputY.ref, yRef);
state.root.style = {
...state.root.style,
...rootVariables
};
state.root.onPointerDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onPointerDown, handleRootOnPointerDown));
state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, handleRootOnKeyDown));
state.inputX.onChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.inputX.onChange, handleInputOnChange));
state.inputY.onChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.inputY.onChange, handleInputOnChange));
state.inputX.value = saturation;
state.inputY.value = value;
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,378 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorAreaCSSVars: function() {
return colorAreaCSSVars;
},
colorAreaClassNames: function() {
return colorAreaClassNames;
},
useColorAreaStyles_unstable: function() {
return useColorAreaStyles_unstable;
}
});
const _react = require("@griffel/react");
const colorAreaClassNames = {
root: 'fui-ColorArea',
thumb: 'fui-ColorArea__thumb',
inputX: 'fui-ColorArea__inputX',
inputY: 'fui-ColorArea__inputY'
};
const colorAreaCSSVars = {
areaXProgressVar: `--fui-AreaX--progress`,
areaYProgressVar: `--fui-AreaY--progress`,
thumbColorVar: `--fui-Area__thumb--color`,
mainColorVar: `--fui-Area--main-color`
};
// Internal CSS variables
const thumbSizeVar = `--fui-Slider__thumb--size`;
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r77w3t7", "r9og4es", [
".r77w3t7{position:relative;border:1px solid var(--colorNeutralStroke1);background:linear-gradient(to bottom, transparent, #000),linear-gradient(to right, #fff, transparent),var(--fui-Area--main-color);forced-color-adjust:none;display:inline-grid;touch-action:none;align-items:start;justify-items:start;--fui-Slider__thumb--size:20px;min-width:300px;min-height:300px;box-sizing:border-box;margin-bottom:var(--spacingVerticalSNudge);}",
".r9og4es{position:relative;border:1px solid var(--colorNeutralStroke1);background:linear-gradient(to bottom, transparent, #000),linear-gradient(to left, #fff, transparent),var(--fui-Area--main-color);forced-color-adjust:none;display:inline-grid;touch-action:none;align-items:start;justify-items:start;--fui-Slider__thumb--size:20px;min-width:300px;min-height:300px;box-sizing:border-box;margin-bottom:var(--spacingVerticalSNudge);}"
]);
/**
* Styles for the thumb slot
*/ const useThumbStyles = /*#__PURE__*/ (0, _react.__styles)({
thumb: {
qhf8xq: "f1euv43f",
a9b677: "f174ca62",
Bqenvij: "f1yfdkfd",
Bkecrkj: "f1aehjj5",
oeaueh: "f1s6fcnf",
Bvjb7m6: "fdgv6k0",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f1lvq45z",
E5pizo: "f1whvlc6",
De3pzq: "fqogvx2",
Bz10aip: [
"f1g1iug4",
"f11okln6"
],
oyh7mz: [
"f1r4bsg1",
"fwsk87b"
],
B5kzvoi: "f1rtkqdg",
Brfgrao: "f1j7ml58",
lawp4y: 0,
Fbdkly: 0,
mdwyqc: 0,
Bciustq: 0,
gc50h5: "f1abv9ik",
r59vdv: 0,
Budzafs: 0,
ck0cow: 0,
n07z76: 0,
Gng75u: "fielpny",
Bcvre1j: "fyl8oag",
Ftih45: "fzhtfnv",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f3i7wkk"
},
focusIndicator: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
Bssx7fj: "f1b1k54r",
uh7if5: [
"f4ne723",
"fqqcjud"
],
clntm0: "fh7aioi",
Dlk2r6: [
"fqqcjud",
"f4ne723"
],
h6p2u: "f1ufm4qn",
I6qiy5: [
"f1qnwcb4",
"fgrk5zm"
],
yzno9d: "fi52z01",
By0wis0: [
"fgrk5zm",
"f1qnwcb4"
],
B2j2mmj: "ffht0p2",
wigs8: "f1p0ul1q",
pbfy6t: "f1c901ms",
B0v4ure: "f1alokd7",
Byrf0fs: 0,
Bsiemmq: 0,
Bwckmig: 0,
skfxo0: 0,
Iidy0u: 0,
B98u21t: 0,
Bvwlmkc: 0,
jo1ztg: 0,
Ba1iezr: 0,
Blmvk6g: 0,
B24cy0v: 0,
Bil7v7r: 0,
Br3gin4: 0,
nr063g: 0,
ghq09: 0,
Bbgo44z: 0,
Bseh09z: "f1i978nd",
az1dzo: 0,
Ba3ybja: 0,
B6352mv: 0,
vppk2z: 0,
Biaj6j7: "f16hcqkr",
B2pnrqr: "f1tye2sp",
B29w5g4: [
"flw7qy0",
"f1t01kh7"
],
Bhhzhcn: "frujvlw",
Bec0n69: [
"f1t01kh7",
"flw7qy0"
]
}
}, {
d: [
".f1euv43f{position:absolute;}",
".f174ca62{width:var(--fui-Slider__thumb--size);}",
".f1yfdkfd{height:var(--fui-Slider__thumb--size);}",
".f1aehjj5{pointer-events:none;}",
".f1s6fcnf{outline-style:none;}",
".fdgv6k0{forced-color-adjust:none;}",
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1lvq45z{border:var(--strokeWidthThin) solid var(--colorNeutralForeground4);}",
{
p: -2
}
],
".f1whvlc6{box-shadow:var(--shadow4);}",
".fqogvx2{background-color:var(--fui-Area__thumb--color);}",
".f1g1iug4{transform:translate(-50%, 50%);}",
".f11okln6{transform:translate(50%, 50%);}",
".f1r4bsg1{left:var(--fui-AreaX--progress);}",
".fwsk87b{right:var(--fui-AreaX--progress);}",
".f1rtkqdg{bottom:var(--fui-AreaY--progress);}",
".f1j7ml58::before{position:absolute;}",
[
".f1abv9ik::before{inset:0px;}",
{
p: -1
}
],
[
".fielpny::before{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".fyl8oag::before{box-sizing:border-box;}",
".fzhtfnv::before{content:'';}",
[
".f3i7wkk::before{border:var(--strokeWidthThick) solid var(--colorNeutralBackground1);}",
{
p: -2
}
],
".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}",
".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}",
".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}",
".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}",
".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}",
".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}",
".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}",
".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}",
[
".f1i978nd[data-fui-focus-within]:focus-within::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".f16hcqkr[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".f1tye2sp[data-fui-focus-within]:focus-within::after{top:calc(var(--strokeWidthThick) * -1);}",
".flw7qy0[data-fui-focus-within]:focus-within::after{right:calc(var(--strokeWidthThick) * -1);}",
".f1t01kh7[data-fui-focus-within]:focus-within::after{left:calc(var(--strokeWidthThick) * -1);}",
".frujvlw[data-fui-focus-within]:focus-within::after{bottom:calc(var(--strokeWidthThick) * -1);}"
],
f: [
".ftqa4ok:focus{outline-style:none;}"
],
i: [
".f2hkw1w:focus-visible{outline-style:none;}"
],
m: [
[
"@media (forced-colors: active){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
]
]
});
/**
* Styles for the Input slot
*/ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
input: {
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
qhf8xq: "f1euv43f",
Bkecrkj: "f1aehjj5",
Bhzewxz: "f15twtuk",
oyh7mz: [
"f1vgc2s3",
"f1e31b4d"
],
abs64n: "fk73vx1",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
a9b677: "fly5x3f",
Bqenvij: "f1l02sjl"
}
}, {
d: [
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".f1euv43f{position:absolute;}",
".f1aehjj5{pointer-events:none;}",
".f15twtuk{top:0;}",
".f1vgc2s3{left:0;}",
".f1e31b4d{right:0;}",
".fk73vx1{opacity:0;}",
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
[
".f1s184ao{margin:0;}",
{
p: -1
}
],
".fly5x3f{width:100%;}",
".f1l02sjl{height:100%;}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useColorAreaStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const thumbStyles = useThumbStyles();
const inputStyles = useInputStyles();
const shapeStyles = useShapeStyles();
state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,127 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorAreaCSSVars: function() {
return colorAreaCSSVars;
},
colorAreaClassNames: function() {
return colorAreaClassNames;
},
useColorAreaStyles_unstable: function() {
return useColorAreaStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const colorAreaClassNames = {
root: 'fui-ColorArea',
thumb: 'fui-ColorArea__thumb',
inputX: 'fui-ColorArea__inputX',
inputY: 'fui-ColorArea__inputY'
};
const colorAreaCSSVars = {
areaXProgressVar: `--fui-AreaX--progress`,
areaYProgressVar: `--fui-AreaY--progress`,
thumbColorVar: `--fui-Area__thumb--color`,
mainColorVar: `--fui-Area--main-color`
};
// Internal CSS variables
const thumbSizeVar = `--fui-Slider__thumb--size`;
/**
* Styles for the root slot
*/ const useRootStyles = (0, _react.makeResetStyles)({
position: 'relative',
border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,
forcedColorAdjust: 'none',
display: 'inline-grid',
touchAction: 'none',
alignItems: 'start',
justifyItems: 'start',
[thumbSizeVar]: '20px',
minWidth: '300px',
minHeight: '300px',
boxSizing: 'border-box',
marginBottom: _reacttheme.tokens.spacingVerticalSNudge
});
/**
* Styles for the thumb slot
*/ const useThumbStyles = (0, _react.makeStyles)({
thumb: {
position: 'absolute',
width: `var(${thumbSizeVar})`,
height: `var(${thumbSizeVar})`,
pointerEvents: 'none',
outlineStyle: 'none',
forcedColorAdjust: 'none',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
boxShadow: _reacttheme.tokens.shadow4,
backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
transform: 'translate(-50%, 50%)',
left: `var(${colorAreaCSSVars.areaXProgressVar})`,
bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
'::before': {
position: 'absolute',
inset: '0px',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
boxSizing: 'border-box',
content: "''",
border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorNeutralBackground1}`
}
},
focusIndicator: (0, _reacttabster.createFocusOutlineStyle)({
selector: 'focus-within',
style: {
outlineWidth: _reacttheme.tokens.strokeWidthThick,
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick),
outlineRadius: _reacttheme.tokens.borderRadiusCircular
}
})
});
/**
* Styles for the Input slot
*/ const useInputStyles = (0, _react.makeStyles)({
input: {
overflow: 'hidden',
position: 'absolute',
pointerEvents: 'none',
top: 0,
left: 0,
opacity: 0,
padding: '0',
margin: '0',
width: '100%',
height: '100%'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone
}
});
const useColorAreaStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const thumbStyles = useThumbStyles();
const inputStyles = useInputStyles();
const shapeStyles = useShapeStyles();
state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ColorPicker", {
enumerable: true,
get: function() {
return ColorPicker;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useColorPicker = require("./useColorPicker");
const _renderColorPicker = require("./renderColorPicker");
const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");
const _colorPicker = require("../../contexts/colorPicker");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ColorPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useColorPicker.useColorPicker_unstable)(props, ref);
const contextValues = (0, _colorPicker.useColorPickerContextValues)(state);
(0, _useColorPickerStylesstyles.useColorPickerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorPickerStyles_unstable')(state);
return (0, _renderColorPicker.renderColorPicker_unstable)(state, contextValues);
});
ColorPicker.displayName = 'ColorPicker';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from '../../contexts/colorPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;6BAElC,6BAA6B;qCAC7B,kCAAkC;AAKvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wCAAAA,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * ColorPicker Props\n */\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /**\n * Selected color.\n */\n color?: HsvColor;\n\n /**\n * Callback for when the user changes the color.\n */\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /**\n * ColorPicker shape\n * @defaultvalue 'rounded'\n */\n shape?: 'rounded' | 'square';\n};\n\n/**\n * State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorPicker: function() {
return _ColorPicker.ColorPicker;
},
colorPickerClassNames: function() {
return _useColorPickerStylesstyles.colorPickerClassNames;
},
renderColorPicker_unstable: function() {
return _renderColorPicker.renderColorPicker_unstable;
},
useColorPickerStyles_unstable: function() {
return _useColorPickerStylesstyles.useColorPickerStyles_unstable;
},
useColorPicker_unstable: function() {
return _useColorPicker.useColorPicker_unstable;
}
});
const _ColorPicker = require("./ColorPicker");
const _renderColorPicker = require("./renderColorPicker");
const _useColorPicker = require("./useColorPicker");
const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPicker_unstable } from './useColorPicker';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPicker_unstable","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eASXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BARJ,gBAAgB;mCAOD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderColorPicker_unstable", {
enumerable: true,
get: function() {
return renderColorPicker_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _colorPicker = require("../../contexts/colorPicker");
const renderColorPicker_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_colorPicker.ColorPickerProvider, {
value: contextValues.colorPicker,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/renderColorPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorPickerState, ColorPickerSlots } from './ColorPicker.types';\nimport type { ColorPickerContextValues } from '../../contexts/colorPicker';\nimport { ColorPickerProvider } from '../../contexts/colorPicker';\n\n/**\n * Render the final JSX of ColorPicker\n */\nexport const renderColorPicker_unstable = (\n state: ColorPickerState,\n contextValues: ColorPickerContextValues,\n): JSXElement => {\n assertSlots<ColorPickerSlots>(state);\n\n return (\n <ColorPickerProvider value={contextValues.colorPicker}>\n <state.root>{state.root.children}</state.root>\n </ColorPickerProvider>\n );\n};\n"],"names":["assertSlots","ColorPickerProvider","renderColorPicker_unstable","state","contextValues","value","colorPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;6BAIpB,6BAA6B;AAK1D,mCAAmC,CACxCC,OACAC;QAEAJ,2BAAAA,EAA8BG;IAE9B,OAAA,WAAA,OACE,eAAA,EAACF,gCAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

View File

@@ -0,0 +1,38 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useColorPicker_unstable", {
enumerable: true,
get: function() {
return useColorPicker_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useColorPicker_unstable = (props, ref)=>{
const { color, onColorChange, shape, ...rest } = props;
const requestChange = (0, _reactutilities.useEventCallback)((event, data)=>{
onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(event, {
type: 'change',
event,
color: data.color
});
});
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...rest
}), {
elementType: 'div'
}),
color,
requestChange,
shape
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } from './ColorPicker.types';\n/**\n * Create the state required to render ColorPicker.\n *\n * The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n *\n * @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAcaI;;;;;;;iEAZU,QAAQ;gCACkC,4BAA4B;AAWtF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,oBAAmDR,gCAAAA,EAAiB,CAACS,OAAOC;QAChFL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,51 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorPickerClassNames: function() {
return colorPickerClassNames;
},
useColorPickerStyles_unstable: function() {
return useColorPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const colorPickerClassNames = {
root: 'fui-ColorPicker'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f7e3wsx"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
[
".f7e3wsx{gap:var(--spacingVerticalXS);}",
{
p: -1
}
]
]
});
const useColorPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/**\n * Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;iCAcY;eAA7BU;;;uBAhBwB,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,39 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorPickerClassNames: function() {
return colorPickerClassNames;
},
useColorPickerStyles_unstable: function() {
return useColorPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const colorPickerClassNames = {
root: 'fui-ColorPicker'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'column',
gap: _reacttheme.tokens.spacingVerticalXS
}
});
const useColorPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;iCAkBAO;;;;uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ColorSlider", {
enumerable: true,
get: function() {
return ColorSlider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useColorSlider = require("./useColorSlider");
const _renderColorSlider = require("./renderColorSlider");
const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ColorSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useColorSlider.useColorSlider_unstable)(props, ref);
(0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorSliderStyles_unstable')(state);
return (0, _renderColorSlider.renderColorSlider_unstable)(state);
});
ColorSlider.displayName = 'ColorSlider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n const state = useColorSlider_unstable(props, ref);\n\n useColorSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' | 'saturation' | 'value';\n\n/**\n * ColorSlider Props\n */\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' | 'onChange' | 'value' | 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /**\n * Color channel of the Slider.\n * @default `hue`\n */\n channel?: ColorChannel;\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: EventHandler<SliderOnChangeData>;\n\n /**\n * Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n */\n vertical?: boolean;\n\n /**\n * Color of the ColorPicker\n */\n color?: HsvColor;\n\n /**\n * The starting color for an uncontrolled ColorSlider.\n */\n defaultColor?: HsvColor;\n };\n\n/**\n * State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSlider: function() {
return _ColorSlider.ColorSlider;
},
colorSliderCSSVars: function() {
return _useColorSliderStylesstyles.colorSliderCSSVars;
},
colorSliderClassNames: function() {
return _useColorSliderStylesstyles.colorSliderClassNames;
},
renderColorSlider_unstable: function() {
return _renderColorSlider.renderColorSlider_unstable;
},
useColorSliderStyles_unstable: function() {
return _useColorSliderStylesstyles.useColorSliderStyles_unstable;
},
useColorSlider_unstable: function() {
return _useColorSlider.useColorSlider_unstable;
}
});
const _ColorSlider = require("./ColorSlider");
const _renderColorSlider = require("./renderColorSlider");
const _useColorSlider = require("./useColorSlider");
const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type { ColorSliderProps, ColorSliderSlots, ColorSliderState, SliderOnChangeData } from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSlider_unstable } from './useColorSlider';\nexport {\n colorSliderCSSVars,\n colorSliderClassNames,\n useColorSliderStyles_unstable,\n} from './useColorSliderStyles.styles';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSlider_unstable","colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,8CAAkB;;;eAClBC,iDAAqB;;;eAJdH,6CAA0B;;;eAKjCI,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CAKpD,gCAAgC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderColorSlider_unstable", {
enumerable: true,
get: function() {
return renderColorSlider_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderColorSlider_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.rail, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.thumb, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSlider/renderColorSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState): JSXElement => {\n assertSlots<ColorSliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

View File

@@ -0,0 +1,131 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useColorSlider_unstable", {
enumerable: true,
get: function() {
return useColorSlider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _tinycolor = require("@ctrl/tinycolor");
const _reactutilities = require("@fluentui/react-utilities");
const _useColorSliderStylesstyles = require("./useColorSliderStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _colorPicker = require("../../contexts/colorPicker");
const _constants = require("../../utils/constants");
const _getPercent = require("../../utils/getPercent");
const _createHsvColor = require("../../utils/createHsvColor");
const _adjustChannel = require("../../utils/adjustChannel");
const useColorSlider_unstable = (props, ref)=>{
'use no memo';
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'onChange',
'color'
]
});
const { color, channel = 'hue', onChange = onChangeFromContext, shape = shapeFromContext, vertical, root, input, rail, thumb } = props;
const hsvColor = color || colorFromContext;
const hslColor = (0, _tinycolor.tinycolor)(hsvColor).toHsl();
const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
defaultState: props.defaultColor,
state: hsvColor,
initialState: _constants.INITIAL_COLOR_HSV
});
const MAX = channel === 'hue' ? _constants.HUE_MAX : _constants.MAX;
const valueChannelActions = {
hue: (0, _adjustChannel.clampValue)(currentColor.h),
saturation: (0, _adjustChannel.clampValue)(currentColor.s * 100),
value: (0, _adjustChannel.clampValue)(currentColor.v * 100)
};
const clampedValue = (0, _adjustChannel.adjustChannel)(channel, valueChannelActions);
const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, MAX);
const inputOnChange = input === null || input === void 0 ? void 0 : input.onChange;
const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
const newValue = Number(event.target.value);
const colorActions = {
hue: ()=>(0, _createHsvColor.createHsvColor)({
...hsvColor,
h: newValue
}),
saturation: ()=>(0, _createHsvColor.createHsvColor)({
...hsvColor,
s: newValue / 100
}),
value: ()=>(0, _createHsvColor.createHsvColor)({
...hsvColor,
v: newValue / 100
})
};
const newColor = (0, _adjustChannel.adjustChannel)(channel, colorActions)();
setCurrentColor(newColor);
inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(event);
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
type: 'change',
event,
color: newColor
});
});
const rootVariables = {
[_useColorSliderStylesstyles.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
[_useColorSliderStylesstyles.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
[_useColorSliderStylesstyles.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _tinycolor.tinycolor)(hsvColor).toRgbString(),
[_useColorSliderStylesstyles.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h} 100%, 50%)`
};
const state = {
shape,
vertical,
channel,
components: {
input: 'input',
rail: 'div',
root: 'div',
thumb: 'div'
},
root: _reactutilities.slot.always(root, {
defaultProps: {
role: 'group',
...nativeProps.root
},
elementType: 'div'
}),
input: _reactutilities.slot.always(input, {
defaultProps: {
id: (0, _reactutilities.useId)('slider-', props.id),
ref,
min: _constants.MIN,
max: MAX,
tabIndex: 0,
['aria-orientation']: vertical ? 'vertical' : 'horizontal',
...nativeProps.primary,
type: 'range'
},
elementType: 'input'
}),
rail: _reactutilities.slot.always(rail, {
elementType: 'div'
}),
thumb: _reactutilities.slot.always(thumb, {
elementType: 'div'
})
};
// Root props
state.root.style = {
...rootVariables,
...state.root.style
};
// Input Props
state.input.value = clampedValue;
state.input.onChange = _onChange;
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,455 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSliderCSSVars: function() {
return colorSliderCSSVars;
},
colorSliderClassNames: function() {
return colorSliderClassNames;
},
useColorSliderStyles_unstable: function() {
return useColorSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const colorSliderClassNames = {
root: 'fui-ColorSlider',
rail: 'fui-ColorSlider__rail',
thumb: 'fui-ColorSlider__thumb',
input: 'fui-ColorSlider__input'
};
const colorSliderCSSVars = {
sliderDirectionVar: `--fui-Slider--direction`,
sliderProgressVar: `--fui-Slider--progress`,
thumbColorVar: `--fui-Slider__thumb--color`,
railColorVar: `--fui-Slider__rail--color`,
thumbSizeVar: `--fui-Slider__thumb--size`,
railSizeVar: `--fui-Slider__rail--size`
};
const hueBackground = `linear-gradient(${[
`var(${colorSliderCSSVars.sliderDirectionVar})`,
'red',
'fuchsia',
'blue',
'aqua',
'lime',
'yellow',
'red'
].join(',')})`;
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1j9hj9j", null, [
".r1j9hj9j{position:relative;display:inline-grid;touch-action:none;align-items:center;justify-items:center;--fui-Slider__thumb--size:20px;--fui-Slider__rail--size:20px;min-height:32px;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
horizontal: {
Bf4jedk: "f93ek0f",
wkccdc: "fgfd48t",
Budl1dq: "f11e9psi"
},
vertical: {
sshi5w: "fwwq4i4",
wkccdc: "fqcvrs3",
Budl1dq: "fiadc6h"
}
}, {
d: [
".f93ek0f{min-width:200px;}",
".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}",
".f11e9psi{grid-template-columns:1fr 100% 1fr;}",
".fwwq4i4{min-height:280px;}",
".fqcvrs3{grid-template-rows:1fr 100% 1fr;}",
".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}"
]
});
const useChannelStyles = /*#__PURE__*/ (0, _react.__styles)({
hue: {
Bcmaq0h: "f1curpo1"
},
saturation: {
Bcmaq0h: [
"fdhcg5e",
"f1onqon0"
]
},
value: {
Bcmaq0h: [
"f1r1ueul",
"fbtriqu"
]
}
}, {
d: [
".f1curpo1{background-image:linear-gradient(var(--fui-Slider--direction),red,fuchsia,blue,aqua,lime,yellow,red);}",
".fdhcg5e{background-image:linear-gradient(to right, #808080, var(--fui-Slider__rail--color));}",
".f1onqon0{background-image:linear-gradient(to left, #808080, var(--fui-Slider__rail--color));}",
".f1r1ueul{background-image:linear-gradient(to right, #000, var(--fui-Slider__rail--color));}",
".fbtriqu{background-image:linear-gradient(to left, #000, var(--fui-Slider__rail--color));}"
]
});
/**
* Styles for the rail slot
*/ const useRailStyles = /*#__PURE__*/ (0, _react.__styles)({
rail: {
Bkecrkj: "f1aehjj5",
Ijaq50: "faunodf",
nk6f5a: "f88nxoq",
Br312pm: "fd46tj4",
Bw0ie65: "f1e2fz10",
qhf8xq: "f10pi13n",
Bvjb7m6: "fdgv6k0",
Bpd4iqm: "fpvhumw",
oeaueh: "f1yog68k",
Bw0xxkn: "f13sgyd8",
Ftih45: "fzhtfnv",
Brfgrao: "f1j7ml58"
},
horizontal: {
a9b677: "fly5x3f",
Bqenvij: "f1cy86ho",
Fbdkly: [
"f1heqfse",
"fkh49vu"
],
mdwyqc: [
"fkh49vu",
"f1heqfse"
],
Baz25je: "f16tdq4e"
},
vertical: {
a9b677: "fqxfnkd",
Bqenvij: "f1l02sjl",
Ccq8qp: "f1rik0od",
Bciustq: "f14xwovp",
lawp4y: "febq2dz"
}
}, {
d: [
".f1aehjj5{pointer-events:none;}",
".faunodf{grid-row-start:2;}",
".f88nxoq{grid-row-end:2;}",
".fd46tj4{grid-column-start:2;}",
".f1e2fz10{grid-column-end:2;}",
".f10pi13n{position:relative;}",
".fdgv6k0{forced-color-adjust:none;}",
".fpvhumw{outline-width:1px;}",
".f1yog68k{outline-style:solid;}",
".f13sgyd8{outline-color:var(--colorTransparentStroke);}",
".fzhtfnv::before{content:'';}",
".f1j7ml58::before{position:absolute;}",
".fly5x3f{width:100%;}",
".f1cy86ho{height:var(--fui-Slider__rail--size);}",
".f1heqfse::before{left:-1px;}",
".fkh49vu::before{right:-1px;}",
".f16tdq4e::before{height:var(--fui-Slider__rail--size);}",
".fqxfnkd{width:var(--fui-Slider__rail--size);}",
".f1l02sjl{height:100%;}",
".f1rik0od::before{width:var(--fui-Slider__rail--size);}",
".f14xwovp::before{top:-1px;}",
".febq2dz::before{bottom:1px;}"
]
});
/**
* Styles for the thumb slot
*/ const useThumbStyles = /*#__PURE__*/ (0, _react.__styles)({
thumb: {
Ijaq50: "faunodf",
nk6f5a: "f88nxoq",
Br312pm: "fd46tj4",
Bw0ie65: "f1e2fz10",
qhf8xq: "f1euv43f",
a9b677: "f174ca62",
Bqenvij: "f1yfdkfd",
Bkecrkj: "f1aehjj5",
oeaueh: "f1s6fcnf",
Bvjb7m6: "fdgv6k0",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f1lvq45z",
E5pizo: "f1whvlc6",
De3pzq: "foksa45",
Brfgrao: "f1j7ml58",
lawp4y: 0,
Fbdkly: 0,
mdwyqc: 0,
Bciustq: 0,
gc50h5: "f1abv9ik",
r59vdv: 0,
Budzafs: 0,
ck0cow: 0,
n07z76: 0,
Gng75u: "fielpny",
Bcvre1j: "fyl8oag",
Ftih45: "fzhtfnv",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f3i7wkk"
},
horizontal: {
Bz10aip: [
"f13gfj74",
"f1nfknbn"
],
oyh7mz: [
"f1fj3zth",
"fcf9u6w"
]
},
vertical: {
Bz10aip: "f5cv5a3",
B5kzvoi: "feeniun"
}
}, {
d: [
".faunodf{grid-row-start:2;}",
".f88nxoq{grid-row-end:2;}",
".fd46tj4{grid-column-start:2;}",
".f1e2fz10{grid-column-end:2;}",
".f1euv43f{position:absolute;}",
".f174ca62{width:var(--fui-Slider__thumb--size);}",
".f1yfdkfd{height:var(--fui-Slider__thumb--size);}",
".f1aehjj5{pointer-events:none;}",
".f1s6fcnf{outline-style:none;}",
".fdgv6k0{forced-color-adjust:none;}",
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1lvq45z{border:var(--strokeWidthThin) solid var(--colorNeutralForeground4);}",
{
p: -2
}
],
".f1whvlc6{box-shadow:var(--shadow4);}",
".foksa45{background-color:var(--fui-Slider__thumb--color);}",
".f1j7ml58::before{position:absolute;}",
[
".f1abv9ik::before{inset:0px;}",
{
p: -1
}
],
[
".fielpny::before{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".fyl8oag::before{box-sizing:border-box;}",
".fzhtfnv::before{content:'';}",
[
".f3i7wkk::before{border:var(--strokeWidthThick) solid var(--colorNeutralBackground1);}",
{
p: -2
}
],
".f13gfj74{transform:translateX(-50%);}",
".f1nfknbn{transform:translateX(50%);}",
".f1fj3zth{left:var(--fui-Slider--progress);}",
".fcf9u6w{right:var(--fui-Slider--progress);}",
".f5cv5a3{transform:translateY(50%);}",
".feeniun{bottom:var(--fui-Slider--progress);}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
/**
* Styles for the Input slot
*/ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
input: {
Bceei9c: "f1k6fduh",
abs64n: "fk73vx1",
Ijaq50: "f16hsg94",
nk6f5a: "f1nzqi2z",
Br312pm: "fwpfdsa",
Bw0ie65: "fuur7zz",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
jo39rj: 0,
C5zqim: 0,
Bdlbwnu: 0,
B8rk77i: 0,
Bbzx7hc: 0,
Hwkvcz: 0,
B0nnt1c: 0,
Brwsv5j: 0,
B2b7vog: 0,
B4hmq5e: 0,
B8jxwem: 0,
B18nadz: 0,
Ddg5ig: 0,
Byj09el: 0,
Dac2s3: 0,
Dd2y6r: 0,
Bk0t58e: "f1nq8t98",
Ewenww: 0,
Brqi8qb: 0,
zz3kca: 0,
low6xx: "fjt56wq",
d0s10n: 0,
wea7l5: 0,
olu5tv: 0,
g5nsvh: 0,
Bqvnfwh: "f1n9m442"
},
horizontal: {
Bqenvij: "f1yfdkfd",
a9b677: "fly5x3f"
},
vertical: {
Bqenvij: "f1l02sjl",
a9b677: "f174ca62",
Biqzhck: "f1r7j8g6",
kgocjf: [
"f1va4sj6",
"f1r2v9sp"
]
}
}, {
d: [
".f1k6fduh{cursor:pointer;}",
".fk73vx1{opacity:0;}",
".f16hsg94{grid-row-start:1;}",
".f1nzqi2z{grid-row-end:-1;}",
".fwpfdsa{grid-column-start:1;}",
".fuur7zz{grid-column-end:-1;}",
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
[
".f1s184ao{margin:0;}",
{
p: -1
}
],
".f1yfdkfd{height:var(--fui-Slider__thumb--size);}",
".fly5x3f{width:100%;}",
".f1l02sjl{height:100%;}",
".f174ca62{width:var(--fui-Slider__thumb--size);}",
".f1r7j8g6{writing-mode:vertical-lr;}",
".f1va4sj6{direction:rtl;}",
".f1r2v9sp{direction:ltr;}"
],
i: [
[
".f1nq8t98:focus-visible~.fui-ColorSlider__thumb{border:2px solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".fjt56wq:focus-visible~.fui-ColorSlider__thumb{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}",
{
p: -1
}
],
[
".f1n9m442:focus-visible~.fui-ColorSlider__thumb{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
]
]
});
const useColorSliderStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const styles = useStyles();
const railStyles = useRailStyles();
const thumbStyles = useThumbStyles();
const inputStyles = useInputStyles();
const shapeStyles = useShapeStyles();
const channelStyles = useChannelStyles();
const isVertical = state.vertical;
state.root.className = (0, _react.mergeClasses)(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
state.rail.className = (0, _react.mergeClasses)(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
state.thumb.className = (0, _react.mergeClasses)(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
state.input.className = (0, _react.mergeClasses)(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,212 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSliderCSSVars: function() {
return colorSliderCSSVars;
},
colorSliderClassNames: function() {
return colorSliderClassNames;
},
useColorSliderStyles_unstable: function() {
return useColorSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const colorSliderClassNames = {
root: 'fui-ColorSlider',
rail: 'fui-ColorSlider__rail',
thumb: 'fui-ColorSlider__thumb',
input: 'fui-ColorSlider__input'
};
const colorSliderCSSVars = {
sliderDirectionVar: `--fui-Slider--direction`,
sliderProgressVar: `--fui-Slider--progress`,
thumbColorVar: `--fui-Slider__thumb--color`,
railColorVar: `--fui-Slider__rail--color`,
thumbSizeVar: `--fui-Slider__thumb--size`,
railSizeVar: `--fui-Slider__rail--size`
};
const hueBackground = `linear-gradient(${[
`var(${colorSliderCSSVars.sliderDirectionVar})`,
'red',
'fuchsia',
'blue',
'aqua',
'lime',
'yellow',
'red'
].join(',')})`;
/**
* Styles for the root slot
*/ const useRootStyles = (0, _react.makeResetStyles)({
position: 'relative',
display: 'inline-grid',
touchAction: 'none',
alignItems: 'center',
justifyItems: 'center',
[colorSliderCSSVars.thumbSizeVar]: '20px',
[colorSliderCSSVars.railSizeVar]: '20px',
minHeight: '32px'
});
const useStyles = (0, _react.makeStyles)({
horizontal: {
minWidth: '200px',
// 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,
gridTemplateColumns: `1fr 100% 1fr`
},
vertical: {
minHeight: '280px',
// 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
gridTemplateRows: `1fr 100% 1fr`,
gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`
}
});
const useChannelStyles = (0, _react.makeStyles)({
hue: {
backgroundImage: hueBackground
},
saturation: {
backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`
},
value: {
backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`
}
});
/**
* Styles for the rail slot
*/ const useRailStyles = (0, _react.makeStyles)({
rail: {
pointerEvents: 'none',
gridRowStart: '2',
gridRowEnd: '2',
gridColumnStart: '2',
gridColumnEnd: '2',
position: 'relative',
forcedColorAdjust: 'none',
outlineWidth: '1px',
outlineStyle: 'solid',
outlineColor: _reacttheme.tokens.colorTransparentStroke,
'::before': {
content: "''",
position: 'absolute'
}
},
horizontal: {
width: '100%',
height: `var(${colorSliderCSSVars.railSizeVar})`,
'::before': {
left: '-1px',
right: '-1px',
height: `var(${colorSliderCSSVars.railSizeVar})`
}
},
vertical: {
width: `var(${colorSliderCSSVars.railSizeVar})`,
height: '100%',
'::before': {
width: `var(${colorSliderCSSVars.railSizeVar})`,
top: '-1px',
bottom: '1px'
}
}
});
/**
* Styles for the thumb slot
*/ const useThumbStyles = (0, _react.makeStyles)({
thumb: {
gridRowStart: '2',
gridRowEnd: '2',
gridColumnStart: '2',
gridColumnEnd: '2',
position: 'absolute',
width: `var(${colorSliderCSSVars.thumbSizeVar})`,
height: `var(${colorSliderCSSVars.thumbSizeVar})`,
pointerEvents: 'none',
outlineStyle: 'none',
forcedColorAdjust: 'none',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
boxShadow: _reacttheme.tokens.shadow4,
backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
'::before': {
position: 'absolute',
inset: '0px',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
boxSizing: 'border-box',
content: "''",
border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorNeutralBackground1}`
}
},
horizontal: {
transform: 'translateX(-50%)',
left: `var(${colorSliderCSSVars.sliderProgressVar})`
},
vertical: {
transform: 'translateY(50%)',
bottom: `var(${colorSliderCSSVars.sliderProgressVar})`
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone
}
});
/**
* Styles for the Input slot
*/ const useInputStyles = (0, _react.makeStyles)({
input: {
cursor: 'pointer',
opacity: 0,
gridRowStart: '1',
gridRowEnd: '-1',
gridColumnStart: '1',
gridColumnEnd: '-1',
padding: '0',
margin: '0',
[`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {
border: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorTransparentStroke}`,
borderRadius: _reacttheme.tokens.borderRadiusCircular
}
},
horizontal: {
height: `var(${colorSliderCSSVars.thumbSizeVar})`,
width: '100%'
},
vertical: {
height: '100%',
width: `var(${colorSliderCSSVars.thumbSizeVar})`,
'writing-mode': 'vertical-lr',
direction: 'rtl'
}
});
const useColorSliderStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const styles = useStyles();
const railStyles = useRailStyles();
const thumbStyles = useThumbStyles();
const inputStyles = useInputStyles();
const shapeStyles = useShapeStyles();
const channelStyles = useChannelStyles();
const isVertical = state.vertical;
state.root.className = (0, _react.mergeClasses)(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
state.rail.className = (0, _react.mergeClasses)(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
state.thumb.className = (0, _react.mergeClasses)(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
state.input.className = (0, _react.mergeClasses)(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,49 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorPickerProvider: function() {
return ColorPickerProvider;
},
colorPickerContextDefaultValue: function() {
return colorPickerContextDefaultValue;
},
useColorPickerContextValue_unstable: function() {
return useColorPickerContextValue_unstable;
},
useColorPickerContextValues: function() {
return useColorPickerContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const useColorPickerContextValues = (state)=>{
const { color, shape, requestChange } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const colorPicker = {
requestChange,
color,
shape
};
return {
colorPicker
};
};
const colorPickerContextDefaultValue = {
requestChange: ()=>{
/*noop*/ },
color: undefined,
shape: 'rounded'
};
const colorPickerContext = (0, _reactcontextselector.createContext)(undefined);
const ColorPickerProvider = colorPickerContext.Provider;
const useColorPickerContextValue_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(colorPickerContext, (ctx = colorPickerContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {\n /**\n * @internal\n * Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n */\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const colorPicker: ColorPickerContextValue = {\n requestChange,\n color,\n shape,\n };\n\n return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /*noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue | undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","colorPickerContextDefaultValue","undefined","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;uBAiDaY;;;kCAhBAH;;;uCAkBAK;;;+BA/BAX;;;;;iEAlBU,QAAQ;sCACmB,mCAAmC;AAiB9E,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,MAAMC,iCAA0D;IACrEF,eAAe;IACb,MAAM,GACR;IACAF,OAAOK;IACPJ,OAAO;AACT,EAAE;AAMF,MAAMK,yBAAqBV,mCAAAA,EACzBS;AAGK,MAAME,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,eACrDb,wCAAAA,EAAmBS,oBAAoB,CAACK,MAAMP,8BAA8B,GAAKM,SAASC,MAAM"}

View File

@@ -0,0 +1,76 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AlphaSlider: function() {
return _AlphaSlider.AlphaSlider;
},
ColorArea: function() {
return _ColorArea.ColorArea;
},
ColorPicker: function() {
return _ColorPicker.ColorPicker;
},
ColorSlider: function() {
return _ColorSlider.ColorSlider;
},
alphaSliderClassNames: function() {
return _AlphaSlider.alphaSliderClassNames;
},
colorAreaClassNames: function() {
return _ColorArea.colorAreaClassNames;
},
colorPickerClassNames: function() {
return _ColorPicker.colorPickerClassNames;
},
colorSliderClassNames: function() {
return _ColorSlider.colorSliderClassNames;
},
renderAlphaSlider_unstable: function() {
return _AlphaSlider.renderAlphaSlider_unstable;
},
renderColorArea_unstable: function() {
return _ColorArea.renderColorArea_unstable;
},
renderColorPicker_unstable: function() {
return _ColorPicker.renderColorPicker_unstable;
},
renderColorSlider_unstable: function() {
return _ColorSlider.renderColorSlider_unstable;
},
useAlphaSliderStyles_unstable: function() {
return _AlphaSlider.useAlphaSliderStyles_unstable;
},
useAlphaSlider_unstable: function() {
return _AlphaSlider.useAlphaSlider_unstable;
},
useColorAreaStyles_unstable: function() {
return _ColorArea.useColorAreaStyles_unstable;
},
useColorArea_unstable: function() {
return _ColorArea.useColorArea_unstable;
},
useColorPickerStyles_unstable: function() {
return _ColorPicker.useColorPickerStyles_unstable;
},
useColorPicker_unstable: function() {
return _ColorPicker.useColorPicker_unstable;
},
useColorSliderStyles_unstable: function() {
return _ColorSlider.useColorSliderStyles_unstable;
},
useColorSlider_unstable: function() {
return _ColorSlider.useColorSlider_unstable;
}
});
const _ColorSlider = require("./ColorSlider");
const _ColorPicker = require("./ColorPicker");
const _ColorArea = require("./ColorArea");
const _AlphaSlider = require("./AlphaSlider");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { ColorSliderProps, ColorSliderSlots, ColorSliderState } from './ColorSlider';\nexport {\n ColorSlider,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './ColorSlider';\nexport type { ColorPickerProps, ColorPickerSlots, ColorPickerState } from './ColorPicker';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './ColorPicker';\nexport type { ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea';\nexport {\n ColorArea,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './ColorArea';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider';\nexport {\n AlphaSlider,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './AlphaSlider';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":";;;;;;;;;;;eA0Ba;eAAXe;;IARAL,SAAS;;;;eARTL,wBAAW;;;eARXL,wBAAW;;;eAyBXgB,kCAAqB;;IARrBL;6CAAmB;;;eARnBL,kCAAqB;;;eARrBL,kCAAqB;;IAyBrBgB,0BAA0B;;;IAR1BL,wBAAwB;;;;eARxBL,uCAA0B;;;eAR1BL,uCAA0B;;IAyB1BgB;yDAA6B;;;eAC7BC,oCAAuB;;;eATvBN,sCAA2B;;;eAC3BC,gCAAqB;;;eATrBN,0CAA6B;;;eAC7BC,oCAAuB;;;eATvBN,0CAA6B;;IAC7BC;mDAAuB;;;6BAClB,gBAAgB;6BAQhB,gBAAgB;2BAQhB,cAAc;6BAQd,gBAAgB"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n h: number;\n s: number;\n v: number;\n a?: number;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
adjustChannel: function() {
return adjustChannel;
},
clampValue: function() {
return clampValue;
}
});
const _constants = require("./constants");
const _reactutilities = require("@fluentui/react-utilities");
function clampValue(value, channel = 'hue') {
const MAX = channel === 'hue' ? _constants.HUE_MAX : _constants.MAX;
return (0, _reactutilities.clamp)(value, _constants.MIN, MAX);
}
function adjustChannel(channel, actions) {
return actions[channel] || actions.hue;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n hue: T;\n saturation: T;\n value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":";;;;;;;;;;;iBA8BgBQ;;;cAnBAH;;;;2BAV+B,cAAc;gCACvC,4BAA4B;AAS3C,SAASA,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,kBAAAA,GAAUE,cAAAA;IAC1C,WAAOC,qBAAAA,EAAME,OAAON,cAAAA,EAAKE;AAC3B;AAgBO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
HUE_MAX: function() {
return HUE_MAX;
},
INITIAL_COLOR: function() {
return INITIAL_COLOR;
},
INITIAL_COLOR_HSV: function() {
return INITIAL_COLOR_HSV;
},
MAX: function() {
return MAX;
},
MIN: function() {
return MIN;
}
});
const _tinycolor = require("@ctrl/tinycolor");
const MIN = 0;
const MAX = 100;
const HUE_MAX = 360;
const INITIAL_COLOR = '#FFF';
const INITIAL_COLOR_HSV = (0, _tinycolor.tinycolor)(INITIAL_COLOR).toHsv();

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["import { tinycolor } from '@ctrl/tinycolor';\n\nexport const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();\n"],"names":["tinycolor","MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","toHsv"],"mappings":";;;;;;;;;;;WAIaG;;;iBACAC;;;qBACAC;;;OAHAH;;;OADAD;;;;2BAFa,kBAAkB;AAErC,MAAMA,MAAM,EAAE;AACd,MAAMC,MAAM,IAAI;AAChB,MAAMC,UAAU,IAAI;AACpB,MAAMC,gBAAgB,OAAO;AAC7B,MAAMC,wBAAoBL,oBAAAA,EAAUI,eAAeE,KAAK,GAAG"}

View File

@@ -0,0 +1,27 @@
/**
* Creates an HSV color object with optional hue, saturation, value, and alpha components.
*
* @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:
* - `h` (number): The hue component, default is 0.
* - `s` (number): The saturation component, default is 0.
* - `v` (number): The value component, default is 0.
* - `a` (number): The alpha component, default is 1.
* @returns {HsvColor} The resulting HSV color object.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createHsvColor", {
enumerable: true,
get: function() {
return createHsvColor;
}
});
function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }) {
return {
h,
s,
v,
a
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/**\n * Creates an HSV color object with optional hue, saturation, value, and alpha components.\n *\n * @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD;;;;;;;;;;AAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getCoordinates: function() {
return getCoordinates;
},
roundTwoDecimal: function() {
return roundTwoDecimal;
}
});
const _reactutilities = require("@fluentui/react-utilities");
function getCoordinates(element, event) {
const rect = element.getBoundingClientRect();
const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);
const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);
return {
x: (0, _reactutilities.clamp)(newX, 0, 1),
y: (0, _reactutilities.clamp)(newY, 0, 1)
};
}
function roundTwoDecimal(num) {
return Math.round(num * 100) / 100;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event: PointerEvent): { x: number; y: number } {\n const rect = element.getBoundingClientRect();\n\n const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n return {\n x: clamp(newX, 0, 1),\n y: clamp(newY, 0, 1),\n };\n}\n\n/**\n * Rounds a given number to two decimal places.\n *\n * @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n */\nexport function roundTwoDecimal(num: number): number {\n return Math.round(num * 100) / 100;\n}\n"],"names":["clamp","getCoordinates","element","event","rect","getBoundingClientRect","newX","roundTwoDecimal","clientX","left","width","newY","clientY","top","height","x","y","num","Math","round"],"mappings":";;;;;;;;;;;IASgBC,cAAAA;;;mBAkBAM;;;;gCA3BM,4BAA4B;AAS3C,wBAAwBL,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOC,gBAAiBJ,CAAAA,MAAMK,OAAO,GAAGJ,KAAKK,IAAG,AAAHA,IAAQL,KAAKM,KAAK;IACrE,MAAMC,OAAOJ,gBAAgB,IAAKJ,CAAAA,MAAMS,OAAO,GAAGR,KAAKS,GAAAA,AAAE,IAAKT,KAAKU,MAAM;IAEzE,OAAO;QACLC,OAAGf,qBAAAA,EAAMM,MAAM,GAAG;QAClBU,OAAGhB,qBAAAA,EAAMW,MAAM,GAAG;IACpB;AACF;AAQO,SAASJ,gBAAgBU,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}

View File

@@ -0,0 +1,21 @@
/**
* Calculates the percentage of a value within a given range.
*
* @param value - The value to be converted to a percentage.
* @param min - The minimum value of the range.
* @param max - The maximum value of the range.
* @returns The percentage representation of the value within the range [min, max].
* Returns 0 if `min` is equal to `max`.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getPercent", {
enumerable: true,
get: function() {
return getPercent;
}
});
const getPercent = (value, min, max)=>{
return max === min ? 0 : (value - min) / (max - min) * 100;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/getPercent.ts"],"sourcesContent":["/**\n * Calculates the percentage of a value within a given range.\n *\n * @param value - The value to be converted to a percentage.\n * @param min - The minimum value of the range.\n * @param max - The maximum value of the range.\n * @returns The percentage representation of the value within the range [min, max].\n * Returns 0 if `min` is equal to `max`.\n */\nexport const getPercent = (value: number, min: number, max: number): number => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n"],"names":["getPercent","value","min","max"],"mappings":"AAAA;;;;;;;;CAQC,GACD;;;;;;;;;;AAAO,MAAMA,aAAa,CAACC,OAAeC,KAAaC;IACrD,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D,EAAE"}

View File

@@ -0,0 +1 @@
export { AlphaSlider, alphaSliderCSSVars, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from './components/AlphaSlider/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './components/AlphaSlider/index';\nexport {\n AlphaSlider,\n alphaSliderCSSVars,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { ColorArea, colorAreaCSSVars, colorAreaClassNames, renderColorArea_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from './components/ColorArea/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n ColorAreaOnColorChangeData,\n ColorAreaProps,\n ColorAreaSlots,\n ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n ColorArea,\n colorAreaCSSVars,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"mappings":"AAMA,SACEA,SAAS,EACTC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}

View File

@@ -0,0 +1 @@
export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerStyles_unstable, useColorPicker_unstable } from './components/ColorPicker/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"mappings":"AAMA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { ColorSlider, colorSliderCSSVars, colorSliderClassNames, renderColorSlider_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from './components/ColorSlider/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n ColorSlider,\n colorSliderCSSVars,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"mappings":"AAMA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useAlphaSlider_unstable } from './useAlphaSlider';
import { renderAlphaSlider_unstable } from './renderAlphaSlider';
import { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* AlphaSlider component
*/ export const AlphaSlider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAlphaSlider_unstable(props, ref);
useAlphaSliderStyles_unstable(state);
useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);
return renderAlphaSlider_unstable(state);
});
AlphaSlider.displayName = 'AlphaSlider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n const state = useAlphaSlider_unstable(props, ref);\n\n useAlphaSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering AlphaSlider
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n /**\n * The `transparency` property determines how the alpha channel is interpreted.\n * - When `false`, the alpha channel represents the opacity of the color.\n * - When `true`, the alpha channel represents the transparency of the color.\n * For example, a 30% transparent color has 70% opacity.\n *\n * @defaultvalue false\n */\n transparency?: boolean;\n};\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n Pick<AlphaSliderProps, 'vertical'> &\n Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WAEgE"}

Some files were not shown because too many files have changed in this diff Show More