@yahoo/uds 3.115.0 → 3.116.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/automated-config/dist/generated/autoVariants.cjs +10 -0
- package/dist/automated-config/dist/generated/autoVariants.d.cts +10 -0
- package/dist/automated-config/dist/generated/autoVariants.d.ts +10 -0
- package/dist/automated-config/dist/generated/autoVariants.js +10 -0
- package/dist/automated-config/dist/generated/generatedConfigs.cjs +1842 -0
- package/dist/automated-config/dist/generated/generatedConfigs.d.cts +194 -1
- package/dist/automated-config/dist/generated/generatedConfigs.d.ts +194 -1
- package/dist/automated-config/dist/generated/generatedConfigs.js +1842 -1
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs +78 -0
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.cts +2 -1
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.ts +2 -1
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.js +78 -0
- package/dist/cli/commands/sync.cjs +6 -0
- package/dist/cli/commands/sync.js +6 -0
- package/dist/components/SvgFloatingOverlay.cjs +122 -0
- package/dist/components/SvgFloatingOverlay.d.cts +42 -0
- package/dist/components/SvgFloatingOverlay.d.ts +42 -0
- package/dist/components/SvgFloatingOverlay.js +120 -0
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
- package/dist/components/client/Popover/Popover.cjs +96 -0
- package/dist/components/client/Popover/Popover.d.cts +55 -0
- package/dist/components/client/Popover/Popover.d.ts +55 -0
- package/dist/components/client/Popover/Popover.js +94 -0
- package/dist/components/client/Popover/PopoverContent.cjs +171 -0
- package/dist/components/client/Popover/PopoverContent.d.cts +26 -0
- package/dist/components/client/Popover/PopoverContent.d.ts +26 -0
- package/dist/components/client/Popover/PopoverContent.js +169 -0
- package/dist/components/client/Popover/PopoverContext.cjs +11 -0
- package/dist/components/client/Popover/PopoverContext.d.cts +21 -0
- package/dist/components/client/Popover/PopoverContext.d.ts +21 -0
- package/dist/components/client/Popover/PopoverContext.js +9 -0
- package/dist/components/client/Popover/PopoverTrigger.cjs +26 -0
- package/dist/components/client/Popover/PopoverTrigger.d.cts +14 -0
- package/dist/components/client/Popover/PopoverTrigger.d.ts +14 -0
- package/dist/components/client/Popover/PopoverTrigger.js +24 -0
- package/dist/components/client/Popover/UDSPopoverConfigProvider.cjs +40 -0
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +28 -0
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +28 -0
- package/dist/components/client/Popover/UDSPopoverConfigProvider.js +37 -0
- package/dist/components/client/Popover/index.cjs +12 -0
- package/dist/components/client/Popover/index.d.cts +7 -0
- package/dist/components/client/Popover/index.d.ts +7 -0
- package/dist/components/client/Popover/index.js +8 -0
- package/dist/components/client/Toast/Toast.cjs +3 -3
- package/dist/components/client/Toast/Toast.d.cts +1 -1
- package/dist/components/client/Toast/Toast.d.ts +1 -1
- package/dist/components/client/Toast/Toast.js +3 -3
- package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- package/dist/components/client/Toast/index.d.cts +1 -1
- package/dist/components/client/Toast/index.d.ts +1 -1
- package/dist/components/client/Tooltip/Tooltip.cjs +6 -6
- package/dist/components/client/Tooltip/Tooltip.d.cts +1 -1
- package/dist/components/client/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/client/Tooltip/Tooltip.js +6 -6
- package/dist/components/client/Tooltip/TooltipContent.cjs +55 -119
- package/dist/components/client/Tooltip/TooltipContent.js +56 -120
- package/dist/components/client/Tooltip/tooltipContext.cjs +0 -1
- package/dist/components/client/Tooltip/tooltipContext.d.cts +1 -2
- package/dist/components/client/Tooltip/tooltipContext.d.ts +1 -2
- package/dist/components/client/Tooltip/tooltipContext.js +0 -1
- package/dist/components/client/index.cjs +8 -0
- package/dist/components/client/index.d.cts +10 -5
- package/dist/components/client/index.d.ts +10 -5
- package/dist/components/client/index.js +5 -1
- package/dist/components/client/providers/UDSConfigProvider.cjs +6 -2
- package/dist/components/client/providers/UDSConfigProvider.d.cts +2 -1
- package/dist/components/client/providers/UDSConfigProvider.d.ts +2 -1
- package/dist/components/client/providers/UDSConfigProvider.js +6 -2
- package/dist/components/experimental/client/{Popover.cjs → ExperimentalPopover.cjs} +10 -1
- package/dist/components/experimental/client/ExperimentalPopover.d.cts +40 -0
- package/dist/components/experimental/client/ExperimentalPopover.d.ts +40 -0
- package/dist/components/experimental/client/{Popover.js → ExperimentalPopover.js} +10 -1
- package/dist/components/experimental/client/index.cjs +10 -10
- package/dist/components/experimental/client/index.d.cts +2 -2
- package/dist/components/experimental/client/index.d.ts +2 -2
- package/dist/components/experimental/client/index.js +1 -1
- package/dist/components/experimental/index.cjs +19 -19
- package/dist/components/experimental/index.d.cts +2 -2
- package/dist/components/experimental/index.d.ts +2 -2
- package/dist/components/experimental/index.js +1 -1
- package/dist/components/index.cjs +12 -0
- package/dist/components/index.d.cts +9 -5
- package/dist/components/index.d.ts +9 -5
- package/dist/components/index.js +9 -1
- package/dist/config/dist/index.cjs +79 -1
- package/dist/config/dist/index.js +79 -1
- package/dist/{components/client/Tooltip/useTooltipContent.cjs → hooks/useSvgFloatingContent.cjs} +81 -48
- package/dist/hooks/useSvgFloatingContent.d.cts +74 -0
- package/dist/hooks/useSvgFloatingContent.d.ts +74 -0
- package/dist/{components/client/Tooltip/useTooltipContent.js → hooks/useSvgFloatingContent.js} +76 -43
- package/dist/index.cjs +21 -10
- package/dist/index.d.cts +15 -10
- package/dist/index.d.ts +15 -10
- package/dist/index.js +16 -11
- package/dist/runtime/index.cjs +2 -0
- package/dist/runtime/index.d.cts +3 -2
- package/dist/runtime/index.d.ts +3 -2
- package/dist/runtime/index.js +2 -1
- package/dist/runtime/popoverConfig.cjs +41 -0
- package/dist/runtime/popoverConfig.d.cts +24 -0
- package/dist/runtime/popoverConfig.d.ts +24 -0
- package/dist/runtime/popoverConfig.js +40 -0
- package/dist/runtime/udsConfig.cjs +3 -1
- package/dist/runtime/udsConfig.d.cts +3 -1
- package/dist/runtime/udsConfig.d.ts +3 -1
- package/dist/runtime/udsConfig.js +3 -1
- package/dist/styles/styler.d.cts +90 -80
- package/dist/styles/styler.d.ts +90 -80
- package/dist/styles/variants.d.cts +30 -0
- package/dist/styles/variants.d.ts +30 -0
- package/dist/tailwind/dist/tailwind/plugins/components.cjs +1 -0
- package/dist/tailwind/dist/tailwind/plugins/components.js +2 -1
- package/dist/tokens/automation/configs/index.cjs +1 -0
- package/dist/tokens/automation/configs/index.d.cts +2 -2
- package/dist/tokens/automation/configs/index.d.ts +2 -2
- package/dist/tokens/automation/configs/index.js +2 -2
- package/dist/tokens/automation/index.cjs +1 -0
- package/dist/tokens/automation/index.d.cts +2 -2
- package/dist/tokens/automation/index.d.ts +2 -2
- package/dist/tokens/automation/index.js +2 -2
- package/dist/tokens/index.cjs +2 -1
- package/dist/tokens/index.d.cts +3 -3
- package/dist/tokens/index.d.ts +3 -3
- package/dist/tokens/index.js +3 -3
- package/dist/tokens/types.d.cts +2 -2
- package/dist/tokens/types.d.ts +2 -2
- package/dist/types/dist/index.d.cts +51 -1
- package/dist/types/dist/index.d.ts +51 -1
- package/dist/uds/generated/componentData.cjs +298 -139
- package/dist/uds/generated/componentData.js +263 -140
- package/dist/uds/generated/tailwindPurge.cjs +52 -26
- package/dist/uds/generated/tailwindPurge.js +52 -26
- package/dist/utils/parseShadow.cjs +120 -0
- package/dist/utils/parseShadow.d.cts +33 -0
- package/dist/utils/parseShadow.d.ts +33 -0
- package/dist/utils/parseShadow.js +118 -0
- package/dist/utils/svgFloatingContentUtils.cjs +121 -0
- package/dist/{components/client/Tooltip/util.d.cts → utils/svgFloatingContentUtils.d.cts} +25 -62
- package/dist/{components/client/Tooltip/util.d.ts → utils/svgFloatingContentUtils.d.ts} +25 -62
- package/dist/utils/svgFloatingContentUtils.js +117 -0
- package/generated/componentData.json +337 -185
- package/generated/tailwindPurge.ts +50 -27
- package/package.json +1 -1
- package/dist/components/client/Tooltip/useTooltipContent.d.cts +0 -66
- package/dist/components/client/Tooltip/useTooltipContent.d.ts +0 -66
- package/dist/components/client/Tooltip/util.cjs +0 -248
- package/dist/components/client/Tooltip/util.js +0 -240
- package/dist/components/experimental/client/Popover.d.cts +0 -29
- package/dist/components/experimental/client/Popover.d.ts +0 -29
|
@@ -173,6 +173,16 @@ export const variantsList: VariantsList = [
|
|
|
173
173
|
'menuitemSizeEndIcon',
|
|
174
174
|
'menuitemSizeRoot',
|
|
175
175
|
'menuitemSizeStartIcon',
|
|
176
|
+
'popoverSizeCloseIcon',
|
|
177
|
+
'popoverSizeContentWrapper',
|
|
178
|
+
'popoverSizeRoot',
|
|
179
|
+
'popoverSizeSvgBase',
|
|
180
|
+
'popoverSizeSvgBorder',
|
|
181
|
+
'popoverVariantBlur',
|
|
182
|
+
'popoverVariantCloseIcon',
|
|
183
|
+
'popoverVariantRoot',
|
|
184
|
+
'popoverVariantSvgBase',
|
|
185
|
+
'popoverVariantSvgBorder',
|
|
176
186
|
'radioSizeRadio',
|
|
177
187
|
'radioSizeRoot',
|
|
178
188
|
'radioVariantRadio',
|
|
@@ -1494,6 +1504,9 @@ export const componentToVariants: ComponentToVariants = {
|
|
|
1494
1504
|
InputHelpText: [],
|
|
1495
1505
|
Link: [],
|
|
1496
1506
|
Menu: [],
|
|
1507
|
+
Popover: [],
|
|
1508
|
+
PopoverContent: [],
|
|
1509
|
+
PopoverTrigger: [],
|
|
1497
1510
|
Pressable: [
|
|
1498
1511
|
[
|
|
1499
1512
|
'color',
|
|
@@ -4192,6 +4205,7 @@ export const componentToVariants: ComponentToVariants = {
|
|
|
4192
4205
|
TooltipTrigger: [],
|
|
4193
4206
|
UDSBreakpointsConfigProvider: [],
|
|
4194
4207
|
UDSConfigProvider: [],
|
|
4208
|
+
UDSPopoverConfigProvider: [],
|
|
4195
4209
|
UDSToastConfigProvider: [],
|
|
4196
4210
|
UDSTooltipConfigProvider: [],
|
|
4197
4211
|
VStack: [
|
|
@@ -4253,7 +4267,6 @@ export const componentToVariants: ComponentToVariants = {
|
|
|
4253
4267
|
Modal: [],
|
|
4254
4268
|
ModalDismiss: [],
|
|
4255
4269
|
ModalHeader: [],
|
|
4256
|
-
Popover: [],
|
|
4257
4270
|
PopoverAnchor: [],
|
|
4258
4271
|
PopoverArrow: [],
|
|
4259
4272
|
PopoverDescription: [],
|
|
@@ -4325,6 +4338,12 @@ export const componentToTwClasses: ComponentToTwClasses = {
|
|
|
4325
4338
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator relative min-w-\\[200px\\] grow cursor-not-allowed cursor-text bg-clip-text opacity-50 outline uds-bgBlurFillFallback focus\\:outline-none:focus uds-input-size-default-endicon uds-input-size-lg-endicon uds-input-size-md-endicon uds-input-size-default-helpericon uds-input-size-lg-helpericon uds-input-size-md-helpericon uds-input-size-default-helpertext uds-input-size-lg-helpertext uds-input-size-md-helpertext uds-input-size-default-input uds-input-size-lg-input uds-input-size-md-input uds-input-size-default-inputwrapper uds-input-size-lg-inputwrapper uds-input-size-md-inputwrapper uds-input-size-default-label uds-input-size-lg-label uds-input-size-md-label uds-input-size-default-root uds-input-size-lg-root uds-input-size-md-root uds-input-size-default-starticon uds-input-size-lg-starticon uds-input-size-md-starticon uds-input-variant-default-endicon uds-input-variant-default-helpericon uds-input-variant-default-helpertext uds-input-variant-default-input uds-input-variant-default-inputplaceholder uds-input-variant-default-inputwrapper uds-input-variant-default-label uds-input-variant-default-labelrequired uds-input-variant-default-root uds-input-variant-default-starticon uds-input-variant-value-empty-endicon uds-input-variant-value-filled-endicon uds-input-variant-value-empty-helpericon uds-input-variant-value-filled-helpericon uds-input-variant-value-empty-helpertext uds-input-variant-value-filled-helpertext uds-input-variant-value-empty-input uds-input-variant-value-filled-input uds-input-variant-value-empty-inputplaceholder uds-input-variant-value-filled-inputplaceholder uds-input-variant-value-empty-inputwrapper uds-input-variant-value-filled-inputwrapper uds-input-variant-value-empty-label uds-input-variant-value-filled-label uds-input-variant-value-empty-labelrequired uds-input-variant-value-filled-labelrequired uds-input-variant-value-empty-root uds-input-variant-value-filled-root uds-input-variant-value-empty-starticon uds-input-variant-value-filled-starticon',
|
|
4326
4339
|
Link: 'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator inline-flex h-\\[0\\.7em\\] w-\\[0\\.7em\\] border underline outline ring uds-bgBlurFillFallback uds-link-textstyle-body1-icon uds-link-textstyle-caption1-icon uds-link-textstyle-caption2-icon uds-link-textstyle-default-icon uds-link-textstyle-display1-icon uds-link-textstyle-display2-icon uds-link-textstyle-display3-icon uds-link-textstyle-headline1-icon uds-link-textstyle-label1-icon uds-link-textstyle-label2-icon uds-link-textstyle-label3-icon uds-link-textstyle-label4-icon uds-link-textstyle-legal1-icon uds-link-textstyle-title1-icon uds-link-textstyle-title2-icon uds-link-textstyle-title3-icon uds-link-textstyle-title4-icon uds-link-textstyle-ui1-icon uds-link-textstyle-ui2-icon uds-link-textstyle-ui3-icon uds-link-textstyle-ui4-icon uds-link-textstyle-ui5-icon uds-link-textstyle-ui6-icon uds-link-textstyle-body1-root uds-link-textstyle-caption1-root uds-link-textstyle-caption2-root uds-link-textstyle-default-root uds-link-textstyle-display1-root uds-link-textstyle-display2-root uds-link-textstyle-display3-root uds-link-textstyle-headline1-root uds-link-textstyle-label1-root uds-link-textstyle-label2-root uds-link-textstyle-label3-root uds-link-textstyle-label4-root uds-link-textstyle-legal1-root uds-link-textstyle-title1-root uds-link-textstyle-title2-root uds-link-textstyle-title3-root uds-link-textstyle-title4-root uds-link-textstyle-ui1-root uds-link-textstyle-ui2-root uds-link-textstyle-ui3-root uds-link-textstyle-ui4-root uds-link-textstyle-ui5-root uds-link-textstyle-ui6-root uds-link-variant-default-iconend uds-link-variant-on-color-iconend uds-link-variant-primary-iconend uds-link-variant-secondary-iconend uds-link-variant-tertiary-iconend uds-link-variant-default-iconstart uds-link-variant-on-color-iconstart uds-link-variant-primary-iconstart uds-link-variant-secondary-iconstart uds-link-variant-tertiary-iconstart uds-link-variant-default-root uds-link-variant-on-color-root uds-link-variant-primary-root uds-link-variant-secondary-root uds-link-variant-tertiary-root',
|
|
4327
4340
|
Menu: 'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4341
|
+
Popover:
|
|
4342
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4343
|
+
PopoverContent:
|
|
4344
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator absolute relative left-0 top-0 z-\\[1\\] z-\\[4\\] z-\\[9999\\] block flex transform border bg-carbon-15\\/0 outline-none blur transition-\\[background-color\\] duration-0 uds-bgBlurFillFallback hover\\:bg-carbon-15\\/10:hover focus-visible\\:outline-none:focus-visible active\\:bg-carbon-15\\/15:active uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4345
|
+
PopoverTrigger:
|
|
4346
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator inline uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4328
4347
|
Pressable:
|
|
4329
4348
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator flex border shadow ring uds-bgBlurFillFallback ',
|
|
4330
4349
|
Radio:
|
|
@@ -4345,15 +4364,17 @@ export const componentToTwClasses: ComponentToTwClasses = {
|
|
|
4345
4364
|
ToastPortal:
|
|
4346
4365
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator transition uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator w-full flex-none animate-spin bg-carbon-15\\/0 transition-\\[background-color\\] duration-0 uds-bgBlurFillFallback hover\\:bg-carbon-15\\/10:hover active\\:bg-carbon-15\\/15:active uds-toast-size-default-actionbutton uds-toast-size-default-closeicon uds-toast-size-default-icon uds-toast-size-default-label uds-toast-size-default-root uds-toast-variant-default-actionbutton uds-toast-variant-error-actionbutton uds-toast-variant-info-actionbutton uds-toast-variant-loading-actionbutton uds-toast-variant-success-actionbutton uds-toast-variant-warning-actionbutton uds-toast-variant-default-closeicon uds-toast-variant-error-closeicon uds-toast-variant-info-closeicon uds-toast-variant-loading-closeicon uds-toast-variant-success-closeicon uds-toast-variant-warning-closeicon uds-toast-variant-default-icon uds-toast-variant-error-icon uds-toast-variant-info-icon uds-toast-variant-loading-icon uds-toast-variant-success-icon uds-toast-variant-warning-icon uds-toast-variant-default-root uds-toast-variant-error-root uds-toast-variant-info-root uds-toast-variant-loading-root uds-toast-variant-success-root uds-toast-variant-warning-root',
|
|
4347
4366
|
Tooltip:
|
|
4348
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator
|
|
4367
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-tooltip-size-default-body uds-tooltip-size-default-endcontent uds-tooltip-size-default-icon uds-tooltip-size-default-root uds-tooltip-size-default-svg uds-tooltip-size-default-title uds-tooltip-variant-default-blur uds-tooltip-variant-default-icon uds-tooltip-variant-default-root uds-tooltip-variant-default-svg',
|
|
4349
4368
|
TooltipContent:
|
|
4350
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator
|
|
4369
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator absolute left-0 top-0 z-\\[1\\] z-\\[9999\\] flex max-w-lg transform blur transition-opacity ease-in-out uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-tooltip-size-default-body uds-tooltip-size-default-endcontent uds-tooltip-size-default-icon uds-tooltip-size-default-root uds-tooltip-size-default-svg uds-tooltip-size-default-title uds-tooltip-variant-default-blur uds-tooltip-variant-default-icon uds-tooltip-variant-default-root uds-tooltip-variant-default-svg',
|
|
4351
4370
|
TooltipTrigger:
|
|
4352
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator inline uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator
|
|
4371
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator inline uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-tooltip-size-default-body uds-tooltip-size-default-endcontent uds-tooltip-size-default-icon uds-tooltip-size-default-root uds-tooltip-size-default-svg uds-tooltip-size-default-title uds-tooltip-variant-default-blur uds-tooltip-variant-default-icon uds-tooltip-variant-default-root uds-tooltip-variant-default-svg',
|
|
4353
4372
|
UDSBreakpointsConfigProvider:
|
|
4354
4373
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4355
4374
|
UDSConfigProvider:
|
|
4356
4375
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4376
|
+
UDSPopoverConfigProvider:
|
|
4377
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4357
4378
|
UDSToastConfigProvider:
|
|
4358
4379
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4359
4380
|
UDSTooltipConfigProvider:
|
|
@@ -4370,24 +4391,22 @@ export const componentToTwClasses: ComponentToTwClasses = {
|
|
|
4370
4391
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator fixed inset-8 top-\\[250px\\] z-50 mx-auto hidden h-fit w-\\[600px\\] origin-center scale-95 opacity-0 backdrop-blur-0 transition duration-150 uds-bgBlurFillFallback data-\\[enter\\]\\:scale-100[data-enter] data-\\[enter\\]\\:bg-primary[data-enter] data-\\[enter\\]\\:opacity-100[data-enter] data-\\[enter\\]\\:opacity-60[data-enter] data-\\[enter\\]\\:backdrop-blur-sm[data-enter]',
|
|
4371
4392
|
ModalHeader:
|
|
4372
4393
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator fixed inset-8 top-\\[250px\\] z-50 mx-auto hidden h-fit w-\\[600px\\] origin-center scale-95 opacity-0 backdrop-blur-0 transition duration-150 uds-bgBlurFillFallback data-\\[enter\\]\\:scale-100[data-enter] data-\\[enter\\]\\:bg-primary[data-enter] data-\\[enter\\]\\:opacity-100[data-enter] data-\\[enter\\]\\:opacity-60[data-enter] data-\\[enter\\]\\:backdrop-blur-sm[data-enter]',
|
|
4373
|
-
Popover:
|
|
4374
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4375
4394
|
PopoverAnchor:
|
|
4376
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4395
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4377
4396
|
PopoverArrow:
|
|
4378
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4397
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4379
4398
|
PopoverDescription:
|
|
4380
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4399
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4381
4400
|
PopoverDisclosure:
|
|
4382
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4401
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4383
4402
|
PopoverDisclosureArrow:
|
|
4384
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4403
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4385
4404
|
PopoverDismiss:
|
|
4386
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4405
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4387
4406
|
PopoverHeading:
|
|
4388
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4407
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4389
4408
|
PopoverProvider:
|
|
4390
|
-
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback ',
|
|
4409
|
+
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator uds-bgBlurFillFallback uds-popover-size-default-closeicon uds-popover-size-default-contentwrapper uds-popover-size-default-root uds-popover-size-default-svgbase uds-popover-size-default-svgborder uds-popover-variant-default-blur uds-popover-variant-default-closeicon uds-popover-variant-default-root uds-popover-variant-default-svgbase uds-popover-variant-default-svgborder',
|
|
4391
4410
|
SegmentedControl:
|
|
4392
4411
|
'uds-hit-target uds-ring:focus-visible:not(:disabled) focused .uds-ring:not(:disabled) uds-ring.uds-ring-within:has(:focus-visible):not(:disabled) uds-input[list]::-webkit-calendar-picker-indicator uds-input::-webkit-datetime-edit uds-input::-webkit-calendar-picker-indicator pointer-events-none flex inline-flex cursor-not-allowed opacity-50 outline uds-bgBlurFillFallback hover\\:bg-primary:hover',
|
|
4393
4412
|
Spinner:
|
|
@@ -4436,6 +4455,21 @@ export const componentsDependencies: ComponentDependencies = {
|
|
|
4436
4455
|
InputHelpText: ['Box'],
|
|
4437
4456
|
Link: [],
|
|
4438
4457
|
Menu: [],
|
|
4458
|
+
Popover: [
|
|
4459
|
+
'Popover',
|
|
4460
|
+
'PopoverAnchor',
|
|
4461
|
+
'PopoverArrow',
|
|
4462
|
+
'PopoverDescription',
|
|
4463
|
+
'PopoverDisclosure',
|
|
4464
|
+
'PopoverDisclosureArrow',
|
|
4465
|
+
'PopoverDismiss',
|
|
4466
|
+
'PopoverHeading',
|
|
4467
|
+
'PopoverProvider',
|
|
4468
|
+
'HStack',
|
|
4469
|
+
'Text',
|
|
4470
|
+
],
|
|
4471
|
+
PopoverContent: ['Popover', 'PopoverArrow', 'PopoverDismiss', 'Pressable', 'Box'],
|
|
4472
|
+
PopoverTrigger: ['PopoverDisclosure'],
|
|
4439
4473
|
Pressable: [],
|
|
4440
4474
|
Radio: ['Box', 'FormLabel', 'SpringMotionConfig'],
|
|
4441
4475
|
RadioGroupProvider: [],
|
|
@@ -4451,10 +4485,12 @@ export const componentsDependencies: ComponentDependencies = {
|
|
|
4451
4485
|
TooltipTrigger: [],
|
|
4452
4486
|
UDSBreakpointsConfigProvider: [],
|
|
4453
4487
|
UDSConfigProvider: [
|
|
4488
|
+
'UDSPopoverConfigProvider',
|
|
4454
4489
|
'UDSToastConfigProvider',
|
|
4455
4490
|
'UDSTooltipConfigProvider',
|
|
4456
4491
|
'UDSBreakpointsConfigProvider',
|
|
4457
4492
|
],
|
|
4493
|
+
UDSPopoverConfigProvider: [],
|
|
4458
4494
|
UDSToastConfigProvider: [],
|
|
4459
4495
|
UDSTooltipConfigProvider: [],
|
|
4460
4496
|
VStack: ['Box'],
|
|
@@ -4463,19 +4499,6 @@ export const componentsDependencies: ComponentDependencies = {
|
|
|
4463
4499
|
Modal: ['HStack', 'Text', 'VStack', 'IconButton'],
|
|
4464
4500
|
ModalDismiss: ['HStack', 'Text', 'VStack', 'IconButton'],
|
|
4465
4501
|
ModalHeader: ['HStack', 'Text', 'VStack', 'IconButton'],
|
|
4466
|
-
Popover: [
|
|
4467
|
-
'Popover',
|
|
4468
|
-
'PopoverAnchor',
|
|
4469
|
-
'PopoverArrow',
|
|
4470
|
-
'PopoverDescription',
|
|
4471
|
-
'PopoverDisclosure',
|
|
4472
|
-
'PopoverDisclosureArrow',
|
|
4473
|
-
'PopoverDismiss',
|
|
4474
|
-
'PopoverHeading',
|
|
4475
|
-
'PopoverProvider',
|
|
4476
|
-
'HStack',
|
|
4477
|
-
'Text',
|
|
4478
|
-
],
|
|
4479
4502
|
PopoverAnchor: [
|
|
4480
4503
|
'Popover',
|
|
4481
4504
|
'PopoverAnchor',
|
package/package.json
CHANGED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { ParsedShadow } from "./util.cjs";
|
|
3
|
-
import { CSSProperties, RefObject } from "react";
|
|
4
|
-
|
|
5
|
-
//#region src/components/client/Tooltip/useTooltipContent.d.ts
|
|
6
|
-
interface UseTooltipContentOptions {
|
|
7
|
-
/** Whether the tooltip is currently open. */
|
|
8
|
-
open: boolean;
|
|
9
|
-
/** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
|
|
10
|
-
effectivePlacement: string;
|
|
11
|
-
/** Optional max-width override (number = px, string = CSS value). */
|
|
12
|
-
maxWidth?: number | string;
|
|
13
|
-
/** Border-radius from the tooltip config (px). */
|
|
14
|
-
borderRadius: number;
|
|
15
|
-
/**
|
|
16
|
-
* Ref to the Ariakit `TooltipArrow` element. Its position (set by
|
|
17
|
-
* floating-ui) is read inside the `updatePosition` callback so the
|
|
18
|
-
* SVG arrow always mirrors where floating-ui places the native arrow.
|
|
19
|
-
*/
|
|
20
|
-
arrowRef: RefObject<HTMLDivElement | null>;
|
|
21
|
-
/** Animation duration from the tooltip config (ms). */
|
|
22
|
-
animationDuration: number;
|
|
23
|
-
}
|
|
24
|
-
interface UseTooltipContentReturn {
|
|
25
|
-
internalRef: RefObject<HTMLElement | null>;
|
|
26
|
-
shadowFilterId: string;
|
|
27
|
-
maxWidthClass: string;
|
|
28
|
-
dimensions: {
|
|
29
|
-
width: number;
|
|
30
|
-
height: number;
|
|
31
|
-
};
|
|
32
|
-
shadows: ParsedShadow[];
|
|
33
|
-
shadowPadding: number;
|
|
34
|
-
svgPath: string | null;
|
|
35
|
-
blurClipPath: string | null;
|
|
36
|
-
blurStyle: CSSProperties;
|
|
37
|
-
visible: boolean;
|
|
38
|
-
childTransitionStyle: CSSProperties;
|
|
39
|
-
/**
|
|
40
|
-
* Pixel offset to apply as a CSS transform on the tooltip element so that
|
|
41
|
-
* the (clamped) SVG arrow aligns with the trigger center even when the
|
|
42
|
-
* trigger is too small / close to a rounded corner for the arrow to reach.
|
|
43
|
-
*/
|
|
44
|
-
tooltipShift: {
|
|
45
|
-
x: number;
|
|
46
|
-
y: number;
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
|
|
50
|
-
* This hooks into floating-ui's positioning lifecycle so the SVG arrow
|
|
51
|
-
* center is read after every `computePosition`
|
|
52
|
-
*/
|
|
53
|
-
onPositionUpdate: (props: {
|
|
54
|
-
updatePosition: () => Promise<void>;
|
|
55
|
-
}) => Promise<void>;
|
|
56
|
-
}
|
|
57
|
-
declare function useTooltipContent({
|
|
58
|
-
open,
|
|
59
|
-
effectivePlacement,
|
|
60
|
-
maxWidth,
|
|
61
|
-
borderRadius,
|
|
62
|
-
arrowRef,
|
|
63
|
-
animationDuration
|
|
64
|
-
}: UseTooltipContentOptions): UseTooltipContentReturn;
|
|
65
|
-
//#endregion
|
|
66
|
-
export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { ParsedShadow } from "./util.js";
|
|
3
|
-
import { CSSProperties, RefObject } from "react";
|
|
4
|
-
|
|
5
|
-
//#region src/components/client/Tooltip/useTooltipContent.d.ts
|
|
6
|
-
interface UseTooltipContentOptions {
|
|
7
|
-
/** Whether the tooltip is currently open. */
|
|
8
|
-
open: boolean;
|
|
9
|
-
/** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
|
|
10
|
-
effectivePlacement: string;
|
|
11
|
-
/** Optional max-width override (number = px, string = CSS value). */
|
|
12
|
-
maxWidth?: number | string;
|
|
13
|
-
/** Border-radius from the tooltip config (px). */
|
|
14
|
-
borderRadius: number;
|
|
15
|
-
/**
|
|
16
|
-
* Ref to the Ariakit `TooltipArrow` element. Its position (set by
|
|
17
|
-
* floating-ui) is read inside the `updatePosition` callback so the
|
|
18
|
-
* SVG arrow always mirrors where floating-ui places the native arrow.
|
|
19
|
-
*/
|
|
20
|
-
arrowRef: RefObject<HTMLDivElement | null>;
|
|
21
|
-
/** Animation duration from the tooltip config (ms). */
|
|
22
|
-
animationDuration: number;
|
|
23
|
-
}
|
|
24
|
-
interface UseTooltipContentReturn {
|
|
25
|
-
internalRef: RefObject<HTMLElement | null>;
|
|
26
|
-
shadowFilterId: string;
|
|
27
|
-
maxWidthClass: string;
|
|
28
|
-
dimensions: {
|
|
29
|
-
width: number;
|
|
30
|
-
height: number;
|
|
31
|
-
};
|
|
32
|
-
shadows: ParsedShadow[];
|
|
33
|
-
shadowPadding: number;
|
|
34
|
-
svgPath: string | null;
|
|
35
|
-
blurClipPath: string | null;
|
|
36
|
-
blurStyle: CSSProperties;
|
|
37
|
-
visible: boolean;
|
|
38
|
-
childTransitionStyle: CSSProperties;
|
|
39
|
-
/**
|
|
40
|
-
* Pixel offset to apply as a CSS transform on the tooltip element so that
|
|
41
|
-
* the (clamped) SVG arrow aligns with the trigger center even when the
|
|
42
|
-
* trigger is too small / close to a rounded corner for the arrow to reach.
|
|
43
|
-
*/
|
|
44
|
-
tooltipShift: {
|
|
45
|
-
x: number;
|
|
46
|
-
y: number;
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
|
|
50
|
-
* This hooks into floating-ui's positioning lifecycle so the SVG arrow
|
|
51
|
-
* center is read after every `computePosition`
|
|
52
|
-
*/
|
|
53
|
-
onPositionUpdate: (props: {
|
|
54
|
-
updatePosition: () => Promise<void>;
|
|
55
|
-
}) => Promise<void>;
|
|
56
|
-
}
|
|
57
|
-
declare function useTooltipContent({
|
|
58
|
-
open,
|
|
59
|
-
effectivePlacement,
|
|
60
|
-
maxWidth,
|
|
61
|
-
borderRadius,
|
|
62
|
-
arrowRef,
|
|
63
|
-
animationDuration
|
|
64
|
-
}: UseTooltipContentOptions): UseTooltipContentReturn;
|
|
65
|
-
//#endregion
|
|
66
|
-
export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };
|
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
-
|
|
5
|
-
//#region src/components/client/Tooltip/util.ts
|
|
6
|
-
/**
|
|
7
|
-
* Splits a CSS value on whitespace, but keeps parenthesized groups
|
|
8
|
-
* (e.g. `rgb(0, 0, 0)`) together as single tokens.
|
|
9
|
-
*/
|
|
10
|
-
function tokenizeCSSValue(value) {
|
|
11
|
-
const tokens = [];
|
|
12
|
-
let current = "";
|
|
13
|
-
let depth = 0;
|
|
14
|
-
for (const char of value) {
|
|
15
|
-
if (char === "(") depth++;
|
|
16
|
-
if (char === ")") depth--;
|
|
17
|
-
if (char === " " && depth === 0) {
|
|
18
|
-
if (current) tokens.push(current);
|
|
19
|
-
current = "";
|
|
20
|
-
} else current += char;
|
|
21
|
-
}
|
|
22
|
-
if (current) tokens.push(current);
|
|
23
|
-
return tokens;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Returns `true` if the token is a CSS color value.
|
|
27
|
-
*
|
|
28
|
-
* In a box-shadow context (after filtering `inset`), every token is either a
|
|
29
|
-
* length or a color. Colors always start with `#` (hex), a letter (named
|
|
30
|
-
* colors like `red`, `transparent`, `currentcolor`), or are a CSS function
|
|
31
|
-
* containing `(` (e.g. `rgb(…)`, `hsl(…)`, `oklch(…)`).
|
|
32
|
-
*/
|
|
33
|
-
function isColorToken(token) {
|
|
34
|
-
const ch = token[0];
|
|
35
|
-
return ch !== "-" && ch !== "." && (ch < "0" || ch > "9");
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Splits a CSS multi-shadow value (comma-separated) into individual
|
|
39
|
-
* shadow strings, correctly handling commas nested inside color functions
|
|
40
|
-
* like `rgb()`, `rgba()`, `hsl()`, etc.
|
|
41
|
-
*/
|
|
42
|
-
function splitShadows(value) {
|
|
43
|
-
const shadows = [];
|
|
44
|
-
let current = "";
|
|
45
|
-
let depth = 0;
|
|
46
|
-
for (let i = 0; i < value.length; i++) {
|
|
47
|
-
const char = value[i];
|
|
48
|
-
if (char === "(") {
|
|
49
|
-
depth++;
|
|
50
|
-
current += char;
|
|
51
|
-
} else if (char === ")") {
|
|
52
|
-
depth--;
|
|
53
|
-
current += char;
|
|
54
|
-
} else if (char === "," && depth === 0) {
|
|
55
|
-
if (current.trim()) shadows.push(current.trim());
|
|
56
|
-
current = "";
|
|
57
|
-
} else current += char;
|
|
58
|
-
}
|
|
59
|
-
if (current.trim()) shadows.push(current.trim());
|
|
60
|
-
return shadows;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Parses a single CSS shadow value string into its constituent parts.
|
|
64
|
-
*
|
|
65
|
-
* Handles all standard CSS box-shadow / drop-shadow permutations:
|
|
66
|
-
* - Color before or after length values (`red 0 4px 8px` or `0 4px 8px red`)
|
|
67
|
-
* - Optional blur and spread radii (defaults to 0)
|
|
68
|
-
* - `inset` keyword at any position (silently ignored)
|
|
69
|
-
* - All color formats: named, hex (3/4/6/8-digit), rgb/rgba, hsl/hsla, oklch,
|
|
70
|
-
* oklab, lab, lch, color(), color-mix(), light-dark(), etc.
|
|
71
|
-
* - `none` / empty values → zeroed-out result with `transparent` color
|
|
72
|
-
*/
|
|
73
|
-
function parseSingleShadow(shadow) {
|
|
74
|
-
const value = shadow.trim();
|
|
75
|
-
if (!value || value.toLowerCase() === "none") return {
|
|
76
|
-
x: 0,
|
|
77
|
-
y: 0,
|
|
78
|
-
blur: 0,
|
|
79
|
-
spread: 0,
|
|
80
|
-
color: "transparent"
|
|
81
|
-
};
|
|
82
|
-
const tokens = tokenizeCSSValue(value);
|
|
83
|
-
const lengths = [];
|
|
84
|
-
const colorParts = [];
|
|
85
|
-
for (const token of tokens) {
|
|
86
|
-
if (token.toLowerCase() === "inset") continue;
|
|
87
|
-
if (isColorToken(token)) colorParts.push(token);
|
|
88
|
-
else lengths.push(token);
|
|
89
|
-
}
|
|
90
|
-
return {
|
|
91
|
-
x: lengths.length > 0 ? parseFloat(lengths[0]) : 0,
|
|
92
|
-
y: lengths.length > 1 ? parseFloat(lengths[1]) : 0,
|
|
93
|
-
blur: lengths.length > 2 ? parseFloat(lengths[2]) : 0,
|
|
94
|
-
spread: lengths.length > 3 ? parseFloat(lengths[3]) : 0,
|
|
95
|
-
color: colorParts.length > 0 ? colorParts.join(" ") : "rgb(0 0 0 / 1)"
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* Parses a CSS shadow value — which may contain multiple comma-separated
|
|
100
|
-
* layers — into an array of {@link ParsedShadow} objects.
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* ```ts
|
|
104
|
-
* parseShadow('0px 4px 8px 0px rgb(0 0 0 / 0.12)')
|
|
105
|
-
* // → [{ x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' }]
|
|
106
|
-
*
|
|
107
|
-
* parseShadow('0px 4px 8px rgb(0 0 0 / 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08)')
|
|
108
|
-
* // → [
|
|
109
|
-
* // { x: 0, y: 4, blur: 8, spread: 0, color: 'rgb(0 0 0 / 0.12)' },
|
|
110
|
-
* // { x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.08)' },
|
|
111
|
-
* // ]
|
|
112
|
-
* ```
|
|
113
|
-
*/
|
|
114
|
-
function parseShadow(shadowValue) {
|
|
115
|
-
const trimmed = shadowValue.trim();
|
|
116
|
-
if (!trimmed || trimmed.toLowerCase() === "none") return [];
|
|
117
|
-
return splitShadows(trimmed).map(parseSingleShadow);
|
|
118
|
-
}
|
|
119
|
-
/** Base width of the arrow triangle (px). */
|
|
120
|
-
const ARROW_WIDTH = 12;
|
|
121
|
-
/** Height (protrusion) of the arrow triangle from the edge (px). */
|
|
122
|
-
const ARROW_HEIGHT = 8;
|
|
123
|
-
/**
|
|
124
|
-
* Fraction of the container border-radius applied to round the arrow tip
|
|
125
|
-
* (0 = sharp point, 1 = same radius as the container corners).
|
|
126
|
-
*/
|
|
127
|
-
const ARROW_TIP_RADIUS_FRACTION = .5;
|
|
128
|
-
/**
|
|
129
|
-
* Returns the side of the tooltip where the arrow should appear.
|
|
130
|
-
* The arrow points *toward* the trigger, so it lives on the opposite
|
|
131
|
-
* side of the placement direction.
|
|
132
|
-
*/
|
|
133
|
-
function getArrowSide(placement) {
|
|
134
|
-
switch (placement.split("-")[0]) {
|
|
135
|
-
case "bottom": return "top";
|
|
136
|
-
case "top": return "bottom";
|
|
137
|
-
case "left": return "right";
|
|
138
|
-
case "right": return "left";
|
|
139
|
-
default: return "top";
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
/**
|
|
143
|
-
* Generates an SVG `<path>` string for a rounded rectangle with an arrow
|
|
144
|
-
* pointing toward the trigger element.
|
|
145
|
-
*
|
|
146
|
-
* The path is traced clockwise, inserting the arrow triangle on the
|
|
147
|
-
* appropriate edge. The arrow extends *outside* the 0,0 → width,height
|
|
148
|
-
* rectangle so the host `<svg>` must use `overflow: visible`.
|
|
149
|
-
*/
|
|
150
|
-
function generateTooltipPath({ width, height, placement, borderRadius, arrowWidth = ARROW_WIDTH, arrowHeight = ARROW_HEIGHT, arrowCenter, offsetX: ox = 0, offsetY: oy = 0 }) {
|
|
151
|
-
const aw = arrowWidth / 2;
|
|
152
|
-
const ah = arrowHeight;
|
|
153
|
-
const arrowSide = getArrowSide(placement);
|
|
154
|
-
const arrowEdge = arrowSide === "top" || arrowSide === "bottom" ? width : height;
|
|
155
|
-
const otherEdge = arrowSide === "top" || arrowSide === "bottom" ? height : width;
|
|
156
|
-
const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
|
|
157
|
-
const r = Math.max(0, Math.min(borderRadius, maxRadius));
|
|
158
|
-
const minAc = r + aw;
|
|
159
|
-
const edgeLength = arrowSide === "top" || arrowSide === "bottom" ? width : height;
|
|
160
|
-
let ac = arrowCenter ?? edgeLength / 2;
|
|
161
|
-
ac = Math.max(minAc, Math.min(edgeLength - minAc, ac));
|
|
162
|
-
const edgeLen = Math.sqrt(aw * aw + ah * ah);
|
|
163
|
-
const tipR = r > 0 && edgeLen > 0 ? Math.min(r * ARROW_TIP_RADIUS_FRACTION, edgeLen / 2) : 0;
|
|
164
|
-
const daw = edgeLen > 0 ? aw / edgeLen : 0;
|
|
165
|
-
const dah = edgeLen > 0 ? ah / edgeLen : 0;
|
|
166
|
-
const d = [];
|
|
167
|
-
d.push(`M ${r + ox} ${oy}`);
|
|
168
|
-
if (arrowSide === "top") {
|
|
169
|
-
d.push(`L ${ac - aw + ox} ${oy}`);
|
|
170
|
-
if (tipR > 0) {
|
|
171
|
-
d.push(`L ${ac - tipR * daw + ox} ${-ah + tipR * dah + oy}`);
|
|
172
|
-
d.push(`Q ${ac + ox} ${-ah + oy} ${ac + tipR * daw + ox} ${-ah + tipR * dah + oy}`);
|
|
173
|
-
} else d.push(`L ${ac + ox} ${-ah + oy}`);
|
|
174
|
-
d.push(`L ${ac + aw + ox} ${oy}`);
|
|
175
|
-
}
|
|
176
|
-
d.push(`L ${width - r + ox} ${oy}`);
|
|
177
|
-
d.push(`A ${r} ${r} 0 0 1 ${width + ox} ${r + oy}`);
|
|
178
|
-
if (arrowSide === "right") {
|
|
179
|
-
d.push(`L ${width + ox} ${ac - aw + oy}`);
|
|
180
|
-
if (tipR > 0) {
|
|
181
|
-
d.push(`L ${width + ah - tipR * dah + ox} ${ac - tipR * daw + oy}`);
|
|
182
|
-
d.push(`Q ${width + ah + ox} ${ac + oy} ${width + ah - tipR * dah + ox} ${ac + tipR * daw + oy}`);
|
|
183
|
-
} else d.push(`L ${width + ah + ox} ${ac + oy}`);
|
|
184
|
-
d.push(`L ${width + ox} ${ac + aw + oy}`);
|
|
185
|
-
}
|
|
186
|
-
d.push(`L ${width + ox} ${height - r + oy}`);
|
|
187
|
-
d.push(`A ${r} ${r} 0 0 1 ${width - r + ox} ${height + oy}`);
|
|
188
|
-
if (arrowSide === "bottom") {
|
|
189
|
-
d.push(`L ${ac + aw + ox} ${height + oy}`);
|
|
190
|
-
if (tipR > 0) {
|
|
191
|
-
d.push(`L ${ac + tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
|
|
192
|
-
d.push(`Q ${ac + ox} ${height + ah + oy} ${ac - tipR * daw + ox} ${height + ah - tipR * dah + oy}`);
|
|
193
|
-
} else d.push(`L ${ac + ox} ${height + ah + oy}`);
|
|
194
|
-
d.push(`L ${ac - aw + ox} ${height + oy}`);
|
|
195
|
-
}
|
|
196
|
-
d.push(`L ${r + ox} ${height + oy}`);
|
|
197
|
-
d.push(`A ${r} ${r} 0 0 1 ${ox} ${height - r + oy}`);
|
|
198
|
-
if (arrowSide === "left") {
|
|
199
|
-
d.push(`L ${ox} ${ac + aw + oy}`);
|
|
200
|
-
if (tipR > 0) {
|
|
201
|
-
d.push(`L ${-ah + tipR * dah + ox} ${ac + tipR * daw + oy}`);
|
|
202
|
-
d.push(`Q ${-ah + ox} ${ac + oy} ${-ah + tipR * dah + ox} ${ac - tipR * daw + oy}`);
|
|
203
|
-
} else d.push(`L ${-ah + ox} ${ac + oy}`);
|
|
204
|
-
d.push(`L ${ox} ${ac - aw + oy}`);
|
|
205
|
-
}
|
|
206
|
-
d.push(`L ${ox} ${r + oy}`);
|
|
207
|
-
d.push(`A ${r} ${r} 0 0 1 ${r + ox} ${oy}`);
|
|
208
|
-
d.push("Z");
|
|
209
|
-
return d.join(" ");
|
|
210
|
-
}
|
|
211
|
-
/**
|
|
212
|
-
* Computes the pixel offset the tooltip must shift so that the SVG arrow
|
|
213
|
-
* (after clamping) visually aligns with the Ariakit arrow's actual position.
|
|
214
|
-
*
|
|
215
|
-
* When the desired `arrowCenter` falls inside the safe zone the delta is 0.
|
|
216
|
-
* When it falls outside (e.g. a tiny trigger near a rounded corner), the
|
|
217
|
-
* returned delta tells the caller how far to translate the tooltip element
|
|
218
|
-
* so the clamped arrow ends up over the trigger center.
|
|
219
|
-
*/
|
|
220
|
-
function getArrowClampDelta({ width, height, placement, borderRadius, arrowCenter, arrowWidth = ARROW_WIDTH }) {
|
|
221
|
-
const aw = arrowWidth / 2;
|
|
222
|
-
const side = getArrowSide(placement);
|
|
223
|
-
const arrowEdge = side === "top" || side === "bottom" ? width : height;
|
|
224
|
-
const otherEdge = side === "top" || side === "bottom" ? height : width;
|
|
225
|
-
const maxRadius = Math.min(otherEdge / 2, (arrowEdge - arrowWidth) / 2);
|
|
226
|
-
const minAc = Math.max(0, Math.min(borderRadius, maxRadius)) + aw;
|
|
227
|
-
const maxAc = arrowEdge - minAc;
|
|
228
|
-
let delta = 0;
|
|
229
|
-
if (arrowCenter < minAc) delta = arrowCenter - minAc;
|
|
230
|
-
else if (arrowCenter > maxAc) delta = arrowCenter - maxAc;
|
|
231
|
-
if (side === "top" || side === "bottom") return {
|
|
232
|
-
x: delta,
|
|
233
|
-
y: 0
|
|
234
|
-
};
|
|
235
|
-
return {
|
|
236
|
-
x: 0,
|
|
237
|
-
y: delta
|
|
238
|
-
};
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
//#endregion
|
|
242
|
-
exports.ARROW_HEIGHT = ARROW_HEIGHT;
|
|
243
|
-
exports.ARROW_TIP_RADIUS_FRACTION = ARROW_TIP_RADIUS_FRACTION;
|
|
244
|
-
exports.ARROW_WIDTH = ARROW_WIDTH;
|
|
245
|
-
exports.generateTooltipPath = generateTooltipPath;
|
|
246
|
-
exports.getArrowClampDelta = getArrowClampDelta;
|
|
247
|
-
exports.getArrowSide = getArrowSide;
|
|
248
|
-
exports.parseShadow = parseShadow;
|