@mirohq/design-system-tabs 0.2.19 → 0.3.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.
Files changed (6) hide show
  1. package/dist/main.js +125 -47
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +124 -46
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +34 -17
  6. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -3,14 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
6
  var RadixTabs = require('@radix-ui/react-tabs');
7
+ var React = require('react');
8
8
  var designSystemStitches = require('@mirohq/design-system-stitches');
9
- var designSystemStyles = require('@mirohq/design-system-styles');
10
- var designSystemBaseButton = require('@mirohq/design-system-base-button');
11
9
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
12
10
  var designSystemUtils = require('@mirohq/design-system-utils');
13
11
  var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
12
+ var designSystemBaseButton = require('@mirohq/design-system-base-button');
13
+ var designSystemStyles = require('@mirohq/design-system-styles');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
16
 
@@ -32,53 +32,122 @@ function _interopNamespace(e) {
32
32
  return Object.freeze(n);
33
33
  }
34
34
 
35
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
36
35
  var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
37
-
38
- const StyledRoot = designSystemStitches.styled(RadixTabs__namespace.Root, {
39
- display: "flex",
40
- gap: "$100",
41
- flexDirection: "column"
42
- });
43
-
44
- const List = designSystemStitches.styled(RadixTabs__namespace.List, {
45
- display: "flex",
46
- gap: "$100",
47
- flexDirection: "row"
48
- });
36
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
49
37
 
50
38
  const TabsContext = React__default["default"].createContext({
39
+ variant: "tabs",
51
40
  size: "medium"
52
41
  });
53
- const TabsContextProvider = ({ size, children }) => /* @__PURE__ */ jsxRuntime.jsx(
42
+ const TabsContextProvider = ({ variant, size, children }) => /* @__PURE__ */ jsxRuntime.jsx(
54
43
  TabsContext.Provider,
55
44
  {
56
45
  value: {
46
+ variant,
57
47
  size
58
48
  },
59
49
  children
60
50
  }
61
51
  );
62
52
 
53
+ const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
54
+ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
55
+ const { size } = React__default["default"].useContext(TabsContext);
56
+ const formattedChildren = designSystemUtils.addPropsToChildren(children, designSystemBaseIcon.isIconComponent, {
57
+ "data-icon-component": "",
58
+ size: size === "medium" ? "small" : "medium",
59
+ weight: size === "medium" ? "thin" : "normal"
60
+ });
61
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
62
+ });
63
+
64
+ const ListStyled = designSystemStitches.styled(RadixTabs__namespace.List, {
65
+ display: "flex",
66
+ gap: "$100",
67
+ flexDirection: "row",
68
+ variants: {
69
+ variant: {
70
+ buttons: {},
71
+ tabs: {
72
+ gap: "$0"
73
+ }
74
+ }
75
+ }
76
+ });
77
+
78
+ const List = React__default["default"].forwardRef(
79
+ ({ children, ...restProps }, forwardRef) => {
80
+ const { variant } = React__default["default"].useContext(TabsContext);
81
+ return /* @__PURE__ */ jsxRuntime.jsx(ListStyled, { ...restProps, variant, ref: forwardRef, children });
82
+ }
83
+ );
84
+
85
+ const StyledRoot = designSystemStitches.styled(RadixTabs__namespace.Root, {
86
+ display: "flex",
87
+ gap: "$100",
88
+ flexDirection: "column"
89
+ });
90
+
63
91
  const LABEL_OFFSET = 2;
64
92
  const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
65
93
  lineHeight: 1,
66
94
  border: "1px solid transparent",
67
95
  gap: "$50",
68
- ...designSystemStyles.focus.css({
69
- boxShadow: "$focus-small"
70
- }),
71
- backgroundColor: "transparent",
72
- color: "$text-neutrals-subtle",
73
- _hover: {
74
- backgroundColor: "$background-neutrals-hover",
75
- color: "$text-neutrals-subtle-hover"
76
- },
77
- "&[data-state=active]": {
78
- backgroundColor: "$background-primary-subtle",
79
- color: "$text-primary-selected"
80
- },
81
96
  variants: {
97
+ variant: {
98
+ buttons: {
99
+ ...designSystemStyles.focus.css({
100
+ boxShadow: "$focus-small"
101
+ }),
102
+ backgroundColor: "transparent",
103
+ color: "$text-neutrals-subtle",
104
+ _hover: {
105
+ backgroundColor: "$background-neutrals-hover",
106
+ color: "$text-neutrals-subtle-hover"
107
+ },
108
+ "&[data-state=active]": {
109
+ backgroundColor: "$background-primary-subtle",
110
+ color: "$text-primary-selected"
111
+ },
112
+ "&[data-pressed]": {
113
+ backgroundColor: "$background-neutrals-active",
114
+ color: "$text-neutrals-subtle-active"
115
+ },
116
+ "&[disabled], &[aria-disabled]": {
117
+ backgroundColor: "transparent",
118
+ color: "$text-neutrals-disabled"
119
+ }
120
+ },
121
+ tabs: {
122
+ border: "none",
123
+ borderRadius: "0",
124
+ ...designSystemStyles.focus.css({
125
+ boxShadow: "$focus-small",
126
+ borderRadius: "$25",
127
+ borderBottom: "unset !important"
128
+ }),
129
+ backgroundColor: "transparent",
130
+ color: "$text-neutrals-subtle",
131
+ borderBottom: "2px solid $border-neutrals",
132
+ _hover: {
133
+ color: "$text-neutrals-hover",
134
+ borderBottom: "2px solid $border-neutrals-hover"
135
+ },
136
+ "&[data-state=active]": {
137
+ color: "$text-primary-selected",
138
+ borderBottom: "2px solid $border-primary"
139
+ },
140
+ "&[data-pressed]": {
141
+ color: "$text-neutrals-active",
142
+ borderBottom: "2px solid $border-neutrals-active"
143
+ },
144
+ "&[disabled], &[aria-disabled]": {
145
+ backgroundColor: "transparent",
146
+ color: "$text-neutrals-disabled",
147
+ borderBottom: "2px solid $border-neutrals-disabled"
148
+ }
149
+ }
150
+ },
82
151
  size: {
83
152
  "x-large": {
84
153
  height: designSystemBaseButton.sizes.xLarge,
@@ -103,14 +172,33 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
103
172
  }
104
173
  }
105
174
  },
106
- "&[disabled], &[aria-disabled]": {
107
- backgroundColor: "transparent",
108
- color: "$text-neutrals-disabled"
109
- }
175
+ compoundVariants: [
176
+ {
177
+ variant: "tabs",
178
+ size: "x-large",
179
+ css: {
180
+ paddingX: "$75"
181
+ }
182
+ },
183
+ {
184
+ variant: "tabs",
185
+ size: "large",
186
+ css: {
187
+ paddingX: "$50"
188
+ }
189
+ },
190
+ {
191
+ variant: "tabs",
192
+ size: "medium",
193
+ css: {
194
+ paddingX: "25$"
195
+ }
196
+ }
197
+ ]
110
198
  });
111
199
 
112
200
  const Trigger = React__default["default"].forwardRef(({ children, value, ...restProps }, forwardRef) => {
113
- const { size } = React__default["default"].useContext(TabsContext);
201
+ const { variant, size } = React__default["default"].useContext(TabsContext);
114
202
  return /* @__PURE__ */ jsxRuntime.jsx(
115
203
  TriggerStyled,
116
204
  {
@@ -120,23 +208,13 @@ const Trigger = React__default["default"].forwardRef(({ children, value, ...rest
120
208
  role: "tab",
121
209
  asChild: true,
122
210
  ref: forwardRef,
211
+ variant,
123
212
  children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
124
213
  }
125
214
  );
126
215
  });
127
216
 
128
- const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
129
- const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
130
- const { size } = React__default["default"].useContext(TabsContext);
131
- const formattedChildren = designSystemUtils.addPropsToChildren(children, designSystemBaseIcon.isIconComponent, {
132
- "data-icon-component": "",
133
- size: size === "medium" ? "small" : "medium",
134
- weight: size === "medium" ? "thin" : "normal"
135
- });
136
- return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
137
- });
138
-
139
- const Tabs = React__default["default"].forwardRef(({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
217
+ const Tabs = React__default["default"].forwardRef(({ variant = "tabs", size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { variant, size, children: /* @__PURE__ */ jsxRuntime.jsx(
140
218
  StyledRoot,
141
219
  {
142
220
  ...props,
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/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 StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\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',\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 type { ElementRef } from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\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 ref={forwardRef}\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 { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } 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<StyledRootProps, '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<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\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":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n variant?: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ variant, size, children }) => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\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 { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n gap: '$0',\n },\n },\n },\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1,\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\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',\n color: '$text-primary-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n color: '$text-neutrals-subtle-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n },\n tabs: {\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-small',\n borderRadius: '$25',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n borderBottom: '2px solid $border-neutrals',\n\n _hover: {\n color: '$text-neutrals-hover',\n borderBottom: '2px solid $border-neutrals-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n borderBottom: '2px solid $border-primary',\n },\n\n '&[data-pressed]': {\n color: '$text-neutrals-active',\n borderBottom: '2px solid $border-neutrals-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n borderBottom: '2px solid $border-neutrals-disabled',\n },\n },\n },\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 compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n paddingX: '$75',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n paddingX: '25$',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'panel'\n */\n variant?: StyledTriggerProps['variant']\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<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\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":["React","jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,WAAA,GAAcA,0BAAM,aAG9B,CAAA;AAAA,EACD,OAAS,EAAA,MAAA;AAAA,EACT,IAAM,EAAA,QAAA;AACR,CAAC,CAAA,CAAA;AAEM,MAAM,sBAIR,CAAC,EAAE,OAAS,EAAA,IAAA,EAAM,UACrB,qBAAAC,cAAA;AAAA,EAAC,WAAY,CAAA,QAAA;AAAA,EAAZ;AAAA,IACC,KAAO,EAAA;AAAA,MACL,OAAA;AAAA,MACA,IAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA;;AChBK,MAAM,cAAiB,GAAAC,2BAAA,CAAOC,+BAAU,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAazC,MAAA,QAAA,GAAWH,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,GAAoBI,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,uBAAAJ,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;;AClCY,MAAA,UAAA,GAAaC,2BAAO,CAAAI,oBAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,KAAA;AAAA,EAEf,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,SAAS,EAAC;AAAA,MACV,IAAM,EAAA;AAAA,QACJ,GAAK,EAAA,IAAA;AAAA,OACP;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACRM,MAAM,OAAON,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,GAAG,SAAA,IAAa,UAAe,KAAA;AAC1C,IAAA,MAAM,EAAE,OAAA,EAAY,GAAAA,yBAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAEhD,IAAA,sCACG,UAAY,EAAA,EAAA,GAAG,WAAW,OAAkB,EAAA,GAAA,EAAK,YAC/C,QACH,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;;ACfa,MAAA,UAAA,GAAaE,2BAAO,CAAAI,oBAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AAAA,EACL,aAAe,EAAA,QAAA;AACjB,CAAC,CAAA;;ACHD,MAAM,YAAe,GAAA,CAAA,CAAA;AAER,MAAA,aAAA,GAAgBJ,4BAAOK,iCAAY,EAAA;AAAA,EAC9C,UAAY,EAAA,CAAA;AAAA,EACZ,MAAQ,EAAA,uBAAA;AAAA,EACR,GAAK,EAAA,KAAA;AAAA,EAEL,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,GAAGC,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,eAAiB,EAAA,aAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,QAEP,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,4BAAA;AAAA,UACjB,KAAO,EAAA,6BAAA;AAAA,SACT;AAAA,QAEA,sBAAwB,EAAA;AAAA,UACtB,eAAiB,EAAA,4BAAA;AAAA,UACjB,KAAO,EAAA,wBAAA;AAAA,SACT;AAAA,QAEA,iBAAmB,EAAA;AAAA,UACjB,eAAiB,EAAA,6BAAA;AAAA,UACjB,KAAO,EAAA,8BAAA;AAAA,SACT;AAAA,QAEA,+BAAiC,EAAA;AAAA,UAC/B,eAAiB,EAAA,aAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,MAAQ,EAAA,MAAA;AAAA,QACR,YAAc,EAAA,GAAA;AAAA,QACd,GAAGA,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,UACX,YAAc,EAAA,KAAA;AAAA,UACd,YAAc,EAAA,kBAAA;AAAA,SACf,CAAA;AAAA,QAED,eAAiB,EAAA,aAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,QACP,YAAc,EAAA,4BAAA;AAAA,QAEd,MAAQ,EAAA;AAAA,UACN,KAAO,EAAA,sBAAA;AAAA,UACP,YAAc,EAAA,kCAAA;AAAA,SAChB;AAAA,QAEA,sBAAwB,EAAA;AAAA,UACtB,KAAO,EAAA,wBAAA;AAAA,UACP,YAAc,EAAA,2BAAA;AAAA,SAChB;AAAA,QAEA,iBAAmB,EAAA;AAAA,UACjB,KAAO,EAAA,uBAAA;AAAA,UACP,YAAc,EAAA,mCAAA;AAAA,SAChB;AAAA,QAEA,+BAAiC,EAAA;AAAA,UAC/B,eAAiB,EAAA,aAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,YAAc,EAAA,qCAAA;AAAA,SAChB;AAAA,OACF;AAAA,KACF;AAAA,IACA,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,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,SAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,QAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC7GY,MAAA,OAAA,GAAUT,yBAAM,CAAA,UAAA,CAG3B,CAAC,EAAE,UAAU,KAAO,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AACnD,EAAA,MAAM,EAAE,OAAS,EAAA,IAAA,EAAS,GAAAA,yBAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAEtD,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,MACP,GAAK,EAAA,UAAA;AAAA,MACL,OAAA;AAAA,MAEA,QAAC,kBAAAA,cAAA,CAAAK,oBAAA,CAAU,OAAV,EAAA,EAAkB,OAAe,QAAS,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7C,CAAA;AAEJ,CAAC,CAAA;;ACKM,MAAM,OAAON,yBAAM,CAAA,UAAA,CAGxB,CAAC,EAAE,UAAU,MAAQ,EAAA,IAAA,GAAO,OAAS,EAAA,QAAA,EAAU,GAAG,KAAM,EAAA,EAAG,+BAC1DC,cAAA,CAAA,mBAAA,EAAA,EAAoB,SAAkB,IACrC,EAAA,QAAA,kBAAAA,cAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,UAAA;AAAA,IACL,aAAe,EAAA,QAAA;AAAA,IACf,cAAe,EAAA,QAAA;AAAA,GAAA;AACjB,CAAA,EACF,CACD,EAAA;AASD,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AACZ,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AACf,IAAA,CAAK,UAAUK,oBAAU,CAAA,OAAA,CAAA;AACzB,IAAA,CAAK,QAAW,GAAA,QAAA;;;;"}
package/dist/module.js CHANGED
@@ -1,57 +1,126 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import React from 'react';
3
2
  import * as RadixTabs from '@radix-ui/react-tabs';
3
+ import React from 'react';
4
4
  import { styled } from '@mirohq/design-system-stitches';
5
- import { focus } from '@mirohq/design-system-styles';
6
- import { BaseButton, sizes } from '@mirohq/design-system-base-button';
7
5
  import { Primitive } from '@mirohq/design-system-primitive';
8
6
  import { addPropsToChildren } from '@mirohq/design-system-utils';
9
7
  import { isIconComponent } from '@mirohq/design-system-base-icon';
10
-
11
- const StyledRoot = styled(RadixTabs.Root, {
12
- display: "flex",
13
- gap: "$100",
14
- flexDirection: "column"
15
- });
16
-
17
- const List = styled(RadixTabs.List, {
18
- display: "flex",
19
- gap: "$100",
20
- flexDirection: "row"
21
- });
8
+ import { BaseButton, sizes } from '@mirohq/design-system-base-button';
9
+ import { focus } from '@mirohq/design-system-styles';
22
10
 
23
11
  const TabsContext = React.createContext({
12
+ variant: "tabs",
24
13
  size: "medium"
25
14
  });
26
- const TabsContextProvider = ({ size, children }) => /* @__PURE__ */ jsx(
15
+ const TabsContextProvider = ({ variant, size, children }) => /* @__PURE__ */ jsx(
27
16
  TabsContext.Provider,
28
17
  {
29
18
  value: {
19
+ variant,
30
20
  size
31
21
  },
32
22
  children
33
23
  }
34
24
  );
35
25
 
26
+ const StyledIconSlot = styled(Primitive.div, {});
27
+ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
28
+ const { size } = React.useContext(TabsContext);
29
+ const formattedChildren = addPropsToChildren(children, isIconComponent, {
30
+ "data-icon-component": "",
31
+ size: size === "medium" ? "small" : "medium",
32
+ weight: size === "medium" ? "thin" : "normal"
33
+ });
34
+ return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
35
+ });
36
+
37
+ const ListStyled = styled(RadixTabs.List, {
38
+ display: "flex",
39
+ gap: "$100",
40
+ flexDirection: "row",
41
+ variants: {
42
+ variant: {
43
+ buttons: {},
44
+ tabs: {
45
+ gap: "$0"
46
+ }
47
+ }
48
+ }
49
+ });
50
+
51
+ const List = React.forwardRef(
52
+ ({ children, ...restProps }, forwardRef) => {
53
+ const { variant } = React.useContext(TabsContext);
54
+ return /* @__PURE__ */ jsx(ListStyled, { ...restProps, variant, ref: forwardRef, children });
55
+ }
56
+ );
57
+
58
+ const StyledRoot = styled(RadixTabs.Root, {
59
+ display: "flex",
60
+ gap: "$100",
61
+ flexDirection: "column"
62
+ });
63
+
36
64
  const LABEL_OFFSET = 2;
37
65
  const TriggerStyled = styled(BaseButton, {
38
66
  lineHeight: 1,
39
67
  border: "1px solid transparent",
40
68
  gap: "$50",
41
- ...focus.css({
42
- boxShadow: "$focus-small"
43
- }),
44
- backgroundColor: "transparent",
45
- color: "$text-neutrals-subtle",
46
- _hover: {
47
- backgroundColor: "$background-neutrals-hover",
48
- color: "$text-neutrals-subtle-hover"
49
- },
50
- "&[data-state=active]": {
51
- backgroundColor: "$background-primary-subtle",
52
- color: "$text-primary-selected"
53
- },
54
69
  variants: {
70
+ variant: {
71
+ buttons: {
72
+ ...focus.css({
73
+ boxShadow: "$focus-small"
74
+ }),
75
+ backgroundColor: "transparent",
76
+ color: "$text-neutrals-subtle",
77
+ _hover: {
78
+ backgroundColor: "$background-neutrals-hover",
79
+ color: "$text-neutrals-subtle-hover"
80
+ },
81
+ "&[data-state=active]": {
82
+ backgroundColor: "$background-primary-subtle",
83
+ color: "$text-primary-selected"
84
+ },
85
+ "&[data-pressed]": {
86
+ backgroundColor: "$background-neutrals-active",
87
+ color: "$text-neutrals-subtle-active"
88
+ },
89
+ "&[disabled], &[aria-disabled]": {
90
+ backgroundColor: "transparent",
91
+ color: "$text-neutrals-disabled"
92
+ }
93
+ },
94
+ tabs: {
95
+ border: "none",
96
+ borderRadius: "0",
97
+ ...focus.css({
98
+ boxShadow: "$focus-small",
99
+ borderRadius: "$25",
100
+ borderBottom: "unset !important"
101
+ }),
102
+ backgroundColor: "transparent",
103
+ color: "$text-neutrals-subtle",
104
+ borderBottom: "2px solid $border-neutrals",
105
+ _hover: {
106
+ color: "$text-neutrals-hover",
107
+ borderBottom: "2px solid $border-neutrals-hover"
108
+ },
109
+ "&[data-state=active]": {
110
+ color: "$text-primary-selected",
111
+ borderBottom: "2px solid $border-primary"
112
+ },
113
+ "&[data-pressed]": {
114
+ color: "$text-neutrals-active",
115
+ borderBottom: "2px solid $border-neutrals-active"
116
+ },
117
+ "&[disabled], &[aria-disabled]": {
118
+ backgroundColor: "transparent",
119
+ color: "$text-neutrals-disabled",
120
+ borderBottom: "2px solid $border-neutrals-disabled"
121
+ }
122
+ }
123
+ },
55
124
  size: {
56
125
  "x-large": {
57
126
  height: sizes.xLarge,
@@ -76,14 +145,33 @@ const TriggerStyled = styled(BaseButton, {
76
145
  }
77
146
  }
78
147
  },
79
- "&[disabled], &[aria-disabled]": {
80
- backgroundColor: "transparent",
81
- color: "$text-neutrals-disabled"
82
- }
148
+ compoundVariants: [
149
+ {
150
+ variant: "tabs",
151
+ size: "x-large",
152
+ css: {
153
+ paddingX: "$75"
154
+ }
155
+ },
156
+ {
157
+ variant: "tabs",
158
+ size: "large",
159
+ css: {
160
+ paddingX: "$50"
161
+ }
162
+ },
163
+ {
164
+ variant: "tabs",
165
+ size: "medium",
166
+ css: {
167
+ paddingX: "25$"
168
+ }
169
+ }
170
+ ]
83
171
  });
84
172
 
85
173
  const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
86
- const { size } = React.useContext(TabsContext);
174
+ const { variant, size } = React.useContext(TabsContext);
87
175
  return /* @__PURE__ */ jsx(
88
176
  TriggerStyled,
89
177
  {
@@ -93,23 +181,13 @@ const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef)
93
181
  role: "tab",
94
182
  asChild: true,
95
183
  ref: forwardRef,
184
+ variant,
96
185
  children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
97
186
  }
98
187
  );
99
188
  });
100
189
 
101
- const StyledIconSlot = styled(Primitive.div, {});
102
- const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
103
- const { size } = React.useContext(TabsContext);
104
- const formattedChildren = addPropsToChildren(children, isIconComponent, {
105
- "data-icon-component": "",
106
- size: size === "medium" ? "small" : "medium",
107
- weight: size === "medium" ? "thin" : "normal"
108
- });
109
- return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
110
- });
111
-
112
- const Tabs = React.forwardRef(({ size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { size, children: /* @__PURE__ */ jsx(
190
+ const Tabs = React.forwardRef(({ variant = "tabs", size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { variant, size, children: /* @__PURE__ */ jsx(
113
191
  StyledRoot,
114
192
  {
115
193
  ...props,
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/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 StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\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',\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 type { ElementRef } from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\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 ref={forwardRef}\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 { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } 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<StyledRootProps, '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<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\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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"}
1
+ {"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n variant?: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ variant, size, children }) => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\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 { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n gap: '$0',\n },\n },\n },\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1,\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\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',\n color: '$text-primary-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n color: '$text-neutrals-subtle-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n },\n tabs: {\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-small',\n borderRadius: '$25',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n borderBottom: '2px solid $border-neutrals',\n\n _hover: {\n color: '$text-neutrals-hover',\n borderBottom: '2px solid $border-neutrals-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n borderBottom: '2px solid $border-primary',\n },\n\n '&[data-pressed]': {\n color: '$text-neutrals-active',\n borderBottom: '2px solid $border-neutrals-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n borderBottom: '2px solid $border-neutrals-disabled',\n },\n },\n },\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 compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n paddingX: '$75',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n paddingX: '25$',\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'panel'\n */\n variant?: StyledTriggerProps['variant']\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<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\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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"}
package/dist/types.d.ts CHANGED
@@ -5,30 +5,50 @@ import react__default, { ComponentPropsWithRef } from 'react';
5
5
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
6
6
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
7
7
  import { StrictComponentProps } from '@mirohq/design-system-stitches';
8
+ import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
8
9
  import * as packages_components_internal_base_button_src_base_button from 'packages/components/internal/base-button/src/base-button';
9
10
  import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-hooks/use-press';
10
11
  import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
11
- import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
12
+
13
+ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
14
+ declare type StyledIconSlotProps = react__default.ComponentPropsWithRef<typeof StyledIconSlot>;
15
+ interface IconSlotProps extends StyledIconSlotProps {
16
+ /**
17
+ * The icon.
18
+ */
19
+ children: react__default.ReactNode;
20
+ }
21
+ declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
22
+
23
+ declare const ListStyled: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
24
+ variant?: "buttons" | "tabs" | undefined;
25
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>, {
26
+ variant?: "buttons" | "tabs" | undefined;
27
+ }, {}>;
28
+ declare type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
29
+
30
+ declare type ListProps = StyledListProps & {};
31
+ declare const List: react__default.ForwardRefExoticComponent<Omit<ListProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
12
32
 
13
33
  declare const StyledRoot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
14
34
  declare type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
15
35
 
16
- declare const List: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
17
- declare type ListProps = StrictComponentProps<typeof List>;
18
-
19
36
  declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
20
37
  children?: react.ReactNode;
21
- }, "size"> & _stitches_react_types_styled_component.TransformProps<{
38
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
39
+ variant?: "buttons" | "tabs" | undefined;
22
40
  size?: "medium" | "large" | "x-large" | undefined;
23
41
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
24
42
  href: string;
25
43
  }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
26
44
  children?: react.ReactNode;
27
- }, "size"> & _stitches_react_types_styled_component.TransformProps<{
45
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
46
+ variant?: "buttons" | "tabs" | undefined;
28
47
  size?: "medium" | "large" | "x-large" | undefined;
29
48
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
30
49
  href: string;
31
50
  }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
51
+ variant?: "buttons" | "tabs" | undefined;
32
52
  size?: "medium" | "large" | "x-large" | undefined;
33
53
  }, {}>;
34
54
  declare type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
@@ -41,7 +61,8 @@ declare type TriggerProps = StyledTriggerProps & {
41
61
  };
42
62
  declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
43
63
  children?: react__default.ReactNode;
44
- }, "size"> & _stitches_react_types_styled_component.TransformProps<{
64
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
65
+ variant?: "buttons" | "tabs" | undefined;
45
66
  size?: "medium" | "large" | "x-large" | undefined;
46
67
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
47
68
  /**
@@ -52,7 +73,8 @@ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<
52
73
  href: string;
53
74
  }, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
54
75
  children?: react__default.ReactNode;
55
- }, "size"> & _stitches_react_types_styled_component.TransformProps<{
76
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
77
+ variant?: "buttons" | "tabs" | undefined;
56
78
  size?: "medium" | "large" | "x-large" | undefined;
57
79
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
58
80
  /**
@@ -61,17 +83,12 @@ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<
61
83
  value: string;
62
84
  }, "ref">) & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
63
85
 
64
- declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
65
- declare type StyledIconSlotProps = react__default.ComponentPropsWithRef<typeof StyledIconSlot>;
66
- interface IconSlotProps extends StyledIconSlotProps {
86
+ interface TabsProps extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {
67
87
  /**
68
- * The icon.
88
+ * Change the Tabs style
89
+ * @default 'panel'
69
90
  */
70
- children: react__default.ReactNode;
71
- }
72
- declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
73
-
74
- interface TabsProps extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {
91
+ variant?: StyledTriggerProps['variant'];
75
92
  /**
76
93
  * The value of the tab that should be active when initially rendered.
77
94
  * Use when you do not need to control the state of the tabs.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-tabs",
3
- "version": "0.2.19",
3
+ "version": "0.3.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,12 +27,12 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@radix-ui/react-tabs": "^1.0.0",
30
- "@mirohq/design-system-base-button": "^0.4.58",
30
+ "@mirohq/design-system-base-button": "^0.4.59",
31
31
  "@mirohq/design-system-base-icon": "^0.1.33",
32
- "@mirohq/design-system-stitches": "^2.6.21",
32
+ "@mirohq/design-system-primitive": "^1.1.2",
33
+ "@mirohq/design-system-stitches": "^2.6.22",
33
34
  "@mirohq/design-system-utils": "^0.15.4",
34
- "@mirohq/design-system-styles": "^1.2.21",
35
- "@mirohq/design-system-primitive": "^1.1.2"
35
+ "@mirohq/design-system-styles": "^1.2.22"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rollup -c ../../../rollup.config.js",