@mirohq/design-system-tabs 0.4.0 → 0.4.2

package/dist/main.js.map

@@ -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-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        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})\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,aAAe,EAAA,KAAA;AAAA,EAEf,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,SAAS,EAAC;AAAA,MACV,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,4BAAA;AAAA,OAChB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAA,EAAQ,EAAE,GAAA,EAAK,KAAM,EAAA;AAAA,MACrB,KAAA,EAAO,EAAE,GAAA,EAAK,MAAO,EAAA;AAAA,MACrB,SAAA,EAAW,EAAE,GAAA,EAAK,MAAO,EAAA;AAAA,KAC3B;AAAA,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,SAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,GAAK,EAAA,MAAA;AAAA,OACP;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,GAAK,EAAA,MAAA;AAAA,OACP;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,QAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,GAAK,EAAA,MAAA;AAAA,OACP;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACnCM,MAAM,OAAON,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,GAAG,SAAA,IAAa,UAAe,KAAA;AAC1C,IAAA,MAAM,EAAE,OAAS,EAAA,IAAA,EAAS,GAAAA,yBAAA,CAAM,WAAW,WAAW,CAAA,CAAA;AAEtD,IACE,uBAAAC,cAAA,CAAC,cAAY,GAAG,SAAA,EAAW,SAAkB,IAAY,EAAA,GAAA,EAAK,YAC3D,QACH,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;;ACfa,MAAA,UAAA,GAAaC,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,GAAA;AAAA,EACZ,UAAY,EAAA,WAAA;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,YAAc,EAAA,MAAA;AAAA,QACd,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,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,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,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,MAAQ,EAAA,KAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,KAAA;AAAA,QACR,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,MAAQ,EAAA,KAAA;AAAA,QACR,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC5GY,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;;;;"}
+{"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-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        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})\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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"}

package/dist/module.js.map

@@ -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-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        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})\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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"}
+{"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-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        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})\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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"}

package/dist/types.d.ts

@@ -88,7 +88,7 @@ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<
 interface TabsProps extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {
     /**
      * Change the Tabs style
-     * @default 'panel'
+     * @default 'tabs'
      */
     variant?: StyledTriggerProps['variant'];
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tabs",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.0.0",
-    "@mirohq/design-system-base-button": "^0.4.60",
-    "@mirohq/design-system-stitches": "^2.6.23",
-    "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-styles": "^1.2.23",
+    "@mirohq/design-system-base-button": "^0.4.61",
     "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-primitive": "^1.1.2",
+    "@mirohq/design-system-stitches": "^2.6.24",
+    "@mirohq/design-system-styles": "^1.2.24",
     "@mirohq/design-system-utils": "^0.15.4"
   },
   "scripts": {