@womp/kookie-ui 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/components.css +246 -42
  2. package/dist/cjs/components/index.js +2 -2
  3. package/dist/cjs/components/index.js.map +3 -3
  4. package/dist/cjs/components/segmented-control.js +1 -1
  5. package/dist/cjs/components/segmented-control.js.map +3 -3
  6. package/dist/cjs/components/segmented-control.props.d.ts +6 -0
  7. package/dist/cjs/components/segmented-control.props.d.ts.map +1 -1
  8. package/dist/cjs/components/segmented-control.props.js +1 -1
  9. package/dist/cjs/components/segmented-control.props.js.map +3 -3
  10. package/dist/cjs/components/text-field.d.ts +11 -3
  11. package/dist/cjs/components/text-field.d.ts.map +1 -1
  12. package/dist/cjs/components/text-field.js +2 -2
  13. package/dist/cjs/components/text-field.js.map +3 -3
  14. package/dist/cjs/components/text-field.props.d.ts +30 -1
  15. package/dist/cjs/components/text-field.props.d.ts.map +1 -1
  16. package/dist/cjs/components/text-field.props.js +1 -1
  17. package/dist/cjs/components/text-field.props.js.map +3 -3
  18. package/dist/cjs/index.js +4 -4
  19. package/dist/cjs/index.js.map +3 -3
  20. package/dist/cjs/props/index.js +1 -1
  21. package/dist/cjs/props/index.js.map +3 -3
  22. package/dist/esm/chunk-A252TSYI.js +2 -0
  23. package/dist/esm/chunk-A252TSYI.js.map +7 -0
  24. package/dist/esm/chunk-FIMFM25N.js +2 -0
  25. package/dist/esm/chunk-FIMFM25N.js.map +7 -0
  26. package/dist/esm/chunk-GPZHRZBE.js +6 -0
  27. package/dist/esm/chunk-GPZHRZBE.js.map +7 -0
  28. package/dist/esm/chunk-TSS4K2U5.js +3 -0
  29. package/dist/esm/{chunk-W4Z6ORYO.js.map → chunk-TSS4K2U5.js.map} +3 -3
  30. package/dist/esm/components/index.js +1 -1
  31. package/dist/esm/components/segmented-control.js +1 -1
  32. package/dist/esm/components/segmented-control.props.d.ts +6 -0
  33. package/dist/esm/components/segmented-control.props.d.ts.map +1 -1
  34. package/dist/esm/components/segmented-control.props.js +1 -1
  35. package/dist/esm/components/text-field.d.ts +11 -3
  36. package/dist/esm/components/text-field.d.ts.map +1 -1
  37. package/dist/esm/components/text-field.js +1 -1
  38. package/dist/esm/components/text-field.props.d.ts +30 -1
  39. package/dist/esm/components/text-field.props.d.ts.map +1 -1
  40. package/dist/esm/components/text-field.props.js +1 -1
  41. package/dist/esm/index.js +1 -1
  42. package/dist/esm/props/index.js +1 -1
  43. package/package.json +1 -1
  44. package/src/components/segmented-control.css +43 -0
  45. package/src/components/segmented-control.props.tsx +5 -0
  46. package/src/components/shell.css +7 -7
  47. package/src/components/sidebar.css +22 -9
  48. package/src/components/text-field.css +138 -0
  49. package/src/components/text-field.props.tsx +16 -1
  50. package/src/components/text-field.tsx +48 -4
  51. package/styles.css +246 -42
  52. package/dist/esm/chunk-2ZLMWYJ6.js +0 -2
  53. package/dist/esm/chunk-2ZLMWYJ6.js.map +0 -7
  54. package/dist/esm/chunk-BP64M73W.js +0 -2
  55. package/dist/esm/chunk-BP64M73W.js.map +0 -7
  56. package/dist/esm/chunk-W4Z6ORYO.js +0 -3
  57. package/dist/esm/chunk-ZOUIIO4C.js +0 -6
  58. package/dist/esm/chunk-ZOUIIO4C.js.map +0 -7
package/styles.css CHANGED
@@ -11420,6 +11420,173 @@
11420
11420
  filter: none;
11421
11421
  }
11422
11422
  }
11423
+ .kui-TextFieldGroup {
11424
+ display: grid;
11425
+ grid-auto-flow: column;
11426
+ grid-auto-columns: minmax(0, 1fr);
11427
+ position: relative;
11428
+ isolation: isolate;
11429
+ border-radius: var(--text-field-border-radius);
11430
+ }
11431
+ .kui-TextFieldGroup::after {
11432
+ content: '';
11433
+ position: absolute;
11434
+ inset: 0;
11435
+ z-index: 2;
11436
+ border-radius: inherit;
11437
+ -webkit-box-shadow: var(--text-field-group-edge);
11438
+ box-shadow: var(--text-field-group-edge);
11439
+ pointer-events: none;
11440
+ }
11441
+ .kui-TextFieldGroup:where(.kui-r-size-1) {
11442
+ --text-field-border-radius: var(--radius-control-1);
11443
+ }
11444
+ .kui-TextFieldGroup:where(.kui-r-size-2) {
11445
+ --text-field-border-radius: var(--radius-control-2);
11446
+ }
11447
+ .kui-TextFieldGroup:where(.kui-r-size-3) {
11448
+ --text-field-border-radius: var(--radius-control-3);
11449
+ }
11450
+ .kui-TextFieldGroup:where(.kui-r-size-4) {
11451
+ --text-field-border-radius: var(--radius-control-4);
11452
+ }
11453
+ @media (min-width: 520px) {
11454
+ .kui-TextFieldGroup:where(.xs\:kui-r-size-1) {
11455
+ --text-field-border-radius: var(--radius-control-1);
11456
+ }
11457
+ .kui-TextFieldGroup:where(.xs\:kui-r-size-2) {
11458
+ --text-field-border-radius: var(--radius-control-2);
11459
+ }
11460
+ .kui-TextFieldGroup:where(.xs\:kui-r-size-3) {
11461
+ --text-field-border-radius: var(--radius-control-3);
11462
+ }
11463
+ .kui-TextFieldGroup:where(.xs\:kui-r-size-4) {
11464
+ --text-field-border-radius: var(--radius-control-4);
11465
+ }
11466
+ }
11467
+ @media (min-width: 768px) {
11468
+ .kui-TextFieldGroup:where(.sm\:kui-r-size-1) {
11469
+ --text-field-border-radius: var(--radius-control-1);
11470
+ }
11471
+ .kui-TextFieldGroup:where(.sm\:kui-r-size-2) {
11472
+ --text-field-border-radius: var(--radius-control-2);
11473
+ }
11474
+ .kui-TextFieldGroup:where(.sm\:kui-r-size-3) {
11475
+ --text-field-border-radius: var(--radius-control-3);
11476
+ }
11477
+ .kui-TextFieldGroup:where(.sm\:kui-r-size-4) {
11478
+ --text-field-border-radius: var(--radius-control-4);
11479
+ }
11480
+ }
11481
+ @media (min-width: 1024px) {
11482
+ .kui-TextFieldGroup:where(.md\:kui-r-size-1) {
11483
+ --text-field-border-radius: var(--radius-control-1);
11484
+ }
11485
+ .kui-TextFieldGroup:where(.md\:kui-r-size-2) {
11486
+ --text-field-border-radius: var(--radius-control-2);
11487
+ }
11488
+ .kui-TextFieldGroup:where(.md\:kui-r-size-3) {
11489
+ --text-field-border-radius: var(--radius-control-3);
11490
+ }
11491
+ .kui-TextFieldGroup:where(.md\:kui-r-size-4) {
11492
+ --text-field-border-radius: var(--radius-control-4);
11493
+ }
11494
+ }
11495
+ @media (min-width: 1280px) {
11496
+ .kui-TextFieldGroup:where(.lg\:kui-r-size-1) {
11497
+ --text-field-border-radius: var(--radius-control-1);
11498
+ }
11499
+ .kui-TextFieldGroup:where(.lg\:kui-r-size-2) {
11500
+ --text-field-border-radius: var(--radius-control-2);
11501
+ }
11502
+ .kui-TextFieldGroup:where(.lg\:kui-r-size-3) {
11503
+ --text-field-border-radius: var(--radius-control-3);
11504
+ }
11505
+ .kui-TextFieldGroup:where(.lg\:kui-r-size-4) {
11506
+ --text-field-border-radius: var(--radius-control-4);
11507
+ }
11508
+ }
11509
+ @media (min-width: 1640px) {
11510
+ .kui-TextFieldGroup:where(.xl\:kui-r-size-1) {
11511
+ --text-field-border-radius: var(--radius-control-1);
11512
+ }
11513
+ .kui-TextFieldGroup:where(.xl\:kui-r-size-2) {
11514
+ --text-field-border-radius: var(--radius-control-2);
11515
+ }
11516
+ .kui-TextFieldGroup:where(.xl\:kui-r-size-3) {
11517
+ --text-field-border-radius: var(--radius-control-3);
11518
+ }
11519
+ .kui-TextFieldGroup:where(.xl\:kui-r-size-4) {
11520
+ --text-field-border-radius: var(--radius-control-4);
11521
+ }
11522
+ }
11523
+ .kui-TextFieldGroup:where(.kui-variant-raised) {
11524
+ --text-field-group-edge: var(--control-chrome);
11525
+ --text-field-group-divider: var(--neutral-a4);
11526
+ }
11527
+ .kui-TextFieldGroup:where(.kui-variant-raised):where([data-disabled]) {
11528
+ --text-field-group-edge: inset 0 0 0 1px var(--field-edge-disabled);
11529
+ }
11530
+ .kui-TextFieldGroup:where(.kui-variant-outline, .kui-variant-surface) {
11531
+ --text-field-group-edge: inset 0 0 0 1px var(--accent-6);
11532
+ --text-field-group-divider: var(--accent-6);
11533
+ }
11534
+ .kui-TextFieldGroup:where(.kui-variant-outline,.kui-variant-surface):where([data-disabled]) {
11535
+ --text-field-group-edge: inset 0 0 0 1px var(--neutral-a6);
11536
+ --text-field-group-divider: var(--neutral-a6);
11537
+ }
11538
+ .kui-TextFieldGroup:where(.kui-variant-soft) {
11539
+ --text-field-group-edge: none;
11540
+ --text-field-group-divider: var(--accent-a5);
11541
+ }
11542
+ .kui-TextFieldGroup:where(.kui-variant-ghost) {
11543
+ --text-field-group-edge: none;
11544
+ --text-field-group-divider: var(--neutral-a5);
11545
+ }
11546
+ .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
11547
+ position: relative;
11548
+ border-radius: 0;
11549
+ -webkit-box-shadow: none;
11550
+ box-shadow: none;
11551
+ }
11552
+ :is(.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot):focus-within {
11553
+ z-index: 3;
11554
+ }
11555
+ .kui-TextFieldGroup > .kui-TextFieldWrapper:first-child > .kui-TextFieldRoot {
11556
+ border-start-start-radius: var(--text-field-border-radius);
11557
+ border-end-start-radius: var(--text-field-border-radius);
11558
+ }
11559
+ .kui-TextFieldGroup > .kui-TextFieldWrapper:last-child > .kui-TextFieldRoot {
11560
+ border-start-end-radius: var(--text-field-border-radius);
11561
+ border-end-end-radius: var(--text-field-border-radius);
11562
+ }
11563
+ .kui-TextFieldGroup > .kui-TextFieldWrapper + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
11564
+ content: '';
11565
+ position: absolute;
11566
+ z-index: 1;
11567
+ inset-block: 0;
11568
+ inset-inline-start: 0;
11569
+ width: 1px;
11570
+ background-color: var(--text-field-group-divider);
11571
+ pointer-events: none;
11572
+ }
11573
+ .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:focus-within::before,
11574
+ .kui-TextFieldGroup > .kui-TextFieldWrapper:has(> .kui-TextFieldRoot:focus-within) + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
11575
+ opacity: 0;
11576
+ }
11577
+ .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:has(> .kui-TextFieldInput[aria-invalid='true']) {
11578
+ z-index: 3;
11579
+ -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
11580
+ box-shadow: inset 0 0 0 1px var(--red-6);
11581
+ }
11582
+ @media (forced-colors: active) {
11583
+ .kui-TextFieldGroup {
11584
+ border: 1px solid CanvasText;
11585
+ }
11586
+ .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
11587
+ border: none;
11588
+ }
11589
+ }
11423
11590
  .kui-ComboboxContent {
11424
11591
  --combobox-list-max-height: calc(300px * var(--scale));
11425
11592
  -ms-scroll-chaining: none;
@@ -13779,6 +13946,37 @@
13779
13946
  height: var(--icon-size-4);
13780
13947
  }
13781
13948
  }
13949
+ .kui-SegmentedControlRoot:where(.kui-variant-raised, .kui-variant-outline) {
13950
+ --segmented-control-indicator-background-color: var(--neutral-a4);
13951
+ }
13952
+ .kui-SegmentedControlRoot:where(.kui-variant-raised,.kui-variant-outline) :where(.kui-SegmentedControlIndicator)::before {
13953
+ inset: var(--segmented-control-indicator-inset);
13954
+ border-radius: max(var(--border-width-standard), calc(var(--segmented-control-border-radius) - var(--segmented-control-indicator-inset)));
13955
+ -webkit-box-shadow: none;
13956
+ box-shadow: none;
13957
+ }
13958
+ .kui-SegmentedControlRoot:where(.kui-variant-raised) {
13959
+ --segmented-control-indicator-inset: 2px;
13960
+ background-color: var(--field-fill);
13961
+ -webkit-box-shadow: var(--control-chrome);
13962
+ box-shadow: var(--control-chrome);
13963
+ }
13964
+ .kui-SegmentedControlRoot:where(.kui-variant-raised):where([data-disabled]) {
13965
+ background-color: var(--field-fill-disabled);
13966
+ -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
13967
+ box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
13968
+ }
13969
+ .kui-SegmentedControlRoot:where(.kui-variant-outline) {
13970
+ --segmented-control-indicator-inset: 2px;
13971
+ background-color: transparent;
13972
+ -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
13973
+ box-shadow: inset 0 0 0 1px var(--neutral-6);
13974
+ }
13975
+ .kui-SegmentedControlRoot:where(.kui-variant-outline):where([data-disabled]) {
13976
+ background-color: transparent;
13977
+ -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
13978
+ box-shadow: inset 0 0 0 1px var(--neutral-a6);
13979
+ }
13782
13980
  .kui-SegmentedControlItem:where([data-icon-only]) {
13783
13981
  min-width: var(--segmented-control-height);
13784
13982
  }
@@ -15846,6 +16044,9 @@
15846
16044
  -ms-flex: 1;
15847
16045
  flex: 1;
15848
16046
  }
16047
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
16048
+ padding-bottom: 0;
16049
+ }
15849
16050
  .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
15850
16051
  display: -webkit-box;
15851
16052
  display: -ms-flexbox;
@@ -15871,6 +16072,9 @@
15871
16072
  -ms-flex: 1;
15872
16073
  flex: 1;
15873
16074
  }
16075
+ :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
16076
+ padding-top: 0;
16077
+ }
15874
16078
  .kui-SidebarHeader :where(.kui-SidebarMenuButton),
15875
16079
  .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
15876
16080
  display: -webkit-box;
@@ -15974,22 +16178,22 @@
15974
16178
  --sidebar-item-height: var(--control-height-3);
15975
16179
  }
15976
16180
  .kui-ShellPaneChrome:where(.kui-r-size-1) {
15977
- --sidebar-base-padding: var(--surface-p-1);
16181
+ --sidebar-base-padding: var(--panel-p-1);
15978
16182
  }
15979
16183
  .kui-ShellPaneChrome:where(.kui-r-size-2) {
15980
- --sidebar-base-padding: var(--surface-p-2);
16184
+ --sidebar-base-padding: var(--panel-p-2);
15981
16185
  }
15982
16186
  .kui-ShellPaneChrome:where(.kui-r-size-3) {
15983
- --sidebar-base-padding: var(--surface-p-3);
16187
+ --sidebar-base-padding: var(--panel-p-3);
15984
16188
  }
15985
16189
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-1) {
15986
- --base-menu-content-padding: var(--surface-p-1);
16190
+ --base-menu-content-padding: var(--panel-p-1);
15987
16191
  }
15988
16192
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-2) {
15989
- --base-menu-content-padding: var(--surface-p-2);
16193
+ --base-menu-content-padding: var(--panel-p-2);
15990
16194
  }
15991
16195
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-3) {
15992
- --base-menu-content-padding: var(--surface-p-3);
16196
+ --base-menu-content-padding: var(--panel-p-3);
15993
16197
  }
15994
16198
  @media (min-width: 520px) {
15995
16199
  .kui-SidebarHeader:where(.xs\:kui-r-size-1),
@@ -16053,22 +16257,22 @@
16053
16257
  --sidebar-item-height: var(--control-height-3);
16054
16258
  }
16055
16259
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-1) {
16056
- --sidebar-base-padding: var(--surface-p-1);
16260
+ --sidebar-base-padding: var(--panel-p-1);
16057
16261
  }
16058
16262
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-2) {
16059
- --sidebar-base-padding: var(--surface-p-2);
16263
+ --sidebar-base-padding: var(--panel-p-2);
16060
16264
  }
16061
16265
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-3) {
16062
- --sidebar-base-padding: var(--surface-p-3);
16266
+ --sidebar-base-padding: var(--panel-p-3);
16063
16267
  }
16064
16268
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-1) {
16065
- --base-menu-content-padding: var(--surface-p-1);
16269
+ --base-menu-content-padding: var(--panel-p-1);
16066
16270
  }
16067
16271
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-2) {
16068
- --base-menu-content-padding: var(--surface-p-2);
16272
+ --base-menu-content-padding: var(--panel-p-2);
16069
16273
  }
16070
16274
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-3) {
16071
- --base-menu-content-padding: var(--surface-p-3);
16275
+ --base-menu-content-padding: var(--panel-p-3);
16072
16276
  }
16073
16277
  }
16074
16278
  @media (min-width: 768px) {
@@ -16133,22 +16337,22 @@
16133
16337
  --sidebar-item-height: var(--control-height-3);
16134
16338
  }
16135
16339
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-1) {
16136
- --sidebar-base-padding: var(--surface-p-1);
16340
+ --sidebar-base-padding: var(--panel-p-1);
16137
16341
  }
16138
16342
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-2) {
16139
- --sidebar-base-padding: var(--surface-p-2);
16343
+ --sidebar-base-padding: var(--panel-p-2);
16140
16344
  }
16141
16345
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-3) {
16142
- --sidebar-base-padding: var(--surface-p-3);
16346
+ --sidebar-base-padding: var(--panel-p-3);
16143
16347
  }
16144
16348
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-1) {
16145
- --base-menu-content-padding: var(--surface-p-1);
16349
+ --base-menu-content-padding: var(--panel-p-1);
16146
16350
  }
16147
16351
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-2) {
16148
- --base-menu-content-padding: var(--surface-p-2);
16352
+ --base-menu-content-padding: var(--panel-p-2);
16149
16353
  }
16150
16354
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-3) {
16151
- --base-menu-content-padding: var(--surface-p-3);
16355
+ --base-menu-content-padding: var(--panel-p-3);
16152
16356
  }
16153
16357
  }
16154
16358
  @media (min-width: 1024px) {
@@ -16213,22 +16417,22 @@
16213
16417
  --sidebar-item-height: var(--control-height-3);
16214
16418
  }
16215
16419
  .kui-ShellPaneChrome:where(.md\:kui-r-size-1) {
16216
- --sidebar-base-padding: var(--surface-p-1);
16420
+ --sidebar-base-padding: var(--panel-p-1);
16217
16421
  }
16218
16422
  .kui-ShellPaneChrome:where(.md\:kui-r-size-2) {
16219
- --sidebar-base-padding: var(--surface-p-2);
16423
+ --sidebar-base-padding: var(--panel-p-2);
16220
16424
  }
16221
16425
  .kui-ShellPaneChrome:where(.md\:kui-r-size-3) {
16222
- --sidebar-base-padding: var(--surface-p-3);
16426
+ --sidebar-base-padding: var(--panel-p-3);
16223
16427
  }
16224
16428
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-1) {
16225
- --base-menu-content-padding: var(--surface-p-1);
16429
+ --base-menu-content-padding: var(--panel-p-1);
16226
16430
  }
16227
16431
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-2) {
16228
- --base-menu-content-padding: var(--surface-p-2);
16432
+ --base-menu-content-padding: var(--panel-p-2);
16229
16433
  }
16230
16434
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-3) {
16231
- --base-menu-content-padding: var(--surface-p-3);
16435
+ --base-menu-content-padding: var(--panel-p-3);
16232
16436
  }
16233
16437
  }
16234
16438
  @media (min-width: 1280px) {
@@ -16293,22 +16497,22 @@
16293
16497
  --sidebar-item-height: var(--control-height-3);
16294
16498
  }
16295
16499
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-1) {
16296
- --sidebar-base-padding: var(--surface-p-1);
16500
+ --sidebar-base-padding: var(--panel-p-1);
16297
16501
  }
16298
16502
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-2) {
16299
- --sidebar-base-padding: var(--surface-p-2);
16503
+ --sidebar-base-padding: var(--panel-p-2);
16300
16504
  }
16301
16505
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-3) {
16302
- --sidebar-base-padding: var(--surface-p-3);
16506
+ --sidebar-base-padding: var(--panel-p-3);
16303
16507
  }
16304
16508
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-1) {
16305
- --base-menu-content-padding: var(--surface-p-1);
16509
+ --base-menu-content-padding: var(--panel-p-1);
16306
16510
  }
16307
16511
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-2) {
16308
- --base-menu-content-padding: var(--surface-p-2);
16512
+ --base-menu-content-padding: var(--panel-p-2);
16309
16513
  }
16310
16514
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-3) {
16311
- --base-menu-content-padding: var(--surface-p-3);
16515
+ --base-menu-content-padding: var(--panel-p-3);
16312
16516
  }
16313
16517
  }
16314
16518
  @media (min-width: 1640px) {
@@ -16373,22 +16577,22 @@
16373
16577
  --sidebar-item-height: var(--control-height-3);
16374
16578
  }
16375
16579
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-1) {
16376
- --sidebar-base-padding: var(--surface-p-1);
16580
+ --sidebar-base-padding: var(--panel-p-1);
16377
16581
  }
16378
16582
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-2) {
16379
- --sidebar-base-padding: var(--surface-p-2);
16583
+ --sidebar-base-padding: var(--panel-p-2);
16380
16584
  }
16381
16585
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-3) {
16382
- --sidebar-base-padding: var(--surface-p-3);
16586
+ --sidebar-base-padding: var(--panel-p-3);
16383
16587
  }
16384
16588
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-1) {
16385
- --base-menu-content-padding: var(--surface-p-1);
16589
+ --base-menu-content-padding: var(--panel-p-1);
16386
16590
  }
16387
16591
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-2) {
16388
- --base-menu-content-padding: var(--surface-p-2);
16592
+ --base-menu-content-padding: var(--panel-p-2);
16389
16593
  }
16390
16594
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-3) {
16391
- --base-menu-content-padding: var(--surface-p-3);
16595
+ --base-menu-content-padding: var(--panel-p-3);
16392
16596
  }
16393
16597
  }
16394
16598
  :is(.kui-SidebarHeader:where(.kui-menu-variant-soft),.kui-SidebarContent:where(.kui-menu-variant-soft),.kui-SidebarFooter:where(.kui-menu-variant-soft)) :where(.kui-SidebarMenuSubTrigger[data-state='open']) {
@@ -16968,7 +17172,7 @@
16968
17172
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
16969
17173
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
16970
17174
  --kui-pane-row-start: var(--control-height-1);
16971
- --kui-pane-pad-start: var(--surface-p-1);
17175
+ --kui-pane-pad-start: var(--panel-p-1);
16972
17176
  }
16973
17177
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
16974
17178
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -16977,7 +17181,7 @@
16977
17181
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
16978
17182
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
16979
17183
  --kui-pane-row-start: var(--control-height-2);
16980
- --kui-pane-pad-start: var(--surface-p-2);
17184
+ --kui-pane-pad-start: var(--panel-p-2);
16981
17185
  }
16982
17186
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
16983
17187
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -16986,7 +17190,7 @@
16986
17190
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
16987
17191
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
16988
17192
  --kui-pane-row-start: var(--control-height-3);
16989
- --kui-pane-pad-start: var(--surface-p-3);
17193
+ --kui-pane-pad-start: var(--panel-p-3);
16990
17194
  }
16991
17195
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
16992
17196
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -16995,7 +17199,7 @@
16995
17199
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
16996
17200
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
16997
17201
  --kui-pane-row-end: var(--control-height-1);
16998
- --kui-pane-pad-end: var(--surface-p-1);
17202
+ --kui-pane-pad-end: var(--panel-p-1);
16999
17203
  }
17000
17204
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
17001
17205
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -17004,7 +17208,7 @@
17004
17208
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
17005
17209
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
17006
17210
  --kui-pane-row-end: var(--control-height-2);
17007
- --kui-pane-pad-end: var(--surface-p-2);
17211
+ --kui-pane-pad-end: var(--panel-p-2);
17008
17212
  }
17009
17213
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
17010
17214
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -17013,7 +17217,7 @@
17013
17217
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
17014
17218
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
17015
17219
  --kui-pane-row-end: var(--control-height-3);
17016
- --kui-pane-pad-end: var(--surface-p-3);
17220
+ --kui-pane-pad-end: var(--panel-p-3);
17017
17221
  }
17018
17222
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
17019
17223
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
@@ -1,2 +0,0 @@
1
- import{b as e}from"./chunk-KRJTW535.js";var o=["1","2","3","4"],s=["horizontal","vertical"],r={disabled:{type:"boolean",default:!1},size:{type:"enum",className:"kui-r-size",values:o,default:"2",responsive:!0},orientation:{type:"enum",className:"kui-r-orientation",values:s,default:"horizontal",responsive:!0},...e};export{r as a};
2
- //# sourceMappingURL=chunk-2ZLMWYJ6.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/segmented-control.props.tsx"],
4
- "sourcesContent": ["import { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst orientations = ['horizontal', 'vertical'] as const;\n\nconst segmentedControlRootPropDefs = {\n disabled: { type: 'boolean', default: false },\n size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },\n orientation: {\n type: 'enum',\n className: 'kui-r-orientation',\n values: orientations,\n default: 'horizontal',\n responsive: true,\n },\n ...radiusPropDef,\n} satisfies {\n disabled?: PropDef<boolean>;\n size: PropDef<(typeof sizes)[number]>;\n orientation: PropDef<(typeof orientations)[number]>;\n};\n\nexport { segmentedControlRootPropDefs };\n"],
5
- "mappings": "wCAIA,IAAMA,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAe,CAAC,aAAc,UAAU,EAExCC,EAA+B,CACnC,SAAU,CAAE,KAAM,UAAW,QAAS,EAAM,EAC5C,KAAM,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC7F,YAAa,CACX,KAAM,OACN,UAAW,oBACX,OAAQC,EACR,QAAS,aACT,WAAY,EACd,EACA,GAAGE,CACL",
6
- "names": ["sizes", "orientations", "segmentedControlRootPropDefs", "radiusPropDef"]
7
- }
@@ -1,2 +0,0 @@
1
- import{a as e}from"./chunk-P7VSZYG3.js";import{a as o}from"./chunk-UMYPLUG3.js";import{b as s}from"./chunk-KRJTW535.js";import{c as r}from"./chunk-CUNKWFKA.js";var t=["1","2","3","4"],p=["raised","surface","soft","ghost","outline"],d={size:{type:"enum",className:"kui-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"kui-variant",values:p,default:"raised"},error:{type:"boolean",default:!1},errorMessage:{type:"string",default:void 0},required:{type:"boolean",default:!1},"aria-describedby":{type:"string",default:void 0},"aria-labelledby":{type:"string",default:void 0},...r,...s},i=["left","right"],l={side:{type:"enum",values:i},...r,gap:o.gap,px:e.px,pl:e.pl,pr:e.pr};export{d as a,l as b};
2
- //# sourceMappingURL=chunk-BP64M73W.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/text-field.props.tsx"],
4
- "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { paddingPropDefs } from '../props/padding.props.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { flexPropDefs } from './flex.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['raised', 'surface', 'soft', 'ghost', 'outline'] as const;\n\nconst textFieldRootPropDefs = {\n size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },\n variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },\n // Error and validation props\n error: { type: 'boolean', default: false },\n errorMessage: { type: 'string', default: undefined },\n required: { type: 'boolean', default: false },\n // Accessibility props\n 'aria-describedby': { type: 'string', default: undefined },\n 'aria-labelledby': { type: 'string', default: undefined },\n ...colorPropDef,\n ...radiusPropDef,\n} satisfies {\n size: PropDef<(typeof sizes)[number]>;\n variant: PropDef<(typeof variants)[number]>;\n error: PropDef<boolean>;\n errorMessage: PropDef<string | undefined>;\n required: PropDef<boolean>;\n 'aria-describedby': PropDef<string | undefined>;\n 'aria-labelledby': PropDef<string | undefined>;\n};\n\nconst sides = ['left', 'right'] as const;\n\nconst textFieldSlotPropDefs = {\n side: { type: 'enum', values: sides },\n ...colorPropDef,\n gap: flexPropDefs.gap,\n px: paddingPropDefs.px,\n pl: paddingPropDefs.pl,\n pr: paddingPropDefs.pr,\n} satisfies {\n side: PropDef<(typeof sides)[number]>;\n gap: typeof flexPropDefs.gap;\n px: typeof paddingPropDefs.px;\n pl: typeof paddingPropDefs.pl;\n pr: typeof paddingPropDefs.pr;\n};\n\n/** Scrubbing props for TextField.Slot - handled separately from PropDef system */\ninterface TextFieldSlotScrubProps {\n /** Enable scrubbing behavior on this slot */\n scrub?: boolean;\n /** Current value (required for min/max clamping to work correctly) */\n scrubValue?: number;\n /** Base value change per movement unit (default: 1) */\n scrubStep?: number;\n /** Pixels of movement per step - higher = less sensitive (default: 1) */\n scrubSensitivity?: number;\n /** Minimum allowed value */\n scrubMin?: number;\n /** Maximum allowed value */\n scrubMax?: number;\n /** Step multiplier when Shift is held (default: 10) */\n scrubShiftMultiplier?: number;\n /** Step multiplier when Alt/Option is held (default: 0.1) */\n scrubAltMultiplier?: number;\n /**\n * Callback fired during scrubbing with the value delta\n * @param delta - The change in value\n * @param isChanging - true while dragging, false when released\n */\n onScrub?: (delta: number, isChanging: boolean) => void;\n}\n\nexport type { TextFieldSlotScrubProps };\n\nexport { textFieldRootPropDefs, textFieldSlotPropDefs };\n"],
5
- "mappings": "gKAOA,IAAMA,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAW,CAAC,SAAU,UAAW,OAAQ,QAAS,SAAS,EAE3DC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC7F,QAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,OAAQC,EAAU,QAAS,QAAS,EAEvF,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,EACzC,aAAc,CAAE,KAAM,SAAU,QAAS,MAAU,EACnD,SAAU,CAAE,KAAM,UAAW,QAAS,EAAM,EAE5C,mBAAoB,CAAE,KAAM,SAAU,QAAS,MAAU,EACzD,kBAAmB,CAAE,KAAM,SAAU,QAAS,MAAU,EACxD,GAAGE,EACH,GAAGC,CACL,EAUMC,EAAQ,CAAC,OAAQ,OAAO,EAExBC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQD,CAAM,EACpC,GAAGF,EACH,IAAKI,EAAa,IAClB,GAAIC,EAAgB,GACpB,GAAIA,EAAgB,GACpB,GAAIA,EAAgB,EACtB",
6
- "names": ["sizes", "variants", "textFieldRootPropDefs", "colorPropDef", "radiusPropDef", "sides", "textFieldSlotPropDefs", "flexPropDefs", "paddingPropDefs"]
7
- }
@@ -1,3 +0,0 @@
1
- "use client";
2
- import{c as y}from"./chunk-OKQAVYW4.js";import{c as v}from"./chunk-5ON3XLRD.js";import{b as R}from"./chunk-XU74PNM2.js";import{a as K}from"./chunk-VQPANPMI.js";var q={};K(q,{Item:()=>x,Root:()=>b});import*as e from"react";import S from"classnames";import{ToggleGroup as I}from"radix-ui";import{useComposedRefs as F,useControllableState as H,useLayoutEffect as j}from"radix-ui/internal";var M=["1","2","3","4"],O=["horizontal","vertical"],u={disabled:{type:"boolean",default:!1},size:{type:"enum",className:"kui-r-size",values:M,default:"2",responsive:!0},orientation:{type:"enum",className:"kui-r-orientation",values:O,default:"horizontal",responsive:!0},...R};var h=e.createContext(null),W=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"]),b=e.forwardRef((n,s)=>{let a=v(n,u.size),{className:l,children:t,radius:i,value:m,defaultValue:p,onValueChange:w,style:D,disabled:c,onKeyDown:N,onPointerDown:k,...T}=y(a,u),[f,d]=H({prop:m,onChange:w,defaultProp:p??""}),r=e.useRef(!1),A=e.useMemo(()=>({selectFromKeyboard(o){r.current&&(r.current=!1,d(o))}}),[d]),g=e.useRef(null),V=F(s,g),C=e.Children.toArray(t).filter(e.isValidElement),z=C.length,G=Math.max(0,C.findIndex(o=>o.props.value===f));return j(()=>{let o=g.current;if(!o)return;let P=Array.from(o.querySelectorAll(":scope > .kui-SegmentedControlItem")),L=P.findIndex(E=>E.getAttribute("data-state")==="on");o.style.setProperty("--segmented-control-count",String(P.length||1)),o.style.setProperty("--segmented-control-index",String(Math.max(0,L)))}),e.createElement(h.Provider,{value:A},e.createElement(I.Root,{"data-disabled":c||void 0,"data-radius":i,ref:V,style:{"--segmented-control-count":z||1,"--segmented-control-index":G,...D},className:S("kui-SegmentedControlRoot",l),onValueChange:o=>{o&&d(o)},onKeyDown:o=>{N?.(o),r.current=W.has(o.key)},onPointerDown:o=>{k?.(o),r.current=!1},...T,type:"single",value:f,asChild:!1,disabled:!!c},t,e.createElement("div",{className:"kui-SegmentedControlIndicator"})))});b.displayName="SegmentedControl.Root";var x=e.forwardRef(({children:n,className:s,iconOnly:a,onFocus:l,...t},i)=>{let m=e.useContext(h);return e.createElement(I.Item,{ref:i,className:S("kui-reset","kui-SegmentedControlItem",s),"data-icon-only":a||void 0,onFocus:p=>{l?.(p),m?.selectFromKeyboard(t.value)},...t,asChild:!1},e.createElement("span",{className:"kui-SegmentedControlItemSeparator"}),e.createElement("span",{className:"kui-SegmentedControlItemLabel"},e.createElement("span",{className:"kui-SegmentedControlItemLabelActive"},n),e.createElement("span",{className:"kui-SegmentedControlItemLabelInactive","aria-hidden":!0},n)))});x.displayName="SegmentedControl.Item";export{b as a,x as b,q as c};
3
- //# sourceMappingURL=chunk-W4Z6ORYO.js.map
@@ -1,6 +0,0 @@
1
- "use client";
2
- import{a as pe}from"./chunk-YCLPURTD.js";import{a as j}from"./chunk-OAJ5DARR.js";import{b as de,c as oe}from"./chunk-OKQAVYW4.js";import{c as fe}from"./chunk-5ON3XLRD.js";import{c as re}from"./chunk-HBWBPBSA.js";import{b as ce}from"./chunk-XU74PNM2.js";import{a as Ce}from"./chunk-VQPANPMI.js";var Le={};Ce(Le,{Root:()=>Re,Slot:()=>Pe});import*as e from"react";import*as be from"react-dom";import se from"classnames";import{composeEventHandlers as U,composeRefs as xe,useLayoutEffect as ke}from"radix-ui/internal";var De=["1","2","3","4"],Ee=["raised","surface","soft","ghost","outline"],ne={size:{type:"enum",className:"kui-r-size",values:De,default:"2",responsive:!0},variant:{type:"enum",className:"kui-variant",values:Ee,default:"raised"},error:{type:"boolean",default:!1},errorMessage:{type:"string",default:void 0},required:{type:"boolean",default:!1},"aria-describedby":{type:"string",default:void 0},"aria-labelledby":{type:"string",default:void 0},...re,...ce},we=["left","right"],me={side:{type:"enum",values:we},...re,gap:pe.gap,px:j.px,pl:j.pl,pr:j.pr};var ye=e.createContext(null),ie="button, a, input, select, textarea, label, [tabindex], [contenteditable]",Re=e.forwardRef((P,v)=>{let{className:s,style:b,...k}=fe(P,ne.size),M=e.useRef(null),{children:L,className:I,color:N,radius:V,style:T,...d}=oe(k,ne),p=!!d.errorMessage,F=e.useId(),[z,C]=e.useState([]),D=e.useCallback(r=>(C(n=>n.includes(r)?n:[...n,r]),()=>C(n=>n.filter(i=>i!==r))),[]),H=e.useMemo(()=>({registerSlot:D}),[D]),{"aria-describedby":g,"aria-labelledby":h,"aria-invalid":S}=d,x=!!d.error||S===!0||S==="true",E=e.useMemo(()=>{let r=[];return d.errorMessage&&r.push(F),g&&r.push(g),r.push(...z),r.length>0?r.join(" "):void 0},[d.errorMessage,g,F,z]),y=e.useMemo(()=>({"aria-invalid":x?!0:S,"aria-describedby":E,"aria-labelledby":h}),[x,S,E,h]),{error:K,errorMessage:ae,required:a,"aria-describedby":O,"aria-labelledby":_,...G}=d,X=e.useCallback(r=>{let n=r.target;if(n.closest(ie))return;let i=M.current;if(!i)return;let f=n.closest(`
3
- .kui-TextFieldSlot[data-side='right'],
4
- .kui-TextFieldSlot:not([data-side='right']) ~ .kui-TextFieldSlot:not([data-side='left'])
5
- `)?i.value.length:0;r.preventDefault(),i.focus();try{i.setSelectionRange(f,f)}catch{}},[]),w=e.createElement("div",{"data-accent-color":N,"data-radius":V,style:p?T:de(T,b),className:se("kui-TextFieldRoot",I,!p&&s,{"kui-error":x}),onMouseDown:X},e.createElement("input",{...G,required:a||void 0,...y,ref:xe(M,v),className:"kui-reset kui-TextFieldInput"}),e.createElement(ye.Provider,{value:H},L));return e.createElement("div",{className:se("kui-TextFieldWrapper",p&&s),style:p?b:void 0,"data-message":p||void 0},w,p?e.createElement("div",{id:F,className:"kui-TextFieldErrorMessage",role:"alert"},d.errorMessage):null)});Re.displayName="TextField.Root";var R=(()=>{if(typeof navigator>"u")return!1;let P=navigator.userAgent,v=/^((?!chrome|android).)*safari/i.test(P),s=/firefox/i.test(P);return v||s})(),Pe=e.forwardRef((P,v)=>{let{scrub:s,scrubValue:b,scrubStep:k=1,scrubSensitivity:M=1,scrubMin:L,scrubMax:I,scrubShiftMultiplier:N=10,scrubAltMultiplier:V=.1,onScrub:T,...d}=P,{className:p,color:F,side:z,onPointerDown:C,onPointerMove:D,onPointerUp:H,onLostPointerCapture:g,...h}=oe(d,me),S=e.useId(),x=h.id??S,E=e.useContext(ye)?.registerSlot,y=e.useRef(null),[K,ae]=e.useState(null);ke(()=>{let t=!!y.current?.querySelector(ie);ae(o=>o===t?o:t)}),e.useEffect(()=>K===!1?E?.(x):void 0,[E,x,K]);let[a,O]=e.useState(!1),[_,G]=e.useState({x:0,y:0}),X=e.useRef(null),w=e.useRef(0),r=e.useRef(!1),n=e.useRef(0),i=e.useRef(0),l=e.useRef(0),f=e.useRef(null),$=e.useRef(0),A=e.useRef({scrubValue:b,scrubStep:k,scrubSensitivity:M,scrubMin:L,scrubMax:I,scrubShiftMultiplier:N,scrubAltMultiplier:V,onScrub:T});A.current={scrubValue:b,scrubStep:k,scrubSensitivity:M,scrubMin:L,scrubMax:I,scrubShiftMultiplier:N,scrubAltMultiplier:V,onScrub:T};let ge=e.useCallback(t=>{if(!s||t.target.closest(ie))return;t.preventDefault(),n.current=0,i.current=b??0,l.current=t.clientX,w.current=t.clientY,G({x:t.clientX,y:t.clientY});let u=y.current;u&&(R?(f.current=t.pointerId,$.current=t.clientX,u.setPointerCapture(t.pointerId),O(!0)):(r.current=!0,u.requestPointerLock()))},[s,b]);e.useEffect(()=>{if(R||!s)return;let t=()=>{if(!r.current)return;let o=document.pointerLockElement===y.current;O(o),o||(r.current=!1,A.current.onScrub?.(0,!1),n.current=0,i.current=0)};return document.addEventListener("pointerlockchange",t),()=>{document.removeEventListener("pointerlockchange",t)}},[s]);let B=e.useCallback((t,o,u,Te)=>{let c=A.current,W=window.innerWidth,Y=window.innerHeight;l.current+=t,l.current>W?l.current=l.current%W:l.current<0&&(l.current=W+l.current%W);let m=w.current+o;m>Y?m=m%Y:m<0&&(m=Y+m%Y),w.current=m;let Z=X.current;Z&&(Z.style.left=`${l.current}px`,Z.style.top=`${m}px`),n.current+=t;let J=n.current/c.scrubSensitivity;if(Math.abs(J)>=1){let Q=1;u?Q=c.scrubShiftMultiplier:Te&&(Q=c.scrubAltMultiplier);let le=Math.trunc(J),ee=le*c.scrubStep*Q,te=ee;if(c.scrubMin!==void 0||c.scrubMax!==void 0){let Fe=i.current+ee,ue=Math.max(c.scrubMin??-1/0,Math.min(c.scrubMax??1/0,Fe));te=ue-i.current,i.current=ue}else i.current+=ee;te!==0&&c.onScrub?.(te,!0),n.current=(J-le)*c.scrubSensitivity}},[]),q=e.useCallback(()=>{A.current.onScrub?.(0,!1),n.current=0,i.current=0,f.current=null,O(!1)},[]),he=e.useCallback(t=>{if(!a||!R)return;let o=t.clientX-$.current;$.current=t.clientX,B(o,t.movementY,t.shiftKey,t.altKey)},[a,B]),Se=e.useCallback(t=>{if(!R||f.current!==t.pointerId)return;let o=y.current;o&&f.current!==null&&o.releasePointerCapture(f.current),q()},[q]),ve=e.useCallback(()=>{R&&a&&q()},[a,q]);e.useEffect(()=>{if(!a||R)return;let t=u=>{B(u.movementX,u.movementY,u.shiftKey,u.altKey)},o=()=>{document.exitPointerLock()};return document.addEventListener("mousemove",t),document.addEventListener("mouseup",o),document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),document.body.style.userSelect=""}},[a,B]),e.useEffect(()=>{if(!a||!R)return;let t=document.createElement("style");return t.textContent="* { cursor: none !important; user-select: none !important; }",document.head.appendChild(t),()=>{document.head.removeChild(t)}},[a]);let Me=a?be.createPortal(e.createElement("img",{ref:X,className:"kui-TextFieldSlotScrubCursor",src:"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M0 12 L5 7 L5 10 L19 10 L19 7 L24 12 L19 17 L19 14 L5 14 L5 17 Z'/%3E%3C/svg%3E",alt:"",style:{position:"fixed",left:_.x,top:_.y,transform:"translate(-50%, -50%)",pointerEvents:"none",zIndex:99999,width:24,height:24},"aria-hidden":"true"}),document.body):null;return e.createElement("div",{"data-accent-color":F,"data-side":z,"data-scrub":s||void 0,"data-scrubbing":a||void 0,...h,id:x,ref:xe(y,v),className:se("kui-TextFieldSlot",p),onPointerDown:s?U(C,ge):C,onPointerMove:s?U(D,he):D,onPointerUp:s?U(H,Se):H,onLostPointerCapture:s?U(g,ve):g},h.children,Me)});Pe.displayName="TextField.Slot";export{Re as a,Pe as b,Le as c};
6
- //# sourceMappingURL=chunk-ZOUIIO4C.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/components/text-field.tsx", "../../src/components/text-field.props.tsx"],
4
- "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { composeEventHandlers, composeRefs, useLayoutEffect } from 'radix-ui/internal';\n\nimport { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { mergeStyles } from '../helpers/merge-styles.js';\nimport { useThemeSizeProps } from '../hooks/theme-size.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { NotInputTextualAttributes } from '../helpers/input-attributes.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextFieldRootElement = React.ElementRef<'input'>;\ntype TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {\n defaultValue?: string | number;\n value?: string | number;\n type?: 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';\n};\ntype TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'>;\ninterface TextFieldRootProps extends TextFieldInputProps, TextFieldRootOwnProps {}\n\n// Each Slot registers its id here, so the input can list slot content in aria-describedby.\ntype TextFieldContextValue = { registerSlot: (id: string) => () => void };\nconst TextFieldContext = React.createContext<TextFieldContextValue | null>(null);\n\n// Clicking anything a person could mean to press keeps its own press: the guard is a focusability\n// list, not a tag list. `[tabindex]` catches role-based widgets; `label` already redirects a click.\nconst FOCUSABLE_IN_SLOT = 'button, a, input, select, textarea, label, [tabindex], [contenteditable]';\n\nconst TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((ownProps, forwardedRef) => {\n // The caller's className and style are kept apart from the size and variant classes: with an\n // error message they go on the wrapper, which is then the one box the parent lays out.\n const { className: ownClassName, style: ownStyle, ...themedProps } = useThemeSizeProps(ownProps, textFieldRootPropDefs.size);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const { children, className, color, radius, style, ...inputProps } = extractProps(themedProps, textFieldRootPropDefs);\n const wrapped = Boolean(inputProps.errorMessage);\n\n // Generate unique IDs for accessibility\n const errorId = React.useId();\n\n // Slot content qualifies the value, so it describes the input (as in v2), in mount order.\n const [slotIds, setSlotIds] = React.useState<string[]>([]);\n const registerSlot = React.useCallback((id: string) => {\n setSlotIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n return () => setSlotIds((prev) => prev.filter((slotId) => slotId !== id));\n }, []);\n const contextValue = React.useMemo(() => ({ registerSlot }), [registerSlot]);\n\n const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, 'aria-invalid': ariaInvalid } = inputProps;\n\n // Invalid when `error` is set or the caller passes aria-invalid; the CSS keys on aria-invalid only.\n const isInvalid = Boolean(inputProps.error) || ariaInvalid === true || ariaInvalid === 'true';\n\n // Build aria-describedby string. The caller's ids stay; ours are appended.\n const describedBy = React.useMemo(() => {\n const parts = [];\n if (inputProps.errorMessage) parts.push(errorId);\n if (ariaDescribedby) parts.push(ariaDescribedby);\n parts.push(...slotIds);\n return parts.length > 0 ? parts.join(' ') : undefined;\n }, [inputProps.errorMessage, ariaDescribedby, errorId, slotIds]);\n\n // Build aria attributes\n const ariaProps = React.useMemo(\n () => ({\n 'aria-invalid': isInvalid ? true : ariaInvalid,\n 'aria-describedby': describedBy,\n 'aria-labelledby': ariaLabelledby,\n }),\n [isInvalid, ariaInvalid, describedBy, ariaLabelledby],\n );\n\n // Filter out our custom props to avoid DOM warnings\n const { error, errorMessage, required, 'aria-describedby': _ariaDescribedby, 'aria-labelledby': _ariaLabelledby, ...nativeInputProps } = inputProps;\n\n // Clicking the padding or a passive slot focuses the input. preventDefault stops the browser\n // from moving focus to the root first, so the input is focused once, synchronously.\n const handleMouseDown = React.useCallback((event: React.MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.closest(FOCUSABLE_IN_SLOT)) return;\n\n const input = inputRef.current;\n if (!input) return;\n\n // Same selector as in the CSS to find the right slot\n const isRightSlot = target.closest(`\n .kui-TextFieldSlot[data-side='right'],\n .kui-TextFieldSlot:not([data-side='right']) ~ .kui-TextFieldSlot:not([data-side='left'])\n `);\n\n const cursorPosition = isRightSlot ? input.value.length : 0;\n\n event.preventDefault();\n input.focus();\n // Only some input types support this, browsers will throw an error if not supported\n // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#:~:text=Note%20that%20according,not%20support%20selection%22.\n try {\n input.setSelectionRange(cursorPosition, cursorPosition);\n } catch {}\n }, []);\n\n // A pointer-only hit-target redirect to the input; keyboard users reach the input directly.\n const field = (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-accent-color={color}\n data-radius={radius}\n style={wrapped ? style : mergeStyles(style, ownStyle)}\n className={classNames('kui-TextFieldRoot', className, !wrapped && ownClassName, {\n // Not used by the library's CSS (invalid styling keys on aria-invalid); kept as a hook for app styles.\n 'kui-error': isInvalid,\n })}\n onMouseDown={handleMouseDown}\n >\n <input {...nativeInputProps} required={required || undefined} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className=\"kui-reset kui-TextFieldInput\" />\n <TextFieldContext.Provider value={contextValue}>{children}</TextFieldContext.Provider>\n </div>\n );\n // The wrapper is always there, so a message coming or going never moves the field in the tree:\n // moving it would remount the input, dropping focus, the caret and an uncontrolled value. With\n // no message it is `display: contents` and the field is the box the parent lays out; with one\n // it holds the field and the message below it, and the caller's className and style size the pair.\n return (\n <div className={classNames('kui-TextFieldWrapper', wrapped && ownClassName)} style={wrapped ? ownStyle : undefined} data-message={wrapped || undefined}>\n {field}\n {wrapped ? (\n <div id={errorId} className=\"kui-TextFieldErrorMessage\" role=\"alert\">\n {inputProps.errorMessage}\n </div>\n ) : null}\n </div>\n );\n});\nTextFieldRoot.displayName = 'TextField.Root';\n\ntype TextFieldSlotElement = React.ElementRef<'div'>;\ntype TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs> & TextFieldSlotScrubProps;\ninterface TextFieldSlotProps extends ComponentPropsWithout<'div', RemovedProps>, TextFieldSlotOwnProps {}\n\n// Detect if we should use pointer capture instead of pointer lock\n// Safari and Firefox show intrusive browser warnings with pointer lock\nconst usePointerCapture = (() => {\n if (typeof navigator === 'undefined') return false;\n const ua = navigator.userAgent;\n const isSafari = /^((?!chrome|android).)*safari/i.test(ua);\n const isFirefox = /firefox/i.test(ua);\n return isSafari || isFirefox;\n})();\n\nconst TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>((props, forwardedRef) => {\n // Extract scrub props first (not part of PropDef system)\n const { scrub, scrubValue, scrubStep = 1, scrubSensitivity = 1, scrubMin, scrubMax, scrubShiftMultiplier = 10, scrubAltMultiplier = 0.1, onScrub, ...restProps } = props;\n\n // Then extract styling props\n const { className, color, side, onPointerDown, onPointerMove, onPointerUp, onLostPointerCapture, ...slotProps } = extractProps(\n restProps,\n textFieldSlotPropDefs,\n );\n\n // A slot of text describes the input (see TextFieldRoot); a caller's own id is kept. A slot\n // holding a control, such as a show-password button, does not: the input would be described\n // by the button's name.\n const generatedId = React.useId();\n const slotId = slotProps.id ?? generatedId;\n const registerSlot = React.useContext(TextFieldContext)?.registerSlot;\n const slotRef = React.useRef<HTMLDivElement>(null);\n // Unknown until the slot has rendered; it registers once it is known to hold only text.\n const [holdsControl, setHoldsControl] = React.useState<boolean | null>(null);\n useLayoutEffect(() => {\n const next = Boolean(slotRef.current?.querySelector(FOCUSABLE_IN_SLOT));\n setHoldsControl((prev) => (prev === next ? prev : next));\n });\n React.useEffect(() => (holdsControl === false ? registerSlot?.(slotId) : undefined), [registerSlot, slotId, holdsControl]);\n\n const [isScrubbing, setIsScrubbing] = React.useState(false);\n // Where the virtual cursor starts. Movement is written straight to the cursor element, so a\n // scrub does not re-render the slot on every mouse move.\n const [cursorStart, setCursorStart] = React.useState({ x: 0, y: 0 });\n const cursorRef = React.useRef<HTMLImageElement>(null);\n // Virtual cursor Y, tracked beside virtualX\n const virtualY = React.useRef(0);\n // Whether this slot asked for the pointer lock, so a lock change elsewhere is not ours\n const lockedByMe = React.useRef(false);\n\n // Track accumulated sub-step movement for precision\n const accumulatedMovement = React.useRef(0);\n // Track current value for clamping (initialized to scrubValue when scrubbing starts)\n const currentValue = React.useRef(0);\n // Track virtual X position for wrap-around (separate from rendered position)\n const virtualX = React.useRef(0);\n // Track pointer ID for capture mode\n const pointerIdRef = React.useRef<number | null>(null);\n // Track last X position for capture mode (movementX calculation)\n const lastXRef = React.useRef(0);\n\n // Store scrub config in refs so document handlers can access latest values\n const scrubConfigRef = React.useRef({\n scrubValue,\n scrubStep,\n scrubSensitivity,\n scrubMin,\n scrubMax,\n scrubShiftMultiplier,\n scrubAltMultiplier,\n onScrub,\n });\n scrubConfigRef.current = {\n scrubValue,\n scrubStep,\n scrubSensitivity,\n scrubMin,\n scrubMax,\n scrubShiftMultiplier,\n scrubAltMultiplier,\n onScrub,\n };\n\n const handlePointerDown = React.useCallback(\n (event: React.PointerEvent) => {\n if (!scrub) return;\n\n // Don't start scrubbing if clicking on interactive elements\n const target = event.target as HTMLElement;\n if (target.closest(FOCUSABLE_IN_SLOT)) return;\n\n event.preventDefault();\n accumulatedMovement.current = 0;\n // Initialize to current value so min/max clamping works correctly\n currentValue.current = scrubValue ?? 0;\n\n // Initialize virtual cursor at actual mouse position\n virtualX.current = event.clientX;\n virtualY.current = event.clientY;\n setCursorStart({ x: event.clientX, y: event.clientY });\n\n const slot = slotRef.current;\n if (!slot) return;\n\n if (usePointerCapture) {\n // Safari/Firefox: Use pointer capture (no browser warning)\n pointerIdRef.current = event.pointerId;\n lastXRef.current = event.clientX;\n slot.setPointerCapture(event.pointerId);\n setIsScrubbing(true);\n } else {\n // Chrome: Use pointer lock for infinite movement\n lockedByMe.current = true;\n slot.requestPointerLock();\n }\n },\n [scrub, scrubValue],\n );\n\n // Handle pointer lock state changes (Chrome only). Only a scrub slot listens, and only a lock\n // this slot asked for starts or ends its scrub.\n React.useEffect(() => {\n if (usePointerCapture || !scrub) return;\n\n const handlePointerLockChange = () => {\n if (!lockedByMe.current) return;\n const isLocked = document.pointerLockElement === slotRef.current;\n setIsScrubbing(isLocked);\n if (!isLocked) {\n lockedByMe.current = false;\n // Fire callback with isChanging = false when scrubbing ends\n scrubConfigRef.current.onScrub?.(0, false);\n accumulatedMovement.current = 0;\n currentValue.current = 0;\n }\n };\n\n document.addEventListener('pointerlockchange', handlePointerLockChange);\n return () => {\n document.removeEventListener('pointerlockchange', handlePointerLockChange);\n };\n }, [scrub]);\n\n // Shared scrub calculation logic\n const processScrubMovement = React.useCallback((movementX: number, movementY: number, shiftKey: boolean, altKey: boolean) => {\n const config = scrubConfigRef.current;\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n // Update virtual position with wrap-around at viewport edges\n virtualX.current += movementX;\n if (virtualX.current > viewportWidth) {\n virtualX.current = virtualX.current % viewportWidth;\n } else if (virtualX.current < 0) {\n virtualX.current = viewportWidth + (virtualX.current % viewportWidth);\n }\n\n // Also track Y with wrap-around\n let newY = virtualY.current + movementY;\n if (newY > viewportHeight) {\n newY = newY % viewportHeight;\n } else if (newY < 0) {\n newY = viewportHeight + (newY % viewportHeight);\n }\n virtualY.current = newY;\n\n const cursor = cursorRef.current;\n if (cursor) {\n cursor.style.left = `${virtualX.current}px`;\n cursor.style.top = `${newY}px`;\n }\n\n // Accumulate movement for sensitivity calculation\n accumulatedMovement.current += movementX;\n\n // Calculate how many steps we've moved\n const stepsFromMovement = accumulatedMovement.current / config.scrubSensitivity;\n\n if (Math.abs(stepsFromMovement) >= 1) {\n // Determine modifier multiplier\n let multiplier = 1;\n if (shiftKey) {\n multiplier = config.scrubShiftMultiplier;\n } else if (altKey) {\n multiplier = config.scrubAltMultiplier;\n }\n\n // Calculate delta\n const wholeSteps = Math.trunc(stepsFromMovement);\n const delta = wholeSteps * config.scrubStep * multiplier;\n\n // Apply min/max clamping if bounds are set\n let clampedDelta = delta;\n if (config.scrubMin !== undefined || config.scrubMax !== undefined) {\n const newValue = currentValue.current + delta;\n const clampedValue = Math.max(config.scrubMin ?? -Infinity, Math.min(config.scrubMax ?? Infinity, newValue));\n clampedDelta = clampedValue - currentValue.current;\n currentValue.current = clampedValue;\n } else {\n currentValue.current += delta;\n }\n\n // Fire callback with clamped delta (isChanging = true during drag)\n if (clampedDelta !== 0) {\n config.onScrub?.(clampedDelta, true);\n }\n\n // Keep the fractional remainder for smooth sub-pixel accumulation\n accumulatedMovement.current = (stepsFromMovement - wholeSteps) * config.scrubSensitivity;\n }\n }, []);\n\n // End scrubbing helper\n const endScrubbing = React.useCallback(() => {\n scrubConfigRef.current.onScrub?.(0, false);\n accumulatedMovement.current = 0;\n currentValue.current = 0;\n pointerIdRef.current = null;\n setIsScrubbing(false);\n }, []);\n\n // Handle pointer capture mode events (Safari/Firefox)\n const handlePointerMove = React.useCallback(\n (event: React.PointerEvent) => {\n if (!isScrubbing || !usePointerCapture) return;\n\n const movementX = event.clientX - lastXRef.current;\n lastXRef.current = event.clientX;\n\n processScrubMovement(movementX, event.movementY, event.shiftKey, event.altKey);\n },\n [isScrubbing, processScrubMovement],\n );\n\n const handlePointerUp = React.useCallback(\n (event: React.PointerEvent) => {\n if (!usePointerCapture || pointerIdRef.current !== event.pointerId) return;\n\n const slot = slotRef.current;\n if (slot && pointerIdRef.current !== null) {\n slot.releasePointerCapture(pointerIdRef.current);\n }\n endScrubbing();\n },\n [endScrubbing],\n );\n\n const handleLostPointerCapture = React.useCallback(() => {\n if (usePointerCapture && isScrubbing) {\n endScrubbing();\n }\n }, [isScrubbing, endScrubbing]);\n\n // Attach document-level listeners for pointer lock mode (Chrome)\n React.useEffect(() => {\n if (!isScrubbing || usePointerCapture) return;\n\n const handleMouseMove = (event: MouseEvent) => {\n processScrubMovement(event.movementX, event.movementY, event.shiftKey, event.altKey);\n };\n\n const handleMouseUp = () => {\n // Exit pointer lock to end scrubbing\n document.exitPointerLock();\n };\n\n // Use mousemove for pointer lock (pointermove doesn't work well with pointer lock)\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n\n // Disable text selection during scrubbing\n document.body.style.userSelect = 'none';\n\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n document.body.style.userSelect = '';\n };\n }, [isScrubbing, processScrubMovement]);\n\n // Hide native cursor and disable text selection during pointer capture scrubbing\n React.useEffect(() => {\n if (!isScrubbing || !usePointerCapture) return;\n\n // Create a style element to hide cursor globally during scrub\n const style = document.createElement('style');\n style.textContent = '* { cursor: none !important; user-select: none !important; }';\n document.head.appendChild(style);\n\n return () => {\n document.head.removeChild(style);\n };\n }, [isScrubbing]);\n\n // Render virtual cursor via portal to body so it's not clipped\n // Using a data URI of ew-resize cursor for a native look\n const virtualCursor = isScrubbing\n ? ReactDOM.createPortal(\n <img\n ref={cursorRef}\n className=\"kui-TextFieldSlotScrubCursor\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M0 12 L5 7 L5 10 L19 10 L19 7 L24 12 L19 17 L19 14 L5 14 L5 17 Z'/%3E%3C/svg%3E\"\n alt=\"\"\n style={{\n position: 'fixed',\n left: cursorStart.x,\n top: cursorStart.y,\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n zIndex: 99999,\n width: 24,\n height: 24,\n }}\n aria-hidden=\"true\"\n />,\n document.body,\n )\n : null;\n\n return (\n <div\n data-accent-color={color}\n data-side={side}\n data-scrub={scrub || undefined}\n data-scrubbing={isScrubbing || undefined}\n {...slotProps}\n id={slotId}\n ref={composeRefs(slotRef, forwardedRef)}\n className={classNames('kui-TextFieldSlot', className)}\n // The caller's handlers run first; the scrub handlers only when `scrub` is set.\n onPointerDown={scrub ? composeEventHandlers(onPointerDown, handlePointerDown) : onPointerDown}\n onPointerMove={scrub ? composeEventHandlers(onPointerMove, handlePointerMove) : onPointerMove}\n onPointerUp={scrub ? composeEventHandlers(onPointerUp, handlePointerUp) : onPointerUp}\n onLostPointerCapture={scrub ? composeEventHandlers(onLostPointerCapture, handleLostPointerCapture) : onLostPointerCapture}\n >\n {slotProps.children}\n {virtualCursor}\n </div>\n );\n});\nTextFieldSlot.displayName = 'TextField.Slot';\n\nexport { TextFieldRoot as Root, TextFieldSlot as Slot };\nexport type { TextFieldRootProps as RootProps, TextFieldSlotProps as SlotProps };\n", "import { colorPropDef } from '../props/color.prop.js';\nimport { paddingPropDefs } from '../props/padding.props.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { flexPropDefs } from './flex.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['raised', 'surface', 'soft', 'ghost', 'outline'] as const;\n\nconst textFieldRootPropDefs = {\n size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },\n variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },\n // Error and validation props\n error: { type: 'boolean', default: false },\n errorMessage: { type: 'string', default: undefined },\n required: { type: 'boolean', default: false },\n // Accessibility props\n 'aria-describedby': { type: 'string', default: undefined },\n 'aria-labelledby': { type: 'string', default: undefined },\n ...colorPropDef,\n ...radiusPropDef,\n} satisfies {\n size: PropDef<(typeof sizes)[number]>;\n variant: PropDef<(typeof variants)[number]>;\n error: PropDef<boolean>;\n errorMessage: PropDef<string | undefined>;\n required: PropDef<boolean>;\n 'aria-describedby': PropDef<string | undefined>;\n 'aria-labelledby': PropDef<string | undefined>;\n};\n\nconst sides = ['left', 'right'] as const;\n\nconst textFieldSlotPropDefs = {\n side: { type: 'enum', values: sides },\n ...colorPropDef,\n gap: flexPropDefs.gap,\n px: paddingPropDefs.px,\n pl: paddingPropDefs.pl,\n pr: paddingPropDefs.pr,\n} satisfies {\n side: PropDef<(typeof sides)[number]>;\n gap: typeof flexPropDefs.gap;\n px: typeof paddingPropDefs.px;\n pl: typeof paddingPropDefs.pl;\n pr: typeof paddingPropDefs.pr;\n};\n\n/** Scrubbing props for TextField.Slot - handled separately from PropDef system */\ninterface TextFieldSlotScrubProps {\n /** Enable scrubbing behavior on this slot */\n scrub?: boolean;\n /** Current value (required for min/max clamping to work correctly) */\n scrubValue?: number;\n /** Base value change per movement unit (default: 1) */\n scrubStep?: number;\n /** Pixels of movement per step - higher = less sensitive (default: 1) */\n scrubSensitivity?: number;\n /** Minimum allowed value */\n scrubMin?: number;\n /** Maximum allowed value */\n scrubMax?: number;\n /** Step multiplier when Shift is held (default: 10) */\n scrubShiftMultiplier?: number;\n /** Step multiplier when Alt/Option is held (default: 0.1) */\n scrubAltMultiplier?: number;\n /**\n * Callback fired during scrubbing with the value delta\n * @param delta - The change in value\n * @param isChanging - true while dragging, false when released\n */\n onScrub?: (delta: number, isChanging: boolean) => void;\n}\n\nexport type { TextFieldSlotScrubProps };\n\nexport { textFieldRootPropDefs, textFieldSlotPropDefs };\n"],
5
- "mappings": "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",
6
- "names": ["text_field_exports", "__export", "TextFieldRoot", "TextFieldSlot", "React", "ReactDOM", "classNames", "composeEventHandlers", "composeRefs", "useLayoutEffect", "sizes", "variants", "textFieldRootPropDefs", "colorPropDef", "radiusPropDef", "sides", "textFieldSlotPropDefs", "flexPropDefs", "paddingPropDefs", "TextFieldContext", "FOCUSABLE_IN_SLOT", "TextFieldRoot", "ownProps", "forwardedRef", "ownClassName", "ownStyle", "themedProps", "useThemeSizeProps", "textFieldRootPropDefs", "inputRef", "children", "className", "color", "radius", "style", "inputProps", "extractProps", "wrapped", "errorId", "slotIds", "setSlotIds", "registerSlot", "id", "prev", "slotId", "contextValue", "ariaDescribedby", "ariaLabelledby", "ariaInvalid", "isInvalid", "describedBy", "parts", "ariaProps", "error", "errorMessage", "required", "_ariaDescribedby", "_ariaLabelledby", "nativeInputProps", "handleMouseDown", "event", "target", "input", "cursorPosition", "field", "mergeStyles", "classNames", "composeRefs", "usePointerCapture", "ua", "isSafari", "isFirefox", "TextFieldSlot", "props", "scrub", "scrubValue", "scrubStep", "scrubSensitivity", "scrubMin", "scrubMax", "scrubShiftMultiplier", "scrubAltMultiplier", "onScrub", "restProps", "side", "onPointerDown", "onPointerMove", "onPointerUp", "onLostPointerCapture", "slotProps", "textFieldSlotPropDefs", "generatedId", "slotRef", "holdsControl", "setHoldsControl", "useLayoutEffect", "next", "isScrubbing", "setIsScrubbing", "cursorStart", "setCursorStart", "cursorRef", "virtualY", "lockedByMe", "accumulatedMovement", "currentValue", "virtualX", "pointerIdRef", "lastXRef", "scrubConfigRef", "handlePointerDown", "slot", "handlePointerLockChange", "isLocked", "processScrubMovement", "movementX", "movementY", "shiftKey", "altKey", "config", "viewportWidth", "viewportHeight", "newY", "cursor", "stepsFromMovement", "multiplier", "wholeSteps", "delta", "clampedDelta", "newValue", "clampedValue", "endScrubbing", "handlePointerMove", "handlePointerUp", "handleLostPointerCapture", "handleMouseMove", "handleMouseUp", "virtualCursor", "composeEventHandlers"]
7
- }