├── .env-rename ├── .eslintrc.cjs ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .storybook ├── main.tsx ├── manager-head.html ├── manager.tsx ├── preview-head.html ├── preview.tsx └── theme.tsx ├── LICENSE ├── README.md ├── figma.config.json ├── index.html ├── package-lock.json ├── package.json ├── scripts ├── component-metadata │ ├── README.md │ ├── components.json │ ├── exportComponentJSON.js │ └── importComponentJSON.js ├── dev-resources │ ├── README.md │ ├── app.mjs │ └── devResources.mjs ├── icons │ ├── Icons.figma.txt │ ├── README.md │ ├── app.mjs │ ├── figma-plugin-icons-tsx │ │ ├── code.js │ │ └── manifest.json │ ├── icons-index.txt │ └── icons.json └── tokens │ ├── README.md │ ├── app.mjs │ ├── figma-plugin-styles-json │ ├── code.js │ └── manifest.json │ ├── figma-plugin-token-json │ ├── README.md │ ├── code.js │ └── manifest.json │ ├── fromFigma.mjs │ ├── styles.json │ ├── tokenVariableSyntaxAndDescriptionSnippet.js │ └── tokens.json ├── src ├── App.tsx ├── figma │ ├── compositions │ │ ├── CardGrids.figma.tsx │ │ ├── Cards.figma.tsx │ │ ├── Footers.figma.tsx │ │ ├── Forms.figma.tsx │ │ ├── Headers.figma.tsx │ │ ├── Heroes.figma.tsx │ │ ├── Pages.figma.tsx │ │ └── Panels.figma.tsx │ ├── icons │ │ └── Icons.figma.tsx │ └── primitives │ │ ├── Accordion.figma.tsx │ │ ├── Avatar.figma.tsx │ │ ├── Button.figma.tsx │ │ ├── Checkbox.figma.tsx │ │ ├── Dialog.figma.tsx │ │ ├── IconButton.figma.tsx │ │ ├── Input.figma.tsx │ │ ├── Menu.figma.tsx │ │ ├── Navigation.figma.tsx │ │ ├── Notification.figma.tsx │ │ ├── Pagination.figma.tsx │ │ ├── Radio.figma.tsx │ │ ├── Search.figma.tsx │ │ ├── Select.figma.tsx │ │ ├── Slider.figma.tsx │ │ ├── Switch.figma.tsx │ │ ├── Tab.figma.tsx │ │ ├── Tag.figma.tsx │ │ ├── Text.figma.tsx │ │ ├── Textarea.figma.tsx │ │ └── Tooltip.figma.tsx ├── icons.css ├── index.css ├── index.d.ts ├── main.tsx ├── reset.css ├── responsive.css ├── stories │ ├── _welcome │ │ └── Hello.stories.tsx │ ├── compositions │ │ ├── Cards.stories.tsx │ │ └── Forms.stories.tsx │ ├── hooks │ │ └── useMediaQuery.stories.tsx │ ├── layout │ │ ├── Flex.stories.tsx │ │ ├── Grid.stories.tsx │ │ └── Section.stories.tsx │ └── primitives │ │ ├── Accordion.stories.tsx │ │ ├── Avatar.stories.tsx │ │ ├── Button.stories.tsx │ │ ├── Checkbox.stories.tsx │ │ ├── Dialog.stories.tsx │ │ ├── Fieldset.stories.tsx │ │ ├── IconButton.stories.tsx │ │ ├── Image.stories.tsx │ │ ├── Input.stories.tsx │ │ ├── Link.stories.tsx │ │ ├── ListBox.stories.tsx │ │ ├── Menu.stories.tsx │ │ ├── Navigation.stories.tsx │ │ ├── Notification.stories.tsx │ │ ├── Pagination.stories.tsx │ │ ├── Radio.stories.tsx │ │ ├── Search.stories.tsx │ │ ├── Select.stories.tsx │ │ ├── Slider.stories.tsx │ │ ├── Switch.stories.tsx │ │ ├── Tab.stories.tsx │ │ ├── Table.stories.tsx │ │ ├── Tag.stories.tsx │ │ ├── Text.stories.tsx │ │ ├── Textarea.stories.tsx │ │ └── Tooltip.stories.tsx ├── theme.css ├── ui │ ├── compositions │ │ ├── Cards │ │ │ ├── Cards.tsx │ │ │ └── cards.css │ │ ├── Footers │ │ │ └── Footers.tsx │ │ ├── Forms │ │ │ ├── Forms.tsx │ │ │ └── forms.css │ │ ├── Headers │ │ │ ├── Headers.tsx │ │ │ └── headers.css │ │ ├── Sections │ │ │ ├── Heroes.tsx │ │ │ └── Panels.tsx │ │ └── index.ts │ ├── hooks │ │ ├── index.ts │ │ └── useMediaQuery.tsx │ ├── icons │ │ ├── IconActivity.tsx │ │ ├── IconAirplay.tsx │ │ ├── IconAlertCircle.tsx │ │ ├── IconAlertOctagon.tsx │ │ ├── IconAlertTriangle.tsx │ │ ├── IconAlignCenter.tsx │ │ ├── IconAlignJustify.tsx │ │ ├── IconAlignLeft.tsx │ │ ├── IconAlignRight.tsx │ │ ├── IconAnchor.tsx │ │ ├── IconAperture.tsx │ │ ├── IconArchive.tsx │ │ ├── IconArrowDown.tsx │ │ ├── IconArrowDownCircle.tsx │ │ ├── IconArrowDownLeft.tsx │ │ ├── IconArrowDownRight.tsx │ │ ├── IconArrowLeft.tsx │ │ ├── IconArrowLeftCircle.tsx │ │ ├── IconArrowRight.tsx │ │ ├── IconArrowRightCircle.tsx │ │ ├── IconArrowUp.tsx │ │ ├── IconArrowUpCircle.tsx │ │ ├── IconArrowUpLeft.tsx │ │ ├── IconArrowUpRight.tsx │ │ ├── IconAtSign.tsx │ │ ├── IconAward.tsx │ │ ├── IconBarChart.tsx │ │ ├── IconBarChart2.tsx │ │ ├── IconBattery.tsx │ │ ├── IconBatteryCharging.tsx │ │ ├── IconBell.tsx │ │ ├── IconBellOff.tsx │ │ ├── IconBluetooth.tsx │ │ ├── IconBold.tsx │ │ ├── IconBook.tsx │ │ ├── IconBookOpen.tsx │ │ ├── IconBookmark.tsx │ │ ├── IconBox.tsx │ │ ├── IconBriefcase.tsx │ │ ├── IconCalendar.tsx │ │ ├── IconCamera.tsx │ │ ├── IconCameraOff.tsx │ │ ├── IconCast.tsx │ │ ├── IconCheck.tsx │ │ ├── IconCheckCircle.tsx │ │ ├── IconCheckSquare.tsx │ │ ├── IconChevronDown.tsx │ │ ├── IconChevronLeft.tsx │ │ ├── IconChevronRight.tsx │ │ ├── IconChevronUp.tsx │ │ ├── IconChevronsDown.tsx │ │ ├── IconChevronsLeft.tsx │ │ ├── IconChevronsRight.tsx │ │ ├── IconChevronsUp.tsx │ │ ├── IconChrome.tsx │ │ ├── IconCircle.tsx │ │ ├── IconClipboard.tsx │ │ ├── IconClock.tsx │ │ ├── IconCloud.tsx │ │ ├── IconCloudDrizzle.tsx │ │ ├── IconCloudLightning.tsx │ │ ├── IconCloudOff.tsx │ │ ├── IconCloudRain.tsx │ │ ├── IconCloudSnow.tsx │ │ ├── IconCode.tsx │ │ ├── IconCodepen.tsx │ │ ├── IconCodesandbox.tsx │ │ ├── IconCoffee.tsx │ │ ├── IconColumns.tsx │ │ ├── IconCommand.tsx │ │ ├── IconCompass.tsx │ │ ├── IconCopy.tsx │ │ ├── IconCornerDownLeft.tsx │ │ ├── IconCornerDownRight.tsx │ │ ├── IconCornerLeftDown.tsx │ │ ├── IconCornerLeftUp.tsx │ │ ├── IconCornerRightDown.tsx │ │ ├── IconCornerRightUp.tsx │ │ ├── IconCornerUpLeft.tsx │ │ ├── IconCornerUpRight.tsx │ │ ├── IconCpu.tsx │ │ ├── IconCreditCard.tsx │ │ ├── IconCrop.tsx │ │ ├── IconCrosshair.tsx │ │ ├── IconDatabase.tsx │ │ ├── IconDelete.tsx │ │ ├── IconDisc.tsx │ │ ├── IconDivide.tsx │ │ ├── IconDivideCircle.tsx │ │ ├── IconDivideSquare.tsx │ │ ├── IconDollarSign.tsx │ │ ├── IconDownload.tsx │ │ ├── IconDownloadCloud.tsx │ │ ├── IconDribbble.tsx │ │ ├── IconDroplet.tsx │ │ ├── IconEdit.tsx │ │ ├── IconEdit2.tsx │ │ ├── IconEdit3.tsx │ │ ├── IconExternalLink.tsx │ │ ├── IconEye.tsx │ │ ├── IconEyeOff.tsx │ │ ├── IconFacebook.tsx │ │ ├── IconFastForward.tsx │ │ ├── IconFeather.tsx │ │ ├── IconFigma.tsx │ │ ├── IconFile.tsx │ │ ├── IconFileMinus.tsx │ │ ├── IconFilePlus.tsx │ │ ├── IconFileText.tsx │ │ ├── IconFilm.tsx │ │ ├── IconFilter.tsx │ │ ├── IconFlag.tsx │ │ ├── IconFolder.tsx │ │ ├── IconFolderMinus.tsx │ │ ├── IconFolderPlus.tsx │ │ ├── IconFramer.tsx │ │ ├── IconFrown.tsx │ │ ├── IconGift.tsx │ │ ├── IconGitBranch.tsx │ │ ├── IconGitCommit.tsx │ │ ├── IconGitMerge.tsx │ │ ├── IconGitPullRequest.tsx │ │ ├── IconGithub.tsx │ │ ├── IconGitlab.tsx │ │ ├── IconGlobe.tsx │ │ ├── IconGrid.tsx │ │ ├── IconHardDrive.tsx │ │ ├── IconHash.tsx │ │ ├── IconHeadphones.tsx │ │ ├── IconHeart.tsx │ │ ├── IconHelpCircle.tsx │ │ ├── IconHexagon.tsx │ │ ├── IconHome.tsx │ │ ├── IconImage.tsx │ │ ├── IconInbox.tsx │ │ ├── IconInfo.tsx │ │ ├── IconInstagram.tsx │ │ ├── IconItalic.tsx │ │ ├── IconKey.tsx │ │ ├── IconLayers.tsx │ │ ├── IconLayout.tsx │ │ ├── IconLifeBuoy.tsx │ │ ├── IconLink.tsx │ │ ├── IconLink2.tsx │ │ ├── IconLinkedin.tsx │ │ ├── IconList.tsx │ │ ├── IconLoader.tsx │ │ ├── IconLock.tsx │ │ ├── IconLogIn.tsx │ │ ├── IconLogOut.tsx │ │ ├── IconMail.tsx │ │ ├── IconMap.tsx │ │ ├── IconMapPin.tsx │ │ ├── IconMaximize.tsx │ │ ├── IconMaximize2.tsx │ │ ├── IconMeh.tsx │ │ ├── IconMenu.tsx │ │ ├── IconMessageCircle.tsx │ │ ├── IconMessageSquare.tsx │ │ ├── IconMic.tsx │ │ ├── IconMicOff.tsx │ │ ├── IconMinimize.tsx │ │ ├── IconMinimize2.tsx │ │ ├── IconMinus.tsx │ │ ├── IconMinusCircle.tsx │ │ ├── IconMinusSquare.tsx │ │ ├── IconMonitor.tsx │ │ ├── IconMoon.tsx │ │ ├── IconMoreHorizontal.tsx │ │ ├── IconMoreVertical.tsx │ │ ├── IconMousePointer.tsx │ │ ├── IconMove.tsx │ │ ├── IconMusic.tsx │ │ ├── IconNavigation.tsx │ │ ├── IconNavigation2.tsx │ │ ├── IconOctagon.tsx │ │ ├── IconPackage.tsx │ │ ├── IconPaperclip.tsx │ │ ├── IconPause.tsx │ │ ├── IconPauseCircle.tsx │ │ ├── IconPenTool.tsx │ │ ├── IconPercent.tsx │ │ ├── IconPhone.tsx │ │ ├── IconPhoneCall.tsx │ │ ├── IconPhoneForwarded.tsx │ │ ├── IconPhoneIncoming.tsx │ │ ├── IconPhoneMissed.tsx │ │ ├── IconPhoneOff.tsx │ │ ├── IconPhoneOutgoing.tsx │ │ ├── IconPieChart.tsx │ │ ├── IconPlay.tsx │ │ ├── IconPlayCircle.tsx │ │ ├── IconPlus.tsx │ │ ├── IconPlusCircle.tsx │ │ ├── IconPlusSquare.tsx │ │ ├── IconPocket.tsx │ │ ├── IconPower.tsx │ │ ├── IconPrinter.tsx │ │ ├── IconRadio.tsx │ │ ├── IconRefreshCcw.tsx │ │ ├── IconRefreshCw.tsx │ │ ├── IconRepeat.tsx │ │ ├── IconRewind.tsx │ │ ├── IconRotateCcw.tsx │ │ ├── IconRotateCw.tsx │ │ ├── IconRss.tsx │ │ ├── IconSave.tsx │ │ ├── IconScissors.tsx │ │ ├── IconSearch.tsx │ │ ├── IconSend.tsx │ │ ├── IconServer.tsx │ │ ├── IconSettings.tsx │ │ ├── IconShare.tsx │ │ ├── IconShare2.tsx │ │ ├── IconShield.tsx │ │ ├── IconShieldOff.tsx │ │ ├── IconShoppingBag.tsx │ │ ├── IconShoppingCart.tsx │ │ ├── IconShuffle.tsx │ │ ├── IconSidebar.tsx │ │ ├── IconSkipBack.tsx │ │ ├── IconSkipForward.tsx │ │ ├── IconSlack.tsx │ │ ├── IconSlash.tsx │ │ ├── IconSliders.tsx │ │ ├── IconSmartphone.tsx │ │ ├── IconSmile.tsx │ │ ├── IconSpeaker.tsx │ │ ├── IconSquare.tsx │ │ ├── IconStar.tsx │ │ ├── IconStopCircle.tsx │ │ ├── IconSun.tsx │ │ ├── IconSunrise.tsx │ │ ├── IconSunset.tsx │ │ ├── IconTable.tsx │ │ ├── IconTablet.tsx │ │ ├── IconTag.tsx │ │ ├── IconTarget.tsx │ │ ├── IconTerminal.tsx │ │ ├── IconThermometer.tsx │ │ ├── IconThumbsDown.tsx │ │ ├── IconThumbsUp.tsx │ │ ├── IconToggleLeft.tsx │ │ ├── IconToggleRight.tsx │ │ ├── IconTool.tsx │ │ ├── IconTrash.tsx │ │ ├── IconTrash2.tsx │ │ ├── IconTrello.tsx │ │ ├── IconTrendingDown.tsx │ │ ├── IconTrendingUp.tsx │ │ ├── IconTriangle.tsx │ │ ├── IconTruck.tsx │ │ ├── IconTv.tsx │ │ ├── IconTwitch.tsx │ │ ├── IconTwitter.tsx │ │ ├── IconType.tsx │ │ ├── IconUmbrella.tsx │ │ ├── IconUnderline.tsx │ │ ├── IconUnlock.tsx │ │ ├── IconUpload.tsx │ │ ├── IconUploadCloud.tsx │ │ ├── IconUser.tsx │ │ ├── IconUserCheck.tsx │ │ ├── IconUserMinus.tsx │ │ ├── IconUserPlus.tsx │ │ ├── IconUserX.tsx │ │ ├── IconUsers.tsx │ │ ├── IconVideo.tsx │ │ ├── IconVideoOff.tsx │ │ ├── IconVoicemail.tsx │ │ ├── IconVolume.tsx │ │ ├── IconVolume1.tsx │ │ ├── IconVolume2.tsx │ │ ├── IconVolumeX.tsx │ │ ├── IconWatch.tsx │ │ ├── IconWifi.tsx │ │ ├── IconWifiOff.tsx │ │ ├── IconWind.tsx │ │ ├── IconX.tsx │ │ ├── IconXCircle.tsx │ │ ├── IconXOctagon.tsx │ │ ├── IconXSquare.tsx │ │ ├── IconYoutube.tsx │ │ ├── IconZap.tsx │ │ ├── IconZapOff.tsx │ │ ├── IconZoomIn.tsx │ │ ├── IconZoomOut.tsx │ │ └── index.ts │ ├── images │ │ ├── index.ts │ │ └── placeholder.svg │ ├── layout │ │ ├── Flex │ │ │ ├── Flex.tsx │ │ │ └── flex.css │ │ ├── Grid │ │ │ ├── Grid.tsx │ │ │ └── grid.css │ │ ├── Section │ │ │ ├── Section.tsx │ │ │ └── section.css │ │ └── index.ts │ ├── primitives │ │ ├── Accordion │ │ │ ├── Accordion.tsx │ │ │ └── accordion.css │ │ ├── Avatar │ │ │ ├── Avatar.tsx │ │ │ └── avatar.css │ │ ├── Button │ │ │ ├── Button.tsx │ │ │ └── button.css │ │ ├── Checkbox │ │ │ ├── Checkbox.tsx │ │ │ └── checkbox.css │ │ ├── Dialog │ │ │ ├── Dialog.tsx │ │ │ └── dialog.css │ │ ├── Fieldset │ │ │ ├── Fieldset.tsx │ │ │ └── fieldset.css │ │ ├── Icon │ │ │ └── Icon.tsx │ │ ├── IconButton │ │ │ ├── IconButton.tsx │ │ │ └── iconButton.css │ │ ├── Image │ │ │ ├── Image.tsx │ │ │ └── image.css │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ └── input.css │ │ ├── Link │ │ │ ├── Link.tsx │ │ │ └── link.css │ │ ├── ListBox │ │ │ ├── ListBox.tsx │ │ │ └── listBox.css │ │ ├── Logo │ │ │ ├── Logo.tsx │ │ │ └── logo.css │ │ ├── Menu │ │ │ ├── Menu.tsx │ │ │ └── menu.css │ │ ├── Navigation │ │ │ ├── Navigation.tsx │ │ │ └── navigation.css │ │ ├── Notification │ │ │ ├── Notification.tsx │ │ │ └── notification.css │ │ ├── Pagination │ │ │ ├── Pagination.tsx │ │ │ └── pagination.css │ │ ├── Radio │ │ │ ├── Radio.tsx │ │ │ └── radio.css │ │ ├── Search │ │ │ ├── Search.tsx │ │ │ └── search.css │ │ ├── Select │ │ │ ├── Select.tsx │ │ │ └── select.css │ │ ├── Slider │ │ │ ├── Slider.tsx │ │ │ └── slider.css │ │ ├── Switch │ │ │ ├── Switch.tsx │ │ │ └── switch.css │ │ ├── Tab │ │ │ ├── Tab.tsx │ │ │ └── tab.css │ │ ├── Table │ │ │ ├── Table.tsx │ │ │ └── table.css │ │ ├── Tag │ │ │ ├── Tag.tsx │ │ │ └── tag.css │ │ ├── Text │ │ │ ├── Text.tsx │ │ │ └── text.css │ │ ├── Textarea │ │ │ ├── Textarea.tsx │ │ │ └── textarea.css │ │ ├── Tooltip │ │ │ ├── Tooltip.tsx │ │ │ └── tooltip.css │ │ └── index.ts │ ├── providers │ │ ├── Authentication.tsx │ │ └── index.ts │ └── utils │ │ ├── AnchorOrButton.tsx │ │ └── index.ts └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts /.env-rename: -------------------------------------------------------------------------------- 1 | FIGMA_ACCESS_TOKEN=your_token_with_code_connect_variables_and_dev_resources_scopes 2 | FIGMA_FILE_KEY=J0KLPKXiONDRssXD1AX9Oi -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended", 7 | "plugin:react-hooks/recommended", 8 | "plugin:storybook/recommended", 9 | ], 10 | ignorePatterns: ["dist", ".eslintrc.cjs"], 11 | parser: "@typescript-eslint/parser", 12 | parserOptions: { 13 | ecmaVersion: "latest", 14 | sourceType: "module", 15 | project: ["./tsconfig.json", "./tsconfig.node.json"], 16 | tsconfigRootDir: __dirname, 17 | }, 18 | plugins: ["react-refresh"], 19 | rules: { 20 | "react-refresh/only-export-components": [ 21 | "warn", 22 | { allowConstantExport: true }, 23 | ], 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | .VSCodeCounter 16 | 17 | # Editor directories and files 18 | .vscode/* 19 | !.vscode/extensions.json 20 | .idea 21 | .DS_Store 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | *storybook.log -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.storybook/manager.tsx: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/manager-api"; 2 | import "../src/index.css"; 3 | import "../src/theme.css"; 4 | import theme from "./theme"; 5 | 6 | addons.setConfig({ 7 | theme: theme, 8 | }); 9 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from "@storybook/react"; 2 | import "../src/index.css"; 3 | import "../src/theme.css"; 4 | import theme from "./theme"; 5 | 6 | const preview: Preview = { 7 | parameters: { 8 | docs: { 9 | theme: theme, 10 | }, 11 | }, 12 | 13 | tags: [], 14 | }; 15 | 16 | export default preview; 17 | -------------------------------------------------------------------------------- /.storybook/theme.tsx: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming/create"; 2 | 3 | export default create({ 4 | base: "light", 5 | // Typography 6 | fontBase: '"Inter", sans-serif', 7 | fontCode: '"Roboto Mono", monospace', 8 | 9 | brandTitle: "Figma SDS", 10 | brandUrl: "https://figma.com", 11 | brandTarget: "_self", 12 | 13 | // 14 | colorPrimary: "#3A10E5", 15 | colorSecondary: "#585C6D", 16 | 17 | // UI 18 | appBg: "#ffffff", 19 | appContentBg: "#ffffff", 20 | appPreviewBg: "#ffffff", 21 | appBorderColor: "#f5f5f5", 22 | appBorderRadius: 4, 23 | 24 | // Text colors 25 | textColor: "#1e1e1e", 26 | textInverseColor: "#ffffff", 27 | 28 | // Toolbar default and active colors 29 | barTextColor: "#9E9E9E", 30 | barSelectedColor: "#585C6D", 31 | barHoverColor: "#585C6D", 32 | barBg: "#ffffff", 33 | 34 | // Form colors 35 | inputBg: "#ffffff", 36 | inputBorder: "#f5f5f5", 37 | inputTextColor: "#1e1e1e", 38 | inputBorderRadius: 2, 39 | }); 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | SDS 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /scripts/component-metadata/README.md: -------------------------------------------------------------------------------- 1 | # SDS Component Metadata (JS Console) 2 | 3 | [Instructions](/README.md#scriptscomponent-metadata) 4 | -------------------------------------------------------------------------------- /scripts/component-metadata/importComponentJSON.js: -------------------------------------------------------------------------------- 1 | // paste the JSON from componentJSON.json here as the value of json. 2 | // Then copy the contents of this file and run in the console to set the descriptions. 3 | const json = {}; 4 | const LINE_BREAK = "\n\n"; 5 | 6 | figma.root.children.forEach(async (page) => { 7 | await page.loadAsync(); 8 | page 9 | .findAllWithCriteria({ types: ["COMPONENT_SET", "COMPONENT"] }) 10 | .filter((a) => a.parent.type !== "COMPONENT_SET") 11 | .forEach((item) => { 12 | const data = json[item.key]; 13 | const description = data.description || []; 14 | if (description.length) { 15 | item.description = description.join(LINE_BREAK); 16 | } 17 | }); 18 | }, {}); 19 | -------------------------------------------------------------------------------- /scripts/dev-resources/README.md: -------------------------------------------------------------------------------- 1 | # SDS Dev Resources (REST) 2 | 3 | [Instructions](/README.md#scriptsdev-resources) 4 | -------------------------------------------------------------------------------- /scripts/icons/README.md: -------------------------------------------------------------------------------- 1 | # SDS Icon Generator (REST or Plugin) 2 | 3 | [Instructions](/README.md#scriptsicons) 4 | -------------------------------------------------------------------------------- /scripts/icons/figma-plugin-icons-tsx/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SDS - Figma Icons TSX", 3 | "id": "1225498390710809904", 4 | "api": "1.0.0", 5 | "editorType": ["figma"], 6 | "capabilities": [], 7 | "permissions": [], 8 | "main": "code.js", 9 | "networkAccess": { "allowedDomains": ["none"] } 10 | } 11 | -------------------------------------------------------------------------------- /scripts/tokens/README.md: -------------------------------------------------------------------------------- 1 | # SDS Token Generator (REST or Plugin) 2 | 3 | [Instructions](/README.md#scriptstokens) 4 | -------------------------------------------------------------------------------- /scripts/tokens/figma-plugin-styles-json/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SDS - Figma Styles JSON", 3 | "id": "1225498390710809901", 4 | "api": "1.0.0", 5 | "editorType": ["figma"], 6 | "permissions": [], 7 | "main": "code.js", 8 | "networkAccess": { "allowedDomains": ["none"] } 9 | } 10 | -------------------------------------------------------------------------------- /scripts/tokens/figma-plugin-token-json/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SDS - Figma Token JSON", 3 | "id": "1225498390710809903", 4 | "api": "1.0.0", 5 | "editorType": ["figma"], 6 | "permissions": [], 7 | "main": "code.js", 8 | "networkAccess": { "allowedDomains": ["none"] } 9 | } 10 | -------------------------------------------------------------------------------- /src/figma/compositions/Footers.figma.tsx: -------------------------------------------------------------------------------- 1 | import { figma } from "@figma/code-connect"; 2 | import { Footer } from "compositions"; 3 | 4 | figma.connect(Footer, ""); 5 | -------------------------------------------------------------------------------- /src/figma/compositions/Headers.figma.tsx: -------------------------------------------------------------------------------- 1 | import { figma } from "@figma/code-connect"; 2 | import { Header, HeaderAuth } from "compositions"; 3 | 4 | figma.connect(Header, ""); 5 | figma.connect(HeaderAuth, ""); 6 | -------------------------------------------------------------------------------- /src/figma/primitives/Accordion.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { Accordion, AccordionItem } from "primitives"; 3 | 4 | figma.connect(Accordion, "", { 5 | props: { 6 | children: figma.children("Accordion Item"), 7 | }, 8 | example: ({ children }) => {children}, 9 | }); 10 | 11 | figma.connect(AccordionItem, "", { 12 | props: { 13 | dataSelected: figma.enum("State", { 14 | Open: "true", 15 | }), 16 | title: figma.string("Title"), 17 | children: figma.string("Content"), 18 | }, 19 | example: ({ dataSelected, ...props }) => , 20 | }); 21 | -------------------------------------------------------------------------------- /src/figma/primitives/Checkbox.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { CheckboxField, CheckboxGroup } from "primitives"; 3 | 4 | figma.connect(CheckboxField, "", { 5 | props: { 6 | label: figma.string("Label"), 7 | description: figma.boolean("Has Description", { 8 | true: figma.string("Description"), 9 | false: undefined, 10 | }), 11 | defaultSelected: figma.enum("Value Type", { 12 | Checked: true, 13 | Indeterminate: true, 14 | }), 15 | isIndeterminate: figma.enum("Value Type", { 16 | Indeterminate: true, 17 | }), 18 | isDisabled: figma.enum("State", { 19 | Disabled: true, 20 | }), 21 | }, 22 | example: ({ ...props }) => , 23 | }); 24 | 25 | figma.connect(CheckboxGroup, "", { 26 | props: { children: figma.children(["Checkbox Field"]) }, 27 | example: ({ children }) => {children}, 28 | }); 29 | -------------------------------------------------------------------------------- /src/figma/primitives/IconButton.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { IconButton } from "primitives"; 3 | 4 | const sharedProps = { 5 | icon: figma.instance("Icon"), 6 | isDisabled: figma.enum("State", { 7 | Disabled: true, 8 | }), 9 | size: figma.enum("Size", { 10 | Small: "small", 11 | }), 12 | }; 13 | 14 | figma.connect(IconButton, "", { 15 | props: { 16 | ...sharedProps, 17 | variant: figma.enum("Variant", { 18 | Primary: "primary", 19 | Neutral: "neutral", 20 | Subtle: "subtle", 21 | }), 22 | }, 23 | example: ({ icon, ...props }) => ( 24 | {}} 27 | {...props} 28 | > 29 | {icon} 30 | 31 | ), 32 | }); 33 | -------------------------------------------------------------------------------- /src/figma/primitives/Notification.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { Notification, Text, TextStrong } from "primitives"; 3 | 4 | figma.connect(Notification, "", { 5 | props: { 6 | title: figma.string("Title"), 7 | icon: figma.boolean("Has Icon", { 8 | true: figma.instance("Icon"), 9 | false: undefined, 10 | }), 11 | isDismissible: figma.boolean("Dismissible"), 12 | button: figma.children("Button"), 13 | body: figma.string("Body"), 14 | variant: figma.enum("Variant", { 15 | Message: "message", 16 | Alert: "alert", 17 | }), 18 | }, 19 | example: ({ button, body, title, ...props }) => ( 20 | 21 | {title} 22 | {body} 23 | {button} 24 | 25 | ), 26 | }); 27 | -------------------------------------------------------------------------------- /src/figma/primitives/Radio.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { RadioField, RadioGroup } from "primitives"; 3 | 4 | figma.connect(RadioField, "", { 5 | props: { 6 | label: figma.string("Label"), 7 | description: figma.boolean("Has Description", { 8 | true: figma.string("Description"), 9 | false: undefined, 10 | }), 11 | isDisabled: figma.enum("State", { Disabled: true }), 12 | }, 13 | example: ({ ...props }) => , 14 | }); 15 | 16 | figma.connect(RadioGroup, "", { 17 | props: { children: figma.children(["Radio Field"]) }, 18 | example: ({ children }) => {children}, 19 | }); 20 | -------------------------------------------------------------------------------- /src/figma/primitives/Search.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { Search } from "primitives"; 3 | 4 | figma.connect(Search, "", { 5 | props: { 6 | value: figma.enum("Value Type", { 7 | Default: figma.string("Value"), 8 | }), 9 | placeholder: figma.enum("Value Type", { 10 | Default: "Placeholder here...", 11 | Placeholder: figma.string("Value"), 12 | }), 13 | disabled: figma.enum("State", { 14 | Disabled: true, 15 | }), 16 | }, 17 | example: ({ ...props }) => , 18 | }); 19 | -------------------------------------------------------------------------------- /src/figma/primitives/Slider.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { SliderField } from "primitives"; 3 | 4 | figma.connect(SliderField, "", { 5 | props: { 6 | isDisabled: figma.enum("State", { Disabled: true }), 7 | label: figma.string("Label"), 8 | description: figma.boolean("Has Description", { 9 | true: figma.string("Description"), 10 | false: undefined, 11 | }), 12 | }, 13 | example: ({ ...props }) => , 14 | }); 15 | -------------------------------------------------------------------------------- /src/figma/primitives/Switch.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { SwitchField } from "primitives"; 3 | 4 | figma.connect(SwitchField, "", { 5 | props: { 6 | label: figma.string("Label"), 7 | description: figma.boolean("Has Description", { 8 | true: figma.string("Description"), 9 | false: undefined, 10 | }), 11 | defaultSelected: figma.enum("Value Type", { 12 | Checked: true, 13 | }), 14 | isDisabled: figma.enum("State", { 15 | Disabled: true, 16 | }), 17 | }, 18 | example: ({ ...props }) => , 19 | }); 20 | -------------------------------------------------------------------------------- /src/figma/primitives/Tab.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { Tab, TabList, TabPanel, Tabs } from "primitives"; 3 | 4 | figma.connect(Tab, "", { 5 | props: { 6 | label: figma.string("Label"), 7 | }, 8 | example: ({ label }) => {label}, 9 | }); 10 | 11 | figma.connect(Tabs, "", { 12 | props: { 13 | children: figma.children("Tab"), 14 | }, 15 | example: ({ children }) => ( 16 | 17 | {children} 18 | Some stuff 19 | 20 | ), 21 | }); 22 | -------------------------------------------------------------------------------- /src/figma/primitives/Tooltip.figma.tsx: -------------------------------------------------------------------------------- 1 | import figma from "@figma/code-connect"; 2 | import { TextSmall, TextStrong, Tooltip } from "primitives"; 3 | 4 | figma.connect(Tooltip, "", { 5 | props: { 6 | body: figma.boolean("Has Body", { 7 | true: {figma.string("Body")}, 8 | false: undefined, 9 | }), 10 | title: figma.string("Title"), 11 | placement: figma.enum("Placement", { 12 | Bottom: "bottom", 13 | Top: "top", 14 | Right: "right", 15 | Left: "left", 16 | }), 17 | }, 18 | example: ({ title, body, ...props }) => ( 19 | 20 | {title} 21 | {body} 22 | 23 | ), 24 | }); 25 | -------------------------------------------------------------------------------- /src/icons.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | --icon-color: var(--sds-color-icon-brand-default); 3 | --svg-stroke-color: var(--icon-color); 4 | --svg-fill-color: var(--icon-color); 5 | height: var(--icon-diameter); 6 | width: var(--icon-diameter); 7 | } 8 | 9 | .icon-size-14 { 10 | --icon-diameter: var(--sds-typography-scale-02); 11 | } 12 | .icon-size-16 { 13 | --icon-diameter: var(--sds-typography-scale-03); 14 | } 15 | .icon-size-20 { 16 | --icon-diameter: var(--sds-typography-scale-04); 17 | } 18 | .icon-size-24 { 19 | --icon-diameter: var(--sds-size-icon-small); 20 | } 21 | .icon-size-32 { 22 | --icon-diameter: var(--sds-size-icon-medium); 23 | } 24 | .icon-size-40 { 25 | --icon-diameter: var(--sds-size-icon-large); 26 | } 27 | .icon-size-48 { 28 | --icon-diameter: var(--sds-typography-scale-08); 29 | } 30 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | import "react"; 2 | 3 | declare module "react" { 4 | interface CSSProperties { 5 | [key: `--${string}`]: string | number; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/reset.css: -------------------------------------------------------------------------------- 1 | a, 2 | button, 3 | legend, 4 | fieldset, 5 | select, 6 | input, 7 | textarea { 8 | all: unset; 9 | line-height: 1; 10 | } 11 | 12 | div, 13 | button, 14 | select, 15 | input, 16 | textarea, 17 | span { 18 | box-sizing: border-box; 19 | } 20 | -------------------------------------------------------------------------------- /src/stories/compositions/Forms.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta, StoryObj } from "@storybook/react"; 2 | import { FormBox } from "compositions"; 3 | import { Button, ButtonGroup, CheckboxField, InputField } from "primitives"; 4 | 5 | const meta: Meta = { 6 | component: FormBox, 7 | title: "SDS Compositions/Forms", 8 | parameters: { layout: "centered" }, 9 | }; 10 | export default meta; 11 | 12 | export const StoryFormBox: StoryObj = { 13 | name: "Forms", 14 | render: (args) => ( 15 | {}}> 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | ), 26 | }; 27 | -------------------------------------------------------------------------------- /src/stories/hooks/useMediaQuery.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { useMediaQuery } from "hooks"; 3 | 4 | function Example() { 5 | const output = useMediaQuery(); 6 | return 
{JSON.stringify(output, null, 2)}
; 7 | } 8 | 9 | const meta: Meta = { 10 | component: Example, 11 | title: "SDS Hooks/useMediaQuery", 12 | parameters: { layout: "centered" }, 13 | }; 14 | export default meta; 15 | 16 | export const StoryUseMediaQuery: StoryObj = { 17 | name: "useMediaQuery", 18 | render: () => , 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/primitives/Input.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { InputField } from "primitives"; 3 | 4 | const meta: Meta = { 5 | component: InputField, 6 | title: "SDS Primitives/Inputs", 7 | parameters: { layout: "centered" }, 8 | }; 9 | export default meta; 10 | type Story = StoryObj; 11 | 12 | export const StoryInputField: Story = { 13 | name: "Input Field", 14 | args: { 15 | label: "I am a field", 16 | description: "I am a description", 17 | isDisabled: false, 18 | placeholder: "I am a placeholder", 19 | isRequired: false, 20 | type: "email", 21 | }, 22 | render: (args) => , 23 | }; 24 | -------------------------------------------------------------------------------- /src/stories/primitives/Link.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { Link } from "primitives"; 3 | 4 | const meta: Meta = { 5 | component: Link, 6 | title: "SDS Primitives/Link", 7 | parameters: { layout: "centered" }, 8 | }; 9 | export default meta; 10 | type Story = StoryObj; 11 | 12 | export const StoryLink: Story = { 13 | name: "Link", 14 | args: { children: "Hello world!", href: "https://www.figma.com" }, 15 | render: (args) => {args.children}, 16 | }; 17 | -------------------------------------------------------------------------------- /src/stories/primitives/Select.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { SelectField, SelectItem } from "primitives"; 3 | 4 | const meta: Meta = { 5 | component: SelectField, 6 | title: "SDS Primitives/Inputs", 7 | parameters: { layout: "centered" }, 8 | }; 9 | export default meta; 10 | type Story = StoryObj; 11 | 12 | export const StorySelectField: Story = { 13 | name: "Select Field", 14 | args: {}, 15 | render: (args) => ( 16 | 23 | Monday 24 | Tuesday 25 | Wednesday 26 | Thursday 27 | Friday 28 | Saturday 29 | Sunday 30 | 31 | ), 32 | }; 33 | -------------------------------------------------------------------------------- /src/stories/primitives/Slider.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { Slider, SliderField } from "primitives"; 3 | 4 | const meta: Meta = { 5 | component: Slider, 6 | title: "SDS Primitives/Inputs", 7 | parameters: { layout: "centered" }, 8 | }; 9 | export default meta; 10 | type Story = StoryObj; 11 | 12 | export const StorySliderField: Story = { 13 | name: "Slider Field", 14 | args: { 15 | label: "Check this out!", 16 | description: "Isn't this great?", 17 | isDisabled: false, 18 | showOutput: true, 19 | defaultValue: [30, 70], 20 | }, 21 | render: (args) => { 22 | return ; 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/ui/compositions/Forms/Forms.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { Form, type FormProps } from "primitives"; 3 | import "./forms.css"; 4 | 5 | export type FormBoxProps = FormProps; 6 | export function FormBox({ className, ...props }: FormBoxProps) { 7 | const classNames = clsx(className, "form-box"); 8 | return
; 9 | } 10 | -------------------------------------------------------------------------------- /src/ui/compositions/Forms/forms.css: -------------------------------------------------------------------------------- 1 | .form-box { 2 | align-items: flex-start; 3 | background: var(--sds-color-bg-default-default); 4 | border: var(--sds-size-stroke-border) solid 5 | var(--sds-color-border-default-default); 6 | border-radius: var(--sds-size-radius-200); 7 | display: flex; 8 | flex-direction: column; 9 | gap: var(--sds-size-space-600); 10 | padding: var(--sds-size-space-600); 11 | 12 | > * { 13 | width: 100%; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/ui/compositions/Sections/Heroes.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Section, type FlexProps, type SectionProps } from "layout"; 2 | 3 | export type HeroProps = SectionProps & { flexProps?: FlexProps }; 4 | export function Hero({ children, flexProps, ...sectionProps }: HeroProps) { 5 | return ( 6 |
7 | 15 | {children} 16 | 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/ui/compositions/Sections/Panels.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, type FlexProps } from "layout"; 2 | 3 | export type PanelProps = Omit; 4 | export function Panel({ children, ...props }: PanelProps) { 5 | return ( 6 | 7 | {children} 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/ui/compositions/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Cards/Cards"; 2 | export * from "./Footers/Footers"; 3 | export * from "./Forms/Forms"; 4 | export * from "./Headers/Headers"; 5 | export * from "./Sections/Heroes"; 6 | export * from "./Sections/Panels"; 7 | -------------------------------------------------------------------------------- /src/ui/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useMediaQuery"; 2 | -------------------------------------------------------------------------------- /src/ui/icons/IconActivity.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconActivity = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAirplay.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAirplay = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlertCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlertCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlertOctagon.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlertOctagon = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlertTriangle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlertTriangle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlignCenter.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlignCenter = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlignJustify.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlignJustify = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlignLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlignLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAlignRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAlignRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAnchor.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAnchor = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAperture.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAperture = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArchive.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArchive = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowDownCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowDownCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowDownLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowDownLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowDownRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowDownRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowLeftCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowLeftCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowRightCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowRightCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowUpCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowUpCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowUpLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowUpLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconArrowUpRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconArrowUpRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconAward.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconAward = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBarChart.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBarChart = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBarChart2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBarChart2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBattery.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBattery = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBatteryCharging.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBatteryCharging = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBell.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBell = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBellOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBellOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBluetooth.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBluetooth = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBold.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBold = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBook.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBook = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBookOpen.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBookOpen = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBookmark.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBookmark = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBox.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBox = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconBriefcase.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconBriefcase = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCalendar.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCalendar = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCast.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCast = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCheck.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCheck = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCheckCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCheckCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCheckSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCheckSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronsDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronsDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronsLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronsLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronsRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronsRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChevronsUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChevronsUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconChrome.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconChrome = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconClipboard.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconClipboard = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconClock.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconClock = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCloud.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCloud = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCloudLightning.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCloudLightning = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCloudOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCloudOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCloudRain.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCloudRain = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCode.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCode = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCodepen.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCodepen = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCodesandbox.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCodesandbox = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCoffee.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCoffee = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconColumns.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconColumns = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCompass.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCompass = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCopy.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCopy = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerDownLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerDownLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerDownRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerDownRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerLeftDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerLeftDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerLeftUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerLeftUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerRightDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerRightDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerRightUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerRightUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerUpLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerUpLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCornerUpRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCornerUpRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCpu.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCpu = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCreditCard.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCreditCard = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCrop.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCrop = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconCrosshair.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconCrosshair = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDatabase.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDatabase = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDelete.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDelete = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDisc.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDisc = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDivide.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDivide = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDivideCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDivideCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDivideSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDivideSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDollarSign.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDollarSign = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDownload.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDownload = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDownloadCloud.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDownloadCloud = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDribbble.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDribbble = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconDroplet.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconDroplet = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconEdit.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconEdit = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconEdit2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconEdit2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconEdit3.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconEdit3 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconExternalLink.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconExternalLink = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconEye.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconEye = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFacebook.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFacebook = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFastForward.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFastForward = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFeather.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFeather = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFile.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFile = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFileMinus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFileMinus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFilePlus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFilePlus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFileText.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFileText = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFilm.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFilm = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFilter.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFilter = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFlag.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFlag = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFolder.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFolder = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFolderMinus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFolderMinus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFolderPlus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFolderPlus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFramer.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFramer = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconFrown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconFrown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGift.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGift = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGitBranch.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGitBranch = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGitCommit.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGitCommit = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGitMerge.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGitMerge = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGitPullRequest.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGitPullRequest = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGlobe.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGlobe = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconGrid.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconGrid = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHardDrive.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHardDrive = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHash.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHash = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHeadphones.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHeadphones = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHeart.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHeart = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHelpCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHelpCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHexagon.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHexagon = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconHome.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconHome = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconImage.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconImage = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconInbox.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconInbox = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconInfo.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconInfo = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconItalic.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconItalic = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconKey.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconKey = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLayers.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLayers = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLayout.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLayout = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLifeBuoy.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLifeBuoy = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconList.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconList = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLoader.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLoader = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLock.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLock = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLogIn.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLogIn = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconLogOut.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconLogOut = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMail.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMail = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMap.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMap = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMapPin.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMapPin = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMaximize.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMaximize = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMaximize2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMaximize2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMeh.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMeh = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMenu.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMenu = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMessageCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMessageCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMessageSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMessageSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMic.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMic = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMinimize.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMinimize = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMinimize2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMinimize2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMinus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMinus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMinusCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMinusCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMinusSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMinusSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMonitor.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMonitor = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMoon.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMoon = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMousePointer.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMousePointer = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMove.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMove = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconMusic.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconMusic = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconNavigation.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconNavigation = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconNavigation2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconNavigation2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconOctagon.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconOctagon = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPackage.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPackage = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPaperclip.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPaperclip = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPause.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPause = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPauseCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPauseCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPenTool.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPenTool = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPercent.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPercent = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPieChart.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPieChart = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPlay.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPlay = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPlayCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPlayCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPlus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPlus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPlusCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPlusCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPlusSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPlusSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPocket.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPocket = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPower.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPower = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconPrinter.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconPrinter = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRefreshCcw.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRefreshCcw = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRefreshCw.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRefreshCw = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRepeat.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRepeat = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRewind.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRewind = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRotateCcw.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRotateCcw = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRotateCw.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRotateCw = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconRss.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconRss = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSave.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSave = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconScissors.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconScissors = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSearch.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSearch = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSend.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSend = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconServer.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconServer = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShare2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShare2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShield.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShield = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShieldOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShieldOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShoppingBag.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShoppingBag = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShoppingCart.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShoppingCart = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconShuffle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconShuffle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSidebar.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSidebar = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSkipBack.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSkipBack = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSkipForward.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSkipForward = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSlash.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSlash = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSliders.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSliders = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSmartphone.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSmartphone = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSmile.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSmile = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSpeaker.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSpeaker = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconStar.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconStar = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconStopCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconStopCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSun.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSun = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSunrise.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSunrise = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconSunset.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconSunset = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTable.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTable = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTablet.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTablet = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTag.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTag = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTerminal.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTerminal = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconThermometer.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconThermometer = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconToggleLeft.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconToggleLeft = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconToggleRight.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconToggleRight = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTrash.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTrash = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTrash2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTrash2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTrello.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTrello = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTrendingDown.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTrendingDown = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTrendingUp.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTrendingUp = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTriangle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTriangle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTruck.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTruck = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTv.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTv = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTwitch.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTwitch = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconTwitter.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconTwitter = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconType.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconType = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUmbrella.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUmbrella = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUnderline.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUnderline = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUnlock.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUnlock = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUpload.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUpload = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUploadCloud.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUploadCloud = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUser.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUser = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUserCheck.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUserCheck = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUserMinus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUserMinus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUserPlus.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUserPlus = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconUserX.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconUserX = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVideo.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVideo = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVideoOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVideoOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVoicemail.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVoicemail = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVolume.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVolume = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVolume1.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVolume1 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVolume2.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVolume2 = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconVolumeX.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconVolumeX = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconWifi.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconWifi = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconWifiOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconWifiOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconX.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconX = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconXCircle.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconXCircle = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconXOctagon.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconXOctagon = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconXSquare.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconXSquare = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconZap.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconZap = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconZapOff.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconZapOff = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconZoomIn.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconZoomIn = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/icons/IconZoomOut.tsx: -------------------------------------------------------------------------------- 1 | import { IconProps, Icon } from "primitives"; 2 | export const IconZoomOut = (props: IconProps) => ( 3 | 4 | ); -------------------------------------------------------------------------------- /src/ui/images/index.ts: -------------------------------------------------------------------------------- 1 | import placeholderSvg from "./placeholder.svg"; 2 | export const placeholder = placeholderSvg; 3 | -------------------------------------------------------------------------------- /src/ui/layout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Flex/Flex"; 2 | export * from "./Section/Section"; 3 | export * from "./Grid/Grid"; 4 | -------------------------------------------------------------------------------- /src/ui/primitives/Icon/Icon.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | export type IconSize = "14" | "16" | "20" | "24" | "32" | "40" | "48"; 4 | export type IconProps = { 5 | children?: React.ReactNode; 6 | className?: string; 7 | size?: IconSize; 8 | }; 9 | export function Icon({ size = "16", children, className }: IconProps) { 10 | return ( 11 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/ui/primitives/IconButton/iconButton.css: -------------------------------------------------------------------------------- 1 | .icon-button { 2 | --border-radius: var(--sds-size-radius-full); 3 | } 4 | -------------------------------------------------------------------------------- /src/ui/primitives/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import React from "react"; 3 | import "./link.css"; 4 | 5 | export type LinkProps = { href: string } & React.ComponentPropsWithoutRef<"a">; 6 | export const Link = React.forwardRef(function Link( 7 | props: LinkProps, 8 | ref: React.ForwardedRef, 9 | ) { 10 | const classNames = clsx("link", props.className); 11 | return ; 12 | }); 13 | -------------------------------------------------------------------------------- /src/ui/primitives/Link/link.css: -------------------------------------------------------------------------------- 1 | .link { 2 | text-decoration: none; 3 | } 4 | -------------------------------------------------------------------------------- /src/ui/primitives/ListBox/ListBox.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { 3 | ListBox as RACListBox, 4 | ListBoxItem as RACListBoxItem, 5 | type ListBoxItemProps as RACListBoxItemProps, 6 | type ListBoxProps as RACListBoxProps, 7 | } from "react-aria-components"; 8 | import "./listBox.css"; 9 | 10 | export type ListBoxProps = RACListBoxProps; 11 | export function ListBox({ 12 | children, 13 | className, 14 | ...props 15 | }: ListBoxProps) { 16 | const classNames = clsx(className, "list-box"); 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | 24 | export type ListBoxItemProps = RACListBoxItemProps; 25 | export function ListBoxItem({ className, ...props }: ListBoxItemProps) { 26 | const classNames = clsx(className, "list-box-item"); 27 | return ; 28 | } 29 | -------------------------------------------------------------------------------- /src/ui/primitives/Logo/logo.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | --border-radius: var(--sds-size-radius-200); 3 | border-radius: var(--border-radius); 4 | position: relative; 5 | 6 | &[data-focus-visible] { 7 | outline: none; 8 | --offset: calc(var(--sds-size-stroke-border) * 2); 9 | &::before { 10 | content: ""; 11 | border-radius: calc(var(--border-radius) + var(--offset)); 12 | bottom: calc(-1 * var(--offset)); 13 | box-shadow: 0 0 0 var(--global-focus-ring-size) 14 | var(--global-focus-ring-color); 15 | left: calc(-1 * var(--offset)); 16 | position: absolute; 17 | right: calc(-1 * var(--offset)); 18 | top: calc(-1 * var(--offset)); 19 | } 20 | } 21 | > svg { 22 | --logo-color: var(--sds-color-icon-default-default); 23 | height: auto; 24 | width: var(--sds-size-icon-small); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/ui/primitives/Pagination/pagination.css: -------------------------------------------------------------------------------- 1 | .pagination { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | width: 100%; 6 | } 7 | 8 | .pagination-list { 9 | align-items: center; 10 | display: flex; 11 | gap: var(--sds-size-space-200); 12 | } 13 | -------------------------------------------------------------------------------- /src/ui/primitives/Search/search.css: -------------------------------------------------------------------------------- 1 | /* clears the ‘X’ from Internet Explorer */ 2 | .search-input::-ms-clear { 3 | display: none; 4 | width: 0; 5 | height: 0; 6 | } 7 | .search-input::-ms-reveal { 8 | display: none; 9 | width: 0; 10 | height: 0; 11 | } 12 | /* clears the ‘X’ from Chrome */ 13 | .search-input::-webkit-search-decoration, 14 | .search-input::-webkit-search-cancel-button, 15 | .search-input::-webkit-search-results-button, 16 | .search-input::-webkit-search-results-decoration { 17 | display: none; 18 | } 19 | 20 | .search-input-container { 21 | position: relative; 22 | } 23 | 24 | .search-input { 25 | border-radius: var(--sds-size-radius-full); 26 | padding-right: calc(var(--sds-size-space-800) + var(--sds-size-space-100)); 27 | } 28 | 29 | .search-icon { 30 | position: absolute; 31 | top: 50%; 32 | right: var(--sds-size-space-100); 33 | transform: translateY(-50%); 34 | } 35 | -------------------------------------------------------------------------------- /src/ui/providers/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Authentication"; 2 | -------------------------------------------------------------------------------- /src/ui/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AnchorOrButton"; 2 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | "moduleResolution": "bundler", 9 | "allowImportingTsExtensions": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "noEmit": true, 13 | "jsx": "react-jsx", 14 | "strict": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "noFallthroughCasesInSwitch": true, 18 | "baseUrl": "./src", 19 | "paths": { 20 | "compositions": ["./ui/compositions"], 21 | "hooks": ["./ui/hooks"], 22 | "icons": ["./ui/icons"], 23 | "images": ["./ui/images"], 24 | "layout": ["./ui/layout"], 25 | "primitives": ["./ui/primitives"], 26 | "providers": ["./ui/providers"], 27 | "utils": ["./ui/utils"] 28 | } 29 | }, 30 | "include": ["src", "scripts"] 31 | } 32 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from "@vitejs/plugin-react"; 2 | import path from "path"; 3 | import { defineConfig } from "vite"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | base: "./", 8 | plugins: [react()], 9 | resolve: { 10 | alias: { 11 | compositions: path.resolve(__dirname, "./src/ui/compositions"), 12 | hooks: path.resolve(__dirname, "./src/ui/hooks"), 13 | icons: path.resolve(__dirname, "./src/ui/icons"), 14 | images: path.resolve(__dirname, "./src/ui/images"), 15 | layout: path.resolve(__dirname, "./src/ui/layout"), 16 | primitives: path.resolve(__dirname, "./src/ui/primitives"), 17 | providers: path.resolve(__dirname, "./src/ui/providers"), 18 | utils: path.resolve(__dirname, "./src/ui/utils"), 19 | }, 20 | }, 21 | server: { 22 | port: 8000, 23 | }, 24 | }); 25 | --------------------------------------------------------------------------------