@atom-learning/components 1.2.1 → 1.3.1

package/dist/components/action-icon/ActionIcon.d.ts

@@ -5,7 +5,7 @@ import { Override } from '../../utilities';
 declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
-    size?: "md" | "lg" | undefined;
+    size?: "md" | "lg" | "xl" | undefined;
     isRounded?: boolean | "true" | undefined;
 }, {
     sm: string;

package/dist/components/action-icon/ActionIcon.js

@@ -1 +1 @@
-const e=["children","theme","appearance","size","label","href","disabled"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}import a from"invariant";import{forwardRef as s,Children as n,createElement as i,isValidElement as o,cloneElement as t}from"react";import{styled as c}from"../../stitches.js";import{Icon as l}from"../icon/Icon.js";const d=(e,r,a)=>({bg:"transparent",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),p=(e,r,a)=>({bg:e,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:r,color:"white"},"&:not(:disabled):active":{bg:a},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),m=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),u=c("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{md:{size:"$3"},lg:{size:"$4"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:d("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:d("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"simple",css:d("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:d("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:d("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:p("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"solid",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:p("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:m("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"outline",css:m("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:m("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:m("$danger","$dangerMid","$dangerDark")}]}),$=s(((s,c)=>{let{children:d,theme:p="primary",appearance:m="simple",size:g="md",label:b,href:h,disabled:y}=s,f=function(e,r){if(null==e)return{};var a,s,n={},i=Object.keys(e);for(s=0;s<i.length;s++)a=i[s],r.indexOf(a)>=0||(n[a]=e[a]);return n}(s,e);const w=`A single ${l.displayName} component is permitted as a child of ${$.displayName}`;a(1===n.count(d),w);const k=h?{as:"a",href:y?null:h,onClick:void 0,"aria-disabled":!!y}:{type:"button"};return i(u,Object.assign({},f,k,{"aria-label":b,theme:p,appearance:m,size:g,ref:c,disabled:y}),n.map(d,(e=>{if(!o(e))throw new Error(w);return a(e.type===l,`Children of type ${null==e?void 0:e.type} aren't permitted. Only an ${l.displayName} component is allowed in ${$.displayName}`),t(e,{css:r({size:"lg"===g?20:16},e.props.css?e.props.css:{})})})))}));$.displayName="ActionIcon";export{$ as ActionIcon};
+const e=["children","theme","appearance","size","label","href","disabled"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}import a from"invariant";import{darken as s}from"polished";import{forwardRef as i,Children as n,createElement as o,isValidElement as c,cloneElement as t}from"react";import{styled as l,theme as p}from"../../stitches.js";import{Icon as d}from"../icon/Icon.js";const m=(e,r,a)=>({bg:"transparent",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),u=(e,r,a)=>({bg:e,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:r,color:"white"},"&:not(:disabled):active":{bg:a},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),$=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),y=l("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{md:{size:"$3"},lg:{size:"$4"},xl:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:m("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:m("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:m("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"simple",css:m("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:m("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:m("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:u("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:u("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:u("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:u("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:u("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:$("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:$("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"outline",css:$("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:$("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:$("$danger","$dangerMid","$dangerDark")}]}),g=i(((s,i)=>{let{children:l,theme:p="primary",appearance:m="simple",size:u="md",label:$,href:b,disabled:h}=s,k=function(e,r){if(null==e)return{};var a,s,i={},n=Object.keys(e);for(s=0;s<n.length;s++)a=n[s],r.indexOf(a)>=0||(i[a]=e[a]);return i}(s,e);const f=`A single ${d.displayName} component is permitted as a child of ${g.displayName}`;a(1===n.count(l),f);const D=b?{as:"a",href:h?null:b,onClick:void 0,"aria-disabled":!!h}:{type:"button"};return o(y,Object.assign({},k,D,{"aria-label":$,theme:p,appearance:m,size:u,ref:i,disabled:h}),n.map(l,(e=>{if(!c(e))throw new Error(f);return a(e.type===d,`Children of type ${null==e?void 0:e.type} aren't permitted. Only an ${d.displayName} component is allowed in ${g.displayName}`),t(e,{css:r({size:["lg","xl"].includes(u)?20:16},e.props.css?e.props.css:{})})})))}));g.displayName="ActionIcon";export{g as ActionIcon};

package/dist/components/table/Table.d.ts

@@ -17,6 +17,7 @@ declare type TableSubComponents = {
 };
 declare const StyledTable: import("@stitches/react/types/styled-component").StyledComponent<"table", {
     size?: "md" | "lg" | undefined;
+    corners?: "round" | "square" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/table/Table.js

@@ -1 +1 @@
-const e=["size"];import{createElement as r}from"react";import{styled as o}from"../../stitches.js";import{TableBody as t}from"./TableBody.js";import{TableCell as l}from"./TableCell.js";import{TableFooter as a}from"./TableFooter.js";import{TableFooterCell as i}from"./TableFooterCell.js";import{TableHeader as s}from"./TableHeader.js";import{TableHeaderCell as m}from"./TableHeaderCell.js";import{TableRow as n}from"./TableRow.js";const f=o("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${l}, ${m}, ${i}`]:{height:"$4"}},lg:{[`${l}, ${m}, ${i}`]:{height:"$5"}}}}}),p=o=>{let{size:t="md"}=o,l=function(e,r){if(null==e)return{};var o,t,l={},a=Object.keys(e);for(t=0;t<a.length;t++)o=a[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(o,e);return r(f,Object.assign({size:t},l))};p.Body=t,p.Cell=l,p.Footer=a,p.FooterCell=i,p.Header=s,p.HeaderCell=m,p.Row=n,p.displayName="Table";export{p as Table};
+const e=["size","corners"];import{createElement as r}from"react";import{styled as o}from"../../stitches.js";import{TableBody as t}from"./TableBody.js";import{TableCell as s}from"./TableCell.js";import{TableFooter as i}from"./TableFooter.js";import{TableFooterCell as l}from"./TableFooterCell.js";import{TableHeader as a}from"./TableHeader.js";import{TableHeaderCell as d}from"./TableHeaderCell.js";import{TableRow as m}from"./TableRow.js";const n=o("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${s}, ${d}, ${l}`]:{height:"$4"}},lg:{[`${s}, ${d}, ${l}`]:{height:"$5"}}},corners:{round:{[`${d}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${m}:last-child`]:{[`${s}:first-child`]:{borderBottomLeftRadius:"$0"},[`${s}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),f=o=>{let{size:t="md",corners:s="round"}=o,i=function(e,r){if(null==e)return{};var o,t,s={},i=Object.keys(e);for(t=0;t<i.length;t++)o=i[t],r.indexOf(o)>=0||(s[o]=e[o]);return s}(o,e);return r(n,Object.assign({size:t,corners:s},i))};f.Body=t,f.Cell=s,f.Footer=i,f.FooterCell=l,f.Header=a,f.HeaderCell=d,f.Row=m,f.displayName="Table";export{f as Table};

package/dist/components/table/TableHeader.d.ts

@@ -1,4 +1,7 @@
-export declare const TableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {}, {
+import React from 'react';
+declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
+    theme?: "primary" | "primaryDark" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -263,3 +266,6 @@ export declare const TableHeader: import("@stitches/react/types/styled-component
         };
     };
 }>>;
+declare type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
+export declare const TableHeader: React.FC<TableHeaderProps>;
+export {};

package/dist/components/table/TableHeader.js

@@ -1 +1 @@
-import{styled as e}from"../../stitches.js";const t=e("thead",{});t.displayName="TableHeader";export{t as TableHeader};
+const e=["theme"];import{styled as r}from"../../stitches.js";import t from"react";import{TableHeaderCell as a}from"./TableHeaderCell.js";const m=r("thead",{variants:{theme:{primary:{[`${a}`]:{bg:"$primary"}},primaryDark:{[`${a}`]:{bg:"$primaryDark"}}}}}),i=r=>{let{theme:a="primaryDark"}=r,i=function(e,r){if(null==e)return{};var t,a,m={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],r.indexOf(t)>=0||(m[t]=e[t]);return m}(r,e);return t.createElement(m,Object.assign({theme:a},i))};i.displayName="TableHeader";export{i as TableHeader};

package/dist/components/table/TableHeaderCell.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";const e=t("th",{bg:"$primaryDark",color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle","&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
+import{styled as e}from"../../stitches.js";const t=e("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle"});t.displayName="TableHeaderCell";export{t as TableHeaderCell};

package/dist/components/table/TableRow.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";const o=t("tr",{"&:last-child":{"td:first-child":{borderBottomLeftRadius:"$0"},"td:last-child":{borderBottomRightRadius:"$0"}}});o.displayName="TableRow";export{o as TableRow};
+import{styled as t}from"../../stitches.js";const o=t("tr",{});o.displayName="TableRow";export{o as TableRow};

package/dist/components/tabs/TabTrigger.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLDivElement>>, {}, {
+declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLDivElement>>, {
+    theme?: "dark" | "light" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -264,9 +266,9 @@ declare const StyledTabTrigger: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
-declare type TabTriggerProps = React.ComponentProps<typeof StyledTabTrigger> & {
+interface TabTriggerProps extends React.ComponentProps<typeof StyledTabTrigger> {
     value: string;
     disabled?: boolean;
-};
+}
 export declare const TabTrigger: React.FC<TabTriggerProps>;
 export {};

package/dist/components/tabs/TabTrigger.js

@@ -1 +1 @@
-const r=["children","disabled","css"];import{Trigger as e}from"@radix-ui/react-tabs";import{createElement as o}from"react";import{styled as t}from"../../stitches.js";const a=t(e,{color:"$secondary",cursor:"pointer",flexShrink:0,fontFamily:"$body",p:"$4",userSelect:"none","&:hover":{color:"$primary"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal300",cursor:"default"},'&[data-state="active"]':{color:"$primary",fontWeight:"bold",boxShadow:"inset 0 -3px 0 0 currentColor"}}),i=e=>{let{children:t,disabled:i=!1,css:s}=e,c=function(r,e){if(null==r)return{};var o,t,a={},i=Object.keys(r);for(t=0;t<i.length;t++)o=i[t],e.indexOf(o)>=0||(a[o]=r[o]);return a}(e,r);return o(a,Object.assign({css:s,disabled:i},c),t)};i.displayName="TabTrigger";export{i as TabTrigger};
+const e=["children","theme","disabled"];import{Trigger as t}from"@radix-ui/react-tabs";import{createElement as a}from"react";import{opacify as o}from"polished";import{styled as r,theme as i}from"../../stitches.js";const d=r(t,{textTransform:"uppercase",cursor:"pointer",flexShrink:0,fontFamily:"$body",p:"$4",height:"$5",userSelect:"none",transition:"0.3s",variants:{theme:{light:{bg:"white",'&[data-state="active"]':{color:"$primary",fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},'&[data-state="inactive"]':{color:"$tonal500"},"&:not([data-disabled]):hover":{color:"$primary",bg:o(-.9,i.colors.primary.value)},"&:not([data-disabled]):active":{color:"$primary",bg:o(-.8,i.colors.primary.value),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}},dark:{color:"white",'&[data-state="active"]':{fontWeight:600,letterSpacing:"-0.005em",boxShadow:"inset 0 -2px 0 0 currentColor"},"&:not([data-disabled]):hover":{bg:o(-.8,"white")},"&:not([data-disabled]):active":{bg:o(-.7,"white"),boxShadow:"none"},"&[data-disabled],&[data-disabled]:hover":{color:"$tonal200",cursor:"not-allowed"}}}}}),l=t=>{let{children:o,theme:r,disabled:i=!1}=t,l=function(e,t){if(null==e)return{};var a,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)a=i[o],t.indexOf(a)>=0||(r[a]=e[a]);return r}(t,e);return a(d,Object.assign({disabled:i,theme:r},l),o)};l.displayName="TabTrigger";export{l as TabTrigger};

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

@@ -1,271 +1,10 @@
 import * as React from 'react';
 import { TabTrigger } from './TabTrigger';
-declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
+import { TriggerListWrapper } from './TabsTriggerList';
+declare type TabsProps = React.ComponentProps<typeof StyledRoot>;
+declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {
+    theme?: "dark" | "light" | undefined;
 }, {
-    colors: {
-        textForeground: any;
-        textSubtle: any;
-        textPlaceholder: any;
-        background: any;
-        backgroundAccent: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
-        alpha100: any;
-        alpha150: any;
-        alpha200: any;
-        alpha250: any;
-        alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
-        successLight: any;
-        success: any;
-        successMid: any;
-        successDark: any;
-        dangerLight: any;
-        danger: any;
-        dangerMid: any;
-        dangerDark: any;
-        warningLight: any;
-        warning: any;
-        warningMid: any;
-        warningDark: any;
-        subjectEnglish: any;
-        subjectMaths: any;
-        subjectScience: any;
-        subjectVerbalReasoning: any;
-        subjectNonVerbalReasoning: any;
-        subjectCreativeWriting: any;
-        subjectExamSkills: any;
-    };
-    space: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        "4": any;
-        "5": any;
-        "6": any;
-        "7": any;
-        "8": any;
-        "9": any;
-    };
-    fontSizes: {
-        xs: any;
-        sm: any;
-        md: any;
-        lg: any;
-        xl: any;
-        "2xl": any;
-        "3xl": any;
-        "4xl": any;
-    };
-    fonts: {
-        sans: any;
-        mono: any;
-        display: any;
-        body: any;
-    };
-    sizes: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        "4": any;
-        "5": any;
-        "6": any;
-        "7": any;
-        "8": any;
-    };
-    radii: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        round: any;
-    };
-    shadows: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>;
-declare const StyledTabContent: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -530,7 +269,9 @@ declare const StyledTabContent: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
-declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {}, {
+declare const StyledTabContent: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>, {
+    theme?: "dark" | "light" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -795,9 +536,8 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         };
     };
 }>>;
-declare type TabsProps = React.ComponentProps<typeof StyledRoot>;
 export declare const Tabs: React.FC<TabsProps> & {
-    TriggerList: typeof StyledTriggerList;
+    TriggerList: typeof TriggerListWrapper;
     Trigger: typeof TabTrigger;
     Content: typeof StyledTabContent;
 };

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-const r=["children"];import{Root as e,Content as t,List as i}from"@radix-ui/react-tabs";import{createElement as o}from"react";import{styled as n}from"../../stitches.js";import{TabTrigger as l}from"./TabTrigger.js";const s=n(e,{display:"flex",flexDirection:"column"}),a=n(t,{flexGrow:1}),f=n(i,{flexShrink:0,display:"flex",borderBottom:"1px solid $primaryDark"}),c=e=>{let{children:t}=e,i=function(r,e){if(null==r)return{};var t,i,o={},n=Object.keys(r);for(i=0;i<n.length;i++)t=n[i],e.indexOf(t)>=0||(o[t]=r[t]);return o}(e,r);return o(s,Object.assign({},i),t)};c.TriggerList=f,c.Trigger=l,c.Content=a,c.displayName="Tabs";export{c as Tabs};
+const r=["theme","children"];import{Root as t,Content as e}from"@radix-ui/react-tabs";import{createElement as i}from"react";import{styled as o}from"../../stitches.js";import{TabTrigger as m}from"./TabTrigger.js";import{TriggerListWrapper as a}from"./TabsTriggerList.js";import{passPropsToChildren as l}from"./utils.js";const n=o(t,{display:"flex",flexDirection:"column",variants:{theme:{light:{color:"$primary"},dark:{color:"white"}}}}),s=o(e,{flexGrow:1,fontFamily:"$body",variants:{theme:{light:{bg:"white",color:"$textForeground"},dark:{bg:"$primaryDark",color:"white"}}}}),c=t=>{let{theme:e="light",children:o}=t,m=function(r,t){if(null==r)return{};var e,i,o={},m=Object.keys(r);for(i=0;i<m.length;i++)e=m[i],t.indexOf(e)>=0||(o[e]=r[e]);return o}(t,r);return i(n,Object.assign({theme:e},m),l(o,{theme:e},[a,s]))};c.TriggerList=a,c.Trigger=m,c.Content=s,c.displayName="Tabs";export{c as Tabs};