@atom-learning/components 2.29.1 → 2.30.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
-## [2.29.1](https://github.com/Atom-Learning/components/compare/v2.29.0...v2.29.1) (2023-01-27)
+# [2.30.0](https://github.com/Atom-Learning/components/compare/v2.29.1...v2.30.0) (2023-01-30)
 
 
 ### Bug Fixes
 
-* reinstated changes that should be here ([25adbf3](https://github.com/Atom-Learning/components/commit/25adbf342a4a9366e06d573cc7c4ecacc36d5265))
-* remove hide prop from popovercontent ([3feb90e](https://github.com/Atom-Learning/components/commit/3feb90e15b80ff2b8b6e5141b6feb2d591d154f1))
-* remove incorrect prop from DateInput ([865055f](https://github.com/Atom-Learning/components/commit/865055f2b829e468b534b3d883462f641aa7acef))
-* snapshots ([f47b5e2](https://github.com/Atom-Learning/components/commit/f47b5e2967e0162aa16056f0aa8cb71fd66549e7))
+* add utils and media in colorscheme stitches ([8a1211a](https://github.com/Atom-Learning/components/commit/8a1211af9821e0217da866a374661606d381e874))
+* correct TabsTrigger to be a button ([c2776e0](https://github.com/Atom-Learning/components/commit/c2776e0fb357fa528da5c07eb8a975ae4f5e4333))
+* documentation ([5036ad2](https://github.com/Atom-Learning/components/commit/5036ad2d7c277f3c4c224fa2ce4431fcf3eceaa8))
+* json files in rollup ([6bb728a](https://github.com/Atom-Learning/components/commit/6bb728a8cb6c28e81c62e2d02d8afbe88e6c56ec))
+* move css of TabsTriggerList Container in a styled (rather than inlining) ([303da25](https://github.com/Atom-Learning/components/commit/303da257f5a55a56b80496365b330e07a836af83))
+* subpixel catch for TabsTriggerList canScrollRight ([ebfc568](https://github.com/Atom-Learning/components/commit/ebfc568b6603ee323f4bc84429c083fc0f02848e))
+* update Tabs snapshot ([8a7b6f8](https://github.com/Atom-Learning/components/commit/8a7b6f83074b09b9e4e7fe83f5b8c5993931510f))
+* validation and asChild ColorScheme ([19b4379](https://github.com/Atom-Learning/components/commit/19b4379674023528cadfaed828e1b77646cf4edf))
+
+
+### Features
+
+* move color-scheme into lib ([38e63d5](https://github.com/Atom-Learning/components/commit/38e63d5e40e769cd43c0423936edc7ac0879d7f9))
+* re-add ActionIcon Chevrons to TabsTriggerList ([1a5b7de](https://github.com/Atom-Learning/components/commit/1a5b7dec9405ba5dd0b494714f959ce9fa48e9e9))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/accordion/AccordionContent.js

@@ -1 +1 @@
-import{Content as i}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as n}from"../../stitches.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";const d=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),m=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),s=n(i,{border:0,width:"100%",bg:"#fff",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${d} 300ms ease-out`},'&[data-state="closed"]':{animation:`${m} 300ms ease-out`}}}),h=({children:e,css:a,...r})=>t.createElement(s,{...r},t.createElement(c,{css:a},e));export{h as AccordionContent};
+import{Content as n}from"@radix-ui/react-accordion";import t from"react";import{keyframes as o,styled as i}from"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";const c=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),s=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),m=i(n,{border:0,width:"100%",bg:"$background",overflow:"hidden",'&[data-state="open"]':{borderRadius:"0 0 $0 $0"},"@allowMotion":{'&[data-state="open"]':{animation:`${c} 300ms ease-out`},'&[data-state="closed"]':{animation:`${s} 300ms ease-out`}}}),h=({children:e,css:r,...a})=>t.createElement(m,{...a},t.createElement(d,{css:r},e));export{h as AccordionContent};

package/dist/components/accordion/AccordionItem.js

@@ -1 +1 @@
-import{Item as r}from"@radix-ui/react-accordion";import m from"react";import{styled as d}from"../../stitches.js";const l=d(r,{width:"100%",overflow:"hidden","&:not(:last-child)":{mb:"$1"}}),i=({children:o,value:t,...e})=>m.createElement(l,{value:t,...e},o);export{i as AccordionItem};
+import{Item as m}from"@radix-ui/react-accordion";import r from"react";import{styled as l}from"../../stitches.js";const c=l(m,{width:"100%","&:not(:last-child)":{mb:"$1"}}),i=({children:t,value:o,...e})=>r.createElement(c,{value:o,...e},t);export{i as AccordionItem};

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
-    theme?: "primaryDark" | "light" | "tonal" | undefined;
-}, {
+import { ColorScheme } from '../../experiments/color-scheme';
+declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -267,6 +266,8 @@ declare const StyledTrigger: import("@stitches/react/types/styled-component").St
         };
     };
 }>>;
-declare type AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger>;
+declare type AccordionTriggerProps = React.ComponentProps<typeof StyledTrigger> & {
+    colorScheme?: typeof ColorScheme;
+};
 export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
 export {};

package/dist/components/accordion/AccordionTrigger.js

@@ -1 +1 @@
-import{ChevronDown as s}from"@atom-learning/icons";import{Trigger as l}from"@radix-ui/react-accordion";import{darken as r}from"color2k";import n from"react";import{styled as i,theme as f}from"../../stitches.js";import{Icon as d}from"../icon/Icon.js";const a=(t,e,o,m="#fff")=>({bg:t,color:m,"&[disabled]":{bg:"$tonal100",cursor:"not-allowed",color:"$tonal400"},"&:not([disabled]):hover":{bg:e},"&:not([disabled]):active":{bg:o}}),p=i(d,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),c=i(l,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"},variants:{theme:{primaryDark:a("$primaryDark",r(f.colors.primaryDark.value,.1),r(f.colors.primaryDark.value,.15)),light:a("#fff",r("#fff",.1),r("#fff",.15),"$tonal600"),tonal:a("$tonal100",r("#fff",.1),r("#fff",.15),"$tonal500")}}}),g=({theme:t="primaryDark",children:e,...o})=>n.createElement(c,{theme:t,...o},e,n.createElement(p,{is:s}));export{g as AccordionTrigger};
+import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(d,{asChild:!0,accent:"slate",interactive:"loContrast1",...r},e.createElement(m,{...a},o,e.createElement(l,{is:i})));export{f as AccordionTrigger};

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

@@ -1,278 +1,9 @@
 import * as React from 'react';
-import { TriggerListWrapper } from './TabsTriggerList';
-import { TabTrigger } from './TabTrigger';
+import { TabsTriggerList } from './TabsTriggerList';
+import { TabsTrigger } from './TabsTrigger';
+import { TabsContent } from './TabsContent';
 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;
-}, {
-    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;
-}, {
-    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;
-        warningText: 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>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
+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;
@@ -539,8 +270,8 @@ declare const StyledTabContent: import("@stitches/react/types/styled-component")
     };
 }>>;
 export declare const Tabs: React.FC<TabsProps> & {
-    TriggerList: typeof TriggerListWrapper;
-    Trigger: typeof TabTrigger;
-    Content: typeof StyledTabContent;
+    TriggerList: typeof TabsTriggerList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
 };
 export {};

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-import{Root as l,Content as n}from"@radix-ui/react-tabs";import*as p from"react";import{styled as e}from"../../stitches.js";import{TriggerListWrapper as t}from"./TabsTriggerList.js";import{TabTrigger as s}from"./TabTrigger.js";import{passPropsToChildren as g}from"./utils.js";const h=e(l,{display:"flex",flexDirection:"column",variants:{theme:{light:{color:"$primary"},dark:{color:"white"}}}}),i=e(n,{flexGrow:1,fontFamily:"$body",variants:{theme:{light:{color:"$textForeground"},dark:{bg:"$primaryDark",color:"white"}}}}),r=({theme:o="light",children:m,...a})=>p.createElement(h,{theme:o,...a},g(m,{theme:o},[t,i]));r.TriggerList=t,r.Trigger=s,r.Content=i,r.displayName="Tabs";export{r as Tabs};
+import{Root as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as m}from"../../stitches.js";import{TabsTriggerList as s}from"./TabsTriggerList.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsContent as g}from"./TabsContent.js";const T=m(i,{width:"100%"}),r=({children:o,...t})=>e.createElement(T,{...t},o);r.TriggerList=s,r.Trigger=a,r.Content=g,r.displayName="Tabs";export{r as Tabs};

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

@@ -0,0 +1,267 @@
+/// <reference types="react" />
+export declare const TabsContent: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & import("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;
+}, {
+    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;
+        warningText: 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";
+        };
+    };
+}>>;

package/dist/components/tabs/TabsContent.js

@@ -0,0 +1 @@
+import{Content as t}from"@radix-ui/react-tabs";import{styled as n}from"../../stitches.js";const e=n(t,{flexGrow:1,fontFamily:"$body"}),o=e;o.displayName="TabsContent";export{o as TabsContent};

package/dist/components/tabs/{TabTrigger.d.ts → TabsTrigger.d.ts}

@@ -1,7 +1,5 @@
 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<HTMLButtonElement>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
+declare const StyledTabsTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -267,9 +265,8 @@ declare const StyledTabTrigger: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
-interface TabTriggerProps extends React.ComponentProps<typeof StyledTabTrigger> {
+interface TabsTriggerProps extends React.ComponentProps<typeof StyledTabsTrigger> {
     value: string;
-    disabled?: boolean;
 }
-export declare const TabTrigger: React.FC<TabTriggerProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
 export {};

package/dist/components/tabs/TabsTrigger.js

@@ -0,0 +1 @@
+import{Trigger as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as a}from"../../stitches.js";import{Text as n}from"../text/Text.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";const s=a(i,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",bg:"$accentA1"},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),o=({children:r,...t})=>e.createElement(s,{asChild:!0,...t},e.createElement(n,{size:"sm",as:"button"},r));o.displayName="TabsTrigger";export{o as TabsTrigger};