@mirohq/design-system-tabs 0.1.0-tabs-component.0 → 0.2.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/main.js +101 -44
- package/dist/main.js.map +1 -1
- package/dist/module.js +101 -43
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3446 -900
- package/package.json +12 -11
package/dist/main.js
CHANGED
|
@@ -2,10 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var React = require('react');
|
|
6
|
-
var
|
|
7
|
+
var RadixTabs = require('@radix-ui/react-tabs');
|
|
7
8
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
8
9
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
10
|
+
var designSystemBaseButton = require('@mirohq/design-system-base-button');
|
|
11
|
+
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
12
|
+
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
13
|
+
var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
|
|
9
14
|
|
|
10
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
16
|
|
|
@@ -28,75 +33,127 @@ function _interopNamespace(e) {
|
|
|
28
33
|
}
|
|
29
34
|
|
|
30
35
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
var
|
|
36
|
+
var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
|
|
32
37
|
|
|
33
|
-
const Root = designSystemStitches.styled(
|
|
38
|
+
const Root = designSystemStitches.styled(RadixTabs__namespace.Root, {
|
|
34
39
|
display: "flex",
|
|
35
40
|
gap: "$100",
|
|
36
|
-
"
|
|
37
|
-
flexDirection: "row"
|
|
38
|
-
},
|
|
39
|
-
"&[data-orientation=horizontal]": {
|
|
40
|
-
flexDirection: "column"
|
|
41
|
-
}
|
|
41
|
+
flexDirection: "column"
|
|
42
42
|
});
|
|
43
43
|
|
|
44
|
-
const List = designSystemStitches.styled(
|
|
44
|
+
const List = designSystemStitches.styled(RadixTabs__namespace.List, {
|
|
45
45
|
display: "flex",
|
|
46
46
|
gap: "$100",
|
|
47
|
-
"
|
|
48
|
-
flexDirection: "column"
|
|
49
|
-
},
|
|
50
|
-
"&[data-orientation=horizontal]": {
|
|
51
|
-
flexDirection: "row"
|
|
52
|
-
}
|
|
47
|
+
flexDirection: "row"
|
|
53
48
|
});
|
|
54
49
|
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
const TabsContext = React__default["default"].createContext({
|
|
51
|
+
size: "medium"
|
|
52
|
+
});
|
|
53
|
+
const TabsContextProvider = ({ size, children }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
TabsContext.Provider,
|
|
55
|
+
{
|
|
56
|
+
value: {
|
|
57
|
+
size
|
|
58
|
+
},
|
|
59
|
+
children
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
const LABEL_OFFSET = 2;
|
|
64
|
+
const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
|
|
65
|
+
lineHeight: 1,
|
|
66
|
+
border: "1px solid transparent",
|
|
67
|
+
gap: "$50",
|
|
63
68
|
...designSystemStyles.focus.css({
|
|
64
|
-
boxShadow: "$focus-small"
|
|
65
|
-
outline: "none"
|
|
69
|
+
boxShadow: "$focus-small"
|
|
66
70
|
}),
|
|
71
|
+
backgroundColor: "transparent",
|
|
72
|
+
color: "$text-neutrals-subtle",
|
|
73
|
+
_hover: {
|
|
74
|
+
backgroundColor: "$background-neutrals-hover",
|
|
75
|
+
color: "$text-neutrals-subtle-hover"
|
|
76
|
+
},
|
|
67
77
|
"&[data-state=active]": {
|
|
68
|
-
|
|
78
|
+
backgroundColor: "$background-primary-subtle-selected",
|
|
79
|
+
color: "$text-primary-selected"
|
|
69
80
|
},
|
|
70
81
|
variants: {
|
|
71
82
|
size: {
|
|
72
|
-
|
|
73
|
-
|
|
83
|
+
"x-large": {
|
|
84
|
+
height: designSystemBaseButton.sizes.xLarge,
|
|
85
|
+
fontSize: "$250",
|
|
86
|
+
fontWeight: "500",
|
|
87
|
+
lineHeight: 1.4,
|
|
88
|
+
paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)")
|
|
74
89
|
},
|
|
75
|
-
|
|
76
|
-
|
|
90
|
+
large: {
|
|
91
|
+
height: designSystemBaseButton.sizes.large,
|
|
92
|
+
fontSize: "$200",
|
|
93
|
+
fontWeight: "600",
|
|
94
|
+
lineHeight: 1.5,
|
|
95
|
+
paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)")
|
|
96
|
+
},
|
|
97
|
+
medium: {
|
|
98
|
+
height: designSystemBaseButton.sizes.medium,
|
|
99
|
+
fontSize: "$175",
|
|
100
|
+
fontWeight: "650",
|
|
101
|
+
lineHeight: 1.5,
|
|
102
|
+
paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)")
|
|
77
103
|
}
|
|
78
104
|
}
|
|
105
|
+
},
|
|
106
|
+
"&[disabled], &[aria-disabled]": {
|
|
107
|
+
backgroundColor: "transparent",
|
|
108
|
+
color: "$text-neutrals-disabled"
|
|
79
109
|
}
|
|
80
110
|
});
|
|
81
111
|
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
112
|
+
const Trigger = ({
|
|
113
|
+
children,
|
|
114
|
+
value,
|
|
115
|
+
...restProps
|
|
116
|
+
}) => {
|
|
117
|
+
const { size } = React__default["default"].useContext(TabsContext);
|
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
TriggerStyled,
|
|
120
|
+
{
|
|
86
121
|
...restProps,
|
|
122
|
+
size,
|
|
123
|
+
preventFocusOnPress: "auto",
|
|
124
|
+
role: "tab",
|
|
125
|
+
asChild: true,
|
|
126
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
|
|
132
|
+
const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
|
|
133
|
+
const { size } = React__default["default"].useContext(TabsContext);
|
|
134
|
+
const formattedChildren = designSystemUtils.addPropsToChildren(children, designSystemBaseIcon.isIconComponent, {
|
|
135
|
+
"data-icon-component": "",
|
|
136
|
+
size: size === "medium" ? "small" : "medium",
|
|
137
|
+
weight: size === "medium" ? "thin" : "normal"
|
|
138
|
+
});
|
|
139
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
const Tabs = React__default["default"].forwardRef(
|
|
143
|
+
({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
+
Root,
|
|
145
|
+
{
|
|
146
|
+
...props,
|
|
87
147
|
ref: forwardRef,
|
|
88
|
-
onValueChange: onChange
|
|
89
|
-
|
|
90
|
-
|
|
148
|
+
onValueChange: onChange,
|
|
149
|
+
activationMode: "manual"
|
|
150
|
+
}
|
|
151
|
+
) })
|
|
91
152
|
);
|
|
92
153
|
Tabs.List = List;
|
|
93
154
|
Tabs.Trigger = Trigger;
|
|
94
|
-
Tabs.Content =
|
|
95
|
-
|
|
96
|
-
var types = /*#__PURE__*/Object.freeze({
|
|
97
|
-
__proto__: null
|
|
98
|
-
});
|
|
155
|
+
Tabs.Content = RadixTabs__namespace.Content;
|
|
156
|
+
Tabs.IconSlot = IconSlot;
|
|
99
157
|
|
|
100
158
|
exports.Tabs = Tabs;
|
|
101
|
-
exports.TabsTypes = types;
|
|
102
159
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/trigger.styled.tsx","../src/tabs.tsx"],"sourcesContent":["import * as Tabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Root = styled(Tabs.Root, {\n display: 'flex',\n gap: '$100',\n\n '&[data-orientation=vertical]': {\n flexDirection: 'row',\n },\n\n '&[data-orientation=horizontal]': {\n flexDirection: 'column',\n },\n})\n\nexport type RootProps = StrictComponentProps<typeof Root>\n","import * as Tabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(Tabs.List, {\n display: 'flex',\n gap: '$100',\n\n '&[data-orientation=vertical]': {\n flexDirection: 'column',\n },\n\n '&[data-orientation=horizontal]': {\n flexDirection: 'row',\n },\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import * as Tabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const Trigger = styled(Tabs.Trigger, {\n cursor: 'pointer',\n background: 'none',\n border: 'none',\n padding: '$100 $50',\n borderBottom: 'solid 2px transparent',\n fontSize: '$175',\n color: '$background-neutrals-inverted',\n\n ...focus.css({\n boxShadow: '$focus-small',\n outline: 'none',\n }),\n\n '&[data-state=active]': {\n borderBottom: 'solid 2px $background-primary-prominent',\n },\n\n variants: {\n size: {\n normal: {\n fontSize: '$175',\n },\n small: {\n fontSize: '$150',\n },\n },\n },\n})\n\nexport type TriggerProps = StrictComponentProps<typeof Trigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport type { TabsOrientation } from './types'\nimport { Root } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {\n /**\n * The value of the tab that should be active when initially rendered. Use when you do not need to control the\n * state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate. Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param value the value associated to the newly selected tab.\n */\n onChange?: (value: string) => void\n /**\n * The orientation of the component. It will define whether tabs are rendered on the top area of the component\n * (horizontal) or on the left side, next to the content (vertical).\n */\n orientation?: TabsOrientation\n}\n\nexport const Tabs = React.forwardRef<ElementRef<typeof Root>, TabsProps>(\n (props, forwardRef) => {\n const { onChange, ...restProps } = props\n return <Root {...restProps} ref={forwardRef} onValueChange={onChange} />\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\n"],"names":["styled","Tabs","focus","React","RadixTabs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,IAAA,GAAOA,2BAAO,CAAAC,eAAA,CAAK,IAAM,EAAA;AAAA,EACpC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EAEL,8BAAgC,EAAA;AAAA,IAC9B,aAAe,EAAA,KAAA;AAAA,GACjB;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,aAAe,EAAA,QAAA;AAAA,GACjB;AACF,CAAC,CAAA;;ACXY,MAAA,IAAA,GAAOD,2BAAO,CAAAC,eAAA,CAAK,IAAM,EAAA;AAAA,EACpC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EAEL,8BAAgC,EAAA;AAAA,IAC9B,aAAe,EAAA,QAAA;AAAA,GACjB;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,aAAe,EAAA,KAAA;AAAA,GACjB;AACF,CAAC,CAAA;;ACVY,MAAA,OAAA,GAAUD,2BAAO,CAAAC,eAAA,CAAK,OAAS,EAAA;AAAA,EAC1C,MAAQ,EAAA,SAAA;AAAA,EACR,UAAY,EAAA,MAAA;AAAA,EACZ,MAAQ,EAAA,MAAA;AAAA,EACR,OAAS,EAAA,UAAA;AAAA,EACT,YAAc,EAAA,uBAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,+BAAA;AAAA,EAEP,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,cAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,GACV,CAAA;AAAA,EAED,sBAAwB,EAAA;AAAA,IACtB,YAAc,EAAA,yCAAA;AAAA,GAChB;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACDM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,KAAA;AACrB,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACnC,IAAA,uBAAQA,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAM,GAAG,SAAA;AAAA,MAAW,GAAK,EAAA,UAAA;AAAA,MAAY,aAAe,EAAA,QAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACxE;AACF,EAAA;AAQA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AACZ,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AACf,IAAA,CAAK,UAAUC,eAAU,CAAA,OAAA;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Root = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type RootProps = StrictComponentProps<typeof Root>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n size: StyledTriggerProps['size']\n}>({\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ size, children }) => (\n <TabsContext.Provider\n value={{\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1,\n border: '1px solid transparent',\n gap: '$50',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n variants: {\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n fontWeight: '500',\n lineHeight: 1.4,\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n fontWeight: '600',\n lineHeight: 1.5,\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n fontWeight: '650',\n lineHeight: 1.5,\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { HoverEvents } from '@react-types/shared'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\n\nexport const Trigger: React.FC<RadixTabs.TabsTriggerProps & HoverEvents> = ({\n children,\n value,\n ...restProps\n}) => {\n const { size } = React.useContext(TabsContext)\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n}\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { Root } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<React.ElementRef<typeof Root>, TabsProps>(\n ({ size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider size={size}>\n <Root\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["styled","RadixTabs","React","jsx","BaseButton","focus","sizes","Primitive","addPropsToChildren","isIconComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,IAAA,GAAOA,2BAAO,CAAAC,oBAAA,CAAU,IAAM,EAAA;AAAA,EACzC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,QAAA;AACjB,CAAC,CAAA;;ACJY,MAAA,IAAA,GAAOD,2BAAO,CAAAC,oBAAA,CAAU,IAAM,EAAA;AAAA,EACzC,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;ACJY,MAAA,WAAA,GAAcC,0BAAM,aAE9B,CAAA;AAAA,EACD,IAAM,EAAA,QAAA;AACR,CAAC,CAAA,CAAA;AAEM,MAAM,mBAGR,GAAA,CAAC,EAAE,IAAA,EAAM,UACZ,qBAAAC,cAAA;AAAA,EAAC,WAAY,CAAA,QAAA;AAAA,EAAZ;AAAA,IACC,KAAO,EAAA;AAAA,MACL,IAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA;;ACfF,MAAM,YAAe,GAAA,CAAA,CAAA;AAER,MAAA,aAAA,GAAgBH,4BAAOI,iCAAY,EAAA;AAAA,EAC9C,UAAY,EAAA,CAAA;AAAA,EACZ,MAAQ,EAAA,uBAAA;AAAA,EACR,GAAK,EAAA,KAAA;AAAA,EAEL,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,cAAA;AAAA,GACZ,CAAA;AAAA,EAED,eAAiB,EAAA,aAAA;AAAA,EACjB,KAAO,EAAA,uBAAA;AAAA,EAEP,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,4BAAA;AAAA,IACjB,KAAO,EAAA,6BAAA;AAAA,GACT;AAAA,EAEA,sBAAwB,EAAA;AAAA,IACtB,eAAiB,EAAA,qCAAA;AAAA,IACjB,KAAO,EAAA,wBAAA;AAAA,GACT;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,QACT,QAAQC,4BAAM,CAAA,MAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQA,4BAAM,CAAA,KAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,QAAQA,4BAAM,CAAA,MAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA,EAAU,eAAe,MAAY,CAAA,YAAA,EAAA,KAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,GACF;AAAA,EAEA,+BAAiC,EAAA;AAAA,IAC/B,eAAiB,EAAA,aAAA;AAAA,IACjB,KAAO,EAAA,yBAAA;AAAA,GACT;AACF,CAAC,CAAA;;ACpDM,MAAM,UAA8D,CAAC;AAAA,EAC1E,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAS,GAAAJ,yBAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAE7C,EACE,uBAAAC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,IAAA;AAAA,MACA,mBAAoB,EAAA,MAAA;AAAA,MACpB,IAAK,EAAA,KAAA;AAAA,MACL,OAAO,EAAA,IAAA;AAAA,MAEP,QAAC,kBAAAA,cAAA,CAAAF,oBAAA,CAAU,OAAV,EAAA,EAAkB,OAAe,QAAS,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7C,CAAA;AAEJ,CAAA;;ACjBO,MAAM,cAAiB,GAAAD,2BAAA,CAAOO,+BAAU,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAazC,MAAA,QAAA,GAAWL,0BAAM,UAG5B,CAAA,CAAC,EAAE,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAS,GAAAA,yBAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAE7C,EAAM,MAAA,iBAAA,GAAoBM,oCAAmB,CAAA,QAAA,EAAUC,oCAAiB,EAAA;AAAA,IACtE,qBAAuB,EAAA,EAAA;AAAA,IACvB,IAAA,EAAM,IAAS,KAAA,QAAA,GAAW,OAAU,GAAA,QAAA;AAAA,IACpC,MAAA,EAAQ,IAAS,KAAA,QAAA,GAAW,MAAS,GAAA,QAAA;AAAA,GACtC,CAAA,CAAA;AAED,EACE,uBAAAN,cAAA,CAAC,cAAgB,EAAA,EAAA,GAAG,SAAW,EAAA,GAAA,EAAK,YAAY,aAAW,EAAA,IAAA,EAAC,OAAO,EAAA,IAAA,EAChE,QACH,EAAA,iBAAA,EAAA,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACLM,MAAM,OAAOD,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,IAAA,GAAO,OAAS,EAAA,QAAA,EAAU,GAAG,KAAA,EAAS,EAAA,UAAA,qBACtCC,cAAA,CAAA,mBAAA,EAAA,EAAoB,IACnB,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,aAAe,EAAA,QAAA;AAAA,MACf,cAAe,EAAA,QAAA;AAAA,KAAA;AAAA,GAEnB,EAAA,CAAA;AAEJ,EAAA;AASA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AACZ,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AACf,IAAA,CAAK,UAAUF,oBAAU,CAAA,OAAA,CAAA;AACzB,IAAA,CAAK,QAAW,GAAA,QAAA;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -1,74 +1,132 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import * as
|
|
3
|
+
import * as RadixTabs from '@radix-ui/react-tabs';
|
|
3
4
|
import { styled } from '@mirohq/design-system-stitches';
|
|
4
5
|
import { focus } from '@mirohq/design-system-styles';
|
|
6
|
+
import { BaseButton, sizes } from '@mirohq/design-system-base-button';
|
|
7
|
+
import { Primitive } from '@mirohq/design-system-primitive';
|
|
8
|
+
import { addPropsToChildren } from '@mirohq/design-system-utils';
|
|
9
|
+
import { isIconComponent } from '@mirohq/design-system-base-icon';
|
|
5
10
|
|
|
6
|
-
const Root = styled(
|
|
11
|
+
const Root = styled(RadixTabs.Root, {
|
|
7
12
|
display: "flex",
|
|
8
13
|
gap: "$100",
|
|
9
|
-
"
|
|
10
|
-
flexDirection: "row"
|
|
11
|
-
},
|
|
12
|
-
"&[data-orientation=horizontal]": {
|
|
13
|
-
flexDirection: "column"
|
|
14
|
-
}
|
|
14
|
+
flexDirection: "column"
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
const List = styled(
|
|
17
|
+
const List = styled(RadixTabs.List, {
|
|
18
18
|
display: "flex",
|
|
19
19
|
gap: "$100",
|
|
20
|
-
"
|
|
21
|
-
flexDirection: "column"
|
|
22
|
-
},
|
|
23
|
-
"&[data-orientation=horizontal]": {
|
|
24
|
-
flexDirection: "row"
|
|
25
|
-
}
|
|
20
|
+
flexDirection: "row"
|
|
26
21
|
});
|
|
27
22
|
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
23
|
+
const TabsContext = React.createContext({
|
|
24
|
+
size: "medium"
|
|
25
|
+
});
|
|
26
|
+
const TabsContextProvider = ({ size, children }) => /* @__PURE__ */ jsx(
|
|
27
|
+
TabsContext.Provider,
|
|
28
|
+
{
|
|
29
|
+
value: {
|
|
30
|
+
size
|
|
31
|
+
},
|
|
32
|
+
children
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
const LABEL_OFFSET = 2;
|
|
37
|
+
const TriggerStyled = styled(BaseButton, {
|
|
38
|
+
lineHeight: 1,
|
|
39
|
+
border: "1px solid transparent",
|
|
40
|
+
gap: "$50",
|
|
36
41
|
...focus.css({
|
|
37
|
-
boxShadow: "$focus-small"
|
|
38
|
-
outline: "none"
|
|
42
|
+
boxShadow: "$focus-small"
|
|
39
43
|
}),
|
|
44
|
+
backgroundColor: "transparent",
|
|
45
|
+
color: "$text-neutrals-subtle",
|
|
46
|
+
_hover: {
|
|
47
|
+
backgroundColor: "$background-neutrals-hover",
|
|
48
|
+
color: "$text-neutrals-subtle-hover"
|
|
49
|
+
},
|
|
40
50
|
"&[data-state=active]": {
|
|
41
|
-
|
|
51
|
+
backgroundColor: "$background-primary-subtle-selected",
|
|
52
|
+
color: "$text-primary-selected"
|
|
42
53
|
},
|
|
43
54
|
variants: {
|
|
44
55
|
size: {
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
"x-large": {
|
|
57
|
+
height: sizes.xLarge,
|
|
58
|
+
fontSize: "$250",
|
|
59
|
+
fontWeight: "500",
|
|
60
|
+
lineHeight: 1.4,
|
|
61
|
+
paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)")
|
|
47
62
|
},
|
|
48
|
-
|
|
49
|
-
|
|
63
|
+
large: {
|
|
64
|
+
height: sizes.large,
|
|
65
|
+
fontSize: "$200",
|
|
66
|
+
fontWeight: "600",
|
|
67
|
+
lineHeight: 1.5,
|
|
68
|
+
paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)")
|
|
69
|
+
},
|
|
70
|
+
medium: {
|
|
71
|
+
height: sizes.medium,
|
|
72
|
+
fontSize: "$175",
|
|
73
|
+
fontWeight: "650",
|
|
74
|
+
lineHeight: 1.5,
|
|
75
|
+
paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)")
|
|
50
76
|
}
|
|
51
77
|
}
|
|
78
|
+
},
|
|
79
|
+
"&[disabled], &[aria-disabled]": {
|
|
80
|
+
backgroundColor: "transparent",
|
|
81
|
+
color: "$text-neutrals-disabled"
|
|
52
82
|
}
|
|
53
83
|
});
|
|
54
84
|
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
const Trigger = ({
|
|
86
|
+
children,
|
|
87
|
+
value,
|
|
88
|
+
...restProps
|
|
89
|
+
}) => {
|
|
90
|
+
const { size } = React.useContext(TabsContext);
|
|
91
|
+
return /* @__PURE__ */ jsx(
|
|
92
|
+
TriggerStyled,
|
|
93
|
+
{
|
|
59
94
|
...restProps,
|
|
95
|
+
size,
|
|
96
|
+
preventFocusOnPress: "auto",
|
|
97
|
+
role: "tab",
|
|
98
|
+
asChild: true,
|
|
99
|
+
children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const StyledIconSlot = styled(Primitive.div, {});
|
|
105
|
+
const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
|
|
106
|
+
const { size } = React.useContext(TabsContext);
|
|
107
|
+
const formattedChildren = addPropsToChildren(children, isIconComponent, {
|
|
108
|
+
"data-icon-component": "",
|
|
109
|
+
size: size === "medium" ? "small" : "medium",
|
|
110
|
+
weight: size === "medium" ? "thin" : "normal"
|
|
111
|
+
});
|
|
112
|
+
return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
const Tabs = React.forwardRef(
|
|
116
|
+
({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsx(
|
|
117
|
+
Root,
|
|
118
|
+
{
|
|
119
|
+
...props,
|
|
60
120
|
ref: forwardRef,
|
|
61
|
-
onValueChange: onChange
|
|
62
|
-
|
|
63
|
-
|
|
121
|
+
onValueChange: onChange,
|
|
122
|
+
activationMode: "manual"
|
|
123
|
+
}
|
|
124
|
+
) })
|
|
64
125
|
);
|
|
65
126
|
Tabs.List = List;
|
|
66
127
|
Tabs.Trigger = Trigger;
|
|
67
|
-
Tabs.Content =
|
|
68
|
-
|
|
69
|
-
var types = /*#__PURE__*/Object.freeze({
|
|
70
|
-
__proto__: null
|
|
71
|
-
});
|
|
128
|
+
Tabs.Content = RadixTabs.Content;
|
|
129
|
+
Tabs.IconSlot = IconSlot;
|
|
72
130
|
|
|
73
|
-
export { Tabs
|
|
131
|
+
export { Tabs };
|
|
74
132
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/trigger.styled.tsx","../src/tabs.tsx"],"sourcesContent":["import * as
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/partials/root.styled.tsx","../src/partials/list.styled.tsx","../src/partials/provider.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/icon-slot.tsx","../src/tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Root = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type RootProps = StrictComponentProps<typeof Root>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const List = styled(RadixTabs.List, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'row',\n})\n\nexport type ListProps = StrictComponentProps<typeof List>\n","import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n size: StyledTriggerProps['size']\n}>({\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ size, children }) => (\n <TabsContext.Provider\n value={{\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1,\n border: '1px solid transparent',\n gap: '$50',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n variants: {\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n fontWeight: '500',\n lineHeight: 1.4,\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n fontWeight: '600',\n lineHeight: 1.5,\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n fontWeight: '650',\n lineHeight: 1.5,\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { HoverEvents } from '@react-types/shared'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\n\nexport const Trigger: React.FC<RadixTabs.TabsTriggerProps & HoverEvents> = ({\n children,\n value,\n ...restProps\n}) => {\n const { size } = React.useContext(TabsContext)\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n}\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { Root } from './partials/root.styled'\nimport { List } from './partials/list.styled'\nimport { Trigger } from './partials/trigger'\nimport { IconSlot } from './partials/icon-slot'\nimport { TabsContextProvider } from './partials/provider'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<RadixTabs.TabsProps, 'onValueChange' | 'onChange'> {\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<React.ElementRef<typeof Root>, TabsProps>(\n ({ size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider size={size}>\n <Root\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
|