@autoguru/overdrive 3.0.0-next.8 → 4.0.2

package/dist/components/Table/stories.js

@@ -16,6 +16,8 @@ import { Inline } from "../Inline/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Table, TableCell, TableHeadCell, TableRow, TableRowGroup } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: 'Components/Table'
 };
@@ -36,179 +38,268 @@ const Template = args => {
     });
   };
 
-  return <Table {...args}>
-			<TableRowGroup>
-				<TableRow>
-					<TableHeadCell>ID</TableHeadCell>
-					<TableHeadCell>Mechanic Name</TableHeadCell>
-					<TableHeadCell>Vehicle</TableHeadCell>
-					<TableHeadCell sort={sort.price} align="right" onSort={sortSetter('price')}>
-						Price
-					</TableHeadCell>
-					<TableHeadCell sort={sort.status} align="left" onSort={sortSetter('status')}>
-						Status
-					</TableHeadCell>
-					<TableHeadCell>Age</TableHeadCell>
-					<TableHeadCell align="right" />
-				</TableRow>
-			</TableRowGroup>
-			<TableRowGroup>
-				<TableRow>
-					<TableCell>522698</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								My Auto Service & Repair
-							</Text>
-							<Text size="2" colour="muted">
-								Gold Coast
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								ABC123
-							</Text>
-							<Text noWrap size="2" colour="muted">
-								Audi A4
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell align="right">$99.00</TableCell>
-					<TableCell>
-						<Inline>
-							<Badge label="Paid" colour="green" />
-						</Inline>
-					</TableCell>
-					<TableCell>2min</TableCell>
-					<TableCell padding="1" align="right">
-						<Actions noWrap>
-							<Button size="small" variant="danger">
-								Delete
-							</Button>
-							<Button size="small">View</Button>
-						</Actions>
-					</TableCell>
-				</TableRow>
-				<TableRow>
-					<TableCell>597194</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								Magic Spanners
-							</Text>
-							<Text size="2" colour="muted">
-								Brisbane CBD
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								ABC123
-							</Text>
-							<Text noWrap size="2" colour="muted">
-								Prosche Macan
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell align="right">$102.00</TableCell>
-					<TableCell>
-						<Inline>
-							<Badge label="Paid" colour="green" />
-							<Badge label="Dispute" colour="red" />
-						</Inline>
-					</TableCell>
-					<TableCell>5min</TableCell>
-					<TableCell padding="1" align="right">
-						<Actions noWrap>
-							<Button size="small" variant="danger">
-								Delete
-							</Button>
-							<Button size="small">View</Button>
-						</Actions>
-					</TableCell>
-				</TableRow>
-				<TableRow>
-					<TableCell>789456</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								Super Special Cars
-							</Text>
-							<Text size="2" colour="muted">
-								Sydney CBD
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								ABC123
-							</Text>
-							<Text noWrap size="2" colour="muted">
-								Maserati Levante
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell align="right">$2,495.45</TableCell>
-					<TableCell>
-						<Inline>
-							<Badge label="Paid" colour="green" />
-							<Badge label="Complete" colour="green" />
-						</Inline>
-					</TableCell>
-					<TableCell>5hr</TableCell>
-					<TableCell padding="1" align="right">
-						<Actions noWrap>
-							<Button size="small" variant="danger">
-								Delete
-							</Button>
-							<Button size="small">View</Button>
-						</Actions>
-					</TableCell>
-				</TableRow>
-				<TableRow>
-					<TableCell>159753</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								Humans 'n Cars
-							</Text>
-							<Text size="2" colour="muted">
-								Brisbane CBD
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell>
-						<Stack space="1">
-							<Text size="3" colour="dark">
-								ABC123
-							</Text>
-							<Text size="2" colour="muted">
-								Koenigsegg Agera RS
-							</Text>
-						</Stack>
-					</TableCell>
-					<TableCell align="right">$11,158.46</TableCell>
-					<TableCell>
-						<Inline>
-							<Badge label="Unpaid" colour="yellow" />
-						</Inline>
-					</TableCell>
-					<TableCell>15hr</TableCell>
-					<TableCell padding="1" align="right">
-						<Actions noWrap>
-							<Button size="small" variant="danger">
-								Delete
-							</Button>
-							<Button size="small">View</Button>
-						</Actions>
-					</TableCell>
-				</TableRow>
-			</TableRowGroup>
-		</Table>;
+  return _jsxs(Table, _objectSpread(_objectSpread({}, args), {}, {
+    children: [_jsx(TableRowGroup, {
+      children: _jsxs(TableRow, {
+        children: [_jsx(TableHeadCell, {
+          children: "ID"
+        }), _jsx(TableHeadCell, {
+          children: "Mechanic Name"
+        }), _jsx(TableHeadCell, {
+          children: "Vehicle"
+        }), _jsx(TableHeadCell, {
+          sort: sort.price,
+          align: "right",
+          onSort: sortSetter('price'),
+          children: "Price"
+        }), _jsx(TableHeadCell, {
+          sort: sort.status,
+          align: "left",
+          onSort: sortSetter('status'),
+          children: "Status"
+        }), _jsx(TableHeadCell, {
+          children: "Age"
+        }), _jsx(TableHeadCell, {
+          align: "right"
+        })]
+      })
+    }), _jsxs(TableRowGroup, {
+      children: [_jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "522698"
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "My Auto Service & Repair"
+            }), _jsx(Text, {
+              size: "2",
+              colour: "muted",
+              children: "Gold Coast"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "ABC123"
+            }), _jsx(Text, {
+              noWrap: true,
+              size: "2",
+              colour: "muted",
+              children: "Audi A4"
+            })]
+          })
+        }), _jsx(TableCell, {
+          align: "right",
+          children: "$99.00"
+        }), _jsx(TableCell, {
+          children: _jsx(Inline, {
+            children: _jsx(Badge, {
+              label: "Paid",
+              colour: "green"
+            })
+          })
+        }), _jsx(TableCell, {
+          children: "2min"
+        }), _jsx(TableCell, {
+          padding: "1",
+          align: "right",
+          children: _jsxs(Actions, {
+            noWrap: true,
+            children: [_jsx(Button, {
+              size: "small",
+              variant: "danger",
+              children: "Delete"
+            }), _jsx(Button, {
+              size: "small",
+              children: "View"
+            })]
+          })
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "597194"
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "Magic Spanners"
+            }), _jsx(Text, {
+              size: "2",
+              colour: "muted",
+              children: "Brisbane CBD"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "ABC123"
+            }), _jsx(Text, {
+              noWrap: true,
+              size: "2",
+              colour: "muted",
+              children: "Prosche Macan"
+            })]
+          })
+        }), _jsx(TableCell, {
+          align: "right",
+          children: "$102.00"
+        }), _jsx(TableCell, {
+          children: _jsxs(Inline, {
+            children: [_jsx(Badge, {
+              label: "Paid",
+              colour: "green"
+            }), _jsx(Badge, {
+              label: "Dispute",
+              colour: "red"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: "5min"
+        }), _jsx(TableCell, {
+          padding: "1",
+          align: "right",
+          children: _jsxs(Actions, {
+            noWrap: true,
+            children: [_jsx(Button, {
+              size: "small",
+              variant: "danger",
+              children: "Delete"
+            }), _jsx(Button, {
+              size: "small",
+              children: "View"
+            })]
+          })
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "789456"
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "Super Special Cars"
+            }), _jsx(Text, {
+              size: "2",
+              colour: "muted",
+              children: "Sydney CBD"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "ABC123"
+            }), _jsx(Text, {
+              noWrap: true,
+              size: "2",
+              colour: "muted",
+              children: "Maserati Levante"
+            })]
+          })
+        }), _jsx(TableCell, {
+          align: "right",
+          children: "$2,495.45"
+        }), _jsx(TableCell, {
+          children: _jsxs(Inline, {
+            children: [_jsx(Badge, {
+              label: "Paid",
+              colour: "green"
+            }), _jsx(Badge, {
+              label: "Complete",
+              colour: "green"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: "5hr"
+        }), _jsx(TableCell, {
+          padding: "1",
+          align: "right",
+          children: _jsxs(Actions, {
+            noWrap: true,
+            children: [_jsx(Button, {
+              size: "small",
+              variant: "danger",
+              children: "Delete"
+            }), _jsx(Button, {
+              size: "small",
+              children: "View"
+            })]
+          })
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "159753"
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "Humans 'n Cars"
+            }), _jsx(Text, {
+              size: "2",
+              colour: "muted",
+              children: "Brisbane CBD"
+            })]
+          })
+        }), _jsx(TableCell, {
+          children: _jsxs(Stack, {
+            space: "1",
+            children: [_jsx(Text, {
+              size: "3",
+              colour: "dark",
+              children: "ABC123"
+            }), _jsx(Text, {
+              size: "2",
+              colour: "muted",
+              children: "Koenigsegg Agera RS"
+            })]
+          })
+        }), _jsx(TableCell, {
+          align: "right",
+          children: "$11,158.46"
+        }), _jsx(TableCell, {
+          children: _jsx(Inline, {
+            children: _jsx(Badge, {
+              label: "Unpaid",
+              colour: "yellow"
+            })
+          })
+        }), _jsx(TableCell, {
+          children: "15hr"
+        }), _jsx(TableCell, {
+          padding: "1",
+          align: "right",
+          children: _jsxs(Actions, {
+            noWrap: true,
+            children: [_jsx(Button, {
+              size: "small",
+              variant: "danger",
+              children: "Delete"
+            }), _jsx(Button, {
+              size: "small",
+              children: "View"
+            })]
+          })
+        })]
+      })]
+    })]
+  }));
 };
 
 const standardProps = {

package/dist/components/Tabs/Tab.css.d.ts

@@ -0,0 +1,7 @@
+export declare const root: {
+    default: string;
+    active: string;
+};
+export declare const item: string;
+export declare const indication: Record<"default" | "active", string>;
+//# sourceMappingURL=Tab.css.d.ts.map

package/dist/components/Tabs/Tab.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,IAAI;;;CAsBhB,CAAC;AAEF,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU,sCAWrB,CAAC"}

package/dist/components/Tabs/Tab.css.js

@@ -1,50 +1,42 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Tabs/Tab.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 const lineBottomHeight = '1px';
 const size = '20px';
 export const root = {
-  default: style({
-    padding: "calc(".concat(vars.space['3'], " + ").concat(lineBottomHeight, ") 0"),
-    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, background-color 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
-    borderBottom: "calc(".concat(lineBottomHeight, " + ").concat(lineBottomHeight, ") solid transparent"),
-    flex: 'auto',
-    ':last-of-type': {
-      marginRight: 0
-    },
-    ':hover': {
-      color: vars.colours.intent.primary.background.strong
-    },
-    ':focus': {
-      color: vars.colours.intent.primary.background.strong
-    }
-  }, "root_default"),
-  active: style({
-    color: vars.colours.intent.primary.background.strong,
-    borderBottomColor: vars.colours.intent.primary.background.strong
-  }, "root_active")
+    default: style({
+        padding: `calc(${vars.space['3']} + ${lineBottomHeight}) 0`,
+        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
+        borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,
+        flex: 'auto',
+        ':last-of-type': {
+            marginRight: 0,
+        },
+        ':hover': {
+            color: vars.colours.intent.primary.background.strong,
+        },
+        ':focus': {
+            color: vars.colours.intent.primary.background.strong,
+        },
+    }),
+    active: style({
+        color: vars.colours.intent.primary.background.strong,
+        borderBottomColor: vars.colours.intent.primary.background.strong,
+    }),
 };
 export const item = style({
-  display: 'inline-flex',
-  width: 'max-content',
-  verticalAlign: 'middle'
-}, "item");
+    display: 'inline-flex',
+    width: 'max-content',
+    verticalAlign: 'middle',
+});
 export const indication = styleVariants({
-  default: {
-    backgroundColor: vars.colours.background.light,
-    minWidth: size,
-    height: size,
-    lineHeight: size,
-    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, backgroundColor 0.2s ").concat(vars.animation.easing.decelerate, " 0s")
-  },
-  active: {
-    backgroundColor: vars.colours.intent.primary.background.strong
-  }
-}, "indication");
-
-__vanilla_filescope__.endFileScope();
+    default: {
+        backgroundColor: vars.colours.background.light,
+        minWidth: size,
+        height: size,
+        lineHeight: size,
+        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, backgroundColor 0.2s ${vars.animation.easing.decelerate} 0s`,
+    },
+    active: {
+        backgroundColor: vars.colours.intent.primary.background.strong,
+    },
+});

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ElementType, ReactElement, ReactText } from 'react';
+export interface Props {
+    children: ReactText;
+    id?: string;
+    is?: ElementType | ReactElement;
+    indication?: number;
+}
+export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EA0Ff,CAAC"}