@sanity/ui 4.0.7 → 4.1.1
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/{arrow-CL8xmdbg.js → arrow-DKn5YKdy.js} +6 -5
- package/dist/arrow-DKn5YKdy.js.map +1 -0
- package/dist/autocomplete.d.ts +2 -2
- package/dist/autocomplete.d.ts.map +1 -1
- package/dist/autocomplete.js +37 -41
- package/dist/autocomplete.js.map +1 -1
- package/dist/breadcrumbs.d.ts +2 -2
- package/dist/breadcrumbs.d.ts.map +1 -1
- package/dist/breadcrumbs.js +30 -32
- package/dist/breadcrumbs.js.map +1 -1
- package/dist/{button-DQH2KIbq.js → button-Dh_M2fYx.js} +10 -10
- package/dist/button-Dh_M2fYx.js.map +1 -0
- package/dist/button-dnqMFkWg.d.ts.map +1 -1
- package/dist/code.d.ts +2 -2
- package/dist/code.d.ts.map +1 -1
- package/dist/{factory-BA3gEfyI.js → factory-BzXTX8_Q.js} +2 -2
- package/dist/{factory-BA3gEfyI.js.map → factory-BzXTX8_Q.js.map} +1 -1
- package/dist/{flex-CySCBzQm.js → flex-DmbDG2ks.js} +2 -2
- package/dist/{flex-CySCBzQm.js.map → flex-DmbDG2ks.js.map} +1 -1
- package/dist/{getElementRef-5HZQ-Owu.js → getElementRef-Jw7gY0eV.js} +13 -2
- package/dist/getElementRef-Jw7gY0eV.js.map +1 -0
- package/dist/{grid-I2TNptX-.js → grid-6JSgMj1O.js} +2 -2
- package/dist/{grid-I2TNptX-.js.map → grid-6JSgMj1O.js.map} +1 -1
- package/dist/{hotkeys-BPlacpG8.js → hotkeys-uSArGPzR.js} +28 -28
- package/dist/hotkeys-uSArGPzR.js.map +1 -0
- package/dist/index.d.ts +156 -156
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +317 -351
- package/dist/index.js.map +1 -1
- package/dist/layer-BfwisMR6.js +61 -0
- package/dist/layer-BfwisMR6.js.map +1 -0
- package/dist/layer-ChlP9Ik6.d.ts.map +1 -1
- package/dist/menu.d.ts +6 -6
- package/dist/menu.d.ts.map +1 -1
- package/dist/menu.js +50 -38
- package/dist/menu.js.map +1 -1
- package/dist/{popover-CEbjxiPx.js → popover-myCXZV_F.js} +34 -33
- package/dist/popover-myCXZV_F.js.map +1 -0
- package/dist/popover.js +1 -1
- package/dist/{stack-BGFEokua.js → stack-rsNFPq2-.js} +2 -2
- package/dist/{stack-BGFEokua.js.map → stack-rsNFPq2-.js.map} +1 -1
- package/dist/styles.css +408 -0
- package/dist/{textInput-B6ZZJSOj.js → textInput-DAaORuky.js} +38 -50
- package/dist/textInput-DAaORuky.js.map +1 -0
- package/dist/theme.d.ts +33 -33
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +1 -1
- package/dist/toast.d.ts +4 -4
- package/dist/toast.d.ts.map +1 -1
- package/dist/toast.js +80 -76
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.d.ts +5 -5
- package/dist/tooltip.d.ts.map +1 -1
- package/dist/tooltip.js +97 -99
- package/dist/tooltip.js.map +1 -1
- package/dist/{useLayer-jUJIz8mh.js → useLayer-D1usxIE0.js} +2 -2
- package/dist/{useLayer-jUJIz8mh.js.map → useLayer-D1usxIE0.js.map} +1 -1
- package/package.json +10 -9
- package/dist/arrow-CL8xmdbg.js.map +0 -1
- package/dist/button-DQH2KIbq.js.map +0 -1
- package/dist/getElementRef-5HZQ-Owu.js.map +0 -1
- package/dist/hotkeys-BPlacpG8.js.map +0 -1
- package/dist/layer-DGn7KJIB.js +0 -61
- package/dist/layer-DGn7KJIB.js.map +0 -1
- package/dist/popover-CEbjxiPx.js.map +0 -1
- package/dist/textInput-B6ZZJSOj.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { a as rem, i as _responsive, n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
|
-
import { x as flexItemStyle, y as Box } from "./useLayer-
|
|
3
|
+
import { x as flexItemStyle, y as Box } from "./useLayer-D1usxIE0.js";
|
|
4
4
|
import { c } from "react/compiler-runtime";
|
|
5
5
|
import { styled } from "styled-components";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -73,4 +73,4 @@ function FlexComponent(props) {
|
|
|
73
73
|
const Flex = FlexComponent;
|
|
74
74
|
export { Flex as t };
|
|
75
75
|
|
|
76
|
-
//# sourceMappingURL=flex-
|
|
76
|
+
//# sourceMappingURL=flex-DmbDG2ks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex-
|
|
1
|
+
{"version":3,"file":"flex-DmbDG2ks.js","names":["direction = 'row'","_getArrayProp(align)","_getArrayProp(direction)","_getArrayProp(gap)","_getArrayProp(justify)","_getArrayProp(wrap)","<StyledFlex\n data-ui=\"Flex\"\n {...restProps}\n $align={_getArrayProp(align)}\n $direction={_getArrayProp(direction)}\n $gap={_getArrayProp(gap)}\n $justify={_getArrayProp(justify)}\n $wrap={_getArrayProp(wrap)}\n forwardedAs={as}\n ref={ref}\n />"],"sources":["../src/core/styles/flex/flexStyle.ts","../src/core/primitives/flex/flex.tsx"],"sourcesContent":["import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveFlexStyleProps} from './types'\n\nconst BASE_STYLE: CSSObject = {\n '&&:not([hidden])': {\n display: 'flex',\n },\n}\n\nexport function responsiveFlexStyle(): Array<\n CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])\n> {\n return [\n BASE_STYLE,\n responsiveFlexAlignStyle,\n responsiveFlexGapStyle,\n responsiveFlexWrapStyle,\n responsiveFlexJustifyStyle,\n responsiveFlexDirectionStyle,\n ]\n}\n\nfunction responsiveFlexAlignStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$align, (align) => {\n return {alignItems: align}\n })\n}\n\nfunction responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$gap, (gap) => ({\n gap: gap ? rem(space[gap]) : undefined,\n }))\n}\n\nfunction responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$wrap, (wrap) => {\n return {flexWrap: wrap}\n })\n}\n\nfunction responsiveFlexJustifyStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$justify, (justify) => {\n return {justifyContent: justify}\n })\n}\n\nfunction responsiveFlexDirectionStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$direction, (direction) => {\n return {flexDirection: direction}\n })\n}\n","import {styled} from 'styled-components'\n\nimport {flexItemStyle} from '../../styles/flex/flexItemStyle'\nimport {responsiveFlexStyle} from '../../styles/flex/flexStyle'\nimport {FlexItemStyleProps, ResponsiveFlexStyleProps} from '../../styles/flex/types'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'\n\n/**\n * @public\n */\nexport interface FlexOwnProps\n extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {\n gap?: number | number[]\n}\n\n/**\n * @public\n */\nexport type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>\n\nconst StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(\n flexItemStyle,\n responsiveFlexStyle,\n)\n\nfunction FlexComponent(\n props: FlexOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,\n) {\n const {align, as, direction = 'row', gap, justify, ref, wrap, ...restProps} = props\n\n return (\n <StyledFlex\n data-ui=\"Flex\"\n {...restProps}\n $align={_getArrayProp(align)}\n $direction={_getArrayProp(direction)}\n $gap={_getArrayProp(gap)}\n $justify={_getArrayProp(justify)}\n $wrap={_getArrayProp(wrap)}\n forwardedAs={as}\n ref={ref}\n />\n )\n}\n\n/**\n * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Flex = FlexComponent as unknown as <E extends ElementType = 'div'>(\n props: FlexProps<E>,\n) => React.JSX.Element\n"],"mappings":";;;;;;AAMA,MAAM,aAAwB,EAC5B,oBAAoB,EAClB,SAAS,OACX,EACF;AAEA,SAAgB,sBAEd;CACA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAEA,SAAS,yBAAyB,OAA2D;CAC3F,IAAM,EAAC,UAAS,YAAY,MAAM,KAAK;CAEvC,OAAO,YAAY,OAAO,MAAM,SAAS,WAChC,EAAC,YAAY,MAAK,EAC1B;AACH;AAEA,SAAS,uBAAuB,OAA8C;CAC5E,IAAM,EAAC,OAAO,UAAS,YAAY,MAAM,KAAK;CAE9C,OAAO,YAAY,OAAO,MAAM,OAAO,SAAS,EAC9C,KAAK,MAAM,IAAI,MAAM,IAAI,IAAI,KAAA,EAC/B,EAAE;AACJ;AAEA,SAAS,wBAAwB,OAA2D;CAC1F,IAAM,EAAC,UAAS,YAAY,MAAM,KAAK;CAEvC,OAAO,YAAY,OAAO,MAAM,QAAQ,UAC/B,EAAC,UAAU,KAAI,EACvB;AACH;AAEA,SAAS,2BAA2B,OAA2D;CAC7F,IAAM,EAAC,UAAS,YAAY,MAAM,KAAK;CAEvC,OAAO,YAAY,OAAO,MAAM,WAAW,aAClC,EAAC,gBAAgB,QAAO,EAChC;AACH;AAEA,SAAS,6BAA6B,OAA2D;CAC/F,IAAM,EAAC,UAAS,YAAY,MAAM,KAAK;CAEvC,OAAO,YAAY,OAAO,MAAM,aAAa,eACpC,EAAC,eAAe,UAAS,EACjC;AACH;ACxCA,MAAM,aAAa,uBAAO,GAAG,CAAC,CAAA,WAAA;;;AAC5B,CAAA,CAAA,CAAA,eACA,mBACF;AAEA,SAAS,cACP,OACA;gBACO,OAAO,IAAuB,KAAK,SAAS,KAAc,WAA/CA,IAAsC;CAAsB,AAAA,EAAA,OAAA,uHAAxE,CAAC,OAAO,IAAI,WAAA,IAAmB,KAAK,SAAS,KAAK,MAAM,GAAA,aAAgB;CAA5D,IAAA,YAAA,OAAA,KAAA,IAAY,QAAZA,IAMNC;CAAc,AAAA,EAAA,OAAA,sBAAd,KAAA,cAAc,KAAK,GAAL,EAAA,KAAA;CACVC,IAAAA;CAAc,AAAA,EAAA,QAAA,0BAAd,KAAA,cAAc,SAAS,GAAT,EAAA,MAAA;CACpBC,IAAAA;CAAc,AAAA,EAAA,QAAA,oBAAd,KAAA,cAAc,GAAG,GAAH,EAAA,MAAA;CACVC,IAAAA;CAAc,AAAA,EAAA,QAAA,wBAAd,KAAA,cAAc,OAAO,GAAP,EAAA,MAAA;CACjBC,IAAAA;CAAc,AAAA,EAAA,QAAA,qBAAd,KAAA,cAAc,IAAI,GAAJ,EAAA,MAAA;CAPvBC,IAAAA;CADF,OASiB,EAAA,QAAA,MAAA,EAAA,QACR,OAAA,EAAA,QAPD,aAAA,EAAA,QACIL,MAAAA,EAAAA,QACIC,MAAAA,EAAAA,QACNC,MAAAA,EAAAA,QACIC,MAAAA,EAAAA,QACHC,MAPT,KAAA,oBAAC,YAAD;EACE,WAAQ;EACR,GAAI;EACJ,QAAQJ;EACR,YAAYC;EACZ,MAAMC;EACN,UAAUC;EACV,OAAOC;EACP,aAAa;EACR;CACN,CAAA,GAFc,EAAA,MAAA,IACR,EAAA,MAAA,KAPD,EAAA,MAAA,WACIJ,EAAAA,MAAAA,IACIC,EAAAA,MAAAA,IACNC,EAAAA,MAAAA,IACIC,EAAAA,MAAAA,IACHC,EAAAA,MAAAA,8BAPTC;AAYJ;;;;;;AAQA,MAAa,OAAO"}
|
|
@@ -29,6 +29,17 @@ const origin = {
|
|
|
29
29
|
} };
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Converts the `origin` middleware data into a plain `transform-origin` CSS value.
|
|
34
|
+
*
|
|
35
|
+
* The value is intentionally applied as a regular CSS property rather than motion's
|
|
36
|
+
* `originX`/`originY` style keys: motion turns those into motion values that it resets to
|
|
37
|
+
* their initial (unpositioned, `undefined`) state whenever the element re-mounts, which is
|
|
38
|
+
* what happens every time an `Activity`-hidden popover or tooltip is shown again.
|
|
39
|
+
*/
|
|
40
|
+
function getTransformOrigin(originX, originY) {
|
|
41
|
+
if (originX !== void 0 && originY !== void 0) return `${originX * 100}% ${originY * 100}%`;
|
|
42
|
+
}
|
|
32
43
|
function clamp(num, min, max) {
|
|
33
44
|
return Math.min(Math.max(num, min), max);
|
|
34
45
|
}
|
|
@@ -86,6 +97,6 @@ function getElementRef(element) {
|
|
|
86
97
|
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
87
98
|
return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
|
|
88
99
|
}
|
|
89
|
-
export { AnimateActivity as n,
|
|
100
|
+
export { origin as i, AnimateActivity as n, getTransformOrigin as r, getElementRef as t };
|
|
90
101
|
|
|
91
|
-
//# sourceMappingURL=getElementRef-
|
|
102
|
+
//# sourceMappingURL=getElementRef-Jw7gY0eV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getElementRef-Jw7gY0eV.js","names":["{mode: modeFromProps, layoutMode, children}: AnimateActivityProps","() => setMode('hidden')","<PresenceChild\n isPresent={isPresent}\n onExitComplete={!isPresent ? onExitComplete : undefined}\n presenceAffectsLayout={false}\n mode={layoutMode === 'pop' ? 'popLayout' : 'sync'}\n >\n {/* oxlint-disable-next-line no-unsafe-type-assertion -- PresenceChild expects a single ReactElement */}\n {children as any}\n </PresenceChild>","!isPresent ? onExitComplete : undefined","layoutMode === 'pop' ? 'popLayout' : 'sync'","children as any","<Activity mode={mode}>\n <PresenceChild\n isPresent={isPresent}\n onExitComplete={!isPresent ? onExitComplete : undefined}\n presenceAffectsLayout={false}\n mode={layoutMode === 'pop' ? 'popLayout' : 'sync'}\n >\n {/* oxlint-disable-next-line no-unsafe-type-assertion -- PresenceChild expects a single ReactElement */}\n {children as any}\n </PresenceChild>\n </Activity>"],"sources":["../src/core/middleware/origin.ts","../src/core/utils/animateActivity.tsx","../src/core/utils/getElementRef.ts"],"sourcesContent":["import {Middleware} from '@floating-ui/react-dom'\n\n/**\n * Custom floating-ui middleware which calculates transform-origin X + Y offsets\n * based on the current floating rect's dimensions and shift offset.\n *\n * Scaling popovers with these transform-origin offsets will give the effect of\n * popvers slightly 'growing' from the origin/reference element.\n *\n * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.\n */\nexport const origin: Middleware = {\n name: '@sanity/ui/origin',\n fn({middlewareData, placement, rects}) {\n const [side] = placement.split('-')\n\n const floatingWidth = rects.floating.width\n const floatingHeight = rects.floating.height\n\n const shiftX = middlewareData.shift?.x || 0\n const shiftY = middlewareData.shift?.y || 0\n\n if (floatingWidth <= 0 || floatingHeight <= 0) {\n return {}\n }\n\n const isVerticalPlacement = ['bottom', 'top'].includes(side)\n\n const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement\n ? {\n originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),\n originY: side === 'bottom' ? 0 : 1,\n }\n : {\n originX: side === 'left' ? 1 : 0,\n originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),\n }\n\n return {\n data: {originX, originY},\n }\n },\n}\n\n/**\n * Converts the `origin` middleware data into a plain `transform-origin` CSS value.\n *\n * The value is intentionally applied as a regular CSS property rather than motion's\n * `originX`/`originY` style keys: motion turns those into motion values that it resets to\n * their initial (unpositioned, `undefined`) state whenever the element re-mounts, which is\n * what happens every time an `Activity`-hidden popover or tooltip is shown again.\n */\nexport function getTransformOrigin(originX?: number, originY?: number): string | undefined {\n if (originX === undefined || originY === undefined) return undefined\n\n return `${originX * 100}% ${originY * 100}%`\n}\n\nfunction clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max)\n}\n","/**\n * MIT License\n *\n * Copyright (c) 2024 Motion One\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport {invariant, PresenceChild} from 'motion/react'\nimport {Activity, useState} from 'react'\n\ninterface AnimateActivityProps {\n mode: 'visible' | 'hidden'\n layoutMode: 'default' | 'pop'\n children: React.ReactNode\n}\n\n/**\n * Animated version of React's `Activity` that defers `mode=\"hidden\"` until\n * child exit animations have finished.\n *\n * @internal\n */\nexport function AnimateActivity({mode: modeFromProps, layoutMode, children}: AnimateActivityProps) {\n /**\n * This is the mode that we'll render.\n */\n const [mode, setMode] = useState(modeFromProps)\n\n /**\n * This is the goal state as defined by props.\n */\n const isPresent = modeFromProps === 'visible'\n\n /**\n * Immediately switch to mode=\"visible\" when the user\n * changes the mode prop.\n */\n if (isPresent && mode !== 'visible') {\n setMode('visible')\n return null\n }\n\n /**\n * Set mode to \"hidden\" only when the exit animation is complete.\n */\n const onExitComplete = () => setMode('hidden')\n\n invariant(Boolean(Activity), 'Activity component not found - upgrade to React 19.2.0 or higher')\n\n return (\n <Activity mode={mode}>\n <PresenceChild\n isPresent={isPresent}\n onExitComplete={!isPresent ? onExitComplete : undefined}\n presenceAffectsLayout={false}\n mode={layoutMode === 'pop' ? 'popLayout' : 'sync'}\n >\n {/* oxlint-disable-next-line no-unsafe-type-assertion -- PresenceChild expects a single ReactElement */}\n {children as any}\n </PresenceChild>\n </Activity>\n )\n}\n","// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nexport function getElementRef(element: React.ReactElement) {\n // React <=18 in DEV\n // oxlint-disable-next-line unbound-method\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n\n if (mayWarn) {\n // oxlint-disable-next-line no-unsafe-type-assertion\n return (element as any).ref\n }\n\n // React 19 in DEV\n // oxlint-disable-next-line unbound-method\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n\n if (mayWarn) {\n // oxlint-disable-next-line no-unsafe-type-assertion\n return (element.props as {ref?: React.Ref<unknown>}).ref\n }\n\n // Not DEV\n // oxlint-disable-next-line no-unsafe-type-assertion\n return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref\n}\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,SAAqB;CAChC,MAAM;CACN,GAAG,EAAC,gBAAgB,WAAW,SAAQ;EACrC,IAAM,CAAC,QAAQ,UAAU,MAAM,GAAG,GAE5B,gBAAgB,MAAM,SAAS,OAC/B,iBAAiB,MAAM,SAAS,QAEhC,SAAS,eAAe,OAAO,KAAK,GACpC,SAAS,eAAe,OAAO,KAAK;EAE1C,IAAI,iBAAiB,KAAK,kBAAkB,GAC1C,OAAO,CAAC;EAKV,IAAM,EAAC,SAAS,YAFY,CAAC,UAAU,KAAK,CAAC,CAAC,SAAS,IAEQ,IAC3D;GACE,SAAS,MAAM,KAAM,SAAS,eAAe,GAAG,CAAC;GACjD,SAAS,SAAS,WAAW,IAAI;EACnC,IACA;GACE,SAAS,WAAS;GAClB,SAAS,MAAM,KAAM,SAAS,gBAAgB,GAAG,CAAC;EACpD;EAEJ,OAAO,EACL,MAAM;GAAC;GAAS;EAAO,EACzB;CACF;AACF;;;;;;;;;AAUA,SAAgB,mBAAmB,SAAkB,SAAsC;CACrF,gBAAY,KAAA,KAAa,YAAY,KAAA,GAEzC,OAAO,GAAG,UAAU,IAAI,IAAI,UAAU,IAAI;AAC5C;AAEA,SAAS,MAAM,KAAa,KAAa,KAAa;CACpD,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBA,SAAgB,gBAAA,IAAmF;eAAnE,EAAC,MAAM,eAAe,YAAY,aAAlCA,IAIxB,CAAC,MAAM,WAAW,SAAS,aAAa,GAKxC,YAAY,kBAAkB;CAMpC,IAAI,aAAa,SAAS,WAExB,OADA,QAAQ,SAAS,GACV;CAMcC,IAAAA;qDAAM,WAAA,QAAQ,QAAQ;CAA7C,IAAM,iBAAiBA;CAEvB,UAAU,EAAQ,UAAW,kEAAkE;CAMzE,IAAA,KAAC,YAA6B,KAAA,IAAjB,gBAEvB,KAAA,eAAe,QAAQ,cAAc,QAG1C,KAAA,UAPHC;CACa,AAAA,EAAA,OAAA,aAAA,EAAA,OACKC,MAAAA,EAAAA,OAEVC,MAAAA,EAAAA,OAGLC,MAPH,KAAA,oBAAC,eAAD;EACa;EACX,gBAAgBF;EAChB,uBAAuB;EACvB,MAAMC;EAGLC,UAAAA;CACY,CAAA,GAPF,EAAA,KAAA,WACKF,EAAAA,KAAAA,IAEVC,EAAAA,KAAAA,IAGLC,EAAAA,KAAAA;CARLC,IAAAA;CADF,OACkB,EAAA,OAAA,QAAA,EAAA,OACdJ,MADF,KAAA,oBAAC,UAAD;EAAgB;EACdA,UAAAA;CASQ,CAAA,GAVM,EAAA,KAAA,MACdA,EAAAA,KAAAA,4BADFI;AAYJ;ACzEA,SAAgB,cAAc,SAA6B;CAGzD,IAAI,SAAS,OAAO,yBAAyB,QAAQ,OAAO,KAAK,CAAC,EAAE,KAChE,UAAU,UAAU,oBAAoB,UAAU,OAAO;CAmB7D,OAjBI,UAEM,QAAgB,OAK1B,SAAS,OAAO,yBAAyB,SAAS,KAAK,CAAC,EAAE,KAC1D,UAAU,UAAU,oBAAoB,UAAU,OAAO,gBAErD,UAEM,QAAQ,MAAqC,MAK/C,QAAQ,MAAqC,OAAQ,QAAgB;AAC/E"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { a as rem, i as _responsive, n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
|
-
import { y as Box } from "./useLayer-
|
|
3
|
+
import { y as Box } from "./useLayer-D1usxIE0.js";
|
|
4
4
|
import { c } from "react/compiler-runtime";
|
|
5
5
|
import { styled } from "styled-components";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -112,4 +112,4 @@ function GridComponent(props) {
|
|
|
112
112
|
const Grid = GridComponent;
|
|
113
113
|
export { Grid as t };
|
|
114
114
|
|
|
115
|
-
//# sourceMappingURL=grid-
|
|
115
|
+
//# sourceMappingURL=grid-6JSgMj1O.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-
|
|
1
|
+
{"version":3,"file":"grid-6JSgMj1O.js","names":["_getArrayProp(autoRows)","_getArrayProp(autoCols)","_getArrayProp(autoFlow)","_getArrayProp(gridTemplateColumns)","_getArrayProp(gap)","_getArrayProp(gapX)","_getArrayProp(gapY)","_getArrayProp(gridTemplateRows)","<StyledGrid\n data-as={typeof as === 'string' ? as : undefined}\n data-ui=\"Grid\"\n {...restProps}\n $autoRows={_getArrayProp(autoRows)}\n $autoCols={_getArrayProp(autoCols)}\n $autoFlow={_getArrayProp(autoFlow)}\n $columns={_getArrayProp(gridTemplateColumns)}\n $gap={_getArrayProp(gap)}\n $gapX={_getArrayProp(gapX)}\n $gapY={_getArrayProp(gapY)}\n $rows={_getArrayProp(gridTemplateRows)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledGrid>","typeof as === 'string' ? as : undefined"],"sources":["../src/core/styles/grid/gridStyle.ts","../src/core/primitives/grid/grid.tsx"],"sourcesContent":["import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\nimport {ResponsiveGridStyleProps} from './types'\n\nconst GRID_CSS = {\n '&&:not([hidden])': {\n display: 'grid',\n },\n '&[data-as=\"ul\"],&[data-as=\"ol\"]': {\n listStyle: 'none',\n },\n}\n\nconst GRID_AUTO_COLUMS = {\n auto: 'auto',\n min: 'min-content',\n max: 'max-content',\n fr: 'minmax(0, 1fr)',\n}\n\nconst GRID_AUTO_ROWS = {\n auto: 'auto',\n min: 'min-content',\n max: 'max-content',\n fr: 'minmax(0, 1fr)',\n}\n\nexport function responsiveGridStyle(): Array<\n CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])\n> {\n return [\n GRID_CSS,\n responsiveGridAutoFlowStyle,\n responsiveGridAutoRowsStyle,\n responsiveGridAutoColsStyle,\n responsiveGridColumnsStyle,\n responsiveGridRowsStyle,\n responsiveGridGapStyle,\n responsiveGridGapXStyle,\n responsiveGridGapYStyle,\n ]\n}\n\nfunction responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$autoFlow, (autoFlow) => ({\n gridAutoFlow: autoFlow,\n }))\n}\n\nfunction responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$autoRows, (autoRows) => ({\n gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],\n }))\n}\n\nfunction responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$autoCols, (autoCols) => ({\n gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],\n }))\n}\n\nfunction responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$columns, (columns) => ({\n gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,\n }))\n}\n\nfunction responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$rows, (rows) => ({\n gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,\n }))\n}\n\nfunction responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$gap, (gap) => ({\n // oxlint-disable-next-line no-deprecated\n gridGap: gap ? rem(space[gap]) : undefined,\n }))\n}\n\nfunction responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$gapX, (gapX) => ({\n columnGap: gapX ? rem(space[gapX]) : undefined,\n }))\n}\n\nfunction responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$gapY, (gapY) => ({\n rowGap: gapY ? rem(space[gapY]) : undefined,\n }))\n}\n","import {styled} from 'styled-components'\n\nimport {responsiveGridStyle} from '../../styles/grid/gridStyle'\nimport {ResponsiveGridStyleProps} from '../../styles/grid/types'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {ResponsiveGridProps} from '../types'\n\n/**\n * @public\n */\nexport interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}\n\n/**\n * @public\n */\nexport type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>\n\nconst StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)\n\nfunction GridComponent(\n props: GridOwnProps & {as?: ElementType} & Omit<\n React.HTMLProps<HTMLDivElement>,\n 'as' | 'height' | 'rows'\n >,\n) {\n const {\n as,\n autoRows,\n autoCols,\n autoFlow,\n gridTemplateColumns,\n gap,\n gapX,\n gapY,\n gridTemplateRows,\n children,\n ref,\n ...restProps\n } = props\n\n return (\n <StyledGrid\n data-as={typeof as === 'string' ? as : undefined}\n data-ui=\"Grid\"\n {...restProps}\n $autoRows={_getArrayProp(autoRows)}\n $autoCols={_getArrayProp(autoCols)}\n $autoFlow={_getArrayProp(autoFlow)}\n $columns={_getArrayProp(gridTemplateColumns)}\n $gap={_getArrayProp(gap)}\n $gapX={_getArrayProp(gapX)}\n $gapY={_getArrayProp(gapY)}\n $rows={_getArrayProp(gridTemplateRows)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledGrid>\n )\n}\n\n/**\n * The `Grid` component is for building 2-dimensional layers (based on CSS grid).\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Grid = GridComponent as unknown as <E extends ElementType = 'div'>(\n props: GridProps<E>,\n) => React.JSX.Element\n"],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { a as rem, i as _responsive, n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
|
-
import { v as responsiveRadiusStyle, y as Box } from "./useLayer-
|
|
4
|
-
import { n as Text } from "./stack-
|
|
3
|
+
import { v as responsiveRadiusStyle, y as Box } from "./useLayer-D1usxIE0.js";
|
|
4
|
+
import { n as Text } from "./stack-rsNFPq2-.js";
|
|
5
5
|
import { c } from "react/compiler-runtime";
|
|
6
|
+
import { clsx } from "clsx/lite";
|
|
6
7
|
import { Children, useEffect } from "react";
|
|
7
8
|
import { css, styled } from "styled-components";
|
|
8
9
|
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
|
|
@@ -114,52 +115,51 @@ function KBDComponent(props) {
|
|
|
114
115
|
*
|
|
115
116
|
* @public
|
|
116
117
|
*/
|
|
117
|
-
const KBD = KBDComponent
|
|
118
|
-
|
|
119
|
-
componentId: "sc-kbw663-0"
|
|
120
|
-
})`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styled(KBD).withConfig({
|
|
121
|
-
displayName: "Key",
|
|
122
|
-
componentId: "sc-kbw663-1"
|
|
123
|
-
})`&:not([hidden]){display:block;}`;
|
|
118
|
+
const KBD = KBDComponent;
|
|
119
|
+
var hotkey = "_1ljw6pi1", hotkeys = "_1ljw6pi0";
|
|
124
120
|
/**
|
|
125
121
|
* Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
|
|
126
122
|
*
|
|
127
123
|
* @public
|
|
128
124
|
*/
|
|
129
125
|
function Hotkeys(props) {
|
|
130
|
-
let $ = c(
|
|
131
|
-
$[0] === props ? (
|
|
126
|
+
let $ = c(31), className, fontSize, keys, padding, radius, ref, restProps, t0;
|
|
127
|
+
$[0] === props ? (className = $[1], fontSize = $[2], keys = $[3], padding = $[4], radius = $[5], ref = $[6], restProps = $[7], t0 = $[8]) : ({className, fontSize, gap: t0, keys, padding, radius, ref, ...restProps} = props, $[0] = props, $[1] = className, $[2] = fontSize, $[3] = keys, $[4] = padding, $[5] = radius, $[6] = ref, $[7] = restProps, $[8] = t0);
|
|
132
128
|
let gap = t0 === void 0 ? .5 : t0, t1;
|
|
133
|
-
$[
|
|
129
|
+
$[9] === gap ? t1 = $[10] : (t1 = _getArrayProp(gap), $[9] = gap, $[10] = t1);
|
|
134
130
|
let spacing = t1;
|
|
135
131
|
if (!keys || keys.length === 0) {
|
|
136
132
|
let t2;
|
|
137
|
-
return $[
|
|
133
|
+
return $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx(Fragment$1, {}), $[11] = t2) : t2 = $[11], t2;
|
|
138
134
|
}
|
|
139
135
|
let t2;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
136
|
+
$[12] === className ? t2 = $[13] : (t2 = clsx(hotkeys, className), $[12] = className, $[13] = t2);
|
|
137
|
+
let t3;
|
|
138
|
+
if ($[14] !== fontSize || $[15] !== keys || $[16] !== padding || $[17] !== radius) {
|
|
139
|
+
let t4;
|
|
140
|
+
$[19] !== fontSize || $[20] !== padding || $[21] !== radius ? (t4 = (key, i) => /* @__PURE__ */ jsx(KBD, {
|
|
141
|
+
className: hotkey,
|
|
143
142
|
fontSize,
|
|
144
143
|
padding,
|
|
145
144
|
radius,
|
|
146
145
|
children: key
|
|
147
|
-
}, i), $[
|
|
148
|
-
} else
|
|
149
|
-
let
|
|
150
|
-
$[
|
|
146
|
+
}, i), $[19] = fontSize, $[20] = padding, $[21] = radius, $[22] = t4) : t4 = $[22], t3 = keys.map(t4), $[14] = fontSize, $[15] = keys, $[16] = padding, $[17] = radius, $[18] = t3;
|
|
147
|
+
} else t3 = $[18];
|
|
148
|
+
let t4;
|
|
149
|
+
$[23] !== spacing || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsx(Inline, {
|
|
151
150
|
as: "span",
|
|
152
151
|
gap: spacing,
|
|
153
|
-
children:
|
|
154
|
-
}), $[
|
|
155
|
-
let
|
|
156
|
-
return $[
|
|
152
|
+
children: t3
|
|
153
|
+
}), $[23] = spacing, $[24] = t3, $[25] = t4) : t4 = $[25];
|
|
154
|
+
let t5;
|
|
155
|
+
return $[26] !== ref || $[27] !== restProps || $[28] !== t2 || $[29] !== t4 ? (t5 = /* @__PURE__ */ jsx("kbd", {
|
|
156
|
+
className: t2,
|
|
157
157
|
"data-ui": "Hotkeys",
|
|
158
|
-
...restProps,
|
|
159
158
|
ref,
|
|
160
|
-
|
|
161
|
-
|
|
159
|
+
...restProps,
|
|
160
|
+
children: t4
|
|
161
|
+
}), $[26] = ref, $[27] = restProps, $[28] = t2, $[29] = t4, $[30] = t5) : t5 = $[30], t5;
|
|
162
162
|
}
|
|
163
163
|
export { useGlobalKeyDown as i, KBD as n, Inline as r, Hotkeys as t };
|
|
164
164
|
|
|
165
|
-
//# sourceMappingURL=hotkeys-
|
|
165
|
+
//# sourceMappingURL=hotkeys-uSArGPzR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hotkeys-uSArGPzR.js","names":["(event: KeyboardEvent) => onKeyDown(event)","() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n // oxlint-disable-next-line react/exhaustive-effect-dependencies\n }","event","[options]","Children.map(childrenProp, (child) => child && <div>{child}</div>)","(child) => child && <div>{child}</div>","useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )","_getArrayProp(gap)","<StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>","fontSize = 0","padding = 1","radius = 2","_getArrayProp(radius)","<Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>","<Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>","<StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>","gap = 0.5","_getArrayProp(gap)","<></>","clsx(hotkeys, className)","keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <KBD className={hotkey} fontSize={fontSize} key={i} padding={padding} radius={radius}>\n {key}\n </KBD>\n ))","(key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <KBD className={hotkey} fontSize={fontSize} key={i} padding={padding} radius={radius}>\n {key}\n </KBD>\n )","<Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <KBD className={hotkey} fontSize={fontSize} key={i} padding={padding} radius={radius}>\n {key}\n </KBD>\n ))}\n </Inline>","<kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <KBD className={hotkey} fontSize={fontSize} key={i} padding={padding} radius={radius}>\n {key}\n </KBD>\n ))}\n </Inline>\n </kbd>"],"sources":["../src/core/hooks/useGlobalKeyDown.ts","../src/core/primitives/inline/styles.ts","../src/core/primitives/inline/inline.tsx","../src/core/primitives/kbd/kbd.tsx","../src/core/components/hotkeys/hotkeys.css.ts","../src/core/components/hotkeys/hotkeys.tsx"],"sourcesContent":["import {useEffect} from 'react'\n// TODO: switch to `useEffectEvent` from `react` once\n// https://github.com/facebook/react/issues/34818 is fixed in the lowest React\n// version we support: on React 19.2 the native hook never sees values past\n// the first render when the calling component is wrapped in `forwardRef` or\n// `memo`. This public hook runs in the fiber of whatever component calls it\n// (consumers may call it from `forwardRef` or `memo` components).\nimport {useEffectEvent} from 'use-effect-event'\n\n/**\n * Adds global keydown event listener to the window.\n *\n * @param onKeyDown - The function to call when a keydown event is triggered.\n * @param options - The options to pass to the addEventListener function (example, capture: true)\n * @beta\n */\nexport function useGlobalKeyDown(\n onKeyDown: (event: KeyboardEvent) => void,\n options?: AddEventListenerOptions,\n): void {\n const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))\n\n useEffect(() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n // oxlint-disable-next-line react/exhaustive-effect-dependencies\n }, [options])\n}\n","import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../../styles/helpers'\nimport {ThemeProps} from '../../styles/types'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\nexport function inlineBaseStyle(): CSSObject {\n return {\n 'lineHeight': '0',\n\n '&&:not([hidden])': {\n display: 'block',\n },\n\n '& > div': {\n display: 'inline-block',\n verticalAlign: 'middle',\n },\n }\n}\n\nexport function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$space, (spaceIndex) => {\n const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])\n\n return {\n 'margin': `-${_space} 0 0 -${_space}`,\n '& > div': {padding: `${_space} 0 0 ${_space}`},\n }\n })\n}\n","import {Children, useMemo} from 'react'\nimport {styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {inlineBaseStyle, inlineSpaceStyle} from './styles'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\n/**\n * @public\n */\nexport interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n /** The spacing between children. */\n gap?: number | number[]\n}\n\n/**\n * @public\n */\nexport type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>\n\nconst StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)\n\nfunction InlineComponent(\n props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,\n) {\n const {as, children: childrenProp, gap, ref, ...restProps} = props\n\n const children = useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )\n\n return (\n <StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>\n )\n}\n\n/**\n * The `Inline` component is a layout utility for aligning and spacing items horizontally.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(\n props: InlineProps<E>,\n) => React.JSX.Element\n","import {css, styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {ElementType, Props} from '../../types/component'\nimport {Radius} from '../../types/radius'\nimport {Box} from '../box/box'\nimport {Text} from '../text/text'\n\n/**\n * @public\n */\nexport interface KBDOwnProps {\n fontSize?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n}\n\n/**\n * @public\n */\nexport type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>\n\nfunction kbdStyle() {\n return css`\n --card-bg-color: var(--card-kbd-bg-color);\n --card-border-color: var(--card-kbd-border-color);\n --card-fg-color: var(--card-kbd-fg-color);\n\n box-shadow: inset 0 0 0 1px var(--card-border-color);\n background: var(--card-bg-color);\n font: inherit;\n\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n `\n}\n\nconst StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)\n\nfunction KBDComponent(\n props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,\n) {\n const {children, fontSize = 0, padding = 1, radius = 2, ref, ...restProps} = props\n\n return (\n <StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>\n )\n}\n\n/**\n * Used to define some text as keyboard input.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(\n props: KBDProps<E>,\n) => React.JSX.Element\n","import {style} from '@vanilla-extract/css'\n\nexport const hotkeys = style({\n font: 'inherit',\n padding: '1px',\n selectors: {\n '&:not([hidden])': {\n display: 'block',\n },\n },\n})\n\nexport const hotkey = style({\n selectors: {\n '&&:not([hidden])': {\n display: 'block',\n },\n },\n})\n","import {clsx} from 'clsx/lite'\n\nimport {Inline} from '../../primitives/inline/inline'\nimport {KBD} from '../../primitives/kbd/kbd'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\n\nimport {hotkey, hotkeys} from './hotkeys.css'\n\n/**\n * @public\n */\nexport interface HotkeysProps {\n fontSize?: number | number[]\n gap?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n keys?: string[]\n}\n\n/**\n * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.\n *\n * @public\n */\nexport function Hotkeys(props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>) {\n const {className, fontSize, gap = 0.5, keys, padding, radius, ref, ...restProps} = props\n const spacing = _getArrayProp(gap)\n\n if (!keys || keys.length === 0) {\n return <></>\n }\n\n return (\n <kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <KBD className={hotkey} fontSize={fontSize} key={i} padding={padding} radius={radius}>\n {key}\n </KBD>\n ))}\n </Inline>\n </kbd>\n )\n}\n"],"mappings":"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"}
|