@smg-automotive/components 25.11.0-chakra-v3.2 → 25.11.0-chakra-v3.3

package/dist/cjs/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './simpleGrid';
 export * from './simpleHeader';
 export * from './stack';
 export * from './switch';
+export * from './tab';
 export * from './table';
 export * from './text';
 export * from './text/HighlightedText';

package/dist/cjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/cjs/components/tab/Tab.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+import { TabsTriggerProps as ChakraTabsTriggerProps, RecipeVariantProps } from '@chakra-ui/react';
+import { tabsRecipe } from 'src/themes/shared/slotRecipes/tabs';
+export type TabProps = Omit<ChakraTabsTriggerProps, 'variant'> & RecipeVariantProps<typeof tabsRecipe>;
+export declare const Tab: FC<PropsWithChildren<TabProps>>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/cjs/components/tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/Tab.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,gBAAgB,IAAI,sBAAsB,EAC1C,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAC5D,kBAAkB,CAAC,OAAO,UAAU,CAAC,CAAC;AAExC,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAa/C,CAAC"}

package/dist/cjs/components/tab/TabList.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+import { TabsListProps as ChakraTabsListProps, RecipeVariantProps } from '@chakra-ui/react';
+import { tabsRecipe } from 'src/themes/shared/slotRecipes/tabs';
+export type TabListProps = Omit<ChakraTabsListProps, 'variant'> & RecipeVariantProps<typeof tabsRecipe>;
+export declare const TabList: FC<PropsWithChildren<TabListProps>>;
+//# sourceMappingURL=TabList.d.ts.map

package/dist/cjs/components/tab/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/TabList.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,aAAa,IAAI,mBAAmB,EACpC,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAMhE,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,GAC7D,kBAAkB,CAAC,OAAO,UAAU,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAsBvD,CAAC"}

package/dist/cjs/components/tab/TabPanel.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+import { TabsContentProps as ChakraTabsContentProps, RecipeVariantProps } from '@chakra-ui/react';
+import { tabsRecipe } from 'src/themes/shared/slotRecipes/tabs';
+export type TabPanelProps = Omit<ChakraTabsContentProps, 'variant'> & RecipeVariantProps<typeof tabsRecipe>;
+export declare const TabPanel: FC<PropsWithChildren<TabPanelProps>>;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/cjs/components/tab/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/TabPanel.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,gBAAgB,IAAI,sBAAsB,EAC1C,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GACjE,kBAAkB,CAAC,OAAO,UAAU,CAAC,CAAC;AAExC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAazD,CAAC"}

package/dist/cjs/components/tab/TabPanels.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { tabsRecipe } from 'src/themes/shared/slotRecipes/tabs';
+export type TabPanelsProps = RecipeVariantProps<typeof tabsRecipe>;
+export declare const TabPanels: FC<PropsWithChildren<TabPanelsProps>>;
+//# sourceMappingURL=TabPanels.d.ts.map

package/dist/cjs/components/tab/TabPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanels.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/TabPanels.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAMhE,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAmB3D,CAAC"}

package/dist/cjs/components/tab/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { TabsRootProps as ChakraTabsRootProps, RecipeVariantProps } from '@chakra-ui/react';
+import { tabsRecipe } from 'src/themes/shared/slotRecipes/tabs';
+export type TabsProps = Omit<ChakraTabsRootProps, 'variant'> & RecipeVariantProps<typeof tabsRecipe>;
+export declare const Tabs: FC<PropsWithChildren<TabsProps>>;
+export { Tab, TabProps } from './Tab';
+export { TabList, TabListProps } from './TabList';
+export { TabPanel, TabPanelProps } from './TabPanel';
+export { TabPanels, TabPanelsProps } from './TabPanels';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,aAAa,IAAI,mBAAmB,EACpC,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAIhE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,GAC1D,kBAAkB,CAAC,OAAO,UAAU,CAAC,CAAC;AAExC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAoBjD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/cjs/index.js

@@ -523,6 +523,122 @@ var tooltipSlotRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var baseTriggerStyle$1 = react$1.defineStyle({
+    textStyle: 'body',
+    transitionProperty: 'common',
+    transitionDuration: 'normal',
+    '--tabs-border-width': '3px',
+    borderBottomWidth: 'var(--tabs-border-width)',
+    borderBottomStyle: 'var(--tabs-border-style, solid)',
+    borderBottomColor: 'transparent',
+    p: 'md',
+    color: 'gray.600',
+    cursor: 'pointer',
+    _selected: {
+        fontWeight: 'bold',
+        color: 'gray.900',
+        borderBottomWidth: 'var(--tabs-border-width)',
+        borderBottomStyle: 'var(--tabs-border-style, solid)',
+        borderBottomColor: 'currentColor',
+    },
+    _disabled: {
+        _active: { bg: 'none' },
+        cursor: 'notAllowed',
+        color: 'gray.300',
+    },
+});
+var baseListStyle = react$1.defineStyle({
+    display: 'flex',
+    width: 'full',
+    borderBottom: '1px',
+    borderColor: 'gray.200',
+    justifyContent: 'start',
+});
+var baseContentStyle$1 = react$1.defineStyle({
+    textStyle: 'body',
+    m: 'sm',
+});
+var tabsRecipe = react$1.defineSlotRecipe({
+    slots: ['root', 'list', 'trigger', 'content', 'contentGroup'],
+    className: 'chakra-tabs',
+    base: {
+        trigger: baseTriggerStyle$1,
+        list: baseListStyle,
+        content: baseContentStyle$1,
+    },
+    variants: {
+        variant: {
+            default: {
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            spaceBetween: {
+                list: {
+                    justifyContent: 'space-between',
+                },
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            spaceAround: {
+                list: {
+                    justifyContent: 'space-around',
+                },
+                trigger: {
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+            },
+            enclosed: {
+                list: {
+                    borderBottom: 'none',
+                },
+                trigger: {
+                    color: 'gray.700',
+                    fontWeight: 'bold',
+                    flexBasis: 'full',
+                    border: '1px',
+                    borderColor: 'blue.200',
+                    backgroundColor: 'blue.50',
+                    borderRight: 'none',
+                    '--tabs-border-width': '1px',
+                    _selected: {
+                        backgroundColor: 'transparent',
+                        borderBottomColor: 'transparent',
+                    },
+                    _last: {
+                        borderRight: '1px',
+                        borderRightColor: 'blue.200',
+                    },
+                },
+                content: {
+                    m: '0',
+                },
+            },
+            fullWidth: {
+                trigger: {
+                    flex: 1,
+                    _selected: {
+                        borderBottomColor: 'currentColor',
+                    },
+                },
+                content: {
+                    m: '0',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
 var borderColor = 'colorPalette.200';
 var subtleColor = 'colorPalette.50';
 var tableRecipe = react$1.defineSlotRecipe({
@@ -2357,6 +2473,7 @@ var slotRecipes = {
     dialog: dialogRecipe,
     simpleHeader: simpleHeaderRecipe,
     table: tableRecipe,
+    tabs: tabsRecipe,
     vehicleReference: vehicleReferenceRecipe,
     tooltip: tooltipSlotRecipe,
     field: fieldSlotRecipe,
@@ -7847,6 +7964,54 @@ var SimpleHeader = function (props) {
                             React.createElement(CloseIcon, null))))))));
 };
 
+var Tab = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Trigger, __assign({}, rest, { css: styles.trigger }), children));
+};
+
+var TabList = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { overflowX: "auto" },
+        React.createElement(react$1.Tabs.List, __assign({}, rest, { css: styles.list }), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? React.cloneElement(child, { variant: variant })
+                : child;
+        }))));
+};
+
+var TabPanel = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Content, __assign({}, rest, { css: styles.content }), children));
+};
+
+var TabPanels = function (_a) {
+    var variant = _a.variant, children = _a.children;
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { css: styles.contentGroup }, React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
+};
+
+var Tabs = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Root, __assign({}, rest, { css: styles.root }), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
+};
+
 var Body = react$1.Table.Body, Caption = react$1.Table.Caption, Cell = react$1.Table.Cell, Column = react$1.Table.Column, ColumnGroup = react$1.Table.ColumnGroup, ColumnHeader = react$1.Table.ColumnHeader, Footer = react$1.Table.Footer, Header = react$1.Table.Header, Root = react$1.Table.Root, Row = react$1.Table.Row, ScrollArea = react$1.Table.ScrollArea;
 Body.displayName = 'Table.Body';
 Caption.displayName = 'Table.Caption';
@@ -8293,6 +8458,10 @@ exports.SteeringWheelIcon = SteeringWheelIcon;
 exports.SuvIcon = SuvIcon;
 exports.SwissFlagIcon = SwissFlagIcon;
 exports.Switch = Switch;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
 exports.Table = Table;
 exports.TableBody = Body;
 exports.TableCaption = Caption;
@@ -8305,6 +8474,7 @@ exports.TableHeader = Header;
 exports.TableRoot = Root;
 exports.TableRow = Row;
 exports.TableScrollArea = ScrollArea;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.ThemeProvider = ThemeProvider;
 exports.ThreeSixtyIcon = ThreeSixtyIcon;