@orioncactuscorp/ui 1.9.2 → 1.11.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 (99) hide show
  1. package/README.md +119 -54
  2. package/dist/components/Accordion/Accordion.css +1 -1
  3. package/dist/components/Accordion/Accordion.js +169 -177
  4. package/dist/components/ActionArea/ActionAreaLayout.js +20 -24
  5. package/dist/components/Cell/Cell.css +1 -1
  6. package/dist/components/Cell/Cell.js +57 -58
  7. package/dist/components/CheckMark/CheckMark.css +1 -1
  8. package/dist/components/Checkbox/Checkbox.css +1 -1
  9. package/dist/components/Checkbox/Checkbox.js +50 -51
  10. package/dist/components/Menu/Menu.css +1 -1
  11. package/dist/components/Menu/Menu.module.scss.js +20 -22
  12. package/dist/components/Modal/Modal.css +1 -1
  13. package/dist/components/Modal/Modal.js +585 -575
  14. package/dist/components/Modal/bottomSheetGeometry.js +46 -33
  15. package/dist/components/Modal/modalScrollArbitration.js +71 -49
  16. package/dist/components/Modal/snapPoints.js +42 -38
  17. package/dist/components/Modal/useModalContentBlockTransition.js +49 -44
  18. package/dist/components/Modal/useModalDrag.js +937 -854
  19. package/dist/components/Radio/Radio.css +1 -1
  20. package/dist/components/ScrollArea/ScrollArea.js +197 -200
  21. package/dist/components/Select/Select.js +31 -34
  22. package/dist/components/Switch/Switch.css +1 -1
  23. package/dist/components/Tabs/Tabs.css +1 -0
  24. package/dist/components/Tabs/Tabs.js +208 -0
  25. package/dist/components/Tabs/Tabs.module.scss.js +27 -0
  26. package/dist/components/Tabs.d.ts +6 -0
  27. package/dist/components/Tabs.js +8 -0
  28. package/dist/components/TextArea/TextArea.js +57 -58
  29. package/dist/components/TextInput/TextInput.js +30 -33
  30. package/dist/components/Tooltip/Tooltip.css +1 -1
  31. package/dist/foundations/color.theme.dark.css +1 -1
  32. package/dist/foundations/color.theme.light.css +1 -1
  33. package/dist/foundations/focus.css +1 -0
  34. package/dist/foundations/reset.css +1 -1
  35. package/dist/foundations.css +4 -3
  36. package/dist/index.js +69 -64
  37. package/dist/react/motion.js +31 -35
  38. package/dist/reset.css +1 -1
  39. package/dist/styles.css +14 -12
  40. package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
  41. package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts.map +1 -1
  42. package/dist/ui/src/components/Cell/Cell.d.ts.map +1 -1
  43. package/dist/ui/src/components/CheckMark/types.d.ts +10 -0
  44. package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
  45. package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  46. package/dist/ui/src/components/Checkbox/types.d.ts +16 -0
  47. package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
  48. package/dist/ui/src/components/Modal/Modal.d.ts +1 -1
  49. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  50. package/dist/ui/src/components/Modal/bottomSheetGeometry.d.ts +13 -0
  51. package/dist/ui/src/components/Modal/bottomSheetGeometry.d.ts.map +1 -1
  52. package/dist/ui/src/components/Modal/modalScrollArbitration.d.ts.map +1 -1
  53. package/dist/ui/src/components/Modal/snapPoints.d.ts +3 -1
  54. package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
  55. package/dist/ui/src/components/Modal/types.d.ts +8 -0
  56. package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
  57. package/dist/ui/src/components/Modal/useModalContentBlockTransition.d.ts.map +1 -1
  58. package/dist/ui/src/components/Modal/useModalDrag.d.ts +27 -10
  59. package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
  60. package/dist/ui/src/components/Radio/types.d.ts +16 -0
  61. package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
  62. package/dist/ui/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  63. package/dist/ui/src/components/Select/Select.d.ts.map +1 -1
  64. package/dist/ui/src/components/Switch/types.d.ts +10 -0
  65. package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
  66. package/dist/ui/src/components/Tabs/Tabs.d.ts +7 -0
  67. package/dist/ui/src/components/Tabs/Tabs.d.ts.map +1 -0
  68. package/dist/ui/src/components/Tabs/index.d.ts +3 -0
  69. package/dist/ui/src/components/Tabs/index.d.ts.map +1 -0
  70. package/dist/ui/src/components/Tabs/types.d.ts +26 -0
  71. package/dist/ui/src/components/Tabs/types.d.ts.map +1 -0
  72. package/dist/ui/src/components/TextArea/TextArea.d.ts.map +1 -1
  73. package/dist/ui/src/components/TextInput/TextInput.d.ts.map +1 -1
  74. package/dist/ui/src/index.d.ts +2 -0
  75. package/dist/ui/src/index.d.ts.map +1 -1
  76. package/dist/ui/src/react/motion/index.d.ts.map +1 -1
  77. package/dist/ui/src/utils/mergeRefs.d.ts +13 -0
  78. package/dist/ui/src/utils/mergeRefs.d.ts.map +1 -0
  79. package/dist/utils/mergeRefs.js +24 -0
  80. package/dist/vscode/oc-ui-vars.css +13 -0
  81. package/docs/editor-setup.md +42 -0
  82. package/docs/motion.md +665 -0
  83. package/docs/responsive-foundation-profile.md +230 -0
  84. package/docs/scss-helpers.md +189 -0
  85. package/docs/selector-contract.md +260 -0
  86. package/docs/spring.md +382 -0
  87. package/docs/stability.md +62 -0
  88. package/docs/tokens.md +559 -0
  89. package/package.json +9 -4
  90. package/src/scss/foundations/color-theme.test.ts +14 -0
  91. package/src/scss/foundations/color.theme.dark.scss +1 -0
  92. package/src/scss/foundations/color.theme.light.scss +1 -0
  93. package/src/scss/foundations/focus.scss +4 -0
  94. package/src/scss/foundations/focus.test.ts +48 -0
  95. package/src/scss/foundations/reset.scss +9 -4
  96. package/src/scss/foundations/reset.test.ts +32 -0
  97. package/src/scss/index.scss +2 -0
  98. package/src/scss/mixins/_focus.scss +11 -0
  99. package/src/scss/mixins/_focus.test.ts +58 -0
package/dist/components/Radio/Radio.css CHANGED
@@ -1 +1 @@
1
- .oc-Radio-module__radio__qhO7H{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Radio-module__radio__qhO7H{--oc-radio-icon-scale: .675}.oc-Radio-module__fill__h24zJ{display:flex;inline-size:100%}.oc-Radio-module__small__PGRQA{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);--oc-radio-control-size: var(--oc-typo-height-body2);--oc-radio-content-height: var(--oc-typo-height-body2)}.oc-Radio-module__medium__OItEm{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);--oc-radio-control-size: var(--oc-typo-height-body1);--oc-radio-content-height: var(--oc-typo-height-body1)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Radio-module__radio__qhO7H [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-radio-control-size);block-size:var(--oc-radio-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max)}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{border-radius:var(--oc-atomic-radius-max);inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{transition-property:color,background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{display:flex;align-items:center;justify-content:center;transform:scale(var(--oc-radio-icon-scale));inline-size:100%;block-size:100%;color:transparent;transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{transition-property:color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]>svg{inline-size:100%;block-size:100%;padding:.125rem}.oc-Radio-module__radio__qhO7H [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-radio-control-size) - var(--oc-radio-content-height)) / 2)}.oc-Radio-module__radio__qhO7H [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Radio-module__radio__qhO7H [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Radio-module__fill__h24zJ [data-oc-part=label]{flex:1}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-color-theme-primary-normal)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=icon-wrapper]{color:var(--oc-color-theme-static-white)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:2px solid var(--oc-color-theme-primary-normal);outline-offset:2px}
1
+ .oc-Radio-module__radio__qhO7H{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Radio-module__radio__qhO7H{--oc-radio-icon-scale: .675}.oc-Radio-module__fill__h24zJ{display:flex;inline-size:100%}.oc-Radio-module__small__PGRQA{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);--oc-radio-control-size: var(--oc-typo-height-body2);--oc-radio-content-height: var(--oc-typo-height-body2)}.oc-Radio-module__medium__OItEm{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);--oc-radio-control-size: var(--oc-typo-height-body1);--oc-radio-content-height: var(--oc-typo-height-body1)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Radio-module__radio__qhO7H [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-radio-control-size);block-size:var(--oc-radio-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max)}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{border-radius:var(--oc-atomic-radius-max);inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{transition-property:color,background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{display:flex;align-items:center;justify-content:center;transform:scale(var(--oc-radio-icon-scale));inline-size:100%;block-size:100%;color:transparent;transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{transition-property:color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]>svg{inline-size:100%;block-size:100%;padding:.125rem}.oc-Radio-module__radio__qhO7H [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-radio-control-size) - var(--oc-radio-content-height)) / 2)}.oc-Radio-module__radio__qhO7H [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Radio-module__radio__qhO7H [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Radio-module__fill__h24zJ [data-oc-part=label]{flex:1}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-color-theme-primary-normal)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=icon-wrapper]{color:var(--oc-color-theme-static-white)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}