@mirohq/design-system-tabs 1.2.1 → 1.2.2

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 (5) hide show
  1. package/dist/main.js +62 -12
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +62 -12
  4. package/dist/module.js.map +1 -1
  5. package/package.json +3 -2
package/dist/main.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var RadixTabs = require('@radix-ui/react-tabs');
5
+ var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
5
6
  var React = require('react');
6
7
  var designSystemStitches = require('@mirohq/design-system-stitches');
7
8
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
@@ -36,13 +37,15 @@ const TabsContext = React.createContext({
36
37
  const TabsContextProvider = ({
37
38
  variant,
38
39
  size,
40
+ onValueChange,
39
41
  children
40
42
  }) => /* @__PURE__ */ jsxRuntime.jsx(
41
43
  TabsContext.Provider,
42
44
  {
43
45
  value: {
44
46
  variant,
45
- size
47
+ size,
48
+ onValueChange
46
49
  },
47
50
  children
48
51
  }
@@ -221,8 +224,22 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
221
224
  ]
222
225
  });
223
226
 
224
- const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
225
- const { variant, size } = React.useContext(TabsContext);
227
+ const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {
228
+ const { variant, size, onValueChange } = React.useContext(TabsContext);
229
+ const handleMouseDown = (e) => {
230
+ onMouseDown == null ? void 0 : onMouseDown(e);
231
+ if (restProps.disabled === true) {
232
+ return;
233
+ }
234
+ e.preventDefault();
235
+ };
236
+ const handleClick = (e) => {
237
+ if (restProps.disabled === true) {
238
+ return;
239
+ }
240
+ onClick == null ? void 0 : onClick(e);
241
+ onValueChange == null ? void 0 : onValueChange(value);
242
+ };
226
243
  return /* @__PURE__ */ jsxRuntime.jsx(
227
244
  TriggerStyled,
228
245
  {
@@ -233,20 +250,53 @@ const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef)
233
250
  asChild: true,
234
251
  ref: forwardRef,
235
252
  variant,
236
- children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, children })
253
+ children: /* @__PURE__ */ jsxRuntime.jsx(
254
+ RadixTabs__namespace.Trigger,
255
+ {
256
+ value,
257
+ onMouseDown: handleMouseDown,
258
+ onClick: handleClick,
259
+ children
260
+ }
261
+ )
237
262
  }
238
263
  );
239
264
  });
240
265
 
241
- const Tabs = React.forwardRef(({ variant = "tabs", size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(TabsContextProvider, { variant, size, children: /* @__PURE__ */ jsxRuntime.jsx(
242
- StyledRoot,
243
- {
244
- ...props,
245
- ref: forwardRef,
246
- onValueChange: onChange,
247
- activationMode: "manual"
266
+ const Tabs = React.forwardRef(
267
+ ({
268
+ variant = "tabs",
269
+ size = "large",
270
+ onChange,
271
+ defaultValue,
272
+ value,
273
+ ...props
274
+ }, forwardRef) => {
275
+ const [currentValue, setCurrentValue] = reactUseControllableState.useControllableState({
276
+ prop: value,
277
+ defaultProp: defaultValue,
278
+ onChange
279
+ });
280
+ return /* @__PURE__ */ jsxRuntime.jsx(
281
+ TabsContextProvider,
282
+ {
283
+ variant,
284
+ size,
285
+ onValueChange: setCurrentValue,
286
+ children: /* @__PURE__ */ jsxRuntime.jsx(
287
+ StyledRoot,
288
+ {
289
+ ...props,
290
+ ref: forwardRef,
291
+ value: currentValue,
292
+ onValueChange: setCurrentValue,
293
+ activationMode: "manual"
294
+ }
295
+ )
296
+ }
297
+ );
248
298
  }
249
- ) }));
299
+ );
250
300
  Tabs.List = List;
251
301
  Tabs.Trigger = Trigger;
252
302
  Tabs.Content = RadixTabs__namespace.Content;
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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n '&[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',\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":["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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n '&[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',\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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\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>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useControllableState"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import * as RadixTabs from '@radix-ui/react-tabs';
3
+ import { useControllableState } from '@radix-ui/react-use-controllable-state';
3
4
  import React from 'react';
4
5
  import { styled } from '@mirohq/design-system-stitches';
5
6
  import { Primitive } from '@mirohq/design-system-primitive';
@@ -15,13 +16,15 @@ const TabsContext = React.createContext({
15
16
  const TabsContextProvider = ({
16
17
  variant,
17
18
  size,
19
+ onValueChange,
18
20
  children
19
21
  }) => /* @__PURE__ */ jsx(
20
22
  TabsContext.Provider,
21
23
  {
22
24
  value: {
23
25
  variant,
24
- size
26
+ size,
27
+ onValueChange
25
28
  },
26
29
  children
27
30
  }
@@ -200,8 +203,22 @@ const TriggerStyled = styled(BaseButton, {
200
203
  ]
201
204
  });
202
205
 
203
- const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef) => {
204
- const { variant, size } = React.useContext(TabsContext);
206
+ const Trigger = React.forwardRef(({ children, value, onClick, onMouseDown, ...restProps }, forwardRef) => {
207
+ const { variant, size, onValueChange } = React.useContext(TabsContext);
208
+ const handleMouseDown = (e) => {
209
+ onMouseDown == null ? void 0 : onMouseDown(e);
210
+ if (restProps.disabled === true) {
211
+ return;
212
+ }
213
+ e.preventDefault();
214
+ };
215
+ const handleClick = (e) => {
216
+ if (restProps.disabled === true) {
217
+ return;
218
+ }
219
+ onClick == null ? void 0 : onClick(e);
220
+ onValueChange == null ? void 0 : onValueChange(value);
221
+ };
205
222
  return /* @__PURE__ */ jsx(
206
223
  TriggerStyled,
207
224
  {
@@ -212,20 +229,53 @@ const Trigger = React.forwardRef(({ children, value, ...restProps }, forwardRef)
212
229
  asChild: true,
213
230
  ref: forwardRef,
214
231
  variant,
215
- children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, children })
232
+ children: /* @__PURE__ */ jsx(
233
+ RadixTabs.Trigger,
234
+ {
235
+ value,
236
+ onMouseDown: handleMouseDown,
237
+ onClick: handleClick,
238
+ children
239
+ }
240
+ )
216
241
  }
217
242
  );
218
243
  });
219
244
 
220
- const Tabs = React.forwardRef(({ variant = "tabs", size = "large", onChange, ...props }, forwardRef) => /* @__PURE__ */ jsx(TabsContextProvider, { variant, size, children: /* @__PURE__ */ jsx(
221
- StyledRoot,
222
- {
223
- ...props,
224
- ref: forwardRef,
225
- onValueChange: onChange,
226
- activationMode: "manual"
245
+ const Tabs = React.forwardRef(
246
+ ({
247
+ variant = "tabs",
248
+ size = "large",
249
+ onChange,
250
+ defaultValue,
251
+ value,
252
+ ...props
253
+ }, forwardRef) => {
254
+ const [currentValue, setCurrentValue] = useControllableState({
255
+ prop: value,
256
+ defaultProp: defaultValue,
257
+ onChange
258
+ });
259
+ return /* @__PURE__ */ jsx(
260
+ TabsContextProvider,
261
+ {
262
+ variant,
263
+ size,
264
+ onValueChange: setCurrentValue,
265
+ children: /* @__PURE__ */ jsx(
266
+ StyledRoot,
267
+ {
268
+ ...props,
269
+ ref: forwardRef,
270
+ value: currentValue,
271
+ onValueChange: setCurrentValue,
272
+ activationMode: "manual"
273
+ }
274
+ )
275
+ }
276
+ );
227
277
  }
228
- ) }));
278
+ );
229
279
  Tabs.List = List;
230
280
  Tabs.Trigger = Trigger;
231
281
  Tabs.Content = RadixTabs.Content;
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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n '&[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',\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\ninterface TabsContextProps {\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n onValueChange?: (value: string) => void\n}\n\ninterface TabsContextProviderProps extends TabsContextProps {\n children: React.ReactNode\n}\n\nexport const TabsContext = React.createContext<TabsContextProps>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider = ({\n variant,\n size,\n onValueChange,\n children,\n}: TabsContextProviderProps): React.ReactNode => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n onValueChange,\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',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n\n '&[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',\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, MouseEvent } 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, onClick, onMouseDown, ...restProps }, forwardRef) => {\n const { variant, size, onValueChange } = React.useContext(TabsContext)\n\n const handleMouseDown = (e: MouseEvent<HTMLButtonElement>): void => {\n // Forward user's onMouseDown handler if provided\n onMouseDown?.(e)\n\n if (restProps.disabled === true) {\n return\n }\n e.preventDefault()\n }\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {\n if (restProps.disabled === true) {\n return\n }\n\n onClick?.(e)\n onValueChange?.(value)\n }\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\n value={value}\n onMouseDown={handleMouseDown}\n onClick={handleClick}\n >\n {children}\n </RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport { useControllableState } from '@radix-ui/react-use-controllable-state'\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>(\n (\n {\n variant = 'tabs',\n size = 'large',\n onChange,\n defaultValue,\n value,\n ...props\n },\n forwardRef\n ) => {\n const [currentValue, setCurrentValue] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n })\n\n return (\n <TabsContextProvider\n variant={variant}\n size={size}\n onValueChange={setCurrentValue}\n >\n <StyledRoot\n {...props}\n ref={forwardRef}\n value={currentValue}\n onValueChange={setCurrentValue}\n activationMode='manual'\n />\n </TabsContextProvider>\n )\n }\n) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-tabs",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
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
+ "@radix-ui/react-use-controllable-state": "1.1.1",
30
31
  "@mirohq/design-system-base-button": "^1.2.1",
31
32
  "@mirohq/design-system-base-icon": "^1.2.0",
32
- "@mirohq/design-system-primitive": "^2.2.0",
33
33
  "@mirohq/design-system-stitches": "^3.2.1",
34
34
  "@mirohq/design-system-styles": "^3.1.1",
35
+ "@mirohq/design-system-primitive": "^2.2.0",
35
36
  "@mirohq/design-system-utils": "^1.2.2"
36
37
  },
37
38
  "scripts": {