@mirohq/design-system-tabs 0.5.0-new-focus-keyboard.1 → 0.5.1-sync-design-tokens.0

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 +27 -3
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +27 -3
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +52 -23
  6. package/package.json +5 -4
package/dist/main.js CHANGED
@@ -9,6 +9,7 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
9
9
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
10
10
  var designSystemUtils = require('@mirohq/design-system-utils');
11
11
  var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
12
+ var designSystemExperiments = require('@mirohq/design-system-experiments');
12
13
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
13
14
  var designSystemStyles = require('@mirohq/design-system-styles');
14
15
 
@@ -122,10 +123,14 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
122
123
  border: "1px solid transparent",
123
124
  gap: "$50",
124
125
  variants: {
126
+ v1: {
127
+ true: {},
128
+ false: {}
129
+ },
125
130
  variant: {
126
131
  buttons: {
127
132
  ...designSystemStyles.focus.css({
128
- boxShadow: "$focus-keyboard"
133
+ boxShadow: "$focus-small"
129
134
  }),
130
135
  backgroundColor: "transparent",
131
136
  color: "$text-neutrals-subtle",
@@ -134,7 +139,6 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
134
139
  color: "$text-neutrals-subtle-hover"
135
140
  },
136
141
  "&[data-state=active]": {
137
- backgroundColor: "$background-primary-subtle",
138
142
  color: "$text-primary-selected"
139
143
  },
140
144
  "&[data-pressed]": {
@@ -151,7 +155,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
151
155
  border: "none",
152
156
  borderRadius: "0",
153
157
  ...designSystemStyles.focus.css({
154
- boxShadow: "$focus-keyboard",
158
+ boxShadow: "$focus-small",
155
159
  borderRadius: "$25",
156
160
  borderBottom: "unset !important"
157
161
  }),
@@ -219,12 +223,31 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
219
223
  height: "$10",
220
224
  paddingX: "$25"
221
225
  }
226
+ },
227
+ {
228
+ variant: "buttons",
229
+ v1: false,
230
+ css: {
231
+ "&[data-state=active]": {
232
+ backgroundColor: "$background-primary-subtle"
233
+ }
234
+ }
235
+ },
236
+ {
237
+ variant: "buttons",
238
+ v1: true,
239
+ css: {
240
+ "&[data-state=active]": {
241
+ backgroundColor: "$background-primary-subtle-selected"
242
+ }
243
+ }
222
244
  }
223
245
  ]
224
246
  });
225
247
 
226
248
  const Trigger = React__default["default"].forwardRef(({ children, value, ...restProps }, forwardRef) => {
227
249
  const { variant, size } = React__default["default"].useContext(TabsContext);
250
+ const [v1] = designSystemExperiments.useNewDesignLanguage();
228
251
  return /* @__PURE__ */ jsxRuntime.jsx(
229
252
  TriggerStyled,
230
253
  {
@@ -235,6 +258,7 @@ const Trigger = React__default["default"].forwardRef(({ children, value, ...rest
235
258
  asChild: true,
236
259
  ref: forwardRef,
237
260
  variant,
261
+ v1,
238
262
  children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
239
263
  }
240
264
  );
package/dist/main.js.map CHANGED
@@ -1 +1 @@
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 flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\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, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} 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.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus-keyboard',\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 marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-keyboard',\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 paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\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 'tabs'\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":"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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 flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\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, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} 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.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\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 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 marginBottom: '-$25',\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 paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n {\n variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 const [v1] = useNewDesignLanguage()\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 v1={v1}\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 'tabs'\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","useNewDesignLanguage"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -5,6 +5,7 @@ import { styled } from '@mirohq/design-system-stitches';
5
5
  import { Primitive } from '@mirohq/design-system-primitive';
6
6
  import { addPropsToChildren } from '@mirohq/design-system-utils';
7
7
  import { isIconComponent } from '@mirohq/design-system-base-icon';
8
+ import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
8
9
  import { BaseButton, sizes } from '@mirohq/design-system-base-button';
9
10
  import { focus } from '@mirohq/design-system-styles';
10
11
 
@@ -95,10 +96,14 @@ const TriggerStyled = styled(BaseButton, {
95
96
  border: "1px solid transparent",
96
97
  gap: "$50",
97
98
  variants: {
99
+ v1: {
100
+ true: {},
101
+ false: {}
102
+ },
98
103
  variant: {
99
104
  buttons: {
100
105
  ...focus.css({
101
- boxShadow: "$focus-keyboard"
106
+ boxShadow: "$focus-small"
102
107
  }),
103
108
  backgroundColor: "transparent",
104
109
  color: "$text-neutrals-subtle",
@@ -107,7 +112,6 @@ const TriggerStyled = styled(BaseButton, {
107
112
  color: "$text-neutrals-subtle-hover"
108
113
  },
109
114
  "&[data-state=active]": {
110
- backgroundColor: "$background-primary-subtle",
111
115
  color: "$text-primary-selected"
112
116
  },
113
117
  "&[data-pressed]": {
@@ -124,7 +128,7 @@ const TriggerStyled = styled(BaseButton, {
124
128
  border: "none",
125
129
  borderRadius: "0",
126
130
  ...focus.css({
127
- boxShadow: "$focus-keyboard",
131
+ boxShadow: "$focus-small",
128
132
  borderRadius: "$25",
129
133
  borderBottom: "unset !important"
130
134
  }),
@@ -192,12 +196,31 @@ const TriggerStyled = styled(BaseButton, {
192
196
  height: "$10",
193
197
  paddingX: "$25"
194
198
  }
199
+ },
200
+ {
201
+ variant: "buttons",
202
+ v1: false,
203
+ css: {
204
+ "&[data-state=active]": {
205
+ backgroundColor: "$background-primary-subtle"
206
+ }
207
+ }
208
+ },
209
+ {
210
+ variant: "buttons",
211
+ v1: true,
212
+ css: {
213
+ "&[data-state=active]": {
214
+ backgroundColor: "$background-primary-subtle-selected"
215
+ }
216
+ }
195
217
  }
196
218
  ]
197
219
  });
198
220
 
199
221
  const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
200
222
  const { variant, size } = React.useContext(TabsContext);
223
+ const [v1] = useNewDesignLanguage();
201
224
  return /* @__PURE__ */ jsx(
202
225
  TriggerStyled,
203
226
  {
@@ -208,6 +231,7 @@ const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef)
208
231
  asChild: true,
209
232
  ref: forwardRef,
210
233
  variant,
234
+ v1,
211
235
  children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
212
236
  }
213
237
  );
package/dist/module.js.map CHANGED
@@ -1 +1 @@
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 flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\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, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} 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.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus-keyboard',\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 marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-keyboard',\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 paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\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 'tabs'\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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"}
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 flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\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, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} 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.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\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 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 marginBottom: '-$25',\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 paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n {\n variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 const [v1] = useNewDesignLanguage()\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 v1={v1}\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 'tabs'\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
@@ -11,7 +11,7 @@ import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-ho
11
11
  import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
12
12
 
13
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>;
14
+ type StyledIconSlotProps = react__default.ComponentPropsWithRef<typeof StyledIconSlot>;
15
15
  interface IconSlotProps extends StyledIconSlotProps {
16
16
  /**
17
17
  * The icon.
@@ -27,58 +27,87 @@ declare const ListStyled: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
27
27
  variant?: "buttons" | "tabs" | undefined;
28
28
  size?: "medium" | "large" | "x-large" | undefined;
29
29
  }, {}>;
30
- declare type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
30
+ type StyledListProps = ComponentPropsWithRef<typeof ListStyled>;
31
31
 
32
- declare type ListProps = StyledListProps & {};
32
+ type ListProps = StyledListProps & {};
33
33
  declare const List: react__default.ForwardRefExoticComponent<Omit<ListProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
34
34
 
35
35
  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>>, {}, {}>;
36
- declare type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
36
+ type StyledRootProps = StrictComponentProps<typeof StyledRoot>;
37
37
 
38
- 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> & {
39
- children?: react.ReactNode;
40
- }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
38
+ declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<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>, "ref"> & {
39
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
40
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
41
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
42
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
43
+ children?: react.ReactNode | undefined;
44
+ }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
45
+ v1?: boolean | "true" | "false" | undefined;
41
46
  variant?: "buttons" | "tabs" | undefined;
42
47
  size?: "medium" | "large" | "x-large" | undefined;
43
- }, {}> & _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"> & {
48
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<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>, "ref"> & {
49
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
50
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
44
51
  href: string;
45
- }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
46
- children?: react.ReactNode;
47
- }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
52
+ }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
53
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
54
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
55
+ children?: react.ReactNode | undefined;
56
+ }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
57
+ v1?: boolean | "true" | "false" | undefined;
48
58
  variant?: "buttons" | "tabs" | undefined;
49
59
  size?: "medium" | "large" | "x-large" | undefined;
50
- }, {}> & _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"> & {
60
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(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>, "ref"> & {
61
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
62
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | 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>, "ref"> & {
63
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
64
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
51
65
  href: string;
52
66
  }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
67
+ v1?: boolean | "true" | "false" | undefined;
53
68
  variant?: "buttons" | "tabs" | undefined;
54
69
  size?: "medium" | "large" | "x-large" | undefined;
55
70
  }, {}>;
56
- declare type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
71
+ type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>;
57
72
 
58
- declare type TriggerProps = StyledTriggerProps & {
73
+ type TriggerProps = StyledTriggerProps & {
59
74
  /**
60
75
  * A unique value that associates the trigger with a content.
61
76
  */
62
77
  value: string;
63
78
  };
64
- 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> & {
65
- children?: react__default.ReactNode;
66
- }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
79
+ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<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>, "ref"> & {
80
+ ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
81
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
82
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
83
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
84
+ children?: react__default.ReactNode | undefined;
85
+ }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
86
+ v1?: boolean | "true" | "false" | undefined;
67
87
  variant?: "buttons" | "tabs" | undefined;
68
88
  size?: "medium" | "large" | "x-large" | undefined;
69
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
89
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
90
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
91
+ } & {
70
92
  /**
71
93
  * A unique value that associates the trigger with a content.
72
94
  */
73
95
  value: string;
74
- }, "ref"> | 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 & react__default.AnchorHTMLAttributes<"a"> & {
96
+ }, "ref"> | Omit<Omit<Omit<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>, "ref"> & {
97
+ ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
98
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
75
99
  href: string;
76
- }, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
77
- children?: react__default.ReactNode;
78
- }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
100
+ }, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
101
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
102
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
103
+ children?: react__default.ReactNode | undefined;
104
+ }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
105
+ v1?: boolean | "true" | "false" | undefined;
79
106
  variant?: "buttons" | "tabs" | undefined;
80
107
  size?: "medium" | "large" | "x-large" | undefined;
81
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
108
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
109
+ ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
110
+ } & {
82
111
  /**
83
112
  * A unique value that associates the trigger with a content.
84
113
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-tabs",
3
- "version": "0.5.0-new-focus-keyboard.1",
3
+ "version": "0.5.1-sync-design-tokens.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,11 +27,12 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@radix-ui/react-tabs": "^1.0.0",
30
- "@mirohq/design-system-base-button": "^0.4.69-new-focus-keyboard.1",
31
30
  "@mirohq/design-system-base-icon": "^0.1.33",
31
+ "@mirohq/design-system-base-button": "^0.5.1-sync-design-tokens.0",
32
+ "@mirohq/design-system-experiments": "^0.2.0",
32
33
  "@mirohq/design-system-primitive": "^1.1.2",
33
- "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.1",
34
- "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.1",
34
+ "@mirohq/design-system-stitches": "^2.6.31-sync-design-tokens.0",
35
+ "@mirohq/design-system-styles": "^1.2.31-sync-design-tokens.0",
35
36
  "@mirohq/design-system-utils": "^0.15.5"
36
37
  },
37
38
  "scripts": {