@atom-learning/components 2.38.1 → 2.40.0
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/CHANGELOG.md +5 -4
- package/dist/components/accordion/AccordionTrigger.js +1 -1
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/chip/Chip.d.ts +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts +1 -1
- package/dist/components/data-table/pagination/PaginationButtons.d.ts +1 -1
- package/dist/components/data-table/pagination/PaginationButtons.js +1 -1
- package/dist/components/data-table/pagination/PaginationButtons.js.map +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownTrigger.js +1 -1
- package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.d.ts +7 -0
- package/dist/components/table/useStickyColumnsCss.js +2 -0
- package/dist/components/table/useStickyColumnsCss.js.map +1 -0
- package/dist/components/tabs/Tabs.d.ts +2 -2
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/TabsContent.js.map +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/components/tabs/TabsTriggerList.js +1 -1
- package/dist/components/tabs/TabsTriggerList.js.map +1 -1
- package/dist/experiments/color-scheme/ColorScheme.d.ts +1 -1
- package/dist/experiments/color-scheme/ColorScheme.js +1 -1
- package/dist/experiments/color-scheme/ColorScheme.js.map +1 -1
- package/dist/experiments/color-scheme/stitches.colorscheme.config.js +1 -1
- package/dist/experiments/color-scheme/stitches.colorscheme.config.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/utilities/hooks/useScrollPosition.js.map +1 -1
- package/dist/utilities/hooks/useSize.js.map +1 -1
- package/dist/utilities/hooks/useWindowScrollPosition.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = (\n numberOfStickyColumns: number,\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n): IUseStickyColumnsCss => {\n const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n const elementNumber = index + 1\n const cssObject = {\n ...acc,\n [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n {\n position: 'sticky',\n left: `${accWidth}px`,\n minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n zIndex: '2'\n }\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return cssObject\n }, {} as CSS)\n\n setColumnsCss(newColumnsCss)\n }, [numberOfStickyColumns, wrapperRef])\n\n return {\n columnsCss\n }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","_a","accWidth","tableHeaderCells","newColumnsCss","acc","column","index","elementNumber","cssObject"],"mappings":"wBAQO,MAAMA,EAAsB,CACjCC,EACAC,IACyB,CACzB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,EAAE,EAE1D,OAAAA,EAAM,gBAAgB,IAAM,CAd9B,IAAAC,EAeI,GAAI,CAACL,EAAuB,OAE5B,IAAIM,EAAW,EAGf,MAAMC,GAAmBF,EAAAJ,EAAW,UAAX,KAAA,OAAAI,EAAoB,iBAAiB,MAMxDG,EALsB,MAAM,KAAKD,GAAoB,EAAE,EAGnB,MAAM,EAAGP,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,SAAU,GAAGI,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAJ,IAAYC,GAAA,KAAA,OAAAA,EAAkB,KAAKI,GAAO,cAAe,EAElDE,CACT,EAAG,EAAS,EAEZV,EAAcK,CAAa,CAC7B,EAAG,CAACR,EAAuBC,CAAU,CAAC,EAE/B,CACL,WAAAC,CACF,CACF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { TabsTriggerList } from './TabsTriggerList';
|
|
3
|
-
import { TabsTrigger } from './TabsTrigger';
|
|
4
2
|
import { TabsContent } from './TabsContent';
|
|
3
|
+
import { TabsTrigger } from './TabsTrigger';
|
|
4
|
+
import { TabsTriggerList } from './TabsTriggerList';
|
|
5
5
|
declare type TabsProps = React.ComponentProps<typeof StyledRoot>;
|
|
6
6
|
declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {
|
|
7
7
|
sm: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Root as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as m}from"../../stitches.js";import{
|
|
1
|
+
import{Root as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as m}from"../../stitches.js";import{TabsContent as s}from"./TabsContent.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsTriggerList as g}from"./TabsTriggerList.js";const T=m(i,{width:"100%"}),r=({children:o,...t})=>e.createElement(T,{...t},o);r.TriggerList=g,r.Trigger=a,r.Content=s,r.displayName="Tabs";export{r as Tabs};
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport {
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\ntype TabsProps = React.ComponentProps<typeof StyledRoot>\n\nconst StyledRoot = styled(Root, { width: '100%' })\n\nexport const Tabs: React.FC<TabsProps> & {\n TriggerList: typeof TabsTriggerList\n Trigger: typeof TabsTrigger\n Content: typeof TabsContent\n} = ({ children, ...remainingProps }) => {\n return <StyledRoot {...remainingProps}>{children}</StyledRoot>\n}\n\nTabs.TriggerList = TabsTriggerList\nTabs.Trigger = TabsTrigger\nTabs.Content = TabsContent\n\nTabs.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","children","remainingProps","React","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"oQAWA,MAAMA,EAAaC,EAAOC,EAAM,CAAE,MAAO,MAAO,CAAC,EAEpCC,EAIT,CAAC,CAAE,SAAAC,KAAaC,CAAe,IAC1BC,EAAA,cAACN,EAAA,CAAY,GAAGK,CAAAA,EAAiBD,CAAS,EAGnDD,EAAK,YAAcI,EACnBJ,EAAK,QAAUK,EACfL,EAAK,QAAUM,EAEfN,EAAK,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsContent.js","sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\nimport { styled } from '~/stitches'\n\nconst StyledTabsContent = styled(Content, {\n flexGrow: 1,\n fontFamily: '$body'\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"names":["StyledTabsContent","styled","Content","TabsContent"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsContent.js","sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/stitches'\n\nconst StyledTabsContent = styled(Content, {\n flexGrow: 1,\n fontFamily: '$body'\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"names":["StyledTabsContent","styled","Content","TabsContent"],"mappings":"0FAIA,MAAMA,EAAoBC,EAAOC,EAAS,CACxC,SAAU,EACV,WAAY,OACd,CAAC,EAEYC,EAAcH,EAE3BG,EAAY,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\nimport { Text } from '../text'\n\nconst StyledTabsTrigger = styled(Trigger, {\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n p: '$4',\n userSelect: 'none',\n borderBottom: '2px solid transparent',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n '&:hover, &:focus-visible': {\n color: '$interactive2',\n bg: '$accentA1'\n },\n '&:active': {\n color: '$interactive3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ninterface TabsTriggerProps\n extends React.ComponentProps<typeof StyledTabsTrigger> {\n value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n children,\n ...rest\n}) => (\n <StyledTabsTrigger asChild {...rest}>\n <Text size=\"sm\" as=\"button\">\n {children}\n </Text>\n </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTrigger","styled","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTrigger = styled(Trigger, {\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n p: '$4',\n userSelect: 'none',\n borderBottom: '2px solid transparent',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n '&:hover, &:focus-visible': {\n color: '$interactive2',\n bg: '$accentA1'\n },\n '&:active': {\n color: '$interactive3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ninterface TabsTriggerProps\n extends React.ComponentProps<typeof StyledTabsTrigger> {\n value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n children,\n ...rest\n}) => (\n <StyledTabsTrigger asChild {...rest}>\n <Text size=\"sm\" as=\"button\">\n {children}\n </Text>\n </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTrigger","styled","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"qPAQA,MAAMA,EAAoBC,EAAOC,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAOYC,EAA0C,CAAC,CACtD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAkB,QAAO,GAAE,GAAGM,CAAAA,EAC7BC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,UAChBH,CACH,CACF,EAGFD,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ChevronLeft as k,ChevronRight as y}from"@atom-learning/icons";import{List as C}from"@radix-ui/react-tabs";import t from"react";import{ColorScheme as v}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../stitches.js";import{useCallbackRefState as W}from"../../utilities/hooks/useCallbackRef.js";import{useScrollPosition as w}from"../../utilities/hooks/useScrollPosition.js";import{useSize as E}from"../../utilities/hooks/useSize.js";import{ActionIcon as S}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";const L=i(v,{position:"relative",borderBottom:"1px solid $base3",width:"100%"}),x=i(C,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),a=i(S,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$background !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),c=.8,n=({children:m,colorScheme:d={},...h})=>{const[e,f]=W(),{width:p}=E({element:e,delay:500}),{left:o}=w({element:e,delay:100,delayMethod:"debounce"}),r=t.useMemo(()=>e?e.scrollWidth>e.clientWidth:!1,[p,e]),b=t.useMemo(()=>r?o>0:!1,[o,r]),u=t.useMemo(()=>!e||!r?!1:e.scrollWidth-o-e.clientWidth>1,[e,o,r]),l=t.useCallback(g=>{!e||e.scroll({left:e.scrollLeft+e.clientWidth*g,behavior:"smooth"})},[e]);return t.createElement(L,{base:"slate",accent:"blue",interactive:"hiContrast1",...d,...h},b&&t.createElement(a,{label:"scroll left",size:"md",css:{left:0},onClick:()=>l(-c)},t.createElement(s,{is:k})),t.createElement(x,{ref:f},m),u&&t.createElement(a,{label:"scroll right",size:"md",css:{right:0},onClick:()=>l(c)},t.createElement(s,{is:y})))};n.displayName="TabsTriggerList";export{n as TabsTriggerList};
|
|
2
2
|
//# sourceMappingURL=TabsTriggerList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-tabs'\nimport React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n position: 'relative',\n borderBottom: '1px solid $base3',\n width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n flexShrink: 0,\n display: 'flex',\n width: '100%',\n overflowX: 'auto',\n '&::-webkit-scrollbar': { display: 'none' },\n scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n height: '100% !important',\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n cursor: 'pointer',\n background: '$background !important',\n color: '$interactive1 !important',\n borderRadius: 0,\n opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList: React.FC<\n React.ComponentProps<typeof StyledTriggerList> & {\n colorScheme?: typeof ColorScheme\n }\n> = ({ children, colorScheme = {}, ...rest }) => {\n const [listRef, setListRefCallback] = useCallbackRefState()\n\n const { width } = useSize({ element: listRef, delay: 500 })\n const { left } = useScrollPosition({\n element: listRef,\n delay: 100,\n delayMethod: 'debounce'\n })\n\n const canScrollXAxis = React.useMemo(() => {\n if (!listRef) return false\n return listRef.scrollWidth > listRef.clientWidth\n }, [width, listRef])\n\n const canScrollLeft = React.useMemo(() => {\n if (!canScrollXAxis) return false\n return left > 0\n }, [left, canScrollXAxis])\n\n const canScrollRight = React.useMemo(() => {\n if (!listRef || !canScrollXAxis) return false\n return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n }, [listRef, left, canScrollXAxis])\n\n const scrollList = React.useCallback(\n (stepModifier) => {\n if (!listRef) return\n listRef.scroll({\n left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n behavior: 'smooth'\n })\n },\n [listRef]\n )\n\n return (\n <StyledContainer\n base=\"slate\"\n accent=\"blue\"\n interactive=\"hiContrast1\"\n {...colorScheme}\n {...rest}\n >\n {canScrollLeft && (\n <StyledChevronActionIcon\n label=\"scroll left\"\n size=\"md\"\n css={{\n left: 0\n }}\n onClick={() => scrollList(-SCROLL_STEP)}\n >\n <Icon is={ChevronLeft} />\n </StyledChevronActionIcon>\n )}\n\n <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n {canScrollRight && (\n <StyledChevronActionIcon\n label=\"scroll right\"\n size=\"md\"\n css={{\n right: 0\n }}\n onClick={() => scrollList(SCROLL_STEP)}\n >\n <Icon is={ChevronRight} />\n </StyledChevronActionIcon>\n )}\n </StyledContainer>\n )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,yBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAIT,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAA,KAAOC,CAAK,IAAM,CAC/C,KAAM,CAACC,EAASC,CAAkB,EAAIC,EAEhC,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,OACP,YAAY,cACX,GAAGU,EACH,GAAGC,CAAAA,EAEHU,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,CAEtCa,EAAAA,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAGFN,EAAA,cAACjB,EAAA,CAAkB,IAAKU,CAAqBJ,EAAAA,CAAS,EAErDa,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,CAAA,EAErCa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as o from"react";import{styled as
|
|
1
|
+
import{Slot as f}from"@radix-ui/react-slot";import*as o from"react";import{styled as d,colorSchemes as e}from"./stitches.colorscheme.config.js";const p=d("div"),r=o.forwardRef(({base:t="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${t}`]].filter(Boolean).join(" ");return o.createElement(s?f:p,{ref:l,className:n,...i})});r.displayName="ColorScheme";export{r as ColorScheme};
|
|
2
2
|
//# sourceMappingURL=ColorScheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorScheme.js","sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n
|
|
1
|
+
{"version":3,"file":"ColorScheme.js","sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport {\n accents,\n bases,\n colorSchemes,\n styled\n} from './stitches.colorscheme.config'\n\ntype TColorSchemeOwnProps = {\n base?: keyof typeof bases\n accent?: keyof typeof accents\n interactive?: 'loContrast1' | 'loContrast2' | 'hiContrast1' | 'hiContrast2'\n asChild?: boolean\n}\n\nconst StyledColorScheme = styled('div')\n\ntype TColorSchemeProps = React.ComponentProps<typeof StyledColorScheme> &\n TColorSchemeOwnProps\n\n/**\n * @experimental Component has not been finalised. Further design input required. Use with caution.\n */\nexport const ColorScheme = React.forwardRef<HTMLDivElement, TColorSchemeProps>(\n (\n {\n base = '',\n accent = '',\n interactive = '',\n className,\n asChild = false,\n ...rest\n },\n ref\n ) => {\n const c = [\n className,\n colorSchemes[`interactive-${interactive}`],\n colorSchemes[`accent-${accent}`],\n colorSchemes[`base-${base}`]\n ]\n .filter(Boolean)\n .join(' ')\n\n const Component = asChild ? Slot : StyledColorScheme\n return <Component ref={ref} className={c} {...rest} />\n }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"names":["StyledColorScheme","styled","ColorScheme","React","base","accent","interactive","className","asChild","rest","ref","c","colorSchemes","Slot"],"mappings":"gJAiBA,MAAMA,EAAoBC,EAAO,KAAK,EAQzBC,EAAcC,EAAM,WAC/B,CACE,CACE,KAAAC,EAAO,GACP,OAAAC,EAAS,GACT,YAAAC,EAAc,GACd,UAAAC,EACA,QAAAC,EAAU,MACPC,CACL,EACAC,IACG,CACH,MAAMC,EAAI,CACRJ,EACAK,EAAa,eAAeN,KAC5BM,EAAa,UAAUP,KACvBO,EAAa,QAAQR,IACvB,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAGX,OAAOD,EAAA,cADWK,EAAUK,EAAOb,EAC3B,CAAU,IAAKU,EAAK,UAAWC,EAAI,GAAGF,CAAAA,CAAM,CACtD,CACF,EAEAP,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createStitches as u}from"@stitches/react";import
|
|
1
|
+
import{createStitches as u}from"@stitches/react";import{utils as m,media as d}from"../../stitches.js";import a from"./blue.json.js";import{generateAlphaColors as s}from"./generateAlphaColors.js";import i from"./slate.json.js";const e={},l=(c,o)=>{const t={};for(let n=1;n<=10;n++)t[`${c}${n}`]=`$${o}${n}`,t[`${c}A${n}`]=`$${o}A${n}`;return t},{styled:f,createTheme:r}=u({theme:{colors:{background:"white",foreground:i.slate9,foreground6plus:"white",...a,...s("blue",a),...i,...s("slate",i)}},utils:m,media:d});e["interactive-loContrast1"]=r("interactive-loContrast1",{colors:{interactiveForeground:"$foreground",interactive1:"white",interactive2:"$accent1",interactive3:"$accent2"}}),e["interactive-loContrast2"]=r("interactive-loContrast2",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),e["interactive-hiContrast1"]=r("interactive-hiContrast1",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent7",interactive2:"$accent8",interactive3:"$accent9"}}),e["interactive-hiContrast2"]=r("interactive-hiContrast2",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent8",interactive2:"$accent9",interactive3:"$accent10"}});const $={slate:"slate"},h=()=>{Object.entries($).forEach(([c,o])=>{const t=`base-${c}`;e[t]=r(t,{colors:l("base",o)})})},v={slate:"slate",blue:"blue"},g=()=>{Object.entries(v).forEach(([c,o])=>{const t=`accent-${c}`;e[t]=r(t,{colors:l("accent",o)})})};h(),g();export{v as accents,$ as bases,e as colorSchemes,r as createTheme,f as styled};
|
|
2
2
|
//# sourceMappingURL=stitches.colorscheme.config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stitches.colorscheme.config.js","sources":["../../../src/experiments/color-scheme/stitches.colorscheme.config.ts"],"sourcesContent":["import { createStitches } from '@stitches/react'\nimport
|
|
1
|
+
{"version":3,"file":"stitches.colorscheme.config.js","sources":["../../../src/experiments/color-scheme/stitches.colorscheme.config.ts"],"sourcesContent":["import { createStitches } from '@stitches/react'\n\nimport { media, utils } from '../../stitches'\nimport blue from './blue.json'\nimport { generateAlphaColors } from './generateAlphaColors'\nimport slate from './slate.json'\n\nexport const colorSchemes = {}\n\nconst generateColors = (tokenPrefix, colorName) => {\n const colors = {}\n for (let i = 1; i <= 10; i++) {\n colors[`${tokenPrefix}${i}`] = `$${colorName}${i}`\n colors[`${tokenPrefix}A${i}`] = `$${colorName}A${i}`\n }\n return colors\n}\n\nexport const { styled, createTheme } = createStitches({\n theme: {\n colors: {\n background: 'white',\n foreground: slate.slate9,\n foreground6plus: 'white',\n ...blue,\n ...generateAlphaColors('blue', blue),\n ...slate,\n ...generateAlphaColors('slate', slate)\n }\n },\n utils,\n media\n})\n\ncolorSchemes['interactive-loContrast1'] = createTheme(\n 'interactive-loContrast1',\n {\n colors: {\n interactiveForeground: '$foreground',\n interactive1: 'white',\n interactive2: '$accent1',\n interactive3: '$accent2'\n }\n }\n)\n\ncolorSchemes['interactive-loContrast2'] = createTheme(\n 'interactive-loContrast2',\n {\n colors: {\n interactiveForeground: '$foreground',\n interactive1: '$accent1',\n interactive2: '$accent2',\n interactive3: '$accent3'\n }\n }\n)\n\ncolorSchemes['interactive-hiContrast1'] = createTheme(\n 'interactive-hiContrast1',\n {\n colors: {\n interactiveForeground: '$foreground6plus',\n interactive1: '$accent7',\n interactive2: '$accent8',\n interactive3: '$accent9'\n }\n }\n)\n\ncolorSchemes['interactive-hiContrast2'] = createTheme(\n 'interactive-hiContrast2',\n {\n colors: {\n interactiveForeground: '$foreground6plus',\n interactive1: '$accent8',\n interactive2: '$accent9',\n interactive3: '$accent10'\n }\n }\n)\n\nexport const bases = {\n slate: 'slate'\n}\nconst generateBase = () => {\n Object.entries(bases).forEach(([themeName, colorName]) => {\n const baseThemeName = `base-${themeName}`\n colorSchemes[baseThemeName] = createTheme(baseThemeName, {\n colors: generateColors('base', colorName)\n })\n })\n}\n\nexport const accents = {\n slate: 'slate',\n blue: 'blue'\n}\nconst generateAccent = () => {\n Object.entries(accents).forEach(([themeName, colorName]) => {\n const accentThemeName = `accent-${themeName}`\n colorSchemes[accentThemeName] = createTheme(accentThemeName, {\n colors: generateColors('accent', colorName)\n })\n })\n}\n\ngenerateBase()\ngenerateAccent()\n"],"names":["colorSchemes","generateColors","tokenPrefix","colorName","colors","i","styled","createTheme","createStitches","slate","blue","generateAlphaColors","utils","media","bases","generateBase","themeName","baseThemeName","accents","generateAccent","accentThemeName"],"mappings":"kOAOO,MAAMA,EAAe,CAE5B,EAAMC,EAAiB,CAACC,EAAaC,IAAc,CACjD,MAAMC,EAAS,CAAA,EACf,QAASC,EAAI,EAAGA,GAAK,GAAIA,IACvBD,EAAO,GAAGF,IAAcG,KAAO,IAAIF,IAAYE,IAC/CD,EAAO,GAAGF,KAAeG,KAAO,IAAIF,KAAaE,IAEnD,OAAOD,CACT,EAEa,CAAE,OAAAE,EAAQ,YAAAC,CAAY,EAAIC,EAAe,CACpD,MAAO,CACL,OAAQ,CACN,WAAY,QACZ,WAAYC,EAAM,OAClB,gBAAiB,QACjB,GAAGC,EACH,GAAGC,EAAoB,OAAQD,CAAI,EACnC,GAAGD,EACH,GAAGE,EAAoB,QAASF,CAAK,CACvC,CACF,EACA,MAAAG,EACA,MAAAC,CACF,CAAC,EAEDb,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,cACvB,aAAc,QACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,cACvB,aAAc,WACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,mBACvB,aAAc,WACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,mBACvB,aAAc,WACd,aAAc,WACd,aAAc,WAChB,CACF,CACF,EAEa,MAAAO,EAAQ,CACnB,MAAO,OACT,EACMC,EAAe,IAAM,CACzB,OAAO,QAAQD,CAAK,EAAE,QAAQ,CAAC,CAACE,EAAWb,CAAS,IAAM,CACxD,MAAMc,EAAgB,QAAQD,IAC9BhB,EAAaiB,GAAiBV,EAAYU,EAAe,CACvD,OAAQhB,EAAe,OAAQE,CAAS,CAC1C,CAAC,CACH,CAAC,CACH,EAEae,EAAU,CACrB,MAAO,QACP,KAAM,MACR,EACMC,EAAiB,IAAM,CAC3B,OAAO,QAAQD,CAAO,EAAE,QAAQ,CAAC,CAACF,EAAWb,CAAS,IAAM,CAC1D,MAAMiB,EAAkB,UAAUJ,IAClChB,EAAaoB,GAAmBb,EAAYa,EAAiB,CAC3D,OAAQnB,EAAe,SAAUE,CAAS,CAC5C,CAAC,CACH,CAAC,CACH,EAEAY,EAAa,EACbI,EAAe"}
|