@atom-learning/components 3.31.1 → 3.32.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 +3 -4
- package/dist/components/accordion/AccordionTrigger.js +1 -1
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/keyboard-shortcut/KeyboardShortcut.d.ts +764 -0
- package/dist/components/keyboard-shortcut/KeyboardShortcut.js +2 -0
- package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map +1 -0
- package/dist/components/keyboard-shortcut/index.d.ts +1130 -0
- package/dist/components/keyboard-shortcut/index.js +2 -0
- package/dist/components/keyboard-shortcut/index.js.map +1 -0
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.d.ts +2 -2
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/tabs/TabsTrigger.js +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/keyboard-shortcut/index.ts"],"sourcesContent":["import { KeyboardShortcut as KeyboardShortcutComponent, KeyboardShortcutIndicator } from './KeyboardShortcut'\n\n\nexport const KeyboardShortcut = Object.assign(KeyboardShortcutComponent, {\n Indicator: KeyboardShortcutIndicator\n})\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n"],"names":["KeyboardShortcut","KeyboardShortcutComponent","KeyboardShortcutIndicator"],"mappings":"8FAGaA,EAAmB,OAAO,OAAOC,EAA2B,CACvE,UAAWC,CACb,CAAC,EAEDF,EAAiB,YAAc"}
|
|
@@ -17,11 +17,11 @@ export declare const navigationMenuVerticalItemStyles: {
|
|
|
17
17
|
'&[data-state=open]': {
|
|
18
18
|
'--navigation-menu-vertical-item-font-weight': number;
|
|
19
19
|
};
|
|
20
|
-
'&[
|
|
20
|
+
'&[disabled]': {
|
|
21
21
|
opacity: number;
|
|
22
22
|
cursor: string;
|
|
23
23
|
};
|
|
24
|
-
'&:not([
|
|
24
|
+
'&:not([disabled])': {
|
|
25
25
|
'&:hover': {
|
|
26
26
|
bg: string;
|
|
27
27
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as t}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{resetButtonStyles as e,resetLinkStyles as i}from"../../utilities/style/reset.js";const o={...e,...i,cursor:"pointer",borderRadius:"$2",display:"flex",alignItems:"center",p:"$2",pl:"var(--navigation-menu-vertical-item-pl)",width:"100%",color:"$text",bg:"$background","--navigation-menu-vertical-item-font-weight":400,"&[data-active]":{bg:"$backgroundSelected",color:"$textSelected","--navigation-menu-vertical-item-font-weight":600},"&[data-state=open]":{"--navigation-menu-vertical-item-font-weight":600},"&[
|
|
1
|
+
import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as t}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{resetButtonStyles as e,resetLinkStyles as i}from"../../utilities/style/reset.js";const o={...e,...i,cursor:"pointer",borderRadius:"$2",display:"flex",alignItems:"center",p:"$2",pl:"var(--navigation-menu-vertical-item-pl)",width:"100%",color:"$text",bg:"$background","--navigation-menu-vertical-item-font-weight":400,"&[data-active]":{bg:"$backgroundSelected",color:"$textSelected","--navigation-menu-vertical-item-font-weight":600},"&[data-state=open]":{"--navigation-menu-vertical-item-font-weight":600},"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:hover":{bg:"$backgroundHover"},"&:active":{bg:"$backgroundActive"},"&:focus-visible":t()},variants:{size:{md:{minHeight:"$4"},lg:{minHeight:"$5"}}}};export{o as navigationMenuVerticalItemStyles};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuVertical.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n ...resetButtonStyles,\n ...resetLinkStyles,\n cursor: 'pointer',\n borderRadius: '$2',\n display: 'flex',\n alignItems: 'center',\n p: '$2',\n pl: `var(--navigation-menu-vertical-item-pl)`,\n width: '100%',\n color: '$text',\n bg: '$background',\n '--navigation-menu-vertical-item-font-weight': 400,\n '&[data-active]': {\n bg: '$backgroundSelected',\n color: '$textSelected',\n '--navigation-menu-vertical-item-font-weight': 600\n },\n '&[data-state=open]': {\n '--navigation-menu-vertical-item-font-weight': 600\n },\n '&[
|
|
1
|
+
{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n ...resetButtonStyles,\n ...resetLinkStyles,\n cursor: 'pointer',\n borderRadius: '$2',\n display: 'flex',\n alignItems: 'center',\n p: '$2',\n pl: `var(--navigation-menu-vertical-item-pl)`,\n width: '100%',\n color: '$text',\n bg: '$background',\n '--navigation-menu-vertical-item-font-weight': 400,\n '&[data-active]': {\n bg: '$backgroundSelected',\n color: '$textSelected',\n '--navigation-menu-vertical-item-font-weight': 600\n },\n '&[data-state=open]': {\n '--navigation-menu-vertical-item-font-weight': 600\n },\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([disabled])': {\n '&:hover': {\n bg: '$backgroundHover'\n },\n '&:active': {\n bg: '$backgroundActive'\n },\n '&:focus-visible': focusVisibleStyleBlock()\n },\n variants: {\n size: {\n md: {\n minHeight: '$4'\n },\n lg: {\n minHeight: '$5'\n }\n }\n }\n}\n"],"names":["navigationMenuVerticalItemStyles","resetButtonStyles","resetLinkStyles","focusVisibleStyleBlock"],"mappings":"4YAGaA,EAAmC,CAC9C,GAAGC,EACH,GAAGC,EACH,OAAQ,UACR,aAAc,KACd,QAAS,OACT,WAAY,SACZ,EAAG,KACH,GAAI,0CACJ,MAAO,OACP,MAAO,QACP,GAAI,cACJ,8CAA+C,IAC/C,iBAAkB,CAChB,GAAI,sBACJ,MAAO,gBACP,8CAA+C,GACjD,EACA,qBAAsB,CACpB,8CAA+C,GACjD,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,UAAW,CACT,GAAI,kBACN,EACA,WAAY,CACV,GAAI,mBACN,EACA,kBAAmBC,EAAuB,CAC5C,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,UAAW,IACb,EACA,GAAI,CACF,UAAW,IACb,CACF,CACF,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
|
|
1
|
+
import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
|
|
2
2
|
//# sourceMappingURL=PaginationPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$1',\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$1',\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"oqHAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n css?: CSS\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n color: '$tonal300',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n css?: CSS\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n color: '$tonal300',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n {\n display: 'none'\n }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n React.forwardRef(\n (\n {\n size = 'md',\n css,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(\n ref,\n () => inputElRef.current as HTMLInputElement\n )\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n css={{\n size: size == 'sm' ? '$1' : 20,\n top: '50%',\n transform: 'translateY(-50%)'\n }}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n css={{\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n right: '$1'\n }}\n onClick={handleClear}\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground css={{ position: 'relative', ...css }} size={size}>\n <StyledSearchInputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n css={{ pr: size === 'sm' ? '$5' : '$6' }}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,OAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAvFhC,IAAAC,EAAAC,EAwFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,IACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAgB,IAAK,CAAE,SAAU,WAAY,GAAG9B,CAAI,EAAG,KAAMD,CAAAA,EAC5DD,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Track as $,Root as b,Range as g,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as
|
|
1
|
+
import{Track as $,Root as b,Range as g,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as o}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const a=t($,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),R=t(b,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[disabled]":o,variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$tonal200"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[disabled]":o}),k=t(v,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[disabled]":o}),r=e.forwardRef(({value:l,defaultValue:n,min:m=0,max:d=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(y,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:m,max:d,ref:f,...c},e.createElement(a,null,e.createElement(E,null)),(i==null?void 0:i.length)&&i.map((w,h)=>e.createElement(k,{key:`thumb${h}`}))),u)});r.Value=x,r.Steps=S,r.displayName="Slider";export{r as Slider};
|
|
2
2
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper, disabledStyle } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n borderRadius: '$round',\n flexGrow: 1,\n position: 'relative',\n '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n alignItems: 'center',\n display: 'flex',\n position: 'relative',\n touchAction: 'none',\n userSelect: 'none',\n cursor: 'pointer',\n '&[data-orientation=\"horizontal\"]': {\n height: '$1'\n },\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$1'\n },\n '&[
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper, disabledStyle } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n borderRadius: '$round',\n flexGrow: 1,\n position: 'relative',\n '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n alignItems: 'center',\n display: 'flex',\n position: 'relative',\n touchAction: 'none',\n userSelect: 'none',\n cursor: 'pointer',\n '&[data-orientation=\"horizontal\"]': {\n height: '$1'\n },\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$1'\n },\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n light: {\n [`${StyledTrack}`]: { bg: '#fff' }\n },\n tonal: {\n [`${StyledTrack}`]: { bg: '$tonal200' }\n }\n }\n }\n})\n\nconst StyledRange = styled(Range, {\n bg: '$primary800',\n borderRadius: '$round',\n height: '100%',\n position: 'absolute',\n '&[disabled]': disabledStyle\n})\n\nconst StyledThumb = styled(Thumb, {\n bg: '$primary900',\n borderRadius: '$round',\n display: 'block',\n size: '$1',\n '&:hover': {\n bg: '$primary1000'\n },\n '&:focus': {\n outline: '2px solid $primary900',\n outlineOffset: '2px'\n },\n '&[disabled]': disabledStyle\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n Value: typeof SliderValue\n Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n (\n {\n value,\n defaultValue,\n min = 0,\n max = 100,\n theme = 'tonal',\n css,\n children,\n ...remainingProps\n },\n ref\n ) => {\n const values = value || defaultValue\n return (\n <CSSWrapper css={css}>\n <StyledSlider\n theme={theme}\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n ref={ref}\n {...remainingProps}\n >\n <StyledTrack>\n <StyledRange />\n </StyledTrack>\n {values?.length &&\n values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n </StyledSlider>\n {children}\n </CSSWrapper>\n )\n }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","disabledStyle","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"ogBASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,cAAeC,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,cAAeF,CACjB,CAAC,EAEKG,EAAcP,EAAOQ,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeJ,CACjB,CAAC,EASYK,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CAAAA,EACfN,EAAA,cAACR,EAAA,CACC,MAAOa,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACX,EAAA,KACCW,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as
|
|
1
|
+
import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{Text as s}from"../text/Text.js";const t=o("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),m=o(n,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[disabled]":l,"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${t}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:i,...a})=>e.createElement(m,{...a},e.createElement(s,{size:"sm",as:"span"},i),e.createElement(t,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
|
|
2
2
|
//# sourceMappingURL=TabsTrigger.js.map
|
|
@@ -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'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n position: 'absolute',\n inset: 0,\n height: 'calc(100% + 2px)',\n opacity: 0,\n bg: '$interactive1'\n})\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 position: 'relative',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[
|
|
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 { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n position: 'absolute',\n inset: 0,\n height: 'calc(100% + 2px)',\n opacity: 0,\n bg: '$interactive1'\n})\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 position: 'relative',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[disabled]': disabledStyle,\n '&:not([disabled])': {\n '&:hover, &:focus-visible': {\n color: '$interactive2',\n [`& ${StyledTabsTriggerHoverBackground}`]: {\n opacity: 0.07\n }\n },\n '&:active': {\n color: '$interactive3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\nexport const TabsTrigger = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n <StyledTabsTrigger {...rest}>\n <Text size=\"sm\" as=\"span\">\n {children}\n </Text>\n <StyledTabsTriggerHoverBackground />\n </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,cAAeC,EACf,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAEYC,EAAc,CAAC,CAC1B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}
|