@12-apps/ui 6.77.0 → 6.77.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/_internal/components/data-display/Alert/Alert.content.js +2 -2
- package/dist/_internal/components/data-display/Alert/Alert.js +4 -4
- package/dist/_internal/components/data-display/Alert/Alert.metrics.js +1 -1
- package/dist/_internal/components/data-display/Alert/Alert.styles.js +2 -2
- package/dist/_internal/components/data-display/Banner/Banner.js +3 -3
- package/dist/_internal/components/data-display/Banner/Banner.styles.js +2 -2
- package/dist/_internal/components/data-display/CardKit/CardKebab.js +2 -2
- package/dist/_internal/components/data-display/CardKit/card-actions-context.js +5 -5
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +8 -8
- package/dist/_internal/components/data-display/CardKit/use-row-confirm.js +2 -2
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +17 -17
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +27 -27
- package/dist/_internal/components/data-display/DataViews/DeleteViewDialog.js +2 -2
- package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +3 -3
- package/dist/_internal/components/data-display/DataViews/SaveViewModal.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-card-body.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-columns.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-empty.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-export.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-grid-helpers.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +14 -14
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-select-all-strip.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +7 -7
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +9 -9
- package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-view-nav.js +2 -2
- package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +4 -4
- package/dist/_internal/components/data-display/index.js +6 -6
- package/dist/_internal/components/feedback/ConfirmAction/ConfirmButton.js +2 -2
- package/dist/_internal/components/feedback/NotificationStatusNotice/NotificationStatusNotice.js +6 -6
- package/dist/_internal/components/feedback/index.js +7 -7
- package/dist/_internal/components/form/Button/Button.js +1 -1
- package/dist/_internal/components/form/index.js +1 -1
- package/dist/_internal/components/form/total-form/SubmitButton.js +2 -2
- package/dist/_internal/components/index.js +17 -17
- package/dist/_internal/components/layout/SettingCard/SettingCard.js +4 -4
- package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js +2 -2
- package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js +3 -3
- package/dist/_internal/components/layout/SettingCard/SettingGrid.js +3 -3
- package/dist/_internal/components/layout/SettingCard/SettingGroup.js +5 -5
- package/dist/_internal/components/layout/SettingCard/SettingSwitch.js +4 -4
- package/dist/_internal/components/layout/SettingCard/SettingToggle.js +5 -5
- package/dist/_internal/components/layout/index.js +8 -8
- package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +2 -2
- package/dist/_internal/components/navigation/index.js +2 -2
- package/dist/_internal/social-login-button/social-login-button.js +2 -2
- package/dist/_internal/user-avatar/user-avatar.js +2 -2
- package/dist/{chunk-BF3SGOWT.js → chunk-2ONUSNPZ.js} +2 -2
- package/dist/{chunk-ULK4AGG4.js → chunk-3EIRRLCQ.js} +2 -2
- package/dist/{chunk-TVXUOJAL.js → chunk-4NG3LTRX.js} +2 -2
- package/dist/{chunk-XZE5FIRB.js → chunk-5IIHAYFF.js} +2 -2
- package/dist/{chunk-72L5C74V.js → chunk-5M7T36AT.js} +3 -3
- package/dist/{chunk-J32XJALK.js → chunk-5WUXJDFP.js} +2 -2
- package/dist/{chunk-JNVUB2D4.js → chunk-5ZY3IIIG.js} +2 -2
- package/dist/chunk-5ZY3IIIG.js.map +1 -0
- package/dist/{chunk-3MQZBBUW.js → chunk-7FFY4LJY.js} +2 -2
- package/dist/{chunk-IVI574Y5.js → chunk-7HZ36QDH.js} +16 -7
- package/dist/chunk-7HZ36QDH.js.map +1 -0
- package/dist/{chunk-ENXGWNCX.js → chunk-7LMR2H7O.js} +4 -4
- package/dist/{chunk-H7QTDKA6.js → chunk-BGSUSSAV.js} +2 -2
- package/dist/{chunk-FR2RJXHS.js → chunk-C2NNJMVY.js} +3 -3
- package/dist/{chunk-NIZUFPV3.js → chunk-CW5Z67NA.js} +2 -2
- package/dist/{chunk-BEHM2VLH.js → chunk-FVNY5BNV.js} +2 -2
- package/dist/{chunk-X2SJJZFH.js → chunk-GG7IOJAG.js} +4 -4
- package/dist/{chunk-J5QNJERV.js → chunk-HHFVDOA7.js} +3 -3
- package/dist/{chunk-HVGQH54G.js → chunk-HMWSMRLM.js} +2 -2
- package/dist/{chunk-MA6ENJDP.js → chunk-HXCUKZOB.js} +3 -3
- package/dist/{chunk-CCJJTLF7.js → chunk-L5RS6QAT.js} +2 -2
- package/dist/{chunk-ZSCKXOKE.js → chunk-NQCTANF3.js} +4 -4
- package/dist/{chunk-NIENIKZ5.js → chunk-NRADSKGH.js} +2 -2
- package/dist/{chunk-725H45MT.js → chunk-NZXRPWPW.js} +4 -4
- package/dist/{chunk-LBEZ7A3F.js → chunk-OK3OJGJY.js} +3 -3
- package/dist/{chunk-WJEJ65TF.js → chunk-OY437NRJ.js} +2 -2
- package/dist/{chunk-QZX43FIC.js → chunk-QIP37Y2C.js} +2 -2
- package/dist/{chunk-Y2CCXB7R.js → chunk-QITQFCFY.js} +2 -2
- package/dist/{chunk-P4LR2GLN.js → chunk-R2ODLE6G.js} +2 -2
- package/dist/{chunk-UFNXYOHZ.js → chunk-RCTHCXS6.js} +2 -2
- package/dist/{chunk-VQSBZPKO.js → chunk-RVZMKGWQ.js} +2 -2
- package/dist/{chunk-QWSYHENP.js → chunk-SKIAWOUC.js} +4 -4
- package/dist/{chunk-3FDSXSEP.js → chunk-TDWA2XFJ.js} +2 -2
- package/dist/{chunk-VWVA74JY.js → chunk-UXQVJXQ3.js} +2 -2
- package/dist/{chunk-BEYLI32I.js → chunk-WOUJSKQB.js} +3 -3
- package/dist/{chunk-NDQJDA7O.js → chunk-WULEQKU7.js} +2 -2
- package/dist/{chunk-4QGPRORO.js → chunk-X2GWR75Q.js} +2 -2
- package/dist/{chunk-NKBCUR4V.js → chunk-X3DN2BE3.js} +2 -2
- package/dist/{chunk-B34WHRKH.js → chunk-XGKUXYAD.js} +2 -2
- package/dist/{chunk-TRYYYWV3.js → chunk-Y2CHJLWD.js} +6 -6
- package/dist/{chunk-QDG6V7OC.js → chunk-YNZUYZ2O.js} +3 -3
- package/dist/{chunk-364NH2NY.js → chunk-YOXYSAUI.js} +20 -11
- package/dist/chunk-YOXYSAUI.js.map +1 -0
- package/dist/{chunk-T2KONJ45.js → chunk-Z4ZFJ565.js} +3 -3
- package/dist/{chunk-JA3WJPXH.js → chunk-ZAZOBTVS.js} +2 -2
- package/dist/{chunk-SZSS5KKX.js → chunk-ZCXQ4ZB6.js} +2 -2
- package/dist/{chunk-P7VAMJFJ.js → chunk-ZE4HF3KC.js} +3 -3
- package/dist/data-display/Alert.js +4 -4
- package/dist/data-display/Banner.js +3 -3
- package/dist/data-display/CardKit.js +9 -9
- package/dist/data-display/DataViews.js +27 -27
- package/dist/feedback/ConfirmAction.js +2 -2
- package/dist/feedback/NotificationStatusNotice.js +6 -6
- package/dist/form/Button.js +1 -1
- package/dist/form/total-form.js +2 -2
- package/dist/layout/SettingCard.js +8 -8
- package/dist/native/chunks/{chunk-2MFMON74.js → chunk-EZHCNYQO.js} +67 -33
- package/dist/native/chunks/chunk-EZHCNYQO.js.map +1 -0
- package/dist/native/chunks/{chunk-H22XVP5O.js → chunk-TZPNJ4AU.js} +2 -2
- package/dist/native/data-display/Alert.js.map +1 -1
- package/dist/native/data-display/EmptyState.js +2 -2
- package/dist/native/data-display/ErrorState.js +1 -1
- package/dist/native/data-display/FleetMap.js +2 -2
- package/dist/native/form/Button.js +1 -1
- package/dist/navigation/AppHeader.js +2 -2
- package/dist/social-login-button.js +2 -2
- package/dist/types/components/data-display/Alert/Alert.content.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts +2 -1
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/dist/types/components/form/Button/Button.d.ts.map +1 -1
- package/dist/types/components/form/Button/Button.native.loading.d.ts +36 -0
- package/dist/types/components/form/Button/Button.native.loading.d.ts.map +1 -0
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts +2 -1
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/dist/types-native/components/form/Button/Button.native.d.ts.map +1 -1
- package/dist/types-native/components/form/Button/Button.native.loading.d.ts +36 -0
- package/dist/types-native/components/form/Button/Button.native.loading.d.ts.map +1 -0
- package/dist/user-avatar.js +2 -2
- package/package.json +1 -1
- package/src/components/data-display/Alert/Alert.content.tsx +16 -5
- package/src/components/data-display/Alert/Alert.metrics.ts +2 -2
- package/src/components/form/Button/Button.md +4 -3
- package/src/components/form/Button/Button.native.loading.tsx +89 -0
- package/src/components/form/Button/Button.native.tsx +14 -24
- package/src/components/form/Button/Button.tsx +47 -16
- package/dist/chunk-364NH2NY.js.map +0 -1
- package/dist/chunk-IVI574Y5.js.map +0 -1
- package/dist/chunk-JNVUB2D4.js.map +0 -1
- package/dist/native/chunks/chunk-2MFMON74.js.map +0 -1
- /package/dist/{chunk-BF3SGOWT.js.map → chunk-2ONUSNPZ.js.map} +0 -0
- /package/dist/{chunk-ULK4AGG4.js.map → chunk-3EIRRLCQ.js.map} +0 -0
- /package/dist/{chunk-TVXUOJAL.js.map → chunk-4NG3LTRX.js.map} +0 -0
- /package/dist/{chunk-XZE5FIRB.js.map → chunk-5IIHAYFF.js.map} +0 -0
- /package/dist/{chunk-72L5C74V.js.map → chunk-5M7T36AT.js.map} +0 -0
- /package/dist/{chunk-J32XJALK.js.map → chunk-5WUXJDFP.js.map} +0 -0
- /package/dist/{chunk-3MQZBBUW.js.map → chunk-7FFY4LJY.js.map} +0 -0
- /package/dist/{chunk-ENXGWNCX.js.map → chunk-7LMR2H7O.js.map} +0 -0
- /package/dist/{chunk-H7QTDKA6.js.map → chunk-BGSUSSAV.js.map} +0 -0
- /package/dist/{chunk-FR2RJXHS.js.map → chunk-C2NNJMVY.js.map} +0 -0
- /package/dist/{chunk-NIZUFPV3.js.map → chunk-CW5Z67NA.js.map} +0 -0
- /package/dist/{chunk-BEHM2VLH.js.map → chunk-FVNY5BNV.js.map} +0 -0
- /package/dist/{chunk-X2SJJZFH.js.map → chunk-GG7IOJAG.js.map} +0 -0
- /package/dist/{chunk-J5QNJERV.js.map → chunk-HHFVDOA7.js.map} +0 -0
- /package/dist/{chunk-HVGQH54G.js.map → chunk-HMWSMRLM.js.map} +0 -0
- /package/dist/{chunk-MA6ENJDP.js.map → chunk-HXCUKZOB.js.map} +0 -0
- /package/dist/{chunk-CCJJTLF7.js.map → chunk-L5RS6QAT.js.map} +0 -0
- /package/dist/{chunk-ZSCKXOKE.js.map → chunk-NQCTANF3.js.map} +0 -0
- /package/dist/{chunk-NIENIKZ5.js.map → chunk-NRADSKGH.js.map} +0 -0
- /package/dist/{chunk-725H45MT.js.map → chunk-NZXRPWPW.js.map} +0 -0
- /package/dist/{chunk-LBEZ7A3F.js.map → chunk-OK3OJGJY.js.map} +0 -0
- /package/dist/{chunk-WJEJ65TF.js.map → chunk-OY437NRJ.js.map} +0 -0
- /package/dist/{chunk-QZX43FIC.js.map → chunk-QIP37Y2C.js.map} +0 -0
- /package/dist/{chunk-Y2CCXB7R.js.map → chunk-QITQFCFY.js.map} +0 -0
- /package/dist/{chunk-P4LR2GLN.js.map → chunk-R2ODLE6G.js.map} +0 -0
- /package/dist/{chunk-UFNXYOHZ.js.map → chunk-RCTHCXS6.js.map} +0 -0
- /package/dist/{chunk-VQSBZPKO.js.map → chunk-RVZMKGWQ.js.map} +0 -0
- /package/dist/{chunk-QWSYHENP.js.map → chunk-SKIAWOUC.js.map} +0 -0
- /package/dist/{chunk-3FDSXSEP.js.map → chunk-TDWA2XFJ.js.map} +0 -0
- /package/dist/{chunk-VWVA74JY.js.map → chunk-UXQVJXQ3.js.map} +0 -0
- /package/dist/{chunk-BEYLI32I.js.map → chunk-WOUJSKQB.js.map} +0 -0
- /package/dist/{chunk-NDQJDA7O.js.map → chunk-WULEQKU7.js.map} +0 -0
- /package/dist/{chunk-4QGPRORO.js.map → chunk-X2GWR75Q.js.map} +0 -0
- /package/dist/{chunk-NKBCUR4V.js.map → chunk-X3DN2BE3.js.map} +0 -0
- /package/dist/{chunk-B34WHRKH.js.map → chunk-XGKUXYAD.js.map} +0 -0
- /package/dist/{chunk-TRYYYWV3.js.map → chunk-Y2CHJLWD.js.map} +0 -0
- /package/dist/{chunk-QDG6V7OC.js.map → chunk-YNZUYZ2O.js.map} +0 -0
- /package/dist/{chunk-T2KONJ45.js.map → chunk-Z4ZFJ565.js.map} +0 -0
- /package/dist/{chunk-JA3WJPXH.js.map → chunk-ZAZOBTVS.js.map} +0 -0
- /package/dist/{chunk-SZSS5KKX.js.map → chunk-ZCXQ4ZB6.js.map} +0 -0
- /package/dist/{chunk-P7VAMJFJ.js.map → chunk-ZE4HF3KC.js.map} +0 -0
- /package/dist/native/chunks/{chunk-H22XVP5O.js.map → chunk-TZPNJ4AU.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/Alert/Alert.metrics.ts"],"sourcesContent":["import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon on the title's line (`iconPlacement: 'title'`): 10px from the title. */\nexport const TITLE_ICON = { gapUnits: 1.25 } as const;\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n angleDeg: 135,\n stopAlpha: 0.9,\n shimmerAlpha: 0.2,\n shimmerMs: 3000,\n shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient, and because it\n * paints above the background and below the content the ink keeps its own\n * contrast.\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so the ink keeps its\n * own contrast; and animatable, which `background-image` is not.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n main: string;\n light?: string;\n dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n switch (key) {\n case 'info':\n case 'success':\n case 'warning':\n case 'danger':\n case 'primary':\n case 'secondary':\n return theme.palette[key];\n case 'neutral':\n return {\n main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n };\n default:\n return theme.palette.info;\n }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n backgroundColor: string;\n color: string;\n borderColor?: string;\n iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n const dark = theme.mode === 'dark';\n return {\n backgroundColor: dark\n ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n iconColor: palette.main,\n };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n return {\n backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n color: theme.palette.text.primary,\n borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n iconColor: theme.palette.primary.main,\n };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n return {\n from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n const ink = contrastText(palette.main);\n return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n if (variant === 'glass') return glassSurface(theme);\n if (variant === 'gradient') return gradientSurface(palette);\n return semanticSurface(theme, palette);\n}\n"],"mappings":";;;;;;;;;;;;;AAkBO,IAAM,qBAAqB;AAC3B,IAAM,sBAAsB,EAAE,UAAU,MAAM,YAAY,EAAE;AAC5D,IAAM,sBAAsB;AAC5B,IAAM,eAAe;AAGrB,IAAM,UAAU,EAAE,IAAI,KAAK,OAAO,MAAM,MAAM,GAAG;AACjD,IAAM,YAAY,EAAE,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjD,IAAM,cAAc;AACpB,IAAM,iBAAiB;AAGvB,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;AAC1B,IAAM,sBAAsB;AAE5B,IAAM,iBAAiB,EAAE,gBAAgB,KAAK,aAAa,KAAK;AAGhE,IAAM,QAAQ,EAAE,UAAU,MAAM,YAAY,KAAK,WAAW,IAAI,mBAAmB,IAAI;AAEvF,IAAM,cAAc,EAAE,UAAU,MAAM,SAAS,IAAI;AAGnD,IAAM,aAAa,EAAE,UAAU,KAAK;AAEpC,IAAM,YAAY,EAAE,MAAM,IAAI,SAAS,KAAK,kBAAkB,MAAM,iBAAiB,MAAM,eAAe,EAAE;AAE5G,IAAM,cAAc,EAAE,kBAAkB,GAAG,YAAY,GAAG,aAAa,GAAG;AAE1E,IAAM,eAAe,EAAE,SAAS,GAAG,UAAU,IAAI,SAAS,KAAK,WAAW,IAAI;AAO9E,IAAM,mBAAmB,EAAE,MAAM,EAAE,OAAO,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK,aAAa,KAAK;AAExF,IAAM,QAAQ,EAAE,iBAAiB,MAAM,aAAa,KAAK,MAAM,IAAI,iBAAiB,IAAI;AAWxF,IAAM,WAAW;AAAA,EACtB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AACjB;AAGO,IAAM,OAAO,EAAE,MAAM,IAAI,QAAQ,GAAG,OAAO,KAAK,YAAY,KAAK;AACjE,IAAM,QAAQ,EAAE,OAAO,KAAK,IAAI,KAAM,QAAQ,GAAG;AAqBjD,IAAM,QAAQ,EAAE,WAAW,KAAK;AAiChC,IAAM,SAAS,EAAE,WAAW,KAAK,IAAI,IAAI;AAEzC,IAAM,QAAQ,EAAE,WAAW,GAAG,WAAW,GAAG,QAAQ,EAAE;AAGtD,IAAM,eAA8D,EAAE,MAAM,KAAK,OAAO,KAAK,MAAM,IAAI;AAGvG,IAAM,UAAU,CAAC,OAAuB,GAAG,KAAK,GAAI;AAcpD,SAAS,aAAa,OAAgB,KAAuC;AAClF,UAAQ,KAAK;AAAA,IACX,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,MAAM,QAAQ,GAAG;AAAA,IAC1B,KAAK;AACH,aAAO;AAAA,QACL,MAAM,aAAa,aAAa,IAAI;AAAA,QACpC,OAAO,aAAa,aAAa,KAAK;AAAA,QACtC,MAAM,aAAa,aAAa,IAAI;AAAA,MACtC;AAAA,IACF;AACE,aAAO,MAAM,QAAQ;AAAA,EACzB;AACF;AAUO,IAAM,oBAA+C,oBAAI,IAAI,CAAC,QAAQ,WAAW,WAAW,QAAQ,CAAC;AAGrG,SAAS,gBAAgB,OAAgB,SAAqC;AACnF,QAAM,OAAO,MAAM,SAAS;AAC5B,SAAO;AAAA,IACL,iBAAiB,OACb,OAAO,QAAQ,MAAM,iBAAiB,KAAK,IAAI,IAC/C,QAAQ,QAAQ,MAAM,iBAAiB,KAAK,KAAK;AAAA,IACrD,OAAO,OAAO,QAAQ,QAAQ,MAAM,iBAAiB,GAAG,IAAI,OAAO,QAAQ,MAAM,iBAAiB,GAAG;AAAA,IACrG,aAAa,MAAM,QAAQ,MAAM,iBAAiB,WAAW;AAAA,IAC7D,WAAW,QAAQ;AAAA,EACrB;AACF;AAEO,SAAS,aAAa,OAA8B;AACzD,SAAO;AAAA,IACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,MAAM,eAAe;AAAA,IAC5E,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,aAAa,MAAM,MAAM,QAAQ,SAAS,MAAM,WAAW;AAAA,IAC3D,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAGO,SAAS,cAAc,SAAqD;AACjF,SAAO;AAAA,IACL,MAAM,MAAM,QAAQ,SAAS,QAAQ,MAAM,SAAS,SAAS;AAAA,IAC7D,IAAI,MAAM,QAAQ,QAAQ,QAAQ,MAAM,SAAS,SAAS;AAAA,EAC5D;AACF;AAEO,SAAS,gBAAgB,SAAqC;AACnE,QAAM,MAAM,aAAa,QAAQ,IAAI;AACrC,SAAO,EAAE,iBAAiB,cAAc,OAAO,EAAE,MAAM,OAAO,KAAK,WAAW,IAAI;AACpF;AAGO,SAAS,aAAa,OAAgB,SAAuB,SAAqC;AACvG,MAAI,YAAY,QAAS,QAAO,aAAa,KAAK;AAClD,MAAI,YAAY,WAAY,QAAO,gBAAgB,OAAO;AAC1D,SAAO,gBAAgB,OAAO,OAAO;AACvC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/form/Button/Button.native.tsx","../../../src/components/form/Button/Button.helpers.ts","../../../src/components/form/Button/Button.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n ActivityIndicator,\n Animated,\n Easing,\n Platform,\n Pressable,\n StyleSheet,\n View,\n type GestureResponderEvent,\n type PressableStateCallbackType,\n type StyleProp,\n type TextStyle,\n type ViewStyle,\n} from 'react-native';\n\nimport { resolveButtonProps } from './Button.helpers';\nimport {\n BUTTON_FONT_WEIGHT,\n BUTTON_ICON_GAP_UNITS,\n BUTTON_LINE_HEIGHT,\n BUTTON_SIZES,\n BUTTON_SPINNER_SIZE,\n BUTTON_WASH_ALPHA,\n GLASS_BACKGROUND_ALPHA,\n GLASS_BACKGROUND_ALPHA_PRESSED,\n GLASS_BORDER_ALPHA,\n GLOW_INNER_ALPHA,\n GLOW_RADIUS,\n PULSE_ALPHA,\n PULSE_DURATION_MS,\n PULSE_SPREAD,\n buttonPalette,\n gradientStops,\n quietInk,\n} from './Button.metrics';\nimport type { ButtonProps, ButtonVariant } from './Button.types.native';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { resolveFieldEdge } from '../../../tokens/field-edge.core';\nimport { FIELD_BORDER_WIDTH, fieldHeightPx } from '../../../tokens/field-height.core';\nimport { alpha } from '../../../tokens/color';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/** MUI's `min-width` for a button that carries a label. */\nconst MIN_WIDTH = 64;\n\ninterface Paint {\n container: ViewStyle;\n pressed: ViewStyle;\n label: TextStyle;\n}\n\n/**\n * What the web's `VARIANT_STYLES` paint, as three React Native styles: at rest,\n * while pressed (the web's `:hover`, which touch has no equivalent of), and the\n * label. Same palette arithmetic, same alphas.\n *\n * `gradient` is the one honest gap: React Native core has no gradient fill, so\n * it paints the gradient's first stop. A host wanting the real thing adds a\n * gradient library; the parity ledger records this.\n */\n/** A coloured outline: its colour for the border and the label, washed when pressed. */\nfunction outlineOf(palette: UiPaletteColor, wash: string): Paint {\n return {\n container: { backgroundColor: 'transparent', borderWidth: FIELD_BORDER_WIDTH, borderColor: palette.main },\n pressed: { backgroundColor: wash, borderColor: palette.dark },\n label: { color: palette.main },\n };\n}\n\n/**\n * A neutral outline, as on the web: it rests on the one field border and\n * writes in the theme's text ink, a role that turns with the mode — grey 700\n * was dark on a dark ground.\n */\nfunction neutralOutline(theme: UiTheme): Paint {\n const ink = theme.palette.text.primary;\n return {\n container: {\n backgroundColor: 'transparent',\n borderWidth: FIELD_BORDER_WIDTH,\n borderColor: resolveFieldEdge(theme.palette.divider, theme.palette.background.paper),\n },\n pressed: { backgroundColor: alpha(ink, BUTTON_WASH_ALPHA), borderColor: theme.palette.text.secondary },\n label: { color: ink },\n };\n}\n\nfunction paintFor(\n theme: UiTheme,\n variant: ButtonVariant,\n color: ColorValue,\n palette: UiPaletteColor,\n active: boolean,\n): Paint {\n const wash = alpha(palette.main, BUTTON_WASH_ALPHA);\n switch (variant) {\n case 'outline':\n return color === 'neutral' ? neutralOutline(theme) : outlineOf(palette, wash);\n case 'ghost':\n return {\n container: { backgroundColor: 'transparent' },\n pressed: { backgroundColor: wash },\n label: { color: quietInk(theme, palette) },\n };\n case 'text':\n return {\n container: { backgroundColor: active ? wash : 'transparent' },\n pressed: { backgroundColor: wash },\n label: { color: quietInk(theme, palette) },\n };\n case 'glass':\n return {\n container: {\n backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA),\n borderWidth: 1,\n borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),\n },\n pressed: { backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_PRESSED) },\n label: { color: palette.main },\n };\n case 'gradient': {\n const [from, to] = gradientStops(theme, color, palette);\n return {\n container: { backgroundColor: from },\n pressed: { backgroundColor: to },\n label: { color: '#fff' },\n };\n }\n default:\n return {\n container: { backgroundColor: palette.main },\n pressed: { backgroundColor: palette.dark },\n label: { color: palette.contrastText || '#fff' },\n };\n }\n}\n\n/** MUI's disabled treatment per variant family, so a disabled button reads as one on both sides. */\nfunction disabledPaint(theme: UiTheme, variant: ButtonVariant): Paint {\n const filled = variant === 'solid' || variant === 'gradient' || variant === 'glass';\n return {\n container: filled\n ? { backgroundColor: theme.palette.action.disabledBackground, borderWidth: 0 }\n : variant === 'outline'\n ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: theme.palette.action.disabledBackground }\n : { backgroundColor: 'transparent' },\n pressed: {},\n label: { color: theme.palette.action.disabled },\n };\n}\n\nfunction sizeStyle(theme: UiTheme, size: SizeValue, iconOnly: boolean, hasIcon: boolean): ViewStyle {\n const metrics = BUTTON_SIZES[size];\n // The theme's field height for the size, as on the web: a button stands\n // level with the field beside it, and an icon-only one is that square.\n const height = fieldHeightPx(theme.fieldHeight, size);\n if (iconOnly) {\n return { padding: 0, minWidth: height, minHeight: height };\n }\n return {\n minHeight: height,\n paddingVertical: 0,\n paddingHorizontal: metrics.paddingHorizontal,\n minWidth: MIN_WIDTH,\n gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : undefined,\n };\n}\n\nfunction glowStyle(palette: UiPaletteColor): ViewStyle {\n return Platform.select<ViewStyle>({\n android: { elevation: 8 },\n default: {\n shadowColor: palette.main,\n shadowOpacity: GLOW_INNER_ALPHA,\n shadowRadius: GLOW_RADIUS,\n shadowOffset: { width: 0, height: 0 },\n },\n });\n}\n\n/** The web's `::after` pulse ring: a looped scale-and-fade behind the button. */\nfunction Pulse({ color, radius, testID }: { color: string; radius: number; testID: string }): React.JSX.Element {\n const progress = React.useRef(new Animated.Value(0)).current;\n\n React.useEffect(() => {\n const loop = Animated.loop(\n Animated.timing(progress, {\n toValue: 1,\n duration: PULSE_DURATION_MS,\n easing: Easing.out(Easing.ease),\n useNativeDriver: Platform.OS !== 'web',\n }),\n );\n loop.start();\n return () => loop.stop();\n }, [progress]);\n\n return (\n <Animated.View\n testID={testID}\n aria-hidden\n style={[\n StyleSheet.absoluteFill,\n {\n pointerEvents: 'none',\n borderRadius: radius,\n backgroundColor: color,\n opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE_ALPHA, 0, 0] }),\n transform: [\n { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1 + PULSE_SPREAD / 40, 1] }) },\n ],\n },\n ]}\n />\n );\n}\n\n\ntype ResolvedProps = ReturnType<typeof resolveButtonProps<ButtonProps>>;\n\ninterface ButtonLook {\n inactive: boolean;\n palette: UiPaletteColor;\n radius: number;\n label: TextStyle;\n container: (state: PressableStateCallbackType) => StyleProp<ViewStyle>;\n}\n\n/**\n * Everything the button paints, decided once per render from the resolved\n * props and the theme. Kept out of the component so the component reads as\n * structure — what renders where — and this reads as arithmetic.\n */\nfunction buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {\n const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;\n const palette = buttonPalette(theme, color);\n const iconOnly = !loading && icon != null && children == null;\n const inactive = Boolean(disabled) || loading;\n const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);\n // The theme's one field radius, so a button and the input beside it agree.\n const radius = theme.radius.field;\n const metrics = BUTTON_SIZES[size];\n // The web button is `overflow: hidden` (its ripple needs it) unless the pulse\n // ring turns it visible; on native the glow's shadow needs it visible too,\n // because a view's own shadow is clipped by its own overflow there.\n const overflow: ViewStyle['overflow'] = pulse || glow ? 'visible' : 'hidden';\n const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);\n const glowing = glow && !inactive ? glowStyle(palette) : null;\n\n return {\n inactive,\n palette,\n radius,\n label: {\n fontFamily: theme.typography.fontFamily,\n fontSize: metrics.fontSize,\n lineHeight: metrics.fontSize * BUTTON_LINE_HEIGHT,\n fontWeight: String(BUTTON_FONT_WEIGHT) as TextStyle['fontWeight'],\n textAlign: 'center',\n ...paint.label,\n },\n container: (state) => [\n styles.base,\n { borderRadius: radius, overflow },\n sized,\n paint.container,\n state.pressed && !inactive ? paint.pressed : null,\n glowing,\n style,\n ],\n };\n}\n\n/** The spinner that replaces the label while loading; `role` comes from react-native's ActivityIndicator. */\nfunction Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {\n return (\n <ActivityIndicator\n size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}\n color={color}\n testID={testID}\n accessibilityLabel=\"loading\"\n />\n );\n}\n\nexport const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {\n const resolved = resolveButtonProps(rawProps);\n const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;\n const theme = useUiTheme();\n const look = buttonLook(theme, resolved);\n\n // The shared stories pass `'data-testid'` as a plain prop; honour it here and\n // keep all three spellings off the element (react-native-web would drop them).\n const testId = resolveTestId(others, 'button');\n const idFor = (suffix: string) => childTestId(others, suffix, 'button');\n const rest = withoutTestIdProps(others);\n // `buttonLook` consumed these; they are not Pressable props.\n const { variant: _v, color: _c, size: _s, glow: _g, active: _a, disabled: _d, style: _st, ...pressable } = rest;\n\n const handlePress = (event: GestureResponderEvent): void => {\n onClick?.(event);\n onPress?.(event);\n };\n\n const iconNode =\n !loading && icon ? (\n <View style={styles.icon} testID={idFor('icon')}>\n {icon}\n </View>\n ) : null;\n\n return (\n <Pressable\n ref={ref}\n role=\"button\"\n aria-disabled={look.inactive}\n aria-busy={loading}\n disabled={look.inactive}\n onPress={handlePress}\n android_ripple={ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : undefined}\n style={look.container}\n testID={testId}\n {...pressable}\n >\n {pulse && !look.inactive ? <Pulse color={look.palette.main} radius={look.radius} testID={idFor('pulse')} /> : null}\n {iconPosition === 'left' ? iconNode : null}\n {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : renderTextChildren(children, look.label, 1)}\n {iconPosition === 'right' ? iconNode : null}\n </Pressable>\n );\n});\n\nButton.displayName = 'Button';\n\nconst styles = StyleSheet.create({\n base: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n position: 'relative',\n },\n icon: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n","import type { ButtonBaseProps } from './Button.base';\n\ntype ButtonDefaultedKeys =\n | 'variant'\n | 'color'\n | 'size'\n | 'loading'\n | 'iconPosition'\n | 'glow'\n | 'pulse'\n | 'ripple'\n | 'active';\n\n/**\n * Generic over the renderer's own props: the web and the native `Button` pass\n * different handler types through, and both come back out untouched.\n */\ntype ResolvedButtonProps<P extends ButtonBaseProps> = P &\n Required<Pick<ButtonBaseProps, ButtonDefaultedKeys>>;\n\nconst BUTTON_DEFAULTS: Required<Pick<ButtonBaseProps, ButtonDefaultedKeys>> = {\n variant: 'solid',\n color: 'primary',\n size: 'md',\n loading: false,\n iconPosition: 'left',\n glow: false,\n pulse: false,\n ripple: true,\n active: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends ButtonBaseProps>(props: P): Partial<P> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<P>;\n\nexport const resolveButtonProps = <P extends ButtonBaseProps>(props: P): ResolvedButtonProps<P> =>\n ({ ...BUTTON_DEFAULTS, ...definedProps(props) }) as ResolvedButtonProps<P>;\n","import { darken, lighten } from '../../../tokens/color';\nimport { ABSOLUTE_INK, NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Button` RENDERERS DRAW WITH.\n *\n * `Button.styles.ts` (web, emotion) and `Button.native.tsx` (React Native)\n * read this one table. The web turns the px into rem and the padding into a\n * shorthand string; native uses the numbers as they are. Neither restates a\n * value, which is what keeps a native `md` button 16px tall of padding and\n * 16px of type exactly like the web one.\n */\nexport interface ButtonSizeMetrics {\n paddingVertical: number;\n paddingHorizontal: number;\n fontSize: number;\n}\n\nexport const BUTTON_SIZES: Record<SizeValue, ButtonSizeMetrics> = {\n xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },\n sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },\n md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },\n lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },\n xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 },\n};\n\n/** A button that is only an icon is square: uniform padding, no min-width. */\nexport const ICON_ONLY_PADDING: Record<SizeValue, number> = {\n xs: 2,\n sm: 5,\n md: 7,\n lg: 9,\n xl: 11,\n};\n\n/**\n * The start/end icon slot's font-size, in px — MUI's `medium` value, pinned\n * (12-74).\n *\n * MUI sizes that slot off its OWN `size` prop, writing 18/20/22 onto the first\n * child of `.MuiButton-startIcon`. We never passed a `size`, so every button in\n * every size has always drawn medium's 20px; now that `size` IS forwarded — so\n * the rendered class finally names the size the button actually is — the number\n * would start moving with it.\n *\n * WHAT THAT ACTUALLY REACHES, measured in a browser rather than assumed: this\n * Button renders its own wrapper span around the icon (it carries the child\n * test id), so MUI's rule lands on the WRAPPER and reaches the glyph only when\n * the glyph takes its size by inheritance — `fontSize=\"inherit\"`, an em-sized\n * SVG, a text or emoji glyph. With the pin removed, such a glyph measured 18px\n * at `xs`/`sm` and 22px at `lg`/`xl` against the 20px it has always been. An\n * icon carrying an absolute size of its own does not move at all: a default\n * `SvgIcon` stayed 24×24 across all five.\n *\n * A silent resize of the inherited case is still a design decision arriving as\n * a side effect of a class-name fix, so it is pinned to what shipped before —\n * `Button.tsx` puts it on that same wrapper. Scaling the glyph with the button\n * is a ticket of its own.\n */\nexport const BUTTON_ICON_GLYPH_SIZE = 20;\n\nexport const BUTTON_FONT_WEIGHT = 500;\n/** Between the icon and the label: `theme.spacing(0.5)`. */\nexport const BUTTON_ICON_GAP_UNITS = 0.5;\nexport const BUTTON_SPINNER_SIZE = 16;\n/** MUI's `line-height` for button text. */\nexport const BUTTON_LINE_HEIGHT = 1.75;\n\n/** The wash behind an outline, ghost or text button while it is hovered or pressed. */\nexport const BUTTON_WASH_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLOW_INNER_ALPHA = 0.6;\nexport const GLOW_OUTER_ALPHA = 0.3;\nexport const GLOW_RADIUS = 20;\nexport const PULSE_ALPHA = 0.3;\nexport const PULSE_DURATION_MS = 2000;\nexport const PULSE_SPREAD = 15;\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Button.styles.ts` has\n * always drawn it from three greys. Same three greys here.\n */\nexport function buttonPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n if (color === 'neutral') {\n return {\n main: NEUTRAL_RAMP[700],\n dark: NEUTRAL_RAMP[800],\n light: NEUTRAL_RAMP[500],\n contrastText: ABSOLUTE_INK.white,\n };\n }\n return theme.palette[color];\n}\n\n/**\n * The label colour for `ghost` and `text`: one step darker than `main` in\n * light mode (lighter in dark), because `main` is chosen to sit UNDER white and\n * is not legible AS text on a tinted surface. See the web `quietInk`.\n */\nexport const quietInk = (theme: UiTheme, palette: UiPaletteColor): string =>\n theme.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\n/** Gradients run between two related hues; the named colours pick a specific pair. */\nexport function gradientStops(\n theme: UiTheme,\n color: ColorValue,\n palette: UiPaletteColor,\n): [string, string] {\n switch (color) {\n case 'primary':\n return [theme.palette.primary.main, theme.palette.secondary.main];\n case 'secondary':\n return [theme.palette.secondary.main, theme.palette.primary.main];\n case 'success':\n case 'warning':\n return [theme.palette[color].light, theme.palette[color].dark];\n case 'danger':\n return [theme.palette.danger.light, theme.palette.danger.dark];\n default:\n return [palette.main, palette.dark];\n }\n}\n"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|