@mirohq/design-system-tabs 0.5.1-sync-design-tokens.2 → 0.5.2-new-focus-keyboard.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.
- package/dist/main.js +7 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +7 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -40,7 +40,11 @@ const TabsContext = React__default["default"].createContext({
|
|
|
40
40
|
variant: "tabs",
|
|
41
41
|
size: "medium"
|
|
42
42
|
});
|
|
43
|
-
const TabsContextProvider = ({
|
|
43
|
+
const TabsContextProvider = ({
|
|
44
|
+
variant,
|
|
45
|
+
size,
|
|
46
|
+
children
|
|
47
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
44
48
|
TabsContext.Provider,
|
|
45
49
|
{
|
|
46
50
|
value: {
|
|
@@ -130,7 +134,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
|
|
|
130
134
|
variant: {
|
|
131
135
|
buttons: {
|
|
132
136
|
...designSystemStyles.focus.css({
|
|
133
|
-
boxShadow: "$focus
|
|
137
|
+
boxShadow: "$focus"
|
|
134
138
|
}),
|
|
135
139
|
backgroundColor: "transparent",
|
|
136
140
|
color: "$text-neutrals-subtle",
|
|
@@ -155,7 +159,7 @@ const TriggerStyled = designSystemStitches.styled(designSystemBaseButton.BaseBut
|
|
|
155
159
|
border: "none",
|
|
156
160
|
borderRadius: "0",
|
|
157
161
|
...designSystemStyles.focus.css({
|
|
158
|
-
boxShadow: "$focus
|
|
162
|
+
boxShadow: "$focus",
|
|
159
163
|
borderRadius: "$25",
|
|
160
164
|
borderBottom: "unset !important"
|
|
161
165
|
}),
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n variant?: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ variant, size, children }) => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n color: '$text-neutrals-subtle-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-small',\n borderRadius: '$25',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n borderBottom: '2px solid $border-neutrals',\n\n _hover: {\n color: '$text-neutrals-hover',\n borderBottom: '2px solid $border-neutrals-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n borderBottom: '2px solid $border-primary',\n },\n\n '&[data-pressed]': {\n color: '$text-neutrals-active',\n borderBottom: '2px solid $border-neutrals-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n borderBottom: '2px solid $border-neutrals-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n {\n variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n const [v1] = useNewDesignLanguage()\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n v1={v1}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["React","jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useNewDesignLanguage"],"mappings":"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"}
|
|
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 v1: {\n true: {},\n false: {},\n },\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 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 variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n const [v1] = useNewDesignLanguage()\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n v1={v1}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":["React","jsx","styled","Primitive","addPropsToChildren","isIconComponent","RadixTabs","BaseButton","focus","sizes","useNewDesignLanguage"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -13,7 +13,11 @@ const TabsContext = React.createContext({
|
|
|
13
13
|
variant: "tabs",
|
|
14
14
|
size: "medium"
|
|
15
15
|
});
|
|
16
|
-
const TabsContextProvider = ({
|
|
16
|
+
const TabsContextProvider = ({
|
|
17
|
+
variant,
|
|
18
|
+
size,
|
|
19
|
+
children
|
|
20
|
+
}) => /* @__PURE__ */ jsx(
|
|
17
21
|
TabsContext.Provider,
|
|
18
22
|
{
|
|
19
23
|
value: {
|
|
@@ -103,7 +107,7 @@ const TriggerStyled = styled(BaseButton, {
|
|
|
103
107
|
variant: {
|
|
104
108
|
buttons: {
|
|
105
109
|
...focus.css({
|
|
106
|
-
boxShadow: "$focus
|
|
110
|
+
boxShadow: "$focus"
|
|
107
111
|
}),
|
|
108
112
|
backgroundColor: "transparent",
|
|
109
113
|
color: "$text-neutrals-subtle",
|
|
@@ -128,7 +132,7 @@ const TriggerStyled = styled(BaseButton, {
|
|
|
128
132
|
border: "none",
|
|
129
133
|
borderRadius: "0",
|
|
130
134
|
...focus.css({
|
|
131
|
-
boxShadow: "$focus
|
|
135
|
+
boxShadow: "$focus",
|
|
132
136
|
borderRadius: "$25",
|
|
133
137
|
borderBottom: "unset !important"
|
|
134
138
|
}),
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/partials/provider.tsx","../src/partials/icon-slot.tsx","../src/partials/list.styled.tsx","../src/partials/list.tsx","../src/partials/root.styled.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/tabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport const TabsContext = React.createContext<{\n variant?: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n}>({\n variant: 'tabs',\n size: 'medium',\n})\n\nexport const TabsContextProvider: React.FC<{\n variant: StyledTriggerProps['variant']\n size: StyledTriggerProps['size']\n children: React.ReactNode\n}> = ({ variant, size, children }) => (\n <TabsContext.Provider\n value={{\n variant,\n size,\n }}\n >\n {children}\n </TabsContext.Provider>\n)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\n\nimport { TabsContext } from './provider'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\n\nexport type StyledIconSlotProps = React.ComponentPropsWithRef<\n typeof StyledIconSlot\n>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n React.ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { size } = React.useContext(TabsContext)\n\n const formattedChildren = addPropsToChildren(children, isIconComponent, {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n })\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const ListStyled = styled(RadixTabs.List, {\n display: 'flex',\n flexDirection: 'row',\n\n variants: {\n variant: {\n buttons: {},\n tabs: {\n borderBottom: '2px solid $border-neutrals',\n },\n },\n size: {\n medium: { gap: '$50' },\n large: { gap: '$100' },\n 'x-large': { gap: '$150' },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n gap: '$200',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n gap: '$100',\n },\n },\n ],\n})\n\nexport type StyledListProps = ComponentPropsWithRef<typeof ListStyled>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledListProps } from './list.styled'\nimport { ListStyled } from './list.styled'\nimport { TabsContext } from './provider'\n\nexport type ListProps = StyledListProps & {}\n\nexport const List = React.forwardRef<ElementRef<typeof ListStyled>, ListProps>(\n ({ children, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n\n return (\n <ListStyled {...restProps} variant={variant} size={size} ref={forwardRef}>\n {children}\n </ListStyled>\n )\n }\n)\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport * as RadixTabs from '@radix-ui/react-tabs'\n\nexport const StyledRoot = styled(RadixTabs.Root, {\n display: 'flex',\n gap: '$100',\n flexDirection: 'column',\n})\n\nexport type StyledRootProps = StrictComponentProps<typeof StyledRoot>\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst LABEL_OFFSET = 2\n\nexport const TriggerStyled = styled(BaseButton, {\n lineHeight: 1.2,\n fontWeight: '$semibold',\n border: '1px solid transparent',\n gap: '$50',\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n variant: {\n buttons: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n color: '$text-neutrals-subtle-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n },\n\n '&[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n color: '$text-neutrals-subtle-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n },\n },\n tabs: {\n marginBottom: '-$25',\n border: 'none',\n borderRadius: '0',\n ...focus.css({\n boxShadow: '$focus-small',\n borderRadius: '$25',\n borderBottom: 'unset !important',\n }),\n\n backgroundColor: 'transparent',\n color: '$text-neutrals-subtle',\n borderBottom: '2px solid $border-neutrals',\n\n _hover: {\n color: '$text-neutrals-hover',\n borderBottom: '2px solid $border-neutrals-hover',\n },\n\n '&[data-state=active]': {\n color: '$text-primary-selected',\n borderBottom: '2px solid $border-primary',\n },\n\n '&[data-pressed]': {\n color: '$text-neutrals-active',\n borderBottom: '2px solid $border-neutrals-active',\n },\n\n '&[disabled], &[aria-disabled]': {\n backgroundColor: 'transparent',\n color: '$text-neutrals-disabled',\n borderBottom: '2px solid $border-neutrals-disabled',\n },\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$250',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n },\n },\n },\n compoundVariants: [\n {\n variant: 'tabs',\n size: 'x-large',\n css: {\n height: '$14',\n paddingX: '$100',\n },\n },\n {\n variant: 'tabs',\n size: 'large',\n css: {\n height: '$12',\n paddingX: '$50',\n },\n },\n {\n variant: 'tabs',\n size: 'medium',\n css: {\n height: '$10',\n paddingX: '$25',\n },\n },\n {\n variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n const [v1] = useNewDesignLanguage()\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n v1={v1}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
|
|
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 v1: {\n true: {},\n false: {},\n },\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 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 variant: 'buttons',\n v1: false,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle',\n },\n },\n },\n {\n variant: 'buttons',\n v1: true,\n css: {\n '&[data-state=active]': {\n backgroundColor: '$background-primary-subtle-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledTriggerProps = ComponentPropsWithRef<typeof TriggerStyled>\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\nimport type { ElementRef } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport { TabsContext } from './provider'\nimport { TriggerStyled } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport type TriggerProps = StyledTriggerProps & {\n /**\n * A unique value that associates the trigger with a content.\n */\n value: string\n}\n\nexport const Trigger = React.forwardRef<\n ElementRef<typeof TriggerStyled>,\n TriggerProps\n>(({ children, value, ...restProps }, forwardRef) => {\n const { variant, size } = React.useContext(TabsContext)\n const [v1] = useNewDesignLanguage()\n\n return (\n <TriggerStyled\n {...restProps}\n size={size}\n preventFocusOnPress='auto'\n role='tab'\n asChild\n ref={forwardRef}\n variant={variant}\n v1={v1}\n >\n <RadixTabs.Trigger value={value}>{children}</RadixTabs.Trigger>\n </TriggerStyled>\n )\n})\n","import * as RadixTabs from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { IconSlot } from './partials/icon-slot'\nimport { List } from './partials/list'\nimport { TabsContextProvider } from './partials/provider'\nimport { StyledRoot } from './partials/root.styled'\nimport type { StyledRootProps } from './partials/root.styled'\nimport { Trigger } from './partials/trigger'\nimport type { StyledTriggerProps } from './partials/trigger.styled'\n\nexport interface TabsProps\n extends Omit<StyledRootProps, 'onValueChange' | 'onChange'> {\n /**\n * Change the Tabs style\n * @default 'tabs'\n */\n variant?: StyledTriggerProps['variant']\n /**\n * The value of the tab that should be active when initially rendered.\n * Use when you do not need to control the state of the tabs.\n */\n defaultValue?: string\n /**\n * The controlled value of the tab to activate.\n * Should be used in conjunction with onChange.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n * @param id the value associated with the newly selected tab.\n */\n onChange?: (id: string) => void\n /**\n * The tabs size.\n */\n size?: StyledTriggerProps['size']\n}\n\nexport const Tabs = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n TabsProps\n>(({ variant = 'tabs', size = 'large', onChange, ...props }, forwardRef) => (\n <TabsContextProvider variant={variant} size={size}>\n <StyledRoot\n {...props}\n ref={forwardRef}\n onValueChange={onChange}\n activationMode='manual'\n />\n </TabsContextProvider>\n)) as React.ForwardRefExoticComponent<TabsProps> & Partials\n\ninterface Partials {\n List: typeof List\n Trigger: typeof Trigger\n Content: typeof RadixTabs.Content\n IconSlot: typeof IconSlot\n}\n\nTabs.List = List\nTabs.Trigger = Trigger\nTabs.Content = RadixTabs.Content\nTabs.IconSlot = IconSlot\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omi
|
|
|
40
40
|
} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
|
|
41
41
|
ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
|
|
42
42
|
}, _mirohq_design_system_stitches.ForbiddenProps> & {
|
|
43
|
-
children?:
|
|
43
|
+
children?: React.ReactNode;
|
|
44
44
|
}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
45
45
|
v1?: boolean | "true" | "false" | undefined;
|
|
46
46
|
variant?: "buttons" | "tabs" | undefined;
|
|
@@ -52,7 +52,7 @@ declare const TriggerStyled: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omi
|
|
|
52
52
|
}, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
|
|
53
53
|
ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
|
|
54
54
|
}, _mirohq_design_system_stitches.ForbiddenProps> & {
|
|
55
|
-
children?:
|
|
55
|
+
children?: React.ReactNode;
|
|
56
56
|
}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
57
57
|
v1?: boolean | "true" | "false" | undefined;
|
|
58
58
|
variant?: "buttons" | "tabs" | undefined;
|
|
@@ -81,7 +81,7 @@ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<
|
|
|
81
81
|
} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
|
|
82
82
|
ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
|
|
83
83
|
}, _mirohq_design_system_stitches.ForbiddenProps> & {
|
|
84
|
-
children?: react__default.ReactNode
|
|
84
|
+
children?: react__default.ReactNode;
|
|
85
85
|
}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
86
86
|
v1?: boolean | "true" | "false" | undefined;
|
|
87
87
|
variant?: "buttons" | "tabs" | undefined;
|
|
@@ -100,7 +100,7 @@ declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<
|
|
|
100
100
|
}, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
|
|
101
101
|
ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
|
|
102
102
|
}, _mirohq_design_system_stitches.ForbiddenProps> & {
|
|
103
|
-
children?: react__default.ReactNode
|
|
103
|
+
children?: react__default.ReactNode;
|
|
104
104
|
}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
105
105
|
v1?: boolean | "true" | "false" | undefined;
|
|
106
106
|
variant?: "buttons" | "tabs" | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-tabs",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2-new-focus-keyboard.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@radix-ui/react-tabs": "^1.0.0",
|
|
30
|
-
"@mirohq/design-system-base-button": "^0.5.
|
|
30
|
+
"@mirohq/design-system-base-button": "^0.5.2-new-focus-keyboard.2",
|
|
31
31
|
"@mirohq/design-system-base-icon": "^0.1.33",
|
|
32
32
|
"@mirohq/design-system-experiments": "^0.2.0",
|
|
33
33
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
34
|
-
"@mirohq/design-system-stitches": "^2.6.
|
|
35
|
-
"@mirohq/design-system-styles": "^1.2.
|
|
36
|
-
"@mirohq/design-system-utils": "^0.15.
|
|
34
|
+
"@mirohq/design-system-stitches": "^2.6.32-new-focus-keyboard.2",
|
|
35
|
+
"@mirohq/design-system-styles": "^1.2.32-new-focus-keyboard.2",
|
|
36
|
+
"@mirohq/design-system-utils": "^0.15.6"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "rollup -c ../../../rollup.config.js",
|